Merge branch 'develop' into chore/ddw-1069-update-readme-to-include-linking-steps

Author: shawnbusuttil

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Implemented hover tooltips for menu ([PR 2938](https://github.com/input-output-hk/daedalus/pull/2938))
 - Improved UI regarding the Hardware Wallet public key export error ([PR 2922](https://github.com/input-output-hk/daedalus/pull/2922))
 - Added ASCII name to token header when metadata name is missing ([PR 2904](https://github.com/input-output-hk/daedalus/pull/2904))
 - Improved IPC by reducing the amount of messages from periodic events ([PR 2892](https://github.com/input-output-hk/daedalus/pull/2892))

source/renderer/app/components/sidebar/SidebarCategory.messages.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  wallets: {
+    id: 'sidebar.categoryTooltip.wallets',
+    defaultMessage: '!!!Wallets',
+    description: 'Text for the tooltip of wallets category',
+  },
+  staking: {
+    id: 'sidebar.categoryTooltip.staking',
+    defaultMessage: '!!!Staking',
+    description: 'Text for the tooltip of staking category',
+  },
+  settings: {
+    id: 'sidebar.categoryTooltip.settings',
+    defaultMessage: '!!!Settings',
+    description: 'Text for the tooltip of settings category',
+  },
+  voting: {
+    id: 'sidebar.categoryTooltip.voting',
+    defaultMessage: '!!!Voting',
+    description: 'Text for the tooltip of voting category',
+  },
+});

source/renderer/app/components/sidebar/SidebarCategory.tsx

@@ -1,42 +1,53 @@
-import React, { Component } from 'react';
-// @ts-ignore ts-migrate(2305) FIXME: Module '"react"' has no exported member 'Node'.
-import type { Node } from 'react';
+import React from 'react';
 import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
 import { camelCase } from 'lodash';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
+import { injectIntl } from 'react-intl';
 import type { SidebarCategoryInfo } from '../../config/sidebarConfig';
 import styles from './SidebarCategory.scss';
+import { messages } from './SidebarCategory.messages';
+import type { Intl } from '../../types/i18nTypes';
+import { TOOLTIP_DELAY } from '../../config/timingConfig';
 
 type Props = {
   category: SidebarCategoryInfo;
+  intl: Intl;
   isActive: boolean;
   onClick: (...args: Array<any>) => any;
-  content?: Node;
+  content?: React.ReactNode;
 };
 
-@observer
-class SidebarCategory extends Component<Props> {
-  render() {
-    const { category, isActive, onClick, content } = this.props;
-    const { name, icon, route } = category;
-    const className = camelCase(name);
-    const componentStyles = classNames(
-      styles.component,
-      className,
-      styles[className],
-      {
-        [styles.active]: isActive,
-      }
-    );
-    const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
-    return (
+function SidebarCategory({
+  category,
+  intl,
+  isActive,
+  onClick,
+  content,
+}: Props) {
+  const { name, icon, route, tooltipTextId } = category;
+  const className = camelCase(name);
+  const componentStyles = classNames(
+    styles.component,
+    className,
+    styles[className],
+    isActive && styles.active
+  );
+  const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
+  return (
+    <PopOver
+      delay={TOOLTIP_DELAY}
+      offset={[0, -20]}
+      content={tooltipTextId && intl.formatMessage(messages[tooltipTextId])}
+      placement="bottom"
+    >
       <button className={componentStyles} onClick={() => onClick(route)}>
         <SVGInline svg={icon} className={iconClassName} />
         {content}
       </button>
-    );
-  }
+    </PopOver>
+  );
 }
 
-export default SidebarCategory;
+export default injectIntl(observer(SidebarCategory));

source/renderer/app/components/widgets/NewsFeedIcon.scss

@@ -3,28 +3,38 @@
   right: 29px;
   top: 20px;
 
-  &.notificationDot {
-    @extend .dot;
-
-    &:after {
-      background: var(
-        --theme-news-feed-icon-red-dot-background-color
-      ) !important;
-    }
-  }
-
-  &.updateDot {
-    @extend .dot;
-  }
-
-  .icon {
+  .button {
     border-radius: 50%;
     cursor: pointer;
     display: block;
     height: 44px;
     position: relative;
     width: 44px;
 
+    &:hover {
+      background-color: var(
+        --theme-news-feed-icon-toggle-hover-background-color
+      );
+    }
+
+    &.notificationDot {
+      @extend .dot;
+
+      &:after {
+        background: var(--theme-news-feed-icon-red-dot-background-color);
+      }
+    }
+
+    &.updateDot {
+      @extend .dot;
+
+      &:after {
+        background: var(--theme-news-feed-icon-green-dot-background-color);
+      }
+    }
+  }
+
+  .icon {
     svg {
       height: 22px;
       left: 11px;
@@ -36,18 +46,11 @@
         stroke: var(--theme-news-feed-icon-color);
       }
     }
-
-    &:hover {
-      background-color: var(
-        --theme-news-feed-icon-toggle-hover-background-color
-      );
-    }
   }
 }
 
 .dot {
   &:after {
-    background: var(--theme-news-feed-icon-green-dot-background-color);
     border-radius: 12.5px;
     content: '';
     display: block;
@@ -59,3 +62,7 @@
     width: 8px;
   }
 }
+
+.tooltip {
+  white-space: nowrap;
+}

source/renderer/app/components/widgets/NewsFeedIcon.tsx

@@ -1,33 +1,60 @@
-import React, { Component } from 'react';
+import React from 'react';
 import SVGInline from 'react-svg-inline';
 import classNames from 'classnames';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
+import { defineMessages, injectIntl } from 'react-intl';
 import newsFeedIcon from '../../assets/images/top-bar/news-feed-icon.inline.svg';
 import styles from './NewsFeedIcon.scss';
+import type { Intl } from '../../types/i18nTypes';
+import { TOOLTIP_DELAY } from '../../config/timingConfig';
 
 type Props = {
+  intl: Intl;
   onNewsFeedIconClick: (...args: Array<any>) => any;
   newsFeedIconClass?: string;
   hasNotification: boolean;
   hasUpdate: boolean;
 };
-export default class NewsFeedIcon extends Component<Props> {
-  render() {
-    const {
-      onNewsFeedIconClick,
-      newsFeedIconClass,
-      hasNotification,
-      hasUpdate,
-    } = this.props;
-    const componentClasses = classNames([
-      styles.component,
-      hasNotification && !hasUpdate ? styles.notificationDot : null,
-      hasUpdate ? styles.updateDot : null,
-      newsFeedIconClass,
-    ]);
-    return (
-      <button className={componentClasses} onClick={onNewsFeedIconClick}>
-        <SVGInline className={styles.icon} svg={newsFeedIcon} />
-      </button>
-    );
-  }
+
+const messages = defineMessages({
+  iconTooltip: {
+    id: 'news.newsfeed.iconTooltip',
+    defaultMessage: '!!!Newsfeed',
+    description: 'Newsfeed',
+  },
+});
+
+function NewsFeedIcon({
+  intl,
+  onNewsFeedIconClick,
+  newsFeedIconClass,
+  hasNotification,
+  hasUpdate,
+}: Props) {
+  const buttonClasses = classNames([
+    styles.button,
+    hasNotification && !hasUpdate && styles.notificationDot,
+    hasUpdate && styles.updateDot,
+    newsFeedIconClass,
+  ]);
+  return (
+    <div className={styles.component}>
+      <PopOver
+        appendTo="parent"
+        delay={TOOLTIP_DELAY}
+        offset={[0, 0]}
+        content={
+          <span className={styles.tooltip}>
+            {intl.formatMessage(messages.iconTooltip)}
+          </span>
+        }
+      >
+        <button className={buttonClasses} onClick={onNewsFeedIconClick}>
+          <SVGInline className={styles.icon} svg={newsFeedIcon} />
+        </button>
+      </PopOver>
+    </div>
+  );
 }
+
+export default injectIntl(NewsFeedIcon);

source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx

@@ -7,6 +7,7 @@ import { formattedNumber } from '../../utils/formatters';
 import spinnerIcon from '../../assets/images/top-bar/node-sync-spinner.inline.svg';
 import syncedIcon from '../../assets/images/top-bar/node-sync-synced.inline.svg';
 import styles from './NodeSyncStatusIcon.scss';
+import { TOOLTIP_DELAY } from '../../config/timingConfig';
 
 const messages = defineMessages({
   blocksSynced: {
@@ -32,13 +33,15 @@ export default class NodeSyncStatusIcon extends Component<Props> {
     const statusIcon = isSynced ? syncedIcon : spinnerIcon;
     const componentClasses = classNames([
       styles.component,
-      isSynced ? null : styles.syncing,
-      hasTadaIcon ? styles.hasTadaIcon : null,
+      !isSynced && styles.syncing,
+      hasTadaIcon && styles.hasTadaIcon,
     ]);
     const percentage = syncPercentage.toFixed(syncPercentage === 100 ? 0 : 2);
     return (
       <div className={componentClasses}>
         <PopOver
+          delay={TOOLTIP_DELAY}
+          offset={[0, 10]}
           content={intl.formatMessage(messages.blocksSynced, {
             percentage: formattedNumber(percentage),
           })}

source/renderer/app/config/sidebarConfig.ts

@@ -18,12 +18,14 @@ export type SidebarCategoryInfo = {
   name: string;
   icon: string;
   route: string;
+  tooltipTextId?: string;
 };
 export const CATEGORIES_BY_NAME = {
   WALLETS: {
     name: 'WALLETS',
     icon: walletsIcon,
     route: ROUTES.WALLETS.ROOT,
+    tooltipTextId: 'wallets',
   },
   PAPER_WALLET_CREATE_CERTIFICATE: {
     name: 'PAPER_WALLET_CREATE_CERTIFICATE',
@@ -34,16 +36,19 @@ export const CATEGORIES_BY_NAME = {
     name: 'STAKING_DELEGATION_COUNTDOWN',
     icon: delegationIcon,
     route: ROUTES.STAKING.COUNTDOWN,
+    tooltipTextId: 'staking',
   },
   STAKING: {
     name: 'STAKING',
     icon: delegationProgressIcon,
     route: ROUTES.STAKING.ROOT,
+    tooltipTextId: 'staking',
   },
   SETTINGS: {
     name: 'SETTINGS',
     icon: settingsIcon,
     route: ROUTES.SETTINGS.ROOT,
+    tooltipTextId: 'settings',
   },
   NETWORK_INFO: {
     name: 'NETWORK_INFO',
@@ -54,6 +59,7 @@ export const CATEGORIES_BY_NAME = {
     name: 'VOTING',
     icon: votingIcon,
     route: ROUTES.VOTING.REGISTRATION,
+    tooltipTextId: 'voting',
   },
 };
 export const CATEGORIES_WITH_DELEGATION_COUNTDOWN = [

source/renderer/app/config/timingConfig.ts

@@ -41,3 +41,5 @@ export const ASSET_TOKEN_DISPLAY_DELAY = 250; // .25 second | unit: milliseconds
 export const DECENTRALIZATION_LEVEL_POLLING_INTERVAL = 1 * 1000; // 1 second | unit: milliseconds
 
 export const TOGGLE_TOKEN_FAVORITE_TIMEOUT = 300; // .3 second | unit: milliseconds
+
+export const TOOLTIP_DELAY = [300, 0]; // [enter, leave] .3 second | unit: milliseconds

source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss

@@ -28,13 +28,9 @@
 }
 
 .popOverRoot {
-  pointer-events: all;
-  width: 210px;
-
-  .content {
-    font-family: var(--font-regular);
-    font-size: 14px;
+  width: 200px;
 
+  .popOverContent {
     b {
       font-family: var(--font-semibold);
     }