move toggle text outside of buttons in debug window and network modal

bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx

@@ -46,6 +46,14 @@ const intlMessages = defineMessages({
     id: 'app.settings.dataSavingTab.screenShare',
     description: 'Screenshare data saving switch',
   },
+  on: {
+    id: 'app.switch.onLabel',
+    description: 'label for toggle switch on state',
+  },
+  off: {
+    id: 'app.switch.offLabel',
+    description: 'label for toggle switch off state',
+  },
 });
 
 const propTypes = {
@@ -74,6 +82,7 @@ class ConnectionStatusComponent extends PureComponent {
 
     this.help = Service.getHelp();
     this.state = { dataSaving: props.dataSaving };
+    this.displaySettingsStatus = this.displaySettingsStatus.bind(this);
   }
 
   handleDataSavingChange(key) {
@@ -101,6 +110,17 @@ class ConnectionStatusComponent extends PureComponent {
     );
   }
 
+  displaySettingsStatus(status) {
+    const { intl } = this.props;
+
+    return (
+      <span className={styles.toggleLabel}>
+        {status ? intl.formatMessage(intlMessages.on)
+          : intl.formatMessage(intlMessages.off)}
+      </span>
+    );
+  }
+
   renderConnections() {
     const {
       connectionStatus,
@@ -178,31 +198,53 @@ class ConnectionStatusComponent extends PureComponent {
         <div className={styles.description}>
           {intl.formatMessage(intlMessages.dataSaving)}
         </div>
-        <div className={styles.saving}>
-          <label className={styles.label}>
-            {intl.formatMessage(intlMessages.webcam)}
-          </label>
-          <Switch
-            icons={false}
-            defaultChecked={viewParticipantsWebcams}
-            onChange={() => this.handleDataSavingChange('viewParticipantsWebcams')}
-            ariaLabelledBy="webcam"
-            ariaLabel={intl.formatMessage(intlMessages.webcam)}
-            data-test="dataSavingWebcams"
-          />
+
+        <div className={styles.row}>
+          <div className={styles.col} aria-hidden="true">
+            <div className={styles.formElement}>
+              <span className={styles.label}>
+                {intl.formatMessage(intlMessages.webcam)}
+              </span>
+            </div>
+          </div>
+          <div className={styles.col}>
+            <div className={cx(styles.formElement, styles.pullContentRight)}>
+              {this.displaySettingsStatus(viewParticipantsWebcams)}
+              <Switch
+                icons={false}
+                defaultChecked={viewParticipantsWebcams}
+                onChange={() => this.handleDataSavingChange('viewParticipantsWebcams')}
+                ariaLabelledBy="webcam"
+                ariaLabel={intl.formatMessage(intlMessages.webcam)}
+                data-test="dataSavingWebcams"
+                showToggleLabel={false}
+              />
+            </div>
+          </div>
         </div>
-        <div className={styles.saving}>
-          <label className={styles.label}>
-            {intl.formatMessage(intlMessages.screenshare)}
-          </label>
-          <Switch
-            icons={false}
-            defaultChecked={viewScreenshare}
-            onChange={() => this.handleDataSavingChange('viewScreenshare')}
-            ariaLabelledBy="screenshare"
-            ariaLabel={intl.formatMessage(intlMessages.screenshare)}
-            data-test="dataSavingScreenshare"
-          />
+
+        <div className={styles.row}>
+          <div className={styles.col} aria-hidden="true">
+            <div className={styles.formElement}>
+              <span className={styles.label}>
+                {intl.formatMessage(intlMessages.screenshare)}
+              </span>
+            </div>
+          </div>
+          <div className={styles.col}>
+            <div className={cx(styles.formElement, styles.pullContentRight)}>
+              {this.displaySettingsStatus(viewScreenshare)}
+              <Switch
+                icons={false}
+                defaultChecked={viewScreenshare}
+                onChange={() => this.handleDataSavingChange('viewScreenshare')}
+                ariaLabelledBy="screenshare"
+                ariaLabel={intl.formatMessage(intlMessages.screenshare)}
+                data-test="dataSavingScreenshare"
+                showToggleLabel={false}
+              />
+            </div>
+          </div>
         </div>
       </div>
     );

bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.scss

@@ -155,8 +155,47 @@
   width: 100%;
 }
 
-.saving {
+.row {
   display: flex;
-  width: 100%;
+  flex-flow: row;
+  flex-grow: 1;
   justify-content: space-between;
+  margin-bottom: 0.7rem;
+}
+
+.col {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+
+  &:last-child {
+    padding-right: 0;
+    padding-left: 1rem;
+
+    [dir="rtl"] & {
+      padding-right: 0.1rem;
+      padding-left: 0;
+    }
+  }
+}
+
+.formElement {
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+}
+
+.pullContentRight {
+  display: flex;
+  justify-content: flex-end;
+  flex-flow: row;
+}
+
+.toggleLabel {
+  margin-right: var(--sm-padding-x);
+
+  [dir="rtl"] & {
+    margin: 0 0 0 var(--sm-padding-x);
+  }
 }

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

@@ -39,6 +39,14 @@ const intlMessages = defineMessages({
     id: 'app.debugWindow.form.enableAutoarrangeLayoutDescription',
     description: 'Enable Autoarrange layout description',
   },
+  on: {
+    id: 'app.switch.onLabel',
+    description: 'label for toggle switch on state',
+  },
+  off: {
+    id: 'app.switch.offLabel',
+    description: 'label for toggle switch off state',
+  },
 });
 
 const DEBUG_WINDOW_ENABLED = Meteor.settings.public.app.enableDebugWindow;
@@ -51,6 +59,7 @@ class DebugWindow extends Component {
     this.state = {
       showDebugWindow: false,
       logLevel: ChatLogger.getLogLevel(),
+      autoArrangeLayout: Storage.getItem('autoArrangeLayout'),
     };
   }
 
@@ -78,15 +87,32 @@ class DebugWindow extends Component {
     }
   }
 
+  displaySettingsStatus(status) {
+    const { intl } = this.props;
+
+    return (
+      <span className={styles.toggleLabel}>
+        {status ? intl.formatMessage(intlMessages.on)
+          : intl.formatMessage(intlMessages.off)}
+      </span>
+    );
+  }
+
   autoArrangeToggle() {
     const { layoutContextDispatch } = this.props;
     const autoArrangeLayout = Storage.getItem('autoArrangeLayout');
+
+    this.setState({
+      autoArrangeLayout: !autoArrangeLayout,
+    });
+
     layoutContextDispatch(
       {
         type: 'setAutoArrangeLayout',
         value: !autoArrangeLayout,
       },
     );
+
     window.dispatchEvent(new Event('autoArrangeChanged'));
   }
 
@@ -97,7 +123,8 @@ class DebugWindow extends Component {
     if (!DEBUG_WINDOW_ENABLED || !showDebugWindow) return false;
 
     const { intl } = this.props;
-    const autoArrangeLayout = Storage.getItem('autoArrangeLayout');
+    const { autoArrangeLayout } = this.state;
+
     return (
       <Draggable
         handle="#debugWindowHeader"
@@ -185,12 +212,14 @@ class DebugWindow extends Component {
                   </div>
                   <div className={styles.cell}>
                     <div className={styles.cellContent}>
+                      {this.displaySettingsStatus(autoArrangeLayout)}
                       <Toggle
                         className={styles.autoArrangeToggle}
                         icons={false}
                         defaultChecked={autoArrangeLayout}
                         onChange={() => this.autoArrangeToggle()}
                         ariaLabel={intl.formatMessage(intlMessages.enableAutoarrangeLayoutLabel)}
+                        showToggleLabel={false}
                       />
                       <p>{`${intl.formatMessage(intlMessages.enableAutoarrangeLayoutDescription)}`}</p>
                     </div>

bigbluebutton-html5/imports/ui/components/debug-window/styles.scss

@@ -94,3 +94,11 @@
     }
   }
 }
+
+.toggleLabel {
+  margin-right: var(--sm-padding-x);
+
+  [dir="rtl"] & {
+    margin: 0 0 0 var(--sm-padding-x);
+  }
+}