convert settings video component

2021-11-05 14:43:42 +00:00 · 2021-11-05 14:43:42 +00:00 · 9e8f62eafc
commit 9e8f62eafc
parent 0272974f0f
6 changed files with 105 additions and 303 deletions
--- a/bigbluebutton-html5/imports/ui/components/settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
@ -1,105 +0,0 @@
-@import "/imports/ui/stylesheets/variables/breakpoints";
-@import "/imports/ui/stylesheets/variables/placeholders";
-
-.tabs {
-  @extend %flex-row;
-  justify-content: flex-start;
-  @include mq($small-only) {
-    width: 100%;
-    flex-flow: column;
-  }
-}
-
-.tabList {
-  @extend %flex-column;
-  @extend %no-margin;
-  border: none;
-  padding: 0;
-  width: calc(100% / 3);
-
-  @include mq($small-only) {
-    width: 100%;
-    flex-flow: row;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-.icon {
-  margin: 0 .5rem 0 0;
-  font-size: var(--font-size-large);
-
-  [dir="rtl"] & {
-     margin: 0 0 0 .5rem;
-  }
-}
-
-.tabSelector {
-  @extend %flex-row;
-  font-size: 0.9rem;
-  flex: 0 0 auto;
-  justify-content: flex-start;
-  border: none !important;
-  padding: var(--md-padding-y) var(--md-padding-x);
-  color: var(--color-gray-dark);
-  border-radius: .2rem;
-  cursor: pointer;
-  margin-bottom: var(--sm-padding-y);
-  align-items: center;
-  flex-grow: 0;
-  min-width: 0;
-  & > span {
-    @extend %text-elipsis;
-  }
-
-  @include mq($small-only) {
-    max-width: 100%;
-    margin: 0 var(--sm-padding-x) 0 0;
-    & > .icon {
-      display: none;
-    }
-
-    [dir="rtl"] & {
-       margin: 0 0 0 var(--sm-padding-x);
-    }
-  }
-}
-
-.selected {
-  color: var(--color-white);
-  background-color: var(--color-primary);
-  font-weight: bold;
-
-  & > .icon {
-    color: var(--color-white);
-  }
-}
-
-.tabPanel {
-  display: none;
-  margin: 0 0 0 1rem;
-  width: calc(100% / 3 * 2);
-
-  [dir="rtl"] & {
-    margin: 0 1rem 0 0;
-  }
-
-  @include mq($small-only) {
-    width: 100%;
-    margin: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-.selectedTab {
-  display: block;
-}
-
-.toggleLabel {
-  margin-right: var(--sm-padding-x);
-
-  [dir="rtl"] & {
-    margin: 0 0 0 var(--sm-padding-x);
-  }
-}
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/styles.js
@ -19,28 +19,7 @@ const Label = styled(Styled.Label)``;

 const FormElementRight = styled(Styled.FormElementRight)``;

-const Select = styled.select`
-  &:focus {
-    box-shadow: inset 0 0 0 ${borderSizeLarge} ${colorPrimary};
-    border-radius: ${borderSize};
-  }
-
-  background-color: ${colorWhite};
-  border: ${borderSize} solid ${colorWhite};
-  border-radius: ${borderSize};
-  border-bottom: 0.1rem solid ${colorGrayLighter};
-  color: ${colorGrayLabel};
-  width: 100%;
-  height: 1.75rem;
-  padding: 1px;
-
-  &:hover,
-  &:focus {
-    outline: transparent;
-    outline-style: dotted;
-    outline-width: ${borderSize};
-  }
-`;
+const Select = styled(Styled.Select)``;

 const Title = styled(Styled.Title)``;

--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.js
@ -2,7 +2,11 @@ import styled from 'styled-components';
 import {
  colorGrayDark,
  colorGrayLabel,
+  colorPrimary,
+  colorWhite,
+  colorGrayLighter,
 } from '/imports/ui/stylesheets/styled-components/palette';
+import { borderSize, borderSizeLarge } from '/imports/ui/stylesheets/styled-components/general';

 const Title = styled.h3`
  color: ${colorGrayDark};
@ -77,6 +81,29 @@ const Label = styled.span`
  margin-bottom: 0.5rem;
 `;

+const Select = styled.select`
+  &:focus {
+    box-shadow: inset 0 0 0 ${borderSizeLarge} ${colorPrimary};
+    border-radius: ${borderSize};
+  }
+
+  background-color: ${colorWhite};
+  border: ${borderSize} solid ${colorWhite};
+  border-radius: ${borderSize};
+  border-bottom: 0.1rem solid ${colorGrayLighter};
+  color: ${colorGrayLabel};
+  width: 100%;
+  height: 1.75rem;
+  padding: 1px;
+
+  &:hover,
+  &:focus {
+    outline: transparent;
+    outline-style: dotted;
+    outline-width: ${borderSize};
+  }
+`;
+
 export default {
  Title,
  SubTitle,
@ -87,4 +114,5 @@ export default {
  FormElementRight,
  FormElementCenter,
  Label,
+  Select,
 };
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
@ -1,130 +0,0 @@
-@import '/imports/ui/stylesheets/mixins/focus';
-@import '/imports/ui/stylesheets/mixins/_indicators';
-@import '/imports/ui/components/loading-screen/styles';
-@import "/imports/ui/stylesheets/variables/placeholders";
-
-.title {
-  color: var(--color-gray-dark);
-  font-weight: 400;
-  font-size: 1.3rem;
-  margin: 0;
-  margin-bottom: 1.5rem;
-}
-
-.subtitle {
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-}
-
-.form {
-  display: flex;
-  flex-flow: column;
-}
-
-.row {
-  display: flex;
-  flex-flow: row;
-  flex-grow: 1;
-  justify-content: space-between;
-  margin-bottom: 0.7rem;
-}
-
-.col {
-  display: flex;
-  flex-grow: 1;
-  flex-basis: 0;
-
-  &:last-child {
-    padding-right: 0;
-    padding-left: 1rem;
-
-    [dir="rtl"] & {
-      padding-right: 0.1rem;
-      padding-left: 0;
-    }
-  }
-}
-
-.colHeading {
-  display: block;
-  text-align: center;
-  font-size: 0.9rem;
-  margin-bottom: 0.5rem;
-  font-weight: bold;
-}
-
-.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;
-}
-
-.formElement {
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  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;
-
-  &:hover,
-  &:focus {
-    @extend %highContrastOutline;
-  }
-}
-
-.pullContentRight {
-  display: flex;
-  justify-content: flex-end;
-  flex-flow: row;
-  align-items: center;
-}
-
-.pullContentCenter {
-  display: flex;
-  justify-content: center;
-  flex-flow: row;
-  align-items: center;
-}
-
-.separator {
-  margin: 2.5rem 0;
-  border: 1px solid var(--color-gray-lighter);
-  opacity: 0.25;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.spacedLeft {
-  margin: 0 0 0 1rem;
-
-  [dir="rtl"] & {
-    margin: 0 1rem 0 0;
-  }
-}
-
-.spinnerOverlay {
-  @extend .spinner;
-  & > div {
-    background-color: black;
-  }
-}
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/video/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/video/component.jsx
@ -1,9 +1,8 @@
 import React from 'react';
 import Toggle from '/imports/ui/components/switch/component';
-import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 import BaseMenu from '../base/component';
-import { styles } from '../styles';
+import Styled from './styles';

 const intlMessages = defineMessages({
  videoSectionTitle: {
@ -46,73 +45,67 @@ class VideoMenu extends BaseMenu {
    const { intl } = this.props;

    return (
-      <div className={styles.tabContent}>
-        <div className={styles.header}>
-          <h3 className={styles.title}>{intl.formatMessage(intlMessages.videoSectionTitle)}</h3>
+      <div>
+        <div>
+          <Styled.Title>
+            {intl.formatMessage(intlMessages.videoSectionTitle)}
+          </Styled.Title>
        </div>

-        <div className={styles.form}>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <div
-                className={styles.formElement}
-                aria-label={intl.formatMessage(intlMessages.videoSourceLabel)}
-              >
-                <label htmlFor="videoSourceSelect" className={cx(styles.label, styles.labelSmall)}>
+        <Styled.Form>
+          <Styled.Row>
+            <Styled.Col>
+              <Styled.FormElement aria-label={intl.formatMessage(intlMessages.videoSourceLabel)}>
+                <Styled.LabelSmall htmlFor="videoSourceSelect">
                  {intl.formatMessage(intlMessages.videoSourceLabel)}
-                </label>
-                <select
+                </Styled.LabelSmall>
+                <Styled.Select
                  id="videoSourceSelect"
                  defaultValue="-1"
-                  className={styles.select}
                >
                  <option value="-1" disabled>
                    {intl.formatMessage(intlMessages.videoOptionLabel)}
                  </option>
-                </select>
-              </div>
-            </div>
-            <div className={styles.col}>
-              <div
-                className={styles.formElement}
-                aria-label={intl.formatMessage(intlMessages.videoQualityLabel)}
-              >
-                <label htmlFor="videoSelectQuality" className={cx(styles.label, styles.labelSmall)}>
+                </Styled.Select>
+              </Styled.FormElement>
+            </Styled.Col>
+            <Styled.Col>
+              <Styled.FormElement aria-label={intl.formatMessage(intlMessages.videoQualityLabel)}>
+                <Styled.LabelSmall htmlFor="videoSelectQuality">
                  {intl.formatMessage(intlMessages.videoQualityLabel)}
-                </label>
-                <select
+                </Styled.LabelSmall>
+                <Styled.Select
                  id="videoSelectQuality"
                  defaultValue="-1"
-                  className={styles.select}
                >
                  <option value="-1" disabled>
                    {intl.formatMessage(intlMessages.qualityOptionLabel)}
                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <div className={styles.formElement}>
-                <div className={styles.label}>
+                </Styled.Select>
+              </Styled.FormElement>
+            </Styled.Col>
+          </Styled.Row>
+          <Styled.Row>
+            <Styled.Col>
+              <Styled.FormElement>
+                <Styled.Label>
                  {intl.formatMessage(intlMessages.participantsCamLabel)}
-                </div>
-              </div>
-            </div>
-            <div className={styles.col}>
-              <div className={cx(styles.formElement, styles.pullContentRight)}>
+                </Styled.Label>
+              </Styled.FormElement>
+            </Styled.Col>
+            <Styled.Col>
+              <Styled.FormElementRight>
                <Toggle
                  icons={false}
                  defaultChecked={this.state.viewParticipantsWebcams}
                  onChange={() => this.handleToggle('viewParticipantsWebcams')}
-                  ariaLabelledBy={'viewCamLabel'}
+                  ariaLabelledBy="viewCamLabel"
                  ariaLabel={intl.formatMessage(intlMessages.participantsCamLabel)}
                />
-              </div>
-            </div>
-          </div>
-        </div>
+              </Styled.FormElementRight>
+            </Styled.Col>
+          </Styled.Row>
+        </Styled.Form>
      </div>
    );
  }
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/video/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/video/styles.js
@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import Styled from '/imports/ui/components/settings/submenus/styles';
+import { colorLink } from '/imports/ui/stylesheets/styled-components/palette';
+
+const Title = styled(Styled.Title)``;
+
+const Form = styled(Styled.Form)``;
+
+const Row = styled(Styled.Row)``;
+
+const Col = styled(Styled.Col)``;
+
+const FormElement = styled(Styled.FormElement)``;
+
+const FormElementRight = styled(Styled.FormElementRight)``;
+
+const Label = styled(Styled.Label)``;
+
+const LabelSmall = styled(Label)`
+  color: ${colorLink};
+  font-size: 0.7rem;
+  margin-bottom: 0.3rem;
+`;
+
+const Select = styled(Styled.Select)``;
+
+export default {
+  Title,
+  Form,
+  Row,
+  Col,
+  FormElement,
+  FormElementRight,
+  Label,
+  LabelSmall,
+  Select,
+};