convert note component

bigbluebutton-html5/imports/ui/components/note/component.jsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
-import Button from '/imports/ui/components/button/component';
 import NoteService from '/imports/ui/components/note/service';
-import { styles } from './styles';
+import Styled from './styles';
 import { PANELS, ACTIONS } from '../layout/enums';
+import browserInfo from '/imports/utils/browserInfo';
 
 const intlMessages = defineMessages({
   hideNoteLabel: {
@@ -38,6 +38,7 @@ const Note = ({
   isResizing,
 }) => {
   const [noteURL, setNoteURL] = useState();
+  const { isChrome } = browserInfo;
 
   useEffect(() => {
     NoteService.getNoteId().then((response) => {
@@ -48,16 +49,10 @@ const Note = ({
   useEffect(() => () => NoteService.setLastRevs(), []);
 
   return (
-    <div
-      data-test="note"
-      className={styles.note}
-    >
-      <header className={styles.header}>
-        <div
-          data-test="noteTitle"
-          className={styles.title}
-        >
-          <Button
+    <Styled.Note data-test="note" isChrome={isChrome}>
+      <Styled.Header>
+        <Styled.Title data-test="noteTitle">
+          <Styled.HideButton
             onClick={() => {
               layoutContextDispatch({
                 type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
@@ -72,11 +67,10 @@ const Note = ({
             aria-label={intl.formatMessage(intlMessages.hideNoteLabel)}
             label={intl.formatMessage(intlMessages.title)}
             icon={isRTL ? 'right_arrow' : 'left_arrow'}
-            className={styles.hideBtn}
           />
-        </div>
-      </header>
-      <iframe
+        </Styled.Title>
+      </Styled.Header>
+      <Styled.IFrame
         title="etherpad"
         src={noteURL}
         aria-describedby="sharedNotesEscapeHint"
@@ -84,10 +78,10 @@ const Note = ({
           pointerEvents: isResizing ? 'none' : 'inherit',
         }}
       />
-      <span id="sharedNotesEscapeHint" className={styles.hint} aria-hidden>
+      <Styled.Hint id="sharedNotesEscapeHint" aria-hidden>
         {intl.formatMessage(intlMessages.tipLabel)}
-      </span>
-    </div>
+      </Styled.Hint>
+    </Styled.Note>
   );
 };
 

bigbluebutton-html5/imports/ui/components/note/styles.js

@@ -0,0 +1,129 @@
+import styled from 'styled-components';
+import {
+  mdPaddingX,
+  mdPaddingY,
+  pollHeaderOffset,
+  toastContentWidth,
+  borderSizeLarge,
+  borderSize,
+  smPaddingX,
+  lgPaddingY,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorWhite,
+  colorGrayDark,
+  colorGray,
+  colorGrayLightest,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import { DivElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
+import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
+import Button from '/imports/ui/components/button/component';
+
+const Note = styled.div`
+  background-color: ${colorWhite};
+  padding: ${mdPaddingX} ${mdPaddingY} ${mdPaddingX} ${mdPaddingX};
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+
+  ${({ isChrome }) => isChrome && `
+    transform: translateZ(0);
+  `}
+
+  @media ${smallOnly} {
+    transform: none !important;
+  }
+`;
+
+const Header = styled.header`
+  position: relative;
+  top: ${pollHeaderOffset};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled(DivElipsis)`
+  flex: 1;
+
+  & > button, button:hover {
+    max-width: ${toastContentWidth};
+  }
+`;
+
+const HideButton = styled(Button)`
+  position: relative;
+  background-color: ${colorWhite};
+  display: block;
+  margin: ${borderSizeLarge};
+  margin-bottom: ${borderSize};
+  padding-left: 0;
+  padding-right: inherit;
+
+  [dir="rtl"] & {
+    padding-left: inherit;
+    padding-right: 0;
+  }
+
+  & > i {
+    color: ${colorGrayDark};
+    font-size: smaller;
+
+    [dir="rtl"] & {
+      -webkit-transform: scale(-1, 1);
+      -moz-transform: scale(-1, 1);
+      -ms-transform: scale(-1, 1);
+      -o-transform: scale(-1, 1);
+      transform: scale(-1, 1);
+    }
+  }
+
+  &:hover {
+    background-color: ${colorWhite};
+  }
+`;
+
+const Hint = styled.span`
+  visibility: hidden;
+  position: absolute;
+
+  @media (pointer: none) {
+    visibility: visible;
+    position: relative;
+    color: ${colorGray};
+    font-size: ${fontSizeSmall};
+    font-style: italic;
+    padding: ${smPaddingX} 0 0 ${smPaddingX};
+    text-align: left;
+
+    [dir="rtl"] & {
+      padding-right: ${lgPaddingY} ${lgPaddingY} 0 0;
+      text-align: right;
+    }
+  }
+`;
+
+const IFrame = styled.iframe`
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-style: none;
+  border-bottom: 1px solid ${colorGrayLightest};
+`;
+
+export default {
+  Note,
+  Header,
+  Title,
+  HideButton,
+  Hint,
+  IFrame,
+};

bigbluebutton-html5/imports/ui/components/note/styles.scss

@@ -1,108 +0,0 @@
-@import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/placeholders";
-@import "/imports/ui/stylesheets/variables/breakpoints";
-
-.note {
-  background-color: var(--color-white);
-  padding:
-    var(--md-padding-x)
-    var(--md-padding-y)
-    var(--md-padding-x)
-    var(--md-padding-x);
-
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-
-  :global(.browser-chrome) & {
-    transform: translateZ(0);
-  }
-
-  @include mq($small-only) {
-    transform: none !important;
-  }
-}
-
-.header {
-  position: relative;
-  top: var(--poll-header-offset);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.title {
-  @extend %text-elipsis;
-  flex: 1;
-
-  & > button, button:hover {
-    max-width: var(--toast-content-width);
-  }
-}
-
-.hideBtn {
-  position: relative;
-  background-color: var(--color-white);
-  display: block;
-  margin: var(--border-size-large);
-  margin-bottom: var(--border-size);
-  padding-left: 0;
-  padding-right: inherit;
-
-  [dir="rtl"] & {
-    padding-left: inherit;
-    padding-right: 0;
-  }
-
-  > i {
-    color: var(--color-gray-dark);
-    font-size: smaller;
-
-    [dir="rtl"] & {
-      -webkit-transform: scale(-1, 1);
-      -moz-transform: scale(-1, 1);
-      -ms-transform: scale(-1, 1);
-      -o-transform: scale(-1, 1);
-      transform: scale(-1, 1);
-    }
-  }
-
-  &:hover {
-    background-color: var(--color-white);
-  }
-}
-
-.hint {
-  visibility: hidden;
-  position: absolute;
-
-  @media (pointer: none) {
-    visibility: visible;
-    position: relative;
-    color: var(--color-gray);
-    font-size: var(--font-size-small);
-    font-style: italic;
-    padding: var(--sm-padding-x) 0 0 var(--sm-padding-x);
-    text-align: left;
-
-    [dir="rtl"] & {
-      padding-right: var(--lg-padding-y) var(--lg-padding-y) 0 0;
-      text-align: right;
-    }
-  }
-}
-
-iframe {
-  display: flex;
-  flex-flow: column;
-  flex-grow: 1;
-  flex-shrink: 1;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  border-style: none;
-  border-bottom: 1px solid var(--color-gray-lightest);
-}

bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js

@@ -12,7 +12,9 @@ const jumboPaddingY = '1.5rem';
 const whiteboardToolbarPadding = '.5rem';
 const minModalHeight = '20rem';
 const navbarHeight = '3.9375rem';
-const barsPadding = '0.8rem'; //so user-list and chat title is aligned with the presentation title
+const barsPadding = '0.8rem'; // so user-list and chat title is aligned with the presentation title
+const pollHeaderOffset = '-0.875rem';
+const toastContentWidth = '98%';
 
 export {
   borderSize,
@@ -29,4 +31,6 @@ export {
   minModalHeight,
   navbarHeight,
   barsPadding,
+  pollHeaderOffset,
+  toastContentWidth,
 };

bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js

@@ -5,6 +5,7 @@ const colorGray = '#4E5A66';
 const colorGrayDark = '#06172A';
 const colorGrayLight = '#8B9AA8';
 const colorGrayLighter = '#A7B3BD';
+const colorGrayLightest = '#D4D9DF';
 
 const colorBlueLight = '#54a1f3';
 const colorBlueLighter = '#92BCEA';
@@ -37,6 +38,7 @@ export {
   colorGrayDark,
   colorGrayLight,
   colorGrayLighter,
+  colorGrayLightest,
   colorTransparent,
   colorBlueLight,
   colorBlueLighter,

bigbluebutton-html5/imports/ui/stylesheets/styled-components/placeholders.js

@@ -10,6 +10,14 @@ const FlexRow = styled.div`
   flex-flow: row;
 `;
 
+const DivElipsis = styled.div`
+  min-width: 0;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const TextElipsis = styled.span`
   min-width: 0;
   display: inline-block;
@@ -29,6 +37,7 @@ const TitleElipsis = styled.h2`
 export {
   FlexColumn,
   FlexRow,
+  DivElipsis,
   TextElipsis,
   TitleElipsis,
 };