From af8959fe953f7c6f63e65c955c05280257561a39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Tue, 9 Nov 2021 14:33:40 +0000 Subject: [PATCH] convert audio settings component --- .../components/audio/audio-modal/styles.scss | 193 +++++++++++++++++ .../audio/audio-settings/component.jsx | 82 +++---- .../components/audio/audio-settings/styles.js | 205 ++++++++++++++++++ .../audio/device-selector/component.jsx | 2 +- 4 files changed, 433 insertions(+), 49 deletions(-) create mode 100644 bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss create mode 100644 bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.js diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss new file mode 100644 index 0000000000..572a0d3679 --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss @@ -0,0 +1,193 @@ +@import "/imports/ui/stylesheets/variables/breakpoints"; +@import "/imports/ui/components/modal/simple/styles"; + +:root { + --audioDial-margin-left: 2rem; +} + +.header { + margin: 0; + padding: 0; + border: none; + line-height: 2rem; +} + +.content { + flex-grow: 1; + display: flex; + justify-content: center; + padding: 0; + margin-top: auto; + margin-bottom: auto; + padding: 0.5rem 0; + + .audioBtn:first-child { + margin: 0 3rem 0 0; + + [dir="rtl"] & { + margin: 0 0 0 3rem; + } + + @include mq($small-only) { + margin: 0 1rem 0 0; + + [dir="rtl"] & { + margin: 0 0 0 1rem; + } + } + } + + .audioBtn:only-child { + margin: inherit 0 inherit inherit; + + [dir="rtl"] & { + margin: inherit!important inherit!important inherit!important 0; + } + } +} + +.audioOptions { + margin-top: auto; + margin-bottom: auto; + display: flex; + justify-content: center; +} + +.browserWarning { + padding: 0.5rem; + border-width: 3px; + border-style: solid; + border-radius: 0.25rem; +} + +.overlay { + @extend .overlay; +} + +.modal { + @extend .modal; + padding: 1.5rem; + min-height: 20rem; +} + +.closeBtn { + position: relative; + background-color: var(--color-white); + + i { + color: var(--color-gray-light); + } + + &:focus, + &:hover { + background-color: var(--color-gray-lighter); + i { + color: var(--color-gray); + } + } +} +.warning { + text-align: center; + font-weight: var(--headings-font-weight); + font-size: 5rem; + white-space: normal; +} +.text { + margin: var(--line-height-computed); + text-align: center; +} + +.main { + margin: var(--line-height-computed); + text-align: center; + font-size: var(--font-size-large); +} + +.audioBtn { + i { + color: #3c5764; + } +} + +.audioDial { + margin: 0 auto; + margin-top: var(--md-padding-y); + display: block; +} + +// Modifies the audio button icon colour +.audioBtn span:first-child { + color: #1b3c4b; + background-color: #f1f8ff; + box-shadow: none; + border: 5px solid #f1f8ff; + font-size: 3.5rem; + + @include mq($small-only) { + font-size: 2.5rem; + } +} + +// When hovering over a button of class audioBtn, change the border colour of first span-child +.audioBtn:hover span:first-child, +.audioBtn:focus span:first-child { + border: 5px solid var(--color-primary); + background-color: #f1f8ff; +} + +// Modifies the button label text +.audioBtn span:last-child { + color: black; + font-size: 1rem; + font-weight: 600; +} + +.title { + text-align: center; + font-weight: 400; + font-size: 1.3rem; + color: var(--color-background); + white-space: normal; + + @include mq($small-only) { + font-size: 1rem; + padding: 0 1rem; + } +} + +.connecting { + margin-top: auto; + margin-bottom: auto; + font-size: 2rem; +} + +.connectingAnimation { + margin: auto; + display: inline-block; + width: 1.5em; + + &:after { + overflow: hidden; + display: inline-block; + vertical-align: bottom; + content: "\2026"; /* ascii code for the ellipsis character */ + width: 0; + margin-left: 0.25em; + + :global(.animationsEnabled) & { + animation: ellipsis steps(4, end) 900ms infinite; + } + } +} + +@keyframes ellipsis { + to { + width: 1.5em; + } +} + +.audioNote { + color: var(--color-text); + display: inline-block; + font-size: 0.9rem; +} diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx index 668aa6df9e..dbaed96ba4 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx @@ -3,10 +3,8 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import Button from '/imports/ui/components/button/component'; import { withModalMounter } from '/imports/ui/components/modal/service'; -import DeviceSelector from '/imports/ui/components/audio/device-selector/component'; import AudioTestContainer from '/imports/ui/components/audio/audio-test/container'; -import cx from 'classnames'; -import { styles } from './styles'; +import Styled from './styles'; const propTypes = { intl: PropTypes.shape({ @@ -99,68 +97,56 @@ class AudioSettings extends React.Component { const { inputDeviceId, outputDeviceId } = this.state; return ( -
-
-
-
+ + + + {intl.formatMessage(intlMessages.descriptionLabel)} -
-
+ + -
-
-
- -
-
-
-
- -
-
-
+ + + + -
-
+ + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - -
-
-
+ + + + -
-
-
+ + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.js b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.js new file mode 100644 index 0000000000..dfef6cd03b --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.js @@ -0,0 +1,205 @@ +import styled from 'styled-components'; +import Button from '/imports/ui/components/button/component'; +import DeviceSelector from '/imports/ui/components/audio/device-selector/component'; +import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints'; +import { + colorWhite, + colorGrayLight, + colorText, +} from '/imports/ui/stylesheets/styled-components/palette'; +import { borderSize } from '/imports/ui/stylesheets/styled-components/general'; + +const FormWrapper = styled.div` + min-width: 0; +`; + +const Form = styled.div` + display: flex; + flex-flow: column; + margin-top: 1.5rem; +`; + +const Row = styled.div` + display: flex; + flex-flow: row; + justify-content: space-between; + margin-bottom: 0.7rem; +`; + +const EnterAudio = styled.div` + margin-top: 1.5rem; + display: flex; + justify-content: flex-end; +`; + +const AudioNote = styled.div` + @media ${smallOnly} { + font-size: 0.8rem; + } +`; + +const Col = styled.div` + min-width: 0; + + display: flex; + flex-grow: 1; + flex-basis: 0; + margin: 0 1rem 0 0; + + [dir="rtl"] & { + margin: 0 0 0 1rem; + } + + &:last-child { + margin-right: 0; + margin-left: inherit; + padding: 0 0.1rem 0 4rem; + + [dir="rtl"] & { + margin-right: inherit; + margin-left: 0; + padding: 0 4rem 0 0.1rem; + } + } +`; + +const FormElement = styled.div` + position: relative; + display: flex; + flex-flow: column; + flex-grow: 1; +`; + +const LabelSmall = styled.label` + color: black; + font-size: 0.85rem; + font-weight: 600; + + & > :first-child { + margin-top: 0.5rem; + } +`; + +const SpacedLeftCol = styled.div` + min-width: 0; + + display: flex; + flex-grow: 1; + flex-basis: 0; + margin: 0 1rem 0 0; + + [dir="rtl"] & { + margin: 0 0 0 1rem; + } + + &:last-child { + margin-right: 0; + margin-left: inherit; + padding: 0 0.1rem 0 4rem; + + [dir="rtl"] & { + margin-right: inherit; + margin-left: 0; + padding: 0 4rem 0 0.1rem; + } + } + + & label { + flex-grow: 1; + flex-basis: 0; + margin-right: 0; + margin-left: inherit; + padding: 0 0.1rem 0 4rem; + + [dir="rtl"] & { + margin-right: inherit; + margin-left: 0; + padding: 0 4rem 0 0.1rem; + } + } + + &:before { + content: ""; + display: block; + flex-grow: 1; + flex-basis: 0; + margin-right: 1rem; + margin-left: inherit; + + [dir="rtl"] & { + margin-right: inherit; + margin-left: 1rem; + } + } + + &:last-child { + margin-right: 0; + margin-left: inherit; + padding-right: 0; + padding-left: 0; + + [dir="rtl"] & { + margin-right: 0; + margin-left: inherit; + } + } +`; + +const BackButton = styled(Button)` + margin: 0 0.5rem 0 0; + border: none; + + [dir="rtl"] & { + margin: 0 0 0 0.5rem; + } + + @media ${smallOnly} { + margin:0 auto 0 0; + + [dir="rtl"] & { + margin:0 0 0 auto; + } + } + + &:first-child { + margin: 0 0.5rem 0 0 !important; + } +`; + +const DeviceSelectorSelect = styled(DeviceSelector)` + -webkit-appearance: none; + -webkit-border-radius: 0px; + background: ${colorWhite} url("data:image/svg+xml;charset=utf8,") no-repeat right .35rem center/.4rem .5rem; + background-repeat: no-repeat; + border: 0.07rem solid ${colorGrayLight}; + border-radius: .125rem; + color: ${colorText}; + width: 100%; + padding: .4rem; + + &:hover { + outline: transparent; + outline-style: dotted; + outline-width: ${borderSize}; + } + + &:focus { + outline: transparent; + outline-width: ${borderSize}; + outline-style: solid; + } +`; + +export default { + FormWrapper, + Form, + Row, + EnterAudio, + AudioNote, + Col, + FormElement, + LabelSmall, + SpacedLeftCol, + BackButton, + DeviceSelectorSelect, +}; diff --git a/bigbluebutton-html5/imports/ui/components/audio/device-selector/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/device-selector/component.jsx index e572f459d7..4526761635 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/device-selector/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/device-selector/component.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import logger from '/imports/startup/client/logger'; import browserInfo from '/imports/utils/browserInfo'; -import { styles } from '../audio-modal/styles'; +import { styles } from '../audio-modal/styles.scss'; const propTypes = { kind: PropTypes.oneOf(['audioinput', 'audiooutput', 'videoinput']),