Improved interface for lock settings modal

bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js

@@ -78,6 +78,7 @@ export default function addMeeting(meeting) {
     lockOnJoinConfigurable: false,
     lockedLayout: false,
   };
+
   const modifier = {
     $set: Object.assign(
       { meetingId },

bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx

@@ -59,7 +59,6 @@ const intlMessages = defineMessages({
   },
 });
 
-
 class LockViewersComponent extends Component {
   constructor(props) {
     super(props);
@@ -68,12 +67,12 @@ class LockViewersComponent extends Component {
       toggleLockSettings,
       toggleWebcamsOnlyForModerator,
     } = props;
+
     this.closeModal = closeModal;
     this.toggleLockSettings = toggleLockSettings;
     this.toggleWebcamsOnlyForModerator = toggleWebcamsOnlyForModerator;
   }
 
-
   render() {
     const { intl } = this.props;
     const meetingId = Auth.meetingID;
@@ -96,28 +95,25 @@ class LockViewersComponent extends Component {
             onClick={this.closeModal}
           />
         </div>
-        <div className={styles.model}>
-          <div
-            className={styles.header}
-          >
+        <div className={styles.container}>
+          <div className={styles.header}>
             <div className={styles.title}>{intl.formatMessage(intlMessages.lockViewersTitle)}</div>
-
           </div>
           <div className={styles.description}>
             {`${intl.formatMessage(intlMessages.lockViewersDescription)}`}
           </div>
           <br /><br />
           <div className={styles.form}>
-            <header className={styles.row}>
+            <header className={cx(styles.row, styles.subHeader)}>
               <div className={styles.bold}>{intl.formatMessage(intlMessages.featuresLable)}</div>
               <div className={styles.bold}>{intl.formatMessage(intlMessages.lockStatusLabel)}</div>
             </header>
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
-                  <label className={styles.label}>
+                  <div className={styles.label}>
                     {intl.formatMessage(intlMessages.webcamLabel)}
-                  </label>
+                  </div>
                 </div>
               </div>
               <div className={styles.col}>
@@ -126,7 +122,8 @@ class LockViewersComponent extends Component {
                     icons={false}
                     defaultChecked={meeting.lockSettingsProp.disableCam}
                     onChange={() => {
-                                            meeting.lockSettingsProp.disableCam = !meeting.lockSettingsProp.disableCam;
+                      meeting.lockSettingsProp.disableCam =
+                        !meeting.lockSettingsProp.disableCam;
                       this.toggleLockSettings(meeting);
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.webcamLabel)}
@@ -137,18 +134,19 @@ class LockViewersComponent extends Component {
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
-                  <label className={styles.label}>
+                  <div className={styles.label}>
                     {intl.formatMessage(intlMessages.otherViewersWebcamLabel)}
-                  </label>
+                  </div>
                 </div>
               </div>
               <div className={styles.col}>
                 <div className={cx(styles.formElement, styles.pullContentRight)}>
                   <Toggle
                     icons={false}
-                    defaultChecked={false}
+                    defaultChecked={meeting.usersProp.webcamsOnlyForModerator}
                     onChange={() => {
-                                            meeting.usersProp.webcamsOnlyForModerator = !meeting.usersProp.webcamsOnlyForModerator;
+                      meeting.usersProp.webcamsOnlyForModerator =
+                        !meeting.usersProp.webcamsOnlyForModerator;
                       this.toggleWebcamsOnlyForModerator(meeting);
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.otherViewersWebcamLabel)}
@@ -159,9 +157,9 @@ class LockViewersComponent extends Component {
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
-                  <label className={styles.label}>
+                  <div className={styles.label}>
                     {intl.formatMessage(intlMessages.microphoneLable)}
-                  </label>
+                  </div>
                 </div>
               </div>
               <div className={styles.col}>
@@ -170,7 +168,8 @@ class LockViewersComponent extends Component {
                     icons={false}
                     defaultChecked={meeting.lockSettingsProp.disableMic}
                     onChange={() => {
-                                            meeting.lockSettingsProp.disableMic = !meeting.lockSettingsProp.disableMic;
+                      meeting.lockSettingsProp.disableMic =
+                        !meeting.lockSettingsProp.disableMic;
                       this.toggleLockSettings(meeting);
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.microphoneLable)}
@@ -181,9 +180,9 @@ class LockViewersComponent extends Component {
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
-                  <label className={styles.label}>
+                  <div className={styles.label}>
                     {intl.formatMessage(intlMessages.publicChatLabel)}
-                  </label>
+                  </div>
                 </div>
               </div>
               <div className={styles.col}>
@@ -192,7 +191,8 @@ class LockViewersComponent extends Component {
                     icons={false}
                     defaultChecked={meeting.lockSettingsProp.disablePubChat}
                     onChange={() => {
-                                            meeting.lockSettingsProp.disablePubChat = !meeting.lockSettingsProp.disablePubChat;
+                      meeting.lockSettingsProp.disablePubChat =
+                        !meeting.lockSettingsProp.disablePubChat;
                       this.toggleLockSettings(meeting);
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.publicChatLabel)}
@@ -203,9 +203,9 @@ class LockViewersComponent extends Component {
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
-                  <label className={styles.label}>
+                  <div className={styles.label}>
                     {intl.formatMessage(intlMessages.privateChatLable)}
-                  </label>
+                  </div>
                 </div>
               </div>
               <div className={styles.col}>
@@ -214,7 +214,8 @@ class LockViewersComponent extends Component {
                     icons={false}
                     defaultChecked={meeting.lockSettingsProp.disablePrivChat}
                     onChange={() => {
-                                            meeting.lockSettingsProp.disablePrivChat = !meeting.lockSettingsProp.disablePrivChat;
+                      meeting.lockSettingsProp.disablePrivChat =
+                        !meeting.lockSettingsProp.disablePrivChat;
                       this.toggleLockSettings(meeting);
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.privateChatLable)}
@@ -225,9 +226,9 @@ class LockViewersComponent extends Component {
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
-                  <label className={styles.label}>
+                  <div className={styles.label}>
                     {intl.formatMessage(intlMessages.layoutLable)}
-                  </label>
+                  </div>
                 </div>
               </div>
               <div className={styles.col}>
@@ -236,7 +237,8 @@ class LockViewersComponent extends Component {
                     icons={false}
                     defaultChecked={meeting.lockSettingsProp.lockedLayout}
                     onChange={() => {
-                                            meeting.lockSettingsProp.lockedLayout = !meeting.lockSettingsProp.lockedLayout;
+                      meeting.lockSettingsProp.lockedLayout =
+                        !meeting.lockSettingsProp.lockedLayout;
                       this.toggleLockSettings(meeting);
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.layoutLable)}

bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss

@@ -2,33 +2,39 @@
 @import '/imports/ui/stylesheets/variables/_all';
 @import "/imports/ui/components/modal/simple/styles";
 
+:root{
+  --modal-margin: 3rem;
+}
+
 .title {
   color: var(--color-gray-dark);
   font-weight: 400;
-  font-size: 1.3rem;
+  font-size: var(--lg-padding-x);
   margin: 0;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--jumbo-padding-y);
   text-align: center !important;
 }
 
-.subtitle {
-  font-size: 0.9rem;
-}
-
 .form {
   display: flex;
   flex-flow: column;
 }
 
-.model{
-    margin: 3rem;
-    margin-top:0.5rem;
+.container{
+    margin: var(--modal-margin);
+    margin-top: var(--indicator-padding);
+    margin-bottom: var(--lg-padding-x);
+}
+
+.subHeader{
+  color: var(--color-gray-label);
+  font-size: var(--font-size-base);
+  margin-bottom: var(--jumbo-padding-y) !important;
 }
 
 .modal {
     @extend .modal;
-    padding: 1.5rem;
-    min-height: 20rem;
+    padding: var(--jumbo-padding-y);
  }
 
 .overlay {
@@ -37,40 +43,27 @@
 
 .description{
     text-align: center;
+    color: var(--color-gray);
 }
 .row {
   display: flex;
   flex-flow: row;
   flex-grow: 1;
   justify-content: space-between;
-  margin-bottom: 0.7rem;
+  margin-bottom: var(--md-padding-x);
 }
 
-.desc{
-    text-align: center;
-}
 .col {
   display: flex;
   flex-grow: 1;
   flex-basis: 0;
-  margin-right: 1rem;
-
-  &:last-child {
-    margin-right: 0;
-    padding-right: 0.1rem;
-  }
+  margin-right: var(--md-padding-x);
 }
 
 .label {
   color: var(--color-gray-label);
-  font-size: 0.9rem;
-  margin-bottom: 0.5rem;
-}
-
-.labelSmall {
-  color: var(--color-link);
-  font-size: 0.7rem;
-  margin-bottom: 0.3rem;
+  font-size: var(--font-size-small);
+  margin-bottom: var(--lg-padding-y);
 }
 
 .formElement {
@@ -80,31 +73,12 @@
   flex-grow: 1;
 }
 
-.select {
-  @include elementFocus(var(--color-primary));
-
-  background-color: var(--color-white);
-  border: var(--border-size) solid var(--color-white);
-  border-radius: var(--border-size);
-  border-bottom: 0.1rem solid var(--color-gray-lighter);
-  color: var(--color-gray-label);
-  width: 100%;
-  height: 1.75rem;
-  padding: 1px;
-}
-
 .pullContentRight {
   display: flex;
   justify-content: flex-end;
   flex-flow: row;
 }
 
-.pullContentCenter {
-  display: flex;
-  justify-content: center;
-  flex-flow: row;
-}
-
 .title {
   font-weight: bold;
   text-align: center;
@@ -114,49 +88,6 @@
     font-weight: bold;
 }
 
-.spacedLeft {
-  margin-left: 1rem;
-}
-
-.swatch {
-  @include elementFocus(var(--color-primary));
-
-  position: absolute;
-  float: right;
-  background: var(--color-white);
-  border-radius: var(--border-size);
-  border: var(--border-size) solid var(--color-gray-light);
-  display: inline-block;
-  cursor: pointer;
-}
-
-.swatchInner {
-  width: 3rem;
-  height: 1.1rem;
-  border-radius: var(--border-size);
-}
-
-.colorPickerOverlay {
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
-.colorPickerPopover {
-  position: absolute;
-  top: 2rem;
-  z-index: 1001;
-}
-
-.ccPreviewBox {
-  height: 100px;
-  padding: 5px;
-  border: 1px solid #f1f1f1;
-  overflow: auto;
-}
-
 .btnContainer {
     display: flex;
     justify-content: flex-end;
@@ -183,5 +114,5 @@
     margin: 0;
     padding: 0;
     border: none;
-    line-height: 2rem;
+    line-height: var(--jumbo-padding-y);
   }