convert poll live-result component

2021-11-04 12:49:04 +00:00 · 2021-11-04 12:49:04 +00:00 · efdec5da53
commit efdec5da53
parent 2c40de2474
5 changed files with 268 additions and 229 deletions
--- a/bigbluebutton-html5/imports/ui/components/poll/live-result/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/poll/live-result/component.jsx
@ -2,11 +2,11 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
-import Button from '/imports/ui/components/button/component';
 import caseInsensitiveReducer from '/imports/utils/caseInsensitiveReducer';
 import { Session } from 'meteor/session';
-import { styles } from './styles';
+import Styled from './styles';
 import Service from './service';
+import Settings from '/imports/ui/services/settings';

 const intlMessages = defineMessages({
  usersTitle: {
@ -99,14 +99,14 @@ class LiveResult extends PureComponent {
          ...acc,
          (
            <tr key={_.uniqueId('stats-')}>
-              <td className={styles.resultLeft}>{user.name}</td>
-              <td data-test="receivedAnswer" className={styles.resultRight}>
+              <Styled.ResultLeft>{user.name}</Styled.ResultLeft>
+              <Styled.ResultRight data-test="receivedAnswer">
                {
                  defaultPoll && pollAnswerIds[formattedMessageIndex]
                    ? intl.formatMessage(pollAnswerIds[formattedMessageIndex])
                    : user.answer
                }
-              </td>
+              </Styled.ResultRight>
            </tr>
          ),
        ]);
@ -124,22 +124,22 @@ class LiveResult extends PureComponent {
      };

      return pollStats.push(
-        <div className={styles.main} key={_.uniqueId('stats-')}>
-          <div className={styles.left}>
+        <Styled.Main key={_.uniqueId('stats-')}>
+          <Styled.Left>
            {
              defaultPoll && pollAnswerIds[formattedMessageIndex]
                ? intl.formatMessage(pollAnswerIds[formattedMessageIndex])
                : obj.key
            }
-          </div>
-          <div className={styles.center}>
-            <div className={styles.barShade} style={calculatedWidth} />
-            <div className={styles.barVal}>{obj.numVotes || 0}</div>
-          </div>
-          <div className={styles.right}>
+          </Styled.Left>
+          <Styled.Center>
+            <Styled.BarShade style={calculatedWidth} />
+            <Styled.BarVal>{obj.numVotes || 0}</Styled.BarVal>
+          </Styled.Center>
+          <Styled.Right>
            {pctFotmatted}
-          </div>
-        </div>,
+          </Styled.Right>
+        </Styled.Main>,
      );
    });

@ -170,6 +170,7 @@ class LiveResult extends PureComponent {
    } = this.props;

    const { userAnswers, pollStats, currentPollQuestion } = this.state;
+    const { animations } = Settings.application;

    let waiting;
    let userCount = 0;
@ -189,9 +190,9 @@ class LiveResult extends PureComponent {

    return (
      <div>
-        <div className={styles.stats}>
-          {currentPollQuestion ? <span className={styles.title}>{currentPollQuestion}</span> : null}
-          <div className={styles.status}>
+        <Styled.Stats>
+          {currentPollQuestion ? <Styled.Title>{currentPollQuestion}</Styled.Title> : null}
+          <Styled.Status>
            {waiting
              ? (
                <span>
@ -203,14 +204,14 @@ class LiveResult extends PureComponent {
              )
              : <span>{intl.formatMessage(intlMessages.doneLabel)}</span>}
            {waiting
-              ? <span className={styles.connectingAnimation} /> : null}
-          </div>
+              ? <Styled.ConnectingAnimation animations={animations}/> : null}
+          </Styled.Status>
          {pollStats}
-        </div>
+        </Styled.Stats>
        {currentPoll && currentPoll.answers.length > 0
          ? (
-            <div className={styles.buttonsActions}>
-              <Button
+            <Styled.ButtonsActions>
+              <Styled.PublishButton
                disabled={!isMeteorConnected}
                onClick={() => {
                  Session.set('pollInitiated', false);
@ -220,9 +221,8 @@ class LiveResult extends PureComponent {
                label={intl.formatMessage(intlMessages.publishLabel)}
                data-test="publishPollingLabel"
                color="primary"
-                className={styles.publishBtn}
              />
-              <Button
+              <Styled.CancelButton
                disabled={!isMeteorConnected}
                onClick={() => {
                  Session.set('pollInitiated', false);
@ -231,11 +231,10 @@ class LiveResult extends PureComponent {
                }}
                label={intl.formatMessage(intlMessages.cancelPollLabel)}
                data-test="cancelPollLabel"
-                className={styles.cancelBtn}
              />
-            </div>
+            </Styled.ButtonsActions>
          ) : (
-            <Button
+            <Styled.LiveResultButton
              disabled={!isMeteorConnected}
              onClick={() => {
                handleBackClick();
@ -243,18 +242,17 @@ class LiveResult extends PureComponent {
              label={intl.formatMessage(intlMessages.backLabel)}
              color="primary"
              data-test="restartPoll"
-              className={styles.btn}
            />
          )
        }
-        <div className={styles.separator} />
+        <Styled.Separator />
        { currentPoll && !currentPoll.secretPoll
          ? (
            <table>
              <tbody>
                <tr>
-                  <th className={styles.theading}>{intl.formatMessage(intlMessages.usersTitle)}</th>
-                  <th className={styles.theading}>{intl.formatMessage(intlMessages.responsesTitle)}</th>
+                  <Styled.THeading>{intl.formatMessage(intlMessages.usersTitle)}</Styled.THeading>
+                  <Styled.THeading>{intl.formatMessage(intlMessages.responsesTitle)}</Styled.THeading>
                </tr>
                {userAnswers}
              </tbody>
--- a/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.js
@ -0,0 +1,228 @@
+import styled, { css, keyframes } from 'styled-components';
+import {
+  colorGrayLightest,
+  colorText,
+  colorGrayLighter,
+  pollStatsBorderColor,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import {
+  smPaddingX,
+  smPaddingY,
+  mdPaddingX,
+  pollStatsElementWidth,
+  pollSmMargin,
+  pollResultWidth,
+  borderSizeLarge,
+} from '/imports/ui/stylesheets/styled-components/general';
+import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
+import Button from '/imports/ui/components/button/component';
+
+const ResultLeft = styled.td`
+  padding: 0 .5rem 0 0;
+  border-bottom: 1px solid ${colorGrayLightest};
+
+  [dir="rtl"] & {
+    padding: 0 0 0 .5rem;
+  }
+  padding-bottom: .25rem;
+  word-break: break-all;
+`;
+
+const ResultRight = styled.td`
+  padding-bottom: .25rem;
+  word-break: break-all;
+`;
+
+const Main = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Left = styled.div`
+  font-weight: bold;
+  max-width: ${pollResultWidth};
+  min-width: ${pollStatsElementWidth};
+  word-wrap: break-word;
+  flex: 6;
+
+  padding: ${smPaddingY};
+  margin-top: ${pollSmMargin};
+  margin-bottom: ${pollSmMargin};
+  color: ${colorText};
+
+  position: relative;
+`;
+
+const Center = styled.div`
+  position: relative;
+  flex: 3;
+  border-left: 1px solid ${colorGrayLighter};
+  border-right : none;
+  width: 100%;
+  height: 100%;
+
+  [dir="rtl"] & {
+    border-left: none;
+    border-right: 1px solid ${colorGrayLighter};
+  }
+
+  padding: ${smPaddingY};
+  margin-top: ${pollSmMargin};
+  margin-bottom: ${pollSmMargin};
+  color: ${colorText};
+`;
+
+const Right = styled.div`
+  text-align: right;
+  max-width: ${pollStatsElementWidth};
+  min-width: ${pollStatsElementWidth};
+  flex: 1;
+
+  [dir="rtl"] & {
+    text-align: left;
+  }
+
+  padding: ${smPaddingY};
+  margin-top: ${pollSmMargin};
+  margin-bottom: ${pollSmMargin};
+  color: ${colorText};
+
+  position: relative;
+`;
+
+const BarShade = styled.div`
+  background-color: ${colorGrayLighter};
+  height: 100%;
+  min-height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+`;
+
+const BarVal = styled.div`
+  position: inherit;
+`;
+
+const Stats = styled.div`
+  margin-bottom: ${smPaddingX};
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${pollStatsBorderColor};
+  border-radius: ${borderSizeLarge};
+  padding: ${mdPaddingX};
+
+  & > div {
+    display: flex;
+    flex-direction: row;
+
+    & > div:nth-child(even) {
+      position: relative;
+      height: 75%;
+      width: 50%;
+      text-align: center;
+    }
+  }
+`;
+
+const Title = styled.span`
+  font-weight: bold;
+  word-break: break-all;
+  white-space: pre-wrap;
+`;
+
+const Status = styled.div`
+  margin-bottom: .5rem;
+`;
+
+const ellipsis = keyframes`
+  to {
+    width: 1.25em;
+    margin-right: 0;
+    margin-left: 0;
+  }
+`
+
+const ConnectingAnimation = styled.span`
+  &:after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    content: "\\2026"; /* ascii code for the ellipsis character */
+    width: 0;
+    margin: 0 1.25em 0 0;
+
+    [dir="rtl"] & {
+      margin: 0 0 0 1.25em;
+    }
+
+    ${({ animations }) => animations && css`
+      animation: ${ellipsis} steps(4, end) 900ms infinite;
+    `}
+  }
+`;
+
+const ButtonsActions = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+const PublishButton = styled(Button)`
+  width: 48%;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+`;
+
+const CancelButton = styled(PublishButton)``;
+
+const LiveResultButton = styled(Button)`
+  width: 100%;
+  margin-top: ${smPaddingY};
+  margin-bottom: ${smPaddingY};
+  font-size: ${fontSizeBase};
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+`;
+
+const Separator = styled.div`
+  display: flex;
+  flex: 1 1 100%;
+  height: 1px;
+  min-height: 1px;
+  background-color: ${colorGrayLightest};
+  padding: 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+`;
+
+const THeading = styled.th`
+  text-align: left;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+`;
+
+export default {
+  ResultLeft,
+  ResultRight,
+  Main,
+  Left,
+  Center,
+  Right,
+  BarShade,
+  BarVal,
+  Stats,
+  Title,
+  Status,
+  ConnectingAnimation,
+  ButtonsActions,
+  PublishButton,
+  CancelButton,
+  LiveResultButton,
+  Separator,
+  THeading,
+};
--- a/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
@ -1,197 +0,0 @@
-:root {
-  --poll-stats-border-color: #d4d9df;
-  --poll-stats-option-width: 4em;
-  --poll-stats-element-width: 17%;
-  
-  --poll-sm-margin: 0.3125rem;
-  --poll-md-margin: 0.7rem;
-  --poll-user-line-height: 1.75rem;
-  --poll-result-width: 15rem;
-}
-
-.btn {
-  width: 100%;
-  margin-top: var(--sm-padding-y);
-  margin-bottom: var(--sm-padding-y);
-  font-size: var(--font-size-base);
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.publishBtn,
-.cancelBtn {
-  width: 48%;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.buttonsActions {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.main {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.center {
-  position: relative;
-  flex: 3;
-  border-left: 1px solid var(--color-gray-lighter);
-  border-right : none;
-  width: 100%;
-  height: 100%;
-
-  [dir="rtl"] & {
-    border-left: none;
-    border-right: 1px solid var(--color-gray-lighter);
-  }
-}
-
-.left {
-  font-weight: bold;
-  max-width: var(--poll-result-width);
-  min-width: var(--poll-stats-element-width);
-  word-wrap: break-word;
-  flex: 6;
-}
-
-.right {
-  text-align: right;
-  max-width: var(--poll-stats-element-width);
-  min-width: var(--poll-stats-element-width);
-  flex: 1;
-
-  [dir="rtl"] & {
-    text-align: left;
-  }
-}
-
-.left,
-.right,
-.center {
-  padding: var(--sm-padding-y);
-  margin-top: var(--poll-sm-margin);
-  margin-bottom: var(--poll-sm-margin);
-  color: var(--color-text);
-}
-
-.left,
-.right {
-  position: relative;
-}
-
-.container,
-.stats {
-  margin-bottom: var(--sm-padding-x);
-}
-
-.stats {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--poll-stats-border-color);
-  border-radius: var(--border-size-large);
-  padding: var(--md-padding-x);
-
-  > div {
-    display: flex;
-    flex-direction: row;
-
-    > div:nth-child(even) {
-      position: relative;
-      height: 75%;
-      width: 50%;
-      text-align: center;
-    }
-
-  }
-}
-
-.barShade {
-  background-color: var(--color-gray-lighter);
-  height: 100%;
-  min-height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.barVal {
-  position: inherit;
-}
-
-.theading {
-  text-align: left;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-}
-
-.resultLeft {
-  padding: 0 .5rem 0 0;
-  border-bottom: 1px solid var(--color-gray-lightest);
-
-  [dir="rtl"] & {
-    padding: 0 0 0 .5rem;
-  }
-}
-
-.resultRight,
-.resultLeft {
-  padding-bottom: .25rem;
-  word-break: break-all;
-}
-
-.status {
-  margin-bottom: .5rem;
-}
-
-.connectingAnimation {
-  &:after {
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: bottom;
-    content: "\2026"; /* ascii code for the ellipsis character */
-    width: 0;
-    margin: 0 1.25em 0 0;
-
-    [dir="rtl"] & {
-      margin: 0 0 0 1.25em;
-    }
-
-    :global(.animationsEnabled) & {
-      animation: ellipsis steps(4,end) 900ms infinite;
-    }
-  }
-}
-
-.separator {
-  display: flex;
-  flex: 1 1 100%;
-  height: 1px;
-  min-height: 1px;
-  background-color: var(--color-gray-lightest);
-  padding: 0;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.title {
-  font-weight: bold;
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-
-@keyframes ellipsis {
-  to {
-    width: 1.25em;
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
@ -42,6 +42,10 @@ const toolbarButtonBorderRadius = '5px';
 const toolbarItemTrianglePadding = '2px';
 const toolbarMargin = '.8rem';

+const pollStatsElementWidth = '17%';
+const pollSmMargin = '0.3125rem';
+const pollResultWidth = '15rem';
+
 export {
  borderSizeSmall,
  borderSize,
@ -83,4 +87,7 @@ export {
  toolbarButtonBorderRadius,
  toolbarItemTrianglePadding,
  toolbarMargin,
+  pollStatsElementWidth,
+  pollSmMargin,
+  pollResultWidth,
 };
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
@ -52,6 +52,8 @@ const toolbarButtonBg = btnDefaultBg;
 const toolbarListBg = '#DDD';
 const toolbarListBgFocus = '#C6C6C6';

+const pollStatsBorderColor = '#d4d9df';
+
 export {
  colorWhite,
  colorOffWhite,
@ -94,4 +96,5 @@ export {
  toolbarButtonBg,
  toolbarListBg,
  toolbarListBgFocus,
+  pollStatsBorderColor,
 };