Reorder buttons

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/voip/CallView.tsx

@@ -538,19 +538,26 @@ export default class CallView extends React.Component<IProps, IState> {
 
         // The dial pad & 'more' button actions are only relevant in a connected call
         // When not connected, we have to put something there to make the flexbox alignment correct
-        const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton
+        let dialpadButton;
-            className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
+        let contextMenuButton;
-            inputRef={this.dialpadButton}
+        if (this.state.callState === CallState.Connected) {
-            onClick={this.onDialpadClick}
+            contextMenuButton = (
-            isExpanded={this.state.showDialpad}
+                <ContextMenuButton
-        /> : <div className="mx_CallView_callControls_button" />;
+                    className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
-
+                    onClick={this.onMoreClick}
-        const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton
+                    inputRef={this.contextMenuButton}
-            className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
+                    isExpanded={this.state.showMoreMenu}
-            onClick={this.onMoreClick}
+                />
-            inputRef={this.contextMenuButton}
+            );
-            isExpanded={this.state.showMoreMenu}
+            dialpadButton = (
-        /> : <div className="mx_CallView_callControls_button" />;
+                <ContextMenuButton
+                    className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
+                    inputRef={this.dialpadButton}
+                    onClick={this.onDialpadClick}
+                    isExpanded={this.state.showDialpad}
+                />
+            );
+        }
 
         return (
             <div className={callControlsClasses}>
@@ -560,15 +567,15 @@ export default class CallView extends React.Component<IProps, IState> {
                     onClick={this.onMicMuteClick}
                 />
                 { vidMuteButton }
+                <div className={micCacheClasses} />
+                <div className={vidCacheClasses} />
+                { screensharingButton }
+                { sidebarButton }
+                { contextMenuButton }
                 <AccessibleButton
                     className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
                     onClick={this.onHangupClick}
                 />
-                { screensharingButton }
-                { sidebarButton }
-                <div className={micCacheClasses} />
-                <div className={vidCacheClasses} />
-                { contextMenuButton }
             </div>
         );
     }