From 87f63baa5a2cdcb8a76a342f5e331c543d37934f Mon Sep 17 00:00:00 2001
From: bobakoftadeh <bobakoftadeh@outlook.com>
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}
/>
</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,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)}
/>
</div>
@@ -137,20 +134,21 @@ 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;
- this.toggleWebcamsOnlyForModerator(meeting);
- }}
+ meeting.usersProp.webcamsOnlyForModerator =
+ !meeting.usersProp.webcamsOnlyForModerator;
+ this.toggleWebcamsOnlyForModerator(meeting);
+ }}
ariaLabel={intl.formatMessage(intlMessages.otherViewersWebcamLabel)}
/>
</div>
@@ -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,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)}
/>
</div>
@@ -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,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)}
/>
</div>
@@ -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,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)}
/>
</div>
@@ -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,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)}
/>
</div>
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
--
GitLab