From 1bdf2931a64ed53b25239cdda96481bf9ec4ac33 Mon Sep 17 00:00:00 2001
From: PeterJFB <peterj.flbj@gmail.com>
Date: Tue, 3 May 2022 19:57:03 +0200
Subject: [PATCH] Redesign poll component

---
 app/components/Poll/Poll.css              | 250 +++++++-------
 app/components/Poll/index.js              | 394 ++++++++++------------
 app/routes/polls/components/PollDetail.js |   1 +
 app/styles/variables.css                  |   2 +-
 4 files changed, 304 insertions(+), 343 deletions(-)

diff --git a/app/components/Poll/Poll.css b/app/components/Poll/Poll.css
index 5e955a4d6c..89de452439 100644
--- a/app/components/Poll/Poll.css
+++ b/app/components/Poll/Poll.css
@@ -1,185 +1,167 @@
-@import '~app/styles/variables.css';
-
-.optionWrapper {
-  justify-content: center;
-  min-height: 120px;
-  cursor: pointer;
-  position: relative;
-}
-
-.pollTable {
+.poll {
+  margin: 0 auto;
+  background-color: var(--lego-card-color);
   width: 100%;
-  font-size: 14px;
-}
-
-.pollTable td {
-  border: 0;
-  padding: 5px;
+  min-width: 250px;
+  max-width: 500px;
+  overflow-y: hidden;
+  border-radius: 15px;
+  transition: 2s height;
 }
 
-.pollTable .textColumn {
-  border-right: 1px solid #c5c5c5;
-  text-align: right;
-  padding-right: 13px;
-  line-height: 16px;
-}
-
-.pollTable .graphColumn {
-  width: auto;
-  min-width: 200px;
-  padding-left: 13px;
+.topBar {
+  background-color: var(--lego-red);
+  position: relative;
+  width: 100%;
+  height: 70px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
 }
 
-.poll {
-  composes: withShadow from '~app/styles/utilities.css';
-  background: var(--lego-card-color);
-  padding: 15px 20px 8px;
+.stats {
+  color: var(--lego-card-color);
+  margin-top: 17px;
+  transform: scale(150%);
 }
 
-.pollLight {
-  background: var(--lego-card-color);
+.notAnswered {
+  color: var(--color-white);
+  font-size: 30px;
+  font-weight: 900;
+  line-height: 45px;
 }
 
-.noVotes {
-  font-style: italic;
+.headerBar {
+  color: var(--lego-font-color);
+  background-color: var(--lego-card-color);
+  font-weight: 900;
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 80%;
+  height: 50px;
+  border-radius: 10px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
+  transform: translate(-50%, 50%);
 }
 
-.pollGraph {
-  animation: graph 1.2s cubic-bezier(41%, 80%, 40%, 94%);
-  background-color: var(--lego-red-color);
-  padding-left: 8px;
-  border-radius: 0 2px 2px 0;
-  font-style: italic;
-  font-weight: 300;
-  color: var(--color-white);
-  height: 30px;
+.contentWrapper {
+  overflow-y: hidden;
+  width: 100%;
+  transition: 0.5s height;
 }
 
-.fullGraph {
-  background-color: #e7e7e7;
-  width: 100%;
+.voteOptionsWrapper {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: fit-content;
 }
 
-html[data-theme='dark'] .fullGraph {
+.voteButton {
   color: var(--color-white);
-  background-color: var(--color-mono-gray-5);
-}
-
-html[data-theme='dark'] .pollGraph {
-  color: var(--color-black);
-}
-
-.pollGraph span {
-  vertical-align: middle;
-}
-
-@keyframes graph {
-  from {
-    width: 1px;
-  }
+  background: var(--lego-red);
+  font-weight: 500;
+  width: 90%;
+  height: 37px;
+  padding: 5px;
+  margin: 2px;
 
-  to {
-    width: 100%;
+  /* Override default components/Button property */
+  + .voteButton {
+    margin-left: 2px;
   }
 }
 
-.pollHeader {
-  border-radius: 8px;
-  margin-bottom: 20px;
-  margin-left: 20px;
-  font-size: 16px;
-  color: var(--lego-font-color);
-}
-
-.voteButton {
-  background: var(--lego-red-color);
-  color: var(--lego-color-gray-light);
-  border: 1px solid var(--border-gray);
+.voteOptions {
   width: 100%;
-  margin: 0 !important;
-  font-size: 15px;
-  max-width: 400px;
+  padding-top: 35px;
 }
 
-.voteButton:hover {
-  opacity: 0.8;
-}
-
-html[data-theme='dark'] .voteButton {
-  color: var(--color-dark-gray-3);
+.bottomInfoWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.moreOptionsLink {
-  justify-content: space-between;
+.totalVotesInfo {
+  display: flex;
 }
 
-.arrow {
-  margin-top: 9px;
-  cursor: pointer;
-
-  &:hover {
-    transform: scale(1.5);
-    color: var(--color-red-3);
-    transition: transform 0.2s;
-  }
+.resultsHiddenInfo {
+  font-style: italic;
 }
 
-.blurContainer {
-  display: none;
-  position: absolute;
-  justify-content: center;
+.pollTable {
   width: 100%;
-  height: 100%;
+  font-size: 14px;
 }
 
-.blurOverlay {
-  position: absolute;
-  z-index: 2;
-  color: var(--color-black);
-  margin-top: 25px;
+.pollTable tr {
+  width: 100%;
 }
 
-.optionWrapper:hover .blurContainer {
-  display: flex;
+.pollTable td {
+  border: 0;
+  padding: 5px;
 }
 
-.optionWrapper:hover .blurEffect {
-  filter: blur(3px);
-  pointer-events: none;
+.pollTable .textColumn {
+  text-align: right;
+  line-height: 16px;
+  word-wrap: break-word;
+  width: fit-content;
+  max-width: 200px;
+  padding-right: 13px;
+  border-right: 3px solid #c5c5c5;
 }
 
-.blurArrow {
-  margin-top: 40px;
+.pollTable .graphColumn {
+  width: auto;
+  min-width: 150px;
+  padding-left: 13px;
+  padding-right: 15px;
 }
 
-.alignItems {
+.fullGraph {
   display: flex;
-  justify-content: center;
+  background-color: var(--color-mono-gray-5);
+  color: #000;
+  word-wrap: break-word;
+  width: 100%;
 }
 
-.answered {
-  margin: 15px 0;
-  text-align: center;
-  font-weight: bold;
+.pollGraph {
+  background-color: var(--lego-red);
+  font-style: italic;
+  font-weight: 300;
+  color: var(--color-white);
+  height: 30px;
+  padding-left: 8px;
+  animation: graph 1.2s cubic-bezier(0.41, 0.8, 0.4, 0.94);
+  border-radius: 0 2px 2px 0;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
 }
 
-.bottomInfo {
-  display: flex;
-  justify-content: space-between;
+.bottomBar {
+  width: 100%;
+  height: 70px;
+  background-color: var(--lego-red);
 }
 
-.resultsHidden {
-  font-style: italic;
+.arrowUp,
+.arrowDown {
+  text-shadow: 0 2px 2px rgba(0, 0, 0, 25%);
+  transform: scale(250%);
+  color: var(--lego-card-color);
+  transition: 0.8s margin-bottom;
 }
 
-@media (--mobile-device) {
-  .blurContainer {
-    display: flex;
-  }
-
-  .blurEffect {
-    filter: blur(3px);
-    pointer-events: none;
-  }
+.arrowUp {
+  margin-bottom: 25px;
 }
+
+.arrowDown {
+  margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/app/components/Poll/index.js b/app/components/Poll/index.js
index e176624232..b75e3a08d1 100644
--- a/app/components/Poll/index.js
+++ b/app/components/Poll/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { Component } from 'react';
+import React, { useRef, useState } from 'react';
 import Button from 'app/components/Button';
 import styles from './Poll.css';
 import type { PollEntity, OptionEntity } from 'app/reducers/polls';
@@ -9,247 +9,225 @@ import { Link } from 'react-router-dom';
 import Icon from 'app/components/Icon';
 import { Flex } from 'app/components/Layout';
 import Tooltip from 'app/components/Tooltip';
-import cx from 'classnames';
 
 type Props = {
   poll: PollEntity,
   handleVote: (pollId: number, optionId: number) => Promise<*>,
   allowedToViewHiddenResults?: boolean,
   backgroundLight?: boolean,
-  truncate?: number,
   details?: boolean,
+  expanded?: boolean,
+  alwaysOpen?: boolean,
 };
 
 type OptionEntityRatio = OptionEntity & {
   ratio: number,
 };
 
-type State = {
-  truncateOptions: boolean,
-  shuffledOptions: Array<OptionEntityRatio>,
-  expanded: boolean,
+// As described in: https://stackoverflow.com/questions/13483430/how-to-make-rounded-percentages-add-up-to-100
+const perfectRatios = (
+  options: $ReadOnlyArray<OptionEntityRatio>
+): OptionEntityRatio[] => {
+  const off =
+    100 - options.reduce((a, option) => a + Math.floor(option.ratio), 0);
+  return sortBy<OptionEntityRatio>(
+    options,
+    (o: OptionEntityRatio) => Math.floor(o.ratio) - o.ratio
+  )
+    .map((option: OptionEntityRatio, index: number) => {
+      return {
+        ...option,
+        ratio: Math.floor(option.ratio) + (index < off ? 1 : 0),
+      };
+    })
+    .sort((a, b) => b.ratio - a.ratio);
 };
 
-class Poll extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    const options = this.optionsWithPerfectRatios(props.poll.options);
-    const shuffledOptions = this.shuffle(options);
-    if (props.truncate && options.length > props.truncate) {
-      this.state = {
-        truncateOptions: true,
-        shuffledOptions: shuffledOptions,
-        expanded: false,
-      };
-    } else {
-      this.state = {
-        truncateOptions: false,
-        shuffledOptions: shuffledOptions,
-        expanded: true,
-      };
-    }
+const optionsWithPerfectRatios = (options: Array<OptionEntity>) => {
+  const totalVotes = options.reduce((a, option) => a + option.votes, 0);
+  const ratios = options.map((option) => {
+    return { ...option, ratio: (option.votes / totalVotes) * 100 };
+  });
+  return perfectRatios(ratios);
+};
+
+const shuffle = (array: Array<OptionEntityRatio>) => {
+  const oldArray = array.slice(0);
+  const newArray = [];
+  for (let i = 0; i < array.length; i++) {
+    const randIndex = Math.floor(Math.random() * oldArray.length);
+    newArray[i] = oldArray[randIndex];
+    oldArray.splice(randIndex, 1);
   }
 
-  toggleTruncate = () => {
-    this.setState({
-      expanded: !this.state.expanded,
-    });
-  };
+  return newArray;
+};
 
-  optionsWithPerfectRatios = (options: Array<OptionEntity>) => {
-    const totalVotes = options.reduce((a, option) => a + option.votes, 0);
-    const ratios = options.map((option) => {
-      return { ...option, ratio: (option.votes / totalVotes) * 100 };
-    });
-    return this.perfectRatios(ratios);
-  };
+const Poll = ({
+  poll,
+  handleVote,
+  backgroundLight,
+  details,
+  allowedToViewHiddenResults,
+  alwaysOpen = false,
+  expanded = false,
+}: Props) => {
+  const { id, title, description, hasAnswered, totalVotes, resultsHidden } =
+    poll;
+  const options = optionsWithPerfectRatios(poll.options);
+  const shuffledOptions = shuffle(options);
+  const [isExpanded, setIsExpanded] = useState(expanded || alwaysOpen);
 
-  // As described in: https://stackoverflow.com/questions/13483430/how-to-make-rounded-percentages-add-up-to-100
-  perfectRatios = (
-    options: $ReadOnlyArray<OptionEntityRatio>
-  ): OptionEntityRatio[] => {
-    const off =
-      100 - options.reduce((a, option) => a + Math.floor(option.ratio), 0);
-    return sortBy<OptionEntityRatio>(
-      options,
-      (o: OptionEntityRatio) => Math.floor(o.ratio) - o.ratio
-    )
-      .map((option: OptionEntityRatio, index: number) => {
-        return {
-          ...option,
-          ratio: Math.floor(option.ratio) + (index < off ? 1 : 0),
-        };
-      })
-      .sort((a, b) => b.ratio - a.ratio);
+  const toggleTruncate = () => {
+    setIsExpanded(!isExpanded);
   };
 
-  shuffle = (array: Array<OptionEntityRatio>) => {
-    const oldArray = array.slice(0);
-    const newArray = [];
-    for (let i = 0; i < array.length; i++) {
-      const randIndex = Math.floor(Math.random() * oldArray.length);
-      newArray[i] = oldArray[randIndex];
-      oldArray.splice(randIndex, 1);
-    }
-
-    return newArray;
-  };
+  const optionsRef = useRef(null);
 
-  render() {
-    const {
-      poll,
-      handleVote,
-      backgroundLight,
-      details,
-      truncate,
-      allowedToViewHiddenResults,
-    } = this.props;
-    const { truncateOptions, expanded, shuffledOptions } = this.state;
-    const { id, title, description, hasAnswered, totalVotes, resultsHidden } =
-      poll;
-    const options = this.optionsWithPerfectRatios(this.props.poll.options);
-    const orderedOptions = hasAnswered ? options : shuffledOptions;
-    const optionsToShow = expanded
-      ? orderedOptions
-      : orderedOptions.slice(0, truncate);
-    const showResults = !resultsHidden || allowedToViewHiddenResults;
+  const orderedOptions = hasAnswered ? options : shuffledOptions;
+  const optionsToShow = isExpanded ? orderedOptions : orderedOptions;
+  const showResults = !resultsHidden || allowedToViewHiddenResults;
 
-    return (
-      <div className={cx(styles.poll, backgroundLight ? styles.pollLight : '')}>
-        <Flex>
-          <Link to={`/polls/${id}`} style={{ flex: 1 }}>
-            <Icon name="stats" />
-            <span className={styles.pollHeader}>{title}</span>
-          </Link>
-          <Tooltip content="Avstemningen er anonym." renderDirection="left">
-            <Icon
-              name="information-circle-outline"
-              size={20}
-              style={{ cursor: 'pointer' }}
-            />
-          </Tooltip>
-        </Flex>
-        {details && (
-          <div>
-            <p>{description}</p>
-          </div>
+  return (
+    <Flex alignItems="center" column className={styles.poll}>
+      <Flex justifyContent="center" className={styles.topBar}>
+        {hasAnswered ? (
+          <Icon name="stats" className={styles.stats} />
+        ) : (
+          <div className={styles.notAnswered}>?</div>
         )}
-        {hasAnswered && !showResults && (
-          <div className={styles.answered}>
-            Du har svart
-            <Icon
-              name="checkmark-circle-outline"
-              size={20}
-              style={{ marginLeft: '10px', color: 'green' }}
-            />
-          </div>
-        )}
-        {hasAnswered && showResults && (
-          <Flex column className={styles.optionWrapper}>
-            <table className={styles.pollTable}>
-              <tbody>
-                {optionsToShow.map(({ id, name, votes, ratio }) => {
-                  return (
-                    <tr key={id}>
-                      <td className={styles.textColumn}>{name}</td>
-                      <td className={styles.graphColumn}>
-                        {votes === 0 ? (
-                          <span className={styles.noVotes}>Ingen stemmer</span>
-                        ) : (
-                          <div className={styles.fullGraph}>
-                            <div
-                              style={{
-                                width: `${ratio}%`,
-                              }}
-                            >
-                              <div className={styles.pollGraph}>
-                                {ratio >= 18 && <span>{`${ratio}%`}</span>}
-                              </div>
-                            </div>
-                            {ratio < 18 && (
-                              <span style={{ marginLeft: '2px' }}>
-                                {`${ratio}%`}
-                              </span>
-                            )}
-                          </div>
-                        )}
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-            {resultsHidden && (
-              <p style={{ fontStyle: 'italic', marginTop: 15 }}>
-                Resultatet er skjult for vanlige brukere.
-              </p>
+        <Link to={`/polls/${id}`}>
+          <Flex
+            justifyContent="center"
+            alignItems="center"
+            className={styles.headerBar}
+          >
+            {!details && description.length !== 0 ? (
+              <Tooltip content="Trykk for mer info" renderDirection="right">
+                {title}
+              </Tooltip>
+            ) : (
+              <> {title} </>
             )}
           </Flex>
-        )}
-        {!hasAnswered && (
-          <Flex column className={styles.optionWrapper}>
-            {!expanded && (
-              <Flex
-                className={styles.blurContainer}
-                onClick={this.toggleTruncate}
-              >
-                <p className={styles.blurOverlay}>
-                  Klikk her for å se alle alternativene.
-                </p>
-                <Icon
-                  className={cx(styles.blurOverlay, styles.blurArrow)}
-                  size={60}
-                  name={expanded ? 'arrow-up' : 'arrow-down'}
-                />
-              </Flex>
-            )}
-            {options &&
-              optionsToShow.map((option) => (
-                <Flex
-                  className={cx(
-                    styles.alignItems,
-                    expanded ? '' : styles.blurEffect
-                  )}
-                  key={option.id}
-                >
+        </Link>
+      </Flex>
+      <Flex
+        column
+        alignItems="center"
+        className={styles.contentWrapper}
+        style={{
+          height:
+            isExpanded && optionsRef.current
+              ? `${optionsRef.current.clientHeight}px`
+              : '0',
+        }}
+      >
+        <div className={styles.voteOptionsWrapper} ref={optionsRef}>
+          {!hasAnswered && (
+            <Flex column alignItems="center" className={styles.voteOptions}>
+              {details && description}
+              {options &&
+                optionsToShow.map((option) => (
                   <Button
+                    key={option.id}
                     className={styles.voteButton}
                     onClick={() => handleVote(poll.id, option.id)}
                   >
                     {option.name}
                   </Button>
-                </Flex>
-              ))}
-          </Flex>
-        )}
-        <div>
-          <div className={styles.moreOptionsLink}>
-            {truncateOptions &&
-              (!hasAnswered ||
-                !resultsHidden ||
-                allowedToViewHiddenResults) && (
-                <div className={styles.alignItems}>
-                  <Icon
-                    onClick={this.toggleTruncate}
-                    className={styles.arrow}
-                    size={20}
-                    name={expanded ? 'arrow-up' : 'arrow-down'}
-                  />
-                </div>
-              )}
-          </div>
-          <div className={styles.bottomInfo}>
-            <span>{`Stemmer: ${totalVotes}`}</span>
-            {hasAnswered && !showResults && (
-              <span className={styles.resultsHidden}>
-                Resultatet er skjult.
-              </span>
+                ))}
+            </Flex>
+          )}
+          {hasAnswered && !showResults && (
+            <Flex column alignItems="center" className={styles.voteOptions}>
+              {details && description}
+              <div className={styles.resultsHiddenInfo}>
+                Resultatet er skjult
+              </div>
+            </Flex>
+          )}
+          {hasAnswered && showResults && (
+            <Flex column alignItems="center" className={styles.voteOptions}>
+              {details && description}
+              <table className={styles.pollTable}>
+                <tbody>
+                  {optionsToShow.map(({ id, name, votes, ratio }) => {
+                    return (
+                      <tr key={id}>
+                        <td className={styles.textColumn}>{name}</td>
+                        <td className={styles.graphColumn}>
+                          {votes === 0 ? (
+                            <span className={styles.noVotes}>
+                              Ingen stemmer
+                            </span>
+                          ) : (
+                            <div className={styles.fullGraph}>
+                              <div
+                                style={{
+                                  width: `${ratio}%`,
+                                }}
+                              >
+                                <div className={styles.pollGraph}>
+                                  {ratio >= 18 && <span>{`${ratio}%`}</span>}
+                                </div>
+                              </div>
+                              {ratio < 18 && (
+                                <span style={{ marginLeft: '2px' }}>
+                                  {`${ratio}%`}
+                                </span>
+                              )}
+                            </div>
+                          )}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </Flex>
+          )}
+          <div className={styles.bottomInfoWrapper}>
+            <div className={styles.totalVotesInfo}>
+              <Tooltip
+                content="Avstemningen er anonym."
+                renderDirection="right"
+              >
+                <Icon
+                  name="information-circle-outline"
+                  size={17}
+                  style={{ cursor: 'pointer', margin: '0 5px' }}
+                />
+              </Tooltip>
+              Stemmer: {totalVotes}
+            </div>
+            {resultsHidden && (
+              <div className={styles.resultsHiddenInfo}>
+                Resultatet er skjult for vanlige brukere.
+              </div>
             )}
           </div>
         </div>
-      </div>
-    );
-  }
-}
+      </Flex>
+      <Flex
+        alignItems="flex-end"
+        justifyContent="center"
+        className={styles.bottomBar}
+        style={{ cursor: !alwaysOpen ? 'pointer' : null }}
+        onClick={!alwaysOpen ? toggleTruncate : null}
+      >
+        {!alwaysOpen ? (
+          <Icon
+            className={isExpanded ? styles.arrowUp : styles.arrowDown}
+            size={20}
+            name={isExpanded ? 'arrow-up' : 'arrow-down'}
+          />
+        ) : (
+          <Icon className={styles.arrowUp} name="remove" />
+        )}
+      </Flex>
+    </Flex>
+  );
+};
 
 export default Poll;
diff --git a/app/routes/polls/components/PollDetail.js b/app/routes/polls/components/PollDetail.js
index 168f518f3a..1f310f4ab0 100644
--- a/app/routes/polls/components/PollDetail.js
+++ b/app/routes/polls/components/PollDetail.js
@@ -52,6 +52,7 @@ class PollDetail extends Component<Props, State> {
             handleVote={this.props.votePoll}
             allowedToViewHiddenResults={this.props.actionGrant.includes('edit')}
             details
+            alwaysOpen
           />
         )}
         {this.state.editing && (
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 65a1539c86..cbe6cef125 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -113,7 +113,7 @@
   --lego-red: #c0392b;
   --lego-max-width: 1100px;
   --lego-default-padding: 2rem;
-  --lego-card-color: #262626;
+  --lego-card-color: #262626; /* TODO: use placard-color instead of card-color on Poll.css  */
   --lego-footer-color: #e21617;
   --lego-dark-red-color: #b21c17;
   --lego-red-color: #c0392b;