From 9a72a8fa3127ffb254ed01e213e0cc3ebf3af561 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Thu, 26 Jan 2017 12:19:09 -0800 Subject: [PATCH 1/6] add transaprent base for audio modal --- .../ui/components/audio-modal/component.jsx | 2 +- .../modal/base-transparent/component.jsx | 61 +++++++++++++++++++ .../modal/base-transparent/styles.scss | 36 +++++++++++ 3 files changed, 98 insertions(+), 1 deletion(-) create mode 100755 bigbluebutton-html5/imports/ui/components/modal/base-transparent/component.jsx create mode 100755 bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx index 87d3d74157..a758c6da01 100755 --- a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx @@ -1,7 +1,7 @@ import React from 'react'; import Icon from '/imports/ui/components/icon/component'; import Button from '/imports/ui/components/button/component'; -import ModalBase from '../modal/base/component'; +import ModalBase from '../modal/base-transparent/component'; import { clearModal } from '/imports/ui/components/app/service'; import classNames from 'classnames'; import ReactDOM from 'react-dom'; diff --git a/bigbluebutton-html5/imports/ui/components/modal/base-transparent/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/base-transparent/component.jsx new file mode 100755 index 0000000000..4b2d88caa0 --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/modal/base-transparent/component.jsx @@ -0,0 +1,61 @@ +import React, { Component, PropTypes } from 'react'; +import ReactModal from 'react-modal'; +import styles from './styles.scss'; +import cx from 'classnames'; + +const propTypes = { + isOpen: PropTypes.bool.isRequired, + onShow: PropTypes.func, + onHide: PropTypes.func, +}; + +const defaultProps = { + isOpen: false, +}; + +export default class ModalBase extends Component { + constructor(props) { + super(props); + + this.handleAfterOpen = this.handleAfterOpen.bind(this); + this.handleRequestClose = this.handleRequestClose.bind(this); + } + + handleAfterOpen() { + const { onShow } = this.props; + if (onShow) { + onShow.call(this, ...arguments); + } + } + + handleRequestClose() { + const { onHide } = this.props; + if (onHide) { + onHide.call(this, ...arguments); + } + } + + render() { + const { + isOpen, + onShow, + onHide, + className, + } = this.props; + + return ( + + {this.props.children} + + ); + } +}; + +ModalBase.propTypes = propTypes; +ModalBase.defaultProps = defaultProps; diff --git a/bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss new file mode 100755 index 0000000000..36c31f882f --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss @@ -0,0 +1,36 @@ +@import "../../../stylesheets/variables/_all"; +@import "../../../stylesheets/mixins/_scrollable"; + +.modal { + @include scrollbox-vertical(); + + max-width: 60vw; + max-height: 100%; + border-radius: $border-radius; + background: #fff; + overflow: auto; + outline: none; + + @include mq($small-only) { + max-width: 95vw; + } + + @include mq($medium-up) { + max-width: 80vw; + } +} + +.overlay { + z-index: 1000; + background: transparentize($color-gray-dark, .40); + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.portal {} From 5adfec6b5a832fb921149117bf6f9106f47b0dd4 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Thu, 26 Jan 2017 13:00:24 -0800 Subject: [PATCH 2/6] remove duplicate component --- .../ui/components/audio-modal/component.jsx | 3 +- .../modal/base-transparent/component.jsx | 61 ------------------- .../modal/base-transparent/styles.scss | 36 ----------- .../ui/components/modal/base/component.jsx | 38 ++++++++---- .../ui/components/modal/base/styles.scss | 15 ++++- 5 files changed, 42 insertions(+), 111 deletions(-) delete mode 100755 bigbluebutton-html5/imports/ui/components/modal/base-transparent/component.jsx delete mode 100755 bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss mode change 100644 => 100755 bigbluebutton-html5/imports/ui/components/modal/base/component.jsx diff --git a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx index a758c6da01..9a827c971f 100755 --- a/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio-modal/component.jsx @@ -1,7 +1,7 @@ import React from 'react'; import Icon from '/imports/ui/components/icon/component'; import Button from '/imports/ui/components/button/component'; -import ModalBase from '../modal/base-transparent/component'; +import ModalBase from '../modal/base/component'; import { clearModal } from '/imports/ui/components/app/service'; import classNames from 'classnames'; import ReactDOM from 'react-dom'; @@ -53,6 +53,7 @@ export default class Audio extends React.Component { render() { return ( - {this.props.children} - - ); - } -}; - -ModalBase.propTypes = propTypes; -ModalBase.defaultProps = defaultProps; diff --git a/bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss deleted file mode 100755 index 36c31f882f..0000000000 --- a/bigbluebutton-html5/imports/ui/components/modal/base-transparent/styles.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../../stylesheets/variables/_all"; -@import "../../../stylesheets/mixins/_scrollable"; - -.modal { - @include scrollbox-vertical(); - - max-width: 60vw; - max-height: 100%; - border-radius: $border-radius; - background: #fff; - overflow: auto; - outline: none; - - @include mq($small-only) { - max-width: 95vw; - } - - @include mq($medium-up) { - max-width: 80vw; - } -} - -.overlay { - z-index: 1000; - background: transparentize($color-gray-dark, .40); - display: flex; - align-items: center; - justify-content: center; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.portal {} diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx old mode 100644 new mode 100755 index ed6e2c57f4..37a5ea0887 --- a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx @@ -7,6 +7,7 @@ const propTypes = { isOpen: PropTypes.bool.isRequired, onShow: PropTypes.func, onHide: PropTypes.func, + isTransparent: PropTypes.bool }; const defaultProps = { @@ -41,19 +42,34 @@ export default class ModalBase extends Component { onShow, onHide, className, + isTransparent, } = this.props; - return ( - - {this.props.children} - - ); + if (isTransparent) { + return ( + + {this.props.children} + + ); + }else{ + return ( + + {this.props.children} + + ); + } } }; diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss index 17d08d3cc6..c27005c4b6 100755 --- a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss @@ -20,11 +20,22 @@ } } +.audioOverlay { + z-index: 1000; + background: transparentize($color-gray-dark, .40); + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + .overlay { z-index: 1000; - // background: transparentize($color-white, .35); background: #fff; - // background: transparentize($color-gray-dark, .40); display: flex; align-items: center; justify-content: center; From 813a9a595846ba7ba5f3cc1930b95a3044c60ea7 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 27 Jan 2017 06:32:54 -0800 Subject: [PATCH 3/6] remove duplication in base render --- .../ui/components/modal/base/component.jsx | 38 +++++++------------ 1 file changed, 13 insertions(+), 25 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx index 37a5ea0887..658ef94db8 100755 --- a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx @@ -45,31 +45,19 @@ export default class ModalBase extends Component { isTransparent, } = this.props; - if (isTransparent) { - return ( - - {this.props.children} - - ); - }else{ - return ( - - {this.props.children} - - ); - } + let styleOverlay = (isTransparent) ? styles.audioOverlay : styles.overlay; + + return ( + + {this.props.children} + + ); } }; From 7ce0c175b9d8a577fdd25abbd78046a17528d281 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 27 Jan 2017 06:41:22 -0800 Subject: [PATCH 4/6] fix inverted mute status icon --- .../imports/ui/components/actions-bar/mute-button/component.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx index 6548ab3a99..d4f085237c 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx @@ -7,7 +7,7 @@ export default class MuteAudio extends React.Component { render() { const { isInAudio, isMuted, callback } = this.props; let label = !isMuted ? 'Mute' : 'Unmute'; - let icon = !isMuted ? 'audio-off' : 'audio'; + let icon = !isMuted ? 'audio' : 'audio-off'; let className = !isInAudio ? styles.invisible : null; let tabIndex = !isInAudio ? -1 : 0; From 25cff03cb625070d0ffaad00ac425a4e8a769c0a Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 27 Jan 2017 07:35:09 -0800 Subject: [PATCH 5/6] rename overlayClassName --- .../imports/ui/components/modal/base/component.jsx | 2 +- .../imports/ui/components/modal/base/styles.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx index 658ef94db8..c1b82ce8e8 100755 --- a/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/modal/base/component.jsx @@ -45,7 +45,7 @@ export default class ModalBase extends Component { isTransparent, } = this.props; - let styleOverlay = (isTransparent) ? styles.audioOverlay : styles.overlay; + let styleOverlay = (isTransparent) ? styles.transparentOverlay : styles.overlay; return ( Date: Fri, 27 Jan 2017 11:20:31 -0800 Subject: [PATCH 6/6] extend overlay class and change background --- .../imports/ui/components/modal/base/styles.scss | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss index 73a944c4b6..d3384dee01 100755 --- a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss @@ -21,19 +21,10 @@ } .transparentOverlay { - z-index: 1000; - background: transparentize($color-gray-dark, .40); - display: flex; - align-items: center; - justify-content: center; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + background: transparentize($color-gray-dark, .40) !important; } -.overlay { +.overlay, .transparentOverlay { z-index: 1000; background: #fff; display: flex;