From 87f63baa5a2cdcb8a76a342f5e331c543d37934f Mon Sep 17 00:00:00 2001 From: bobakoftadeh Date: Fri, 9 Nov 2018 14:03:25 -0800 Subject: [PATCH] Improved interface for lock settings modal --- .../server/handlers/meetingCreation.js | 0 .../meetings/server/modifiers/addMeeting.js | 1 + .../ui/components/lock-viewers/component.jsx | 80 ++++++------ .../ui/components/lock-viewers/service.js | 0 .../ui/components/lock-viewers/styles.scss | 115 ++++-------------- .../private/config/settings.yml | 0 6 files changed, 65 insertions(+), 131 deletions(-) mode change 100755 => 100644 bigbluebutton-html5/imports/api/meetings/server/handlers/meetingCreation.js delete mode 100755 bigbluebutton-html5/imports/ui/components/lock-viewers/service.js mode change 100755 => 100644 bigbluebutton-html5/private/config/settings.yml diff --git a/bigbluebutton-html5/imports/api/meetings/server/handlers/meetingCreation.js b/bigbluebutton-html5/imports/api/meetings/server/handlers/meetingCreation.js old mode 100755 new mode 100644 diff --git a/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js b/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js index 40ae18ac0e..bfb1919c9c 100755 --- a/bigbluebutton-html5/imports/api/meetings/server/modifiers/addMeeting.js +++ b/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 }, diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx b/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx index d71dc550e2..1ef1ad0bda 100755 --- a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx +++ b/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} /> -
-
+
+
{intl.formatMessage(intlMessages.lockViewersTitle)}
-
{`${intl.formatMessage(intlMessages.lockViewersDescription)}`}


-
+
{intl.formatMessage(intlMessages.featuresLable)}
{intl.formatMessage(intlMessages.lockStatusLabel)}
@@ -126,9 +122,10 @@ class LockViewersComponent extends Component { icons={false} defaultChecked={meeting.lockSettingsProp.disableCam} onChange={() => { - meeting.lockSettingsProp.disableCam = !meeting.lockSettingsProp.disableCam; - this.toggleLockSettings(meeting); - }} + meeting.lockSettingsProp.disableCam = + !meeting.lockSettingsProp.disableCam; + this.toggleLockSettings(meeting); + }} ariaLabel={intl.formatMessage(intlMessages.webcamLabel)} />
@@ -137,20 +134,21 @@ class LockViewersComponent extends Component {
{ - meeting.usersProp.webcamsOnlyForModerator = !meeting.usersProp.webcamsOnlyForModerator; - this.toggleWebcamsOnlyForModerator(meeting); - }} + meeting.usersProp.webcamsOnlyForModerator = + !meeting.usersProp.webcamsOnlyForModerator; + this.toggleWebcamsOnlyForModerator(meeting); + }} ariaLabel={intl.formatMessage(intlMessages.otherViewersWebcamLabel)} />
@@ -159,9 +157,9 @@ class LockViewersComponent extends Component {
@@ -170,9 +168,10 @@ class LockViewersComponent extends Component { icons={false} defaultChecked={meeting.lockSettingsProp.disableMic} onChange={() => { - meeting.lockSettingsProp.disableMic = !meeting.lockSettingsProp.disableMic; - this.toggleLockSettings(meeting); - }} + meeting.lockSettingsProp.disableMic = + !meeting.lockSettingsProp.disableMic; + this.toggleLockSettings(meeting); + }} ariaLabel={intl.formatMessage(intlMessages.microphoneLable)} />
@@ -181,9 +180,9 @@ class LockViewersComponent extends Component {
@@ -192,9 +191,10 @@ class LockViewersComponent extends Component { icons={false} defaultChecked={meeting.lockSettingsProp.disablePubChat} onChange={() => { - meeting.lockSettingsProp.disablePubChat = !meeting.lockSettingsProp.disablePubChat; - this.toggleLockSettings(meeting); - }} + meeting.lockSettingsProp.disablePubChat = + !meeting.lockSettingsProp.disablePubChat; + this.toggleLockSettings(meeting); + }} ariaLabel={intl.formatMessage(intlMessages.publicChatLabel)} />
@@ -203,9 +203,9 @@ class LockViewersComponent extends Component {
@@ -214,9 +214,10 @@ class LockViewersComponent extends Component { icons={false} defaultChecked={meeting.lockSettingsProp.disablePrivChat} onChange={() => { - meeting.lockSettingsProp.disablePrivChat = !meeting.lockSettingsProp.disablePrivChat; - this.toggleLockSettings(meeting); - }} + meeting.lockSettingsProp.disablePrivChat = + !meeting.lockSettingsProp.disablePrivChat; + this.toggleLockSettings(meeting); + }} ariaLabel={intl.formatMessage(intlMessages.privateChatLable)} />
@@ -225,9 +226,9 @@ class LockViewersComponent extends Component {
@@ -236,9 +237,10 @@ class LockViewersComponent extends Component { icons={false} defaultChecked={meeting.lockSettingsProp.lockedLayout} onChange={() => { - meeting.lockSettingsProp.lockedLayout = !meeting.lockSettingsProp.lockedLayout; - this.toggleLockSettings(meeting); - }} + meeting.lockSettingsProp.lockedLayout = + !meeting.lockSettingsProp.lockedLayout; + this.toggleLockSettings(meeting); + }} ariaLabel={intl.formatMessage(intlMessages.layoutLable)} />
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js b/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js deleted file mode 100755 index e69de29bb2..0000000000 diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss index 9beb08d76f..bd20057fa2 100755 --- a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss +++ b/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); } \ No newline at end of file diff --git a/bigbluebutton-html5/private/config/settings.yml b/bigbluebutton-html5/private/config/settings.yml old mode 100755 new mode 100644