Merge branch 'develop' into feature/ddw-262-tooltip-promoting-passwor…

…d-managers
input-output-hk · Jul 20, 2020 · 1bf61d0 · 1bf61d0
2 parents 86b41e8 + 8cf8520
commit 1bf61d0
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 Changelog
 =========
 
+## vNext
+
+### Features
+
+- Added UX improvements for the display of stake pool ID ([PR 2074](https://github.com/input-output-hk/daedalus/pull/2074))
+
 ## 1.3.0-STN2
 
 ### Features

diff --git a/source/renderer/app/assets/images/clipboard-small-ic.inline.svg b/source/renderer/app/assets/images/clipboard-small-ic.inline.svg
diff --git a/source/renderer/app/components/staking/widgets/TooltipPool-copyId-tooltip.scss b/source/renderer/app/components/staking/widgets/TooltipPool-copyId-tooltip.scss
@@ -0,0 +1,19 @@
+.root {
+  .bubble {
+    margin-left: 77px;
+    top: -8px;
+    transition: opacity 0.25s;
+    transition-delay: 0s;
+    span[data-bubble-arrow='true'] {
+      &:before,
+      &:after {
+        margin-left: 45px;
+      }
+    }
+  }
+  &:hover {
+    .bubble {
+      transition-delay: 0.25s;
+    }
+  }
+}
diff --git a/source/renderer/app/components/staking/widgets/TooltipPool.js b/source/renderer/app/components/staking/widgets/TooltipPool.js
@@ -5,6 +5,7 @@ import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { Tooltip } from 'react-polymorph/lib/components/Tooltip';
 import { TooltipSkin } from 'react-polymorph/lib/skins/simple/TooltipSkin';
+import CopyToClipboard from 'react-copy-to-clipboard';
 import classnames from 'classnames';
 import { capitalize } from 'lodash';
 import moment from 'moment';
@@ -14,12 +15,18 @@ import { Link } from 'react-polymorph/lib/components/Link';
 import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
 import styles from './TooltipPool.scss';
 import experimentalTooltipStyles from './TooltipPool-experimental-tooltip.scss';
+import isTooltipStyles from './TooltipPool-copyId-tooltip.scss';
 import StakePool from '../../../domains/StakePool';
 import closeCross from '../../../assets/images/close-cross.inline.svg';
 import experimentalIcon from '../../../assets/images/experiment-icon.inline.svg';
+import copyIcon from '../../../assets/images/clipboard-small-ic.inline.svg';
+import copyCheckmarkIcon from '../../../assets/images/check-w.inline.svg';
 import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
 import { formattedWalletAmount, shortNumber } from '../../../utils/formatters';
 import { rangeMap } from '../../../utils/numbers';
+import { ellipsis } from '../../../utils/strings';
+import { STAKE_POOL_ID_COPY_FEEDBACK } from '../../../config/timingConfig';
+
 import {
   THUMBNAIL_HEIGHT,
   THUMBNAIL_OFFSET_WIDTH,
@@ -67,11 +74,6 @@ const messages = defineMessages({
     defaultMessage: '!!!Saturation:',
     description: '"Saturation" for the Stake Pools Tooltip page.',
   },
-  // cost: {
-  //  id: 'staking.stakePools.tooltip.cost',
-  //  defaultMessage: '!!!Operating Costs:',
-  //  description: 'Cost" for the Stake Pools Tooltip page.',
-  // },
   pledge: {
     id: 'staking.stakePools.tooltip.pledge',
     defaultMessage: '!!!Pledge:',
@@ -88,6 +90,11 @@ const messages = defineMessages({
     defaultMessage: '!!!Experimental feature, data may be inaccurate.',
     description: 'Experimental tooltip label',
   },
+  copyIdTooltipLabel: {
+    id: 'staking.stakePools.tooltip.copyIdTooltipLabel',
+    defaultMessage: '!!!Copy the stake pool ID',
+    description: 'copyId tooltip label',
+  },
 });
 
 type Props = {
@@ -110,6 +117,7 @@ type State = {
   componentStyle: Object,
   arrowStyle: Object,
   colorBandStyle: Object,
+  idCopyFeedback: boolean,
 };
 
 @observer
@@ -121,12 +129,14 @@ export default class TooltipPool extends Component<Props, State> {
   tooltipClick: boolean = false;
   containerWidth: number = 0;
   containerHeight: number = 0;
+  idCopyFeedbackTimeout: TimeoutID;
 
   state = {
     componentStyle: {},
     arrowStyle: {},
     colorBandStyle: {},
     tooltipPosition: 'right',
+    idCopyFeedback: false,
   };
 
   componentDidMount() {
@@ -361,6 +371,20 @@ export default class TooltipPool extends Component<Props, State> {
     };
   };
 
+  onCopyId = () => {
+    clearTimeout(this.idCopyFeedbackTimeout);
+    this.setState({
+      idCopyFeedback: true,
+    });
+    this.idCopyFeedbackTimeout = setTimeout(() => {
+      this.setState({ idCopyFeedback: false });
+    }, STAKE_POOL_ID_COPY_FEEDBACK);
+  };
+
+  onIdMouseOut = () => {
+    this.setState({ idCopyFeedback: false });
+  };
+
   render() {
     const { isShelleyTestnet } = global;
     const { intl } = this.context;
@@ -380,6 +404,7 @@ export default class TooltipPool extends Component<Props, State> {
       arrowStyle,
       colorBandStyle,
       tooltipPosition,
+      idCopyFeedback,
     } = this.state;
 
     const {
@@ -421,6 +446,12 @@ export default class TooltipPool extends Component<Props, State> {
       styles[getSaturationColor(saturation)],
     ]);
 
+    const idCopyIcon = idCopyFeedback ? copyCheckmarkIcon : copyIcon;
+    const hoverContentStyles = classnames([
+      styles.hoverContent,
+      idCopyFeedback ? styles.checkIcon : styles.copyIcon,
+    ]);
+
     return (
       <div
         className={componentClassnames}
@@ -445,7 +476,26 @@ export default class TooltipPool extends Component<Props, State> {
               />
             </div>
           )}
-          <div className={styles.id}>{id}</div>
+          <div
+            className={styles.id}
+            onMouseOut={this.onIdMouseOut}
+            onBlur={() => {}}
+          >
+            <p className={styles.ellipsisContent}>{ellipsis(id, 20, 20)}</p>
+            <CopyToClipboard text={id} onCopy={this.onCopyId}>
+              <Tooltip
+                className={styles.idTooltip}
+                key="id"
+                themeOverrides={isTooltipStyles}
+                skin={TooltipSkin}
+                tip={intl.formatMessage(messages.copyIdTooltipLabel)}
+              >
+                <p className={hoverContentStyles}>
+                  {id} <SVGInline svg={idCopyIcon} />
+                </p>
+              </Tooltip>
+            </CopyToClipboard>
+          </div>
           <div className={styles.description}>{description}</div>
           <Link
             onClick={() => onOpenExternalLink(homepage)}

diff --git a/source/renderer/app/components/staking/widgets/TooltipPool.scss b/source/renderer/app/components/staking/widgets/TooltipPool.scss
@@ -177,13 +177,74 @@
 
 .id {
   color: var(--theme-staking-stake-pool-tooltip-text-color);
+  cursor: pointer;
   font-family: var(--font-medium);
   font-size: 10px;
+  height: 14px;
   line-height: 14px;
-  margin: -2px 0 6px;
-  opacity: 0.5;
+  margin: -8px 0 12px;
   padding: 3px 0;
   word-break: break-all;
+
+  .ellipsisContent {
+    opacity: 0.5;
+    overflow: hidden;
+    padding-top: 3px;
+    position: absolute;
+    transition: opacity 0s;
+    transition-delay: 0s;
+    white-space: nowrap;
+  }
+
+  .hoverContent {
+    background: var(--theme-staking-stake-pool-tooltip-id-background-color);
+    box-shadow: 1px 6px 6px var(--theme-staking-stake-pool-tooltip-id-shadow-1);
+    height: 20px;
+    left: 0;
+    margin-left: -20px;
+    opacity: 0;
+    padding: 3px 20px 5px;
+    position: absolute;
+    right: 0;
+    transition: opacity 0.25s, height 0.25s;
+    transition-delay: 0s;
+    user-select: none;
+    width: 280px;
+
+    svg {
+      margin-left: 3px;
+    }
+
+    &.copyIcon {
+      svg {
+        height: 9.5px;
+        width: 8px;
+        path {
+          fill: var(--theme-staking-stake-pool-tooltip-text-color);
+        }
+      }
+    }
+
+    &.checkIcon {
+      svg {
+        height: 8px;
+        width: auto;
+      }
+    }
+  }
+
+  &:hover {
+    .ellipsisContent {
+      opacity: 0;
+      transition-delay: 0.25s;
+    }
+    .hoverContent {
+      height: 36px;
+      opacity: 1;
+      transition: opacity 0s, height 0.25s;
+      transition-delay: 0.25s;
+    }
+  }
 }
 
 .name {

diff --git a/source/renderer/app/config/timingConfig.js b/source/renderer/app/config/timingConfig.js
@@ -22,3 +22,4 @@ export const COPY_STATE_DIRECTORY_PATH_NOTIFICATION_DURATION = 10; // unit: seco
 export const NEWS_POLL_INTERVAL = 30 * 60 * 1000; // 30 minutes | unit: milliseconds
 export const NEWS_POLL_INTERVAL_ON_ERROR = 1 * 60 * 1000; // 1 minute | unit: milliseconds
 export const NEWS_POLL_INTERVAL_ON_INCIDENT = 10 * 60 * 1000; // 10 minutes | unit: milliseconds
+export const STAKE_POOL_ID_COPY_FEEDBACK = 3000; // 1.5 second | unit: milliseconds