From aef73a1da54d8c38c1e3fe4352e4e7b6dd031266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Fri, 5 Nov 2021 12:10:12 +0000 Subject: [PATCH] convert settings component --- .../ui/components/settings/component.jsx | 59 ++++---- .../imports/ui/components/settings/styles.js | 139 ++++++++++++++++++ 2 files changed, 164 insertions(+), 34 deletions(-) create mode 100644 bigbluebutton-html5/imports/ui/components/settings/styles.js diff --git a/bigbluebutton-html5/imports/ui/components/settings/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/component.jsx index 1a22d249f0..657e3d254b 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/component.jsx @@ -1,8 +1,5 @@ import React, { Component } from 'react'; import Modal from '/imports/ui/components/modal/fullscreen/component'; -import { - Tab, Tabs, TabList, TabPanel, -} from 'react-tabs'; import { defineMessages, injectIntl } from 'react-intl'; import DataSaving from '/imports/ui/components/settings/submenus/data-saving/component'; import Application from '/imports/ui/components/settings/submenus/application/component'; @@ -11,8 +8,7 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; import { withModalMounter } from '../modal/service'; -import Icon from '../icon/component'; -import { styles } from './styles'; +import Styled from './styles'; const intlMessages = defineMessages({ appTabLabel: { @@ -155,10 +151,10 @@ class Settings extends Component { const { intl } = this.props; return ( - + {status ? intl.formatMessage(intlMessages.on) : intl.formatMessage(intlMessages.off)} - + ); } @@ -179,39 +175,34 @@ class Settings extends Component { } = this.state; return ( - - - + - + {intl.formatMessage(intlMessages.appTabLabel)} - - + - + {intl.formatMessage(intlMessages.notificationLabel)} - - + - + {intl.formatMessage(intlMessages.dataSavingLabel)} - - - + + + - - + + - - + + - - + + ); } diff --git a/bigbluebutton-html5/imports/ui/components/settings/styles.js b/bigbluebutton-html5/imports/ui/components/settings/styles.js new file mode 100644 index 0000000000..9c431288ec --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/settings/styles.js @@ -0,0 +1,139 @@ +import styled from 'styled-components'; +import { + smPaddingX, + smPaddingY, + mdPaddingY, + mdPaddingX, +} from '/imports/ui/stylesheets/styled-components/general'; +import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints'; +import { + colorGrayDark, + colorPrimary, + colorWhite, +} from '/imports/ui/stylesheets/styled-components/palette'; +import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography'; +import { + Tab, Tabs, TabList, TabPanel, +} from 'react-tabs'; +import Icon from '../icon/component'; + +const ToggleLabel = styled.span` + margin-right: ${smPaddingX}; + + [dir="rtl"] & { + margin: 0 0 0 ${smPaddingX}; + } +`; + +const SettingsTabs = styled(Tabs)` + display: flex; + flex-flow: row; + justify-content: flex-start; + + @media ${smallOnly} { + width: 100%; + flex-flow: column; + } +`; + +const SettingsTabList = styled(TabList)` + display: flex; + flex-flow: column; + margin: 0; + border: none; + padding: 0; + width: calc(100% / 3); + + @media ${smallOnly} { + width: 100%; + flex-flow: row; + flex-wrap: wrap; + justify-content: center; + } +`; + +const SettingsTabSelector = styled(Tab)` + display: flex; + flex-flow: row; + font-size: 0.9rem; + flex: 0 0 auto; + justify-content: flex-start; + border: none !important; + padding: ${mdPaddingY} ${mdPaddingX}; + color: ${colorGrayDark}; + border-radius: .2rem; + cursor: pointer; + margin-bottom: ${smPaddingY}; + align-items: center; + flex-grow: 0; + min-width: 0; + + & > span { + min-width: 0; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + @media ${smallOnly} { + max-width: 100%; + margin: 0 ${smPaddingX} 0 0; + & > i { + display: none; + } + + [dir="rtl"] & { + margin: 0 0 0 ${smPaddingX}; + } + } + + &.is-selected { + color: ${colorWhite}; + background-color: ${colorPrimary}; + font-weight: bold; + + & > i { + color: ${colorWhite}; + } + } +`; + +const SettingsIcon = styled(Icon)` + margin: 0 .5rem 0 0; + font-size: ${fontSizeLarge}; + + [dir="rtl"] & { + margin: 0 0 0 .5rem; + } +`; + +const SettingsTabPanel = styled(TabPanel)` + display: none; + margin: 0 0 0 1rem; + width: calc(100% / 3 * 2); + + [dir="rtl"] & { + margin: 0 1rem 0 0; + } + + &.is-selected { + display: block; + } + + @media ${smallOnly} { + width: 100%; + margin: 0; + padding-left: 1rem; + padding-right: 1rem; + } +`; + +export default { + ToggleLabel, + SettingsTabs, + SettingsTabList, + SettingsTabSelector, + SettingsIcon, + SettingsTabPanel, +};