From e38ac11915f1ceb9e18f0591e6d212fb1bfe929b Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 9 Mar 2022 09:25:41 -0300 Subject: [PATCH 01/20] [DDW-923] Check if header is stuck --- .../staking/stake-pools/StakePoolsTable.scss | 8 +++-- .../staking/stake-pools/StakePoolsTable.tsx | 21 +++++++++++-- .../app/components/widgets/InView.tsx | 30 +++++++++++++++++++ 3 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 source/renderer/app/components/widgets/InView.tsx diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index b76685e13d..c227c34535 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -99,14 +99,18 @@ thead { background: var(--theme-bordered-box-background-color); border-radius: 4px 4px 0 0; - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); display: block; margin: -20px -20px 0; padding: 0 20px; position: sticky; top: 0; + transition: box-shadow 0.3s ease-in-out; z-index: 999; + &.isHeaderStuck { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); + } + tr { border: 0; display: flex; @@ -144,7 +148,7 @@ } } - tr { + tr:not(:last-child) { border-bottom: 1px solid var(--theme-staking-table-border-color); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index ca95bf4e2a..c60ef19fa2 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -10,6 +10,7 @@ import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; import { StakePoolsTableHeader } from './StakePoolsTableHeader'; import { StakePoolsTableBody } from './StakePoolsTableBody'; +import { InView } from '../../widgets/InView'; const messages = defineMessages({ tableHeaderRank: { @@ -152,11 +153,14 @@ type State = { isPreloading: boolean; stakePoolsOrder: string; stakePoolsSortBy: string; + isHeaderStuck: boolean; }; const initialState = { isPreloading: true, stakePoolsOrder: 'asc', stakePoolsSortBy: 'ranking', + isHeaderStuck: false, + isTest: true, }; @observer @@ -176,10 +180,11 @@ class StakePoolsTable extends Component { componentDidMount() { this._isMounted = true; setTimeout(() => { - if (this._isMounted) + if (this._isMounted) { this.setState({ isPreloading: false, }); + } }, 0); } @@ -215,11 +220,15 @@ class StakePoolsTable extends Component { listName, onSelect, selectedPoolId, - currentLocale, onTableHeaderMouseEnter, onTableHeaderMouseLeave, } = this.props; - const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state; + const { + isPreloading, + stakePoolsSortBy, + stakePoolsOrder, + isHeaderStuck, + } = this.state; const { intl } = this.context; const componentClasses = classNames([styles.component, listName]); if (stakePoolsList.length > PRELOADER_THRESHOLD && isPreloading) @@ -375,8 +384,14 @@ class StakePoolsTable extends Component {
{sortedStakePoolList.length > 0 && ( + + this.setState({ isHeaderStuck: !visible }) + } + /> diff --git a/source/renderer/app/components/widgets/InView.tsx b/source/renderer/app/components/widgets/InView.tsx new file mode 100644 index 0000000000..5623b70d2c --- /dev/null +++ b/source/renderer/app/components/widgets/InView.tsx @@ -0,0 +1,30 @@ +import React, { useRef, useCallback } from 'react'; + +type Props = { + onChange: (visible: boolean) => void; +}; + +export const InView = ({ onChange }: Props) => { + const elementRef = useRef(null); + const observerRef = useRef( + new IntersectionObserver((entries) => { + entries.forEach((entry) => { + onChange(entry.isIntersecting); + }); + }) + ); + + const setElementRef = useCallback((element) => { + if (elementRef.current) { + observerRef.current.unobserve(elementRef.current); + } + + if (element) { + observerRef.current.observe(element); + } + + elementRef.current = element; + }, []); + + return
; +}; From 6b3dfa59413e9f2992311157018e231a05b3e7b6 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Thu, 10 Mar 2022 20:22:13 -0300 Subject: [PATCH 02/20] [DDW-923] CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a4f3f2b7c3..5ddf146620 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Fixes +- Fixed stake pool list styling ([PR 2920](https://github.com/input-output-hk/daedalus/pull/2920)) - Fixed styling of the incentivized testnet rewards wallet dropdown ([PR 2907](https://github.com/input-output-hk/daedalus/pull/2907)) - Fix warning sign displayed when recommend decimals is zero ([PR 2905](https://github.com/input-output-hk/daedalus/pull/2905)) - Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) From 6eaf4aa2da125381c6e507e8ba22162dc2d0e78d Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Thu, 10 Mar 2022 20:22:30 -0300 Subject: [PATCH 03/20] [DDW-923] Missing translations --- .../app/i18n/locales/defaultMessages.json | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index ca037a45b1..68fac37f7d 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -6784,13 +6784,13 @@ "description": "Table header \"Rank\" label on stake pools list view page", "end": { "column": 3, - "line": 19 + "line": 20 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.rank", "start": { "column": 19, - "line": 15 + "line": 16 } }, { @@ -6798,13 +6798,13 @@ "description": "\"Rank\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 25 + "line": 26 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.rankingTooltip", "start": { "column": 26, - "line": 20 + "line": 21 } }, { @@ -6812,13 +6812,13 @@ "description": "Table header \"Ticker\" label on stake pools list view page", "end": { "column": 3, - "line": 30 + "line": 31 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.ticker", "start": { "column": 21, - "line": 26 + "line": 27 } }, { @@ -6826,13 +6826,13 @@ "description": "Table header \"Saturation\" label on stake pools list view page", "end": { "column": 3, - "line": 36 + "line": 37 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.saturation", "start": { "column": 25, - "line": 31 + "line": 32 } }, { @@ -6840,13 +6840,13 @@ "description": "\"Saturation\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 42 + "line": 43 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.saturationTooltip", "start": { "column": 32, - "line": 37 + "line": 38 } }, { @@ -6854,13 +6854,13 @@ "description": "Table header \"Performance\" label on stake pools list view page", "end": { "column": 3, - "line": 48 + "line": 49 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.performance", "start": { "column": 26, - "line": 43 + "line": 44 } }, { @@ -6868,13 +6868,13 @@ "description": "Table header \"Uptime\" label on stake pools list view page", "end": { "column": 3, - "line": 53 + "line": 54 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.uptime", "start": { "column": 21, - "line": 49 + "line": 50 } }, { @@ -6882,13 +6882,13 @@ "description": "Table header \"Margin\" label on stake pools list view page", "end": { "column": 3, - "line": 58 + "line": 59 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.margin", "start": { "column": 21, - "line": 54 + "line": 55 } }, { @@ -6896,13 +6896,13 @@ "description": "\"Pool margin\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 64 + "line": 65 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.profitMarginTooltip", "start": { "column": 28, - "line": 59 + "line": 60 } }, { @@ -6910,13 +6910,13 @@ "description": "Table header \"Roi\" label on stake pools list view page", "end": { "column": 3, - "line": 69 + "line": 70 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.roi", "start": { "column": 18, - "line": 65 + "line": 66 } }, { @@ -6924,13 +6924,13 @@ "description": "Table header \"Cost\" label on stake pools list view page", "end": { "column": 3, - "line": 74 + "line": 75 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.cost", "start": { "column": 19, - "line": 70 + "line": 71 } }, { @@ -6938,13 +6938,13 @@ "description": "\"Cost per epoch\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 80 + "line": 81 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.costPerEpochTooltip", "start": { "column": 26, - "line": 75 + "line": 76 } }, { @@ -6952,13 +6952,13 @@ "description": "Table header \"Produced Blocks\" label on stake pools list view page", "end": { "column": 3, - "line": 86 + "line": 87 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.producedBlocks", "start": { "column": 29, - "line": 81 + "line": 82 } }, { @@ -6966,13 +6966,13 @@ "description": "\"Blocks\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 92 + "line": 93 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.producedBlocksTooltip", "start": { "column": 36, - "line": 87 + "line": 88 } }, { @@ -6980,13 +6980,13 @@ "description": "Table header \"Potential rewards\" label on stake pools list view page", "end": { "column": 3, - "line": 98 + "line": 99 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.potentialRewards", "start": { "column": 31, - "line": 93 + "line": 94 } }, { @@ -6994,13 +6994,13 @@ "description": "\"Rewards\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 104 + "line": 105 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.potentialRewardsTooltip", "start": { "column": 38, - "line": 99 + "line": 100 } }, { @@ -7008,13 +7008,13 @@ "description": "Table header \"Pledge\" label on stake pools list view page", "end": { "column": 3, - "line": 109 + "line": 110 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.pledge", "start": { "column": 21, - "line": 105 + "line": 106 } }, { @@ -7022,13 +7022,13 @@ "description": "\"Pledge\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 115 + "line": 116 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.pledgeTooltip", "start": { "column": 28, - "line": 110 + "line": 111 } }, { @@ -7036,13 +7036,13 @@ "description": "Table header \"Retiring\" label on stake pools list view page", "end": { "column": 3, - "line": 120 + "line": 121 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.retiring", "start": { "column": 23, - "line": 116 + "line": 117 } } ], From 589e7aa40364d231e24fa18015046ea5477eb02d Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 11 Mar 2022 11:29:13 -0300 Subject: [PATCH 04/20] [DDW-923] Revert --- .../app/components/staking/stake-pools/StakePoolsTable.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index c60ef19fa2..6fc896560c 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -160,7 +160,6 @@ const initialState = { stakePoolsOrder: 'asc', stakePoolsSortBy: 'ranking', isHeaderStuck: false, - isTest: true, }; @observer @@ -180,11 +179,10 @@ class StakePoolsTable extends Component { componentDidMount() { this._isMounted = true; setTimeout(() => { - if (this._isMounted) { + if (this._isMounted) this.setState({ isPreloading: false, }); - } }, 0); } From 325c6c4279267829670c6835a69cf482925a0aaf Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Fri, 11 Mar 2022 13:59:30 -0300 Subject: [PATCH 05/20] [DDW-923] Refactor to only re-render header --- .../staking/stake-pools/StakePoolsTable.scss | 4 +- .../staking/stake-pools/StakePoolsTable.tsx | 51 +++++++++---------- .../app/components/widgets/InView.tsx | 28 +++++----- 3 files changed, 42 insertions(+), 41 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index c227c34535..a603d88c97 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -104,10 +104,10 @@ padding: 0 20px; position: sticky; top: 0; - transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.1s ease-in-out; z-index: 999; - &.isHeaderStuck { + &.headerStuck { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 6fc896560c..0fba8c5749 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -153,13 +153,11 @@ type State = { isPreloading: boolean; stakePoolsOrder: string; stakePoolsSortBy: string; - isHeaderStuck: boolean; }; const initialState = { isPreloading: true, stakePoolsOrder: 'asc', stakePoolsSortBy: 'ranking', - isHeaderStuck: false, }; @observer @@ -221,12 +219,7 @@ class StakePoolsTable extends Component { onTableHeaderMouseEnter, onTableHeaderMouseLeave, } = this.props; - const { - isPreloading, - stakePoolsSortBy, - stakePoolsOrder, - isHeaderStuck, - } = this.state; + const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state; const { intl } = this.context; const componentClasses = classNames([styles.component, listName]); if (stakePoolsList.length > PRELOADER_THRESHOLD && isPreloading) @@ -377,31 +370,35 @@ class StakePoolsTable extends Component { title: intl.formatMessage(messages.tableHeaderRetiring), }, ]; + return (
{sortedStakePoolList.length > 0 && ( - - this.setState({ isHeaderStuck: !visible }) - } - />
- - - - - + + {({ isInViewport, setTargetRef }) => ( + <> + + + + + + + )} + + void; + children: (props: { + isInViewport: boolean; + setTargetRef: (target: HTMLElement) => void; + }) => JSX.Element; }; -export const InView = ({ onChange }: Props) => { - const elementRef = useRef(null); +export const InView = ({ children }: Props) => { + const [isInViewport, setIsInViewport] = useState(true); + const targetRef = useRef(null); const observerRef = useRef( new IntersectionObserver((entries) => { entries.forEach((entry) => { - onChange(entry.isIntersecting); + setIsInViewport(entry.isIntersecting); }); }) ); - const setElementRef = useCallback((element) => { - if (elementRef.current) { - observerRef.current.unobserve(elementRef.current); + const setTargetRef = useCallback((target: HTMLElement) => { + if (targetRef.current) { + observerRef.current.unobserve(targetRef.current); } - if (element) { - observerRef.current.observe(element); + if (target) { + observerRef.current.observe(target); } - elementRef.current = element; + targetRef.current = target; }, []); - return
; + return children({ isInViewport, setTargetRef }); }; From 6ed7106d279103e323e322d988587b85948deace Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Tue, 15 Mar 2022 09:35:59 -0300 Subject: [PATCH 06/20] [DDW-923] Hook refactor --- .../staking/stake-pools/StakePoolsTable.scss | 2 +- .../staking/stake-pools/StakePoolsTable.tsx | 31 ++----- .../stake-pools/StakePoolsTableHeader.tsx | 88 +++++++++++-------- .../app/components/widgets/InView.tsx | 11 +-- .../app/i18n/locales/defaultMessages.json | 76 ++++++++-------- 5 files changed, 101 insertions(+), 107 deletions(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index a603d88c97..8c6b0324c0 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -107,7 +107,7 @@ transition: box-shadow 0.1s ease-in-out; z-index: 999; - &.headerStuck { + &.stickyHeader { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 0fba8c5749..5384572053 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -10,7 +10,6 @@ import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; import { StakePoolsTableHeader } from './StakePoolsTableHeader'; import { StakePoolsTableBody } from './StakePoolsTableBody'; -import { InView } from '../../widgets/InView'; const messages = defineMessages({ tableHeaderRank: { @@ -377,28 +376,14 @@ class StakePoolsTable extends Component { {sortedStakePoolList.length > 0 && (
+
- - {({ isInViewport, setTargetRef }) => ( - <> - - - - - - - )} - - + ; stakePoolsSortBy: string; stakePoolsOrder: string; - onHandleSort: (...args: Array) => any; + onHandleSort: (newSortBy: string) => void; + onTableHeaderMouseEnter: () => void; + onTableHeaderMouseLeave: () => void; }; -@observer -class StakePoolsTableHeader extends Component { - render() { - const { - availableTableHeaders, - stakePoolsSortBy, - stakePoolsOrder, - onHandleSort, - } = this.props; - return map(availableTableHeaders, (tableHeader) => { - const isSorted = - tableHeader.name === stakePoolsSortBy || - (tableHeader.name === 'ticker' && stakePoolsSortBy === 'ticker'); - const defaultOrdering = defaultTableOrdering[tableHeader.name]; - const sortIconClasses = classNames([ - styles.sortIcon, - isSorted ? styles.sorted : null, - isSorted && styles[`${stakePoolsOrder}CurrentOrdering`], - styles[`${defaultOrdering}DefaultOrdering`], - ]); - return ( - - {tableHeader.title} - - - ); - }); + + {map(availableTableHeaders, (tableHeader) => { + const isSorted = + tableHeader.name === stakePoolsSortBy || + (tableHeader.name === 'ticker' && + stakePoolsSortBy === 'ticker'); + const defaultOrdering = defaultTableOrdering[tableHeader.name]; + const sortIconClasses = classNames([ + styles.sortIcon, + isSorted ? styles.sorted : null, + isSorted && styles[`${stakePoolsOrder}CurrentOrdering`], + styles[`${defaultOrdering}DefaultOrdering`], + ]); + return ( + + ); + })} + + + + ); } -} - -export { StakePoolsTableHeader }; +); diff --git a/source/renderer/app/components/widgets/InView.tsx b/source/renderer/app/components/widgets/InView.tsx index 0b24ed2902..dca99008e6 100644 --- a/source/renderer/app/components/widgets/InView.tsx +++ b/source/renderer/app/components/widgets/InView.tsx @@ -1,13 +1,6 @@ import { useRef, useState, useCallback } from 'react'; -type Props = { - children: (props: { - isInViewport: boolean; - setTargetRef: (target: HTMLElement) => void; - }) => JSX.Element; -}; - -export const InView = ({ children }: Props) => { +export const useInViewPort = () => { const [isInViewport, setIsInViewport] = useState(true); const targetRef = useRef(null); const observerRef = useRef( @@ -30,5 +23,5 @@ export const InView = ({ children }: Props) => { targetRef.current = target; }, []); - return children({ isInViewport, setTargetRef }); + return { isInViewport, setTargetRef }; }; diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index 68fac37f7d..ca037a45b1 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -6784,13 +6784,13 @@ "description": "Table header \"Rank\" label on stake pools list view page", "end": { "column": 3, - "line": 20 + "line": 19 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.rank", "start": { "column": 19, - "line": 16 + "line": 15 } }, { @@ -6798,13 +6798,13 @@ "description": "\"Rank\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 26 + "line": 25 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.rankingTooltip", "start": { "column": 26, - "line": 21 + "line": 20 } }, { @@ -6812,13 +6812,13 @@ "description": "Table header \"Ticker\" label on stake pools list view page", "end": { "column": 3, - "line": 31 + "line": 30 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.ticker", "start": { "column": 21, - "line": 27 + "line": 26 } }, { @@ -6826,13 +6826,13 @@ "description": "Table header \"Saturation\" label on stake pools list view page", "end": { "column": 3, - "line": 37 + "line": 36 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.saturation", "start": { "column": 25, - "line": 32 + "line": 31 } }, { @@ -6840,13 +6840,13 @@ "description": "\"Saturation\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 43 + "line": 42 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.saturationTooltip", "start": { "column": 32, - "line": 38 + "line": 37 } }, { @@ -6854,13 +6854,13 @@ "description": "Table header \"Performance\" label on stake pools list view page", "end": { "column": 3, - "line": 49 + "line": 48 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.performance", "start": { "column": 26, - "line": 44 + "line": 43 } }, { @@ -6868,13 +6868,13 @@ "description": "Table header \"Uptime\" label on stake pools list view page", "end": { "column": 3, - "line": 54 + "line": 53 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.uptime", "start": { "column": 21, - "line": 50 + "line": 49 } }, { @@ -6882,13 +6882,13 @@ "description": "Table header \"Margin\" label on stake pools list view page", "end": { "column": 3, - "line": 59 + "line": 58 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.margin", "start": { "column": 21, - "line": 55 + "line": 54 } }, { @@ -6896,13 +6896,13 @@ "description": "\"Pool margin\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 65 + "line": 64 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.profitMarginTooltip", "start": { "column": 28, - "line": 60 + "line": 59 } }, { @@ -6910,13 +6910,13 @@ "description": "Table header \"Roi\" label on stake pools list view page", "end": { "column": 3, - "line": 70 + "line": 69 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.roi", "start": { "column": 18, - "line": 66 + "line": 65 } }, { @@ -6924,13 +6924,13 @@ "description": "Table header \"Cost\" label on stake pools list view page", "end": { "column": 3, - "line": 75 + "line": 74 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.cost", "start": { "column": 19, - "line": 71 + "line": 70 } }, { @@ -6938,13 +6938,13 @@ "description": "\"Cost per epoch\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 81 + "line": 80 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.costPerEpochTooltip", "start": { "column": 26, - "line": 76 + "line": 75 } }, { @@ -6952,13 +6952,13 @@ "description": "Table header \"Produced Blocks\" label on stake pools list view page", "end": { "column": 3, - "line": 87 + "line": 86 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.producedBlocks", "start": { "column": 29, - "line": 82 + "line": 81 } }, { @@ -6966,13 +6966,13 @@ "description": "\"Blocks\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 93 + "line": 92 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.producedBlocksTooltip", "start": { "column": 36, - "line": 88 + "line": 87 } }, { @@ -6980,13 +6980,13 @@ "description": "Table header \"Potential rewards\" label on stake pools list view page", "end": { "column": 3, - "line": 99 + "line": 98 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.potentialRewards", "start": { "column": 31, - "line": 94 + "line": 93 } }, { @@ -6994,13 +6994,13 @@ "description": "\"Rewards\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 105 + "line": 104 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.potentialRewardsTooltip", "start": { "column": 38, - "line": 100 + "line": 99 } }, { @@ -7008,13 +7008,13 @@ "description": "Table header \"Pledge\" label on stake pools list view page", "end": { "column": 3, - "line": 110 + "line": 109 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.pledge", "start": { "column": 21, - "line": 106 + "line": 105 } }, { @@ -7022,13 +7022,13 @@ "description": "\"Pledge\" tooltip for the Stake Pools Table.", "end": { "column": 3, - "line": 116 + "line": 115 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tooltip.pledgeTooltip", "start": { "column": 28, - "line": 111 + "line": 110 } }, { @@ -7036,13 +7036,13 @@ "description": "Table header \"Retiring\" label on stake pools list view page", "end": { "column": 3, - "line": 121 + "line": 120 }, "file": "source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx", "id": "staking.stakePools.tableHeader.retiring", "start": { "column": 23, - "line": 117 + "line": 116 } } ], From 8353b61a862c328e0b4715c07d516f181fbd95fa Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Tue, 29 Mar 2022 16:53:51 -0300 Subject: [PATCH 07/20] [DDW-1028] Add tooltips --- .../sidebar/SidebarCategory.messages.ts | 24 +++++ .../components/sidebar/SidebarCategory.tsx | 52 ++++++---- .../app/components/widgets/NewsFeedIcon.scss | 20 ++-- .../app/components/widgets/NewsFeedIcon.tsx | 68 +++++++++---- .../components/widgets/NodeSyncStatusIcon.tsx | 2 + source/renderer/app/config/sidebarConfig.ts | 5 + .../DiscreetToggleTopBar.messages.ts | 9 +- .../DiscreetToggleTopBar.scss | 14 +-- .../DiscreetToggleTopBar.tsx | 19 ++-- .../app/i18n/locales/defaultMessages.json | 98 ++++++++++++++++--- source/renderer/app/i18n/locales/en-US.json | 10 +- source/renderer/app/i18n/locales/ja-JP.json | 10 +- 12 files changed, 230 insertions(+), 101 deletions(-) create mode 100644 source/renderer/app/components/sidebar/SidebarCategory.messages.ts diff --git a/source/renderer/app/components/sidebar/SidebarCategory.messages.ts b/source/renderer/app/components/sidebar/SidebarCategory.messages.ts new file mode 100644 index 0000000000..8e683e9616 --- /dev/null +++ b/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', + }, +}); diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx index a4412b1cde..69c8971615 100644 --- a/source/renderer/app/components/sidebar/SidebarCategory.tsx +++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx @@ -5,38 +5,52 @@ 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'; type Props = { category: SidebarCategoryInfo; + intl: Intl; isActive: boolean; onClick: (...args: Array) => any; content?: Node; }; -@observer -class SidebarCategory extends Component { - 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], + { + [styles.active]: isActive, + } + ); + const iconClassName = classNames(styles.icon, styles[`${className}Icon`]); + return ( + - ); - } + + ); } -export default SidebarCategory; +export default injectIntl(observer(SidebarCategory)); diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss index d737e47e72..62b380dfbd 100644 --- a/source/renderer/app/components/widgets/NewsFeedIcon.scss +++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss @@ -17,7 +17,7 @@ @extend .dot; } - .icon { + .button { border-radius: 50%; cursor: pointer; display: block; @@ -25,6 +25,14 @@ position: relative; width: 44px; + &:hover { + background-color: var( + --theme-news-feed-icon-toggle-hover-background-color + ); + } + } + + .icon { svg { height: 22px; left: 11px; @@ -36,12 +44,6 @@ stroke: var(--theme-news-feed-icon-color); } } - - &:hover { - background-color: var( - --theme-news-feed-icon-toggle-hover-background-color - ); - } } } @@ -59,3 +61,7 @@ width: 8px; } } + +.tooltip { + white-space: nowrap; +} diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.tsx b/source/renderer/app/components/widgets/NewsFeedIcon.tsx index 70f9f971ee..b627066fde 100644 --- a/source/renderer/app/components/widgets/NewsFeedIcon.tsx +++ b/source/renderer/app/components/widgets/NewsFeedIcon.tsx @@ -1,33 +1,59 @@ -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'; type Props = { + intl: Intl; onNewsFeedIconClick: (...args: Array) => any; newsFeedIconClass?: string; hasNotification: boolean; hasUpdate: boolean; }; -export default class NewsFeedIcon extends Component { - render() { - const { - onNewsFeedIconClick, - newsFeedIconClass, - hasNotification, - hasUpdate, - } = this.props; - const componentClasses = classNames([ - styles.component, - hasNotification && !hasUpdate ? styles.notificationDot : null, - hasUpdate ? styles.updateDot : null, - newsFeedIconClass, - ]); - return ( - - ); - } + +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 : null, + hasUpdate ? styles.updateDot : null, + newsFeedIconClass, + ]); + return ( +
+ + {intl.formatMessage(messages.iconTooltip)} + + } + > + + +
+ ); } + +export default injectIntl(NewsFeedIcon); diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx index f60a313d46..0695b6f19b 100644 --- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx +++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx @@ -39,6 +39,8 @@ export default class NodeSyncStatusIcon extends Component { return (
Settings.', - description: 'Text for the tooltip on "discreet mode" button description', - }, }); diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss index 6e7e5d9676..099d541431 100644 --- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss +++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss @@ -27,16 +27,6 @@ } } -.popOverRoot { - pointer-events: all; - width: 210px; - - .content { - font-family: var(--font-regular); - font-size: 14px; - - b { - font-family: var(--font-semibold); - } - } +.tooltip { + white-space: nowrap; } diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx index 838e8aacec..81936e8fbe 100644 --- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx +++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; import classnames from 'classnames'; import { observer } from 'mobx-react'; import { PopOver } from 'react-polymorph/lib/components/PopOver'; -import { injectIntl, FormattedHTMLMessage } from 'react-intl'; +import { injectIntl } from 'react-intl'; import styles from './DiscreetToggleTopBar.scss'; import { messages } from './DiscreetToggleTopBar.messages'; import { useDiscreetModeFeature } from '../../context'; @@ -16,22 +16,15 @@ type Props = { const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => { const { isDiscreetMode, toggleDiscreetMode } = useDiscreetModeFeature(); - const [visible, setVisible] = useState(false); return ( -
setVisible(true)} - onMouseLeave={() => setVisible(false)} - > +
+ {intl.formatMessage(messages[isDiscreetMode ? 'off' : 'on'])} - {` `} - } > diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index ca037a45b1..1c2ef145bc 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -3789,6 +3789,67 @@ ], "path": "source/renderer/app/components/settings/menu/SettingsMenu.messages.json" }, + { + "descriptors": [ + { + "defaultMessage": "!!!Wallets", + "description": "Text for the tooltip of wallets category", + "end": { + "column": 3, + "line": 8 + }, + "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts", + "id": "sidebar.categoryTooltip.wallets", + "start": { + "column": 11, + "line": 4 + } + }, + { + "defaultMessage": "!!!Staking", + "description": "Text for the tooltip of staking category", + "end": { + "column": 3, + "line": 13 + }, + "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts", + "id": "sidebar.categoryTooltip.staking", + "start": { + "column": 11, + "line": 9 + } + }, + { + "defaultMessage": "!!!Settings", + "description": "Text for the tooltip of settings category", + "end": { + "column": 3, + "line": 18 + }, + "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts", + "id": "sidebar.categoryTooltip.settings", + "start": { + "column": 12, + "line": 14 + } + }, + { + "defaultMessage": "!!!Voting", + "description": "Text for the tooltip of voting category", + "end": { + "column": 3, + "line": 23 + }, + "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts", + "id": "sidebar.categoryTooltip.voting", + "start": { + "column": 10, + "line": 19 + } + } + ], + "path": "source/renderer/app/components/sidebar/SidebarCategory.messages.json" + }, { "descriptors": [ { @@ -17670,6 +17731,25 @@ ], "path": "source/renderer/app/components/widgets/forms/ProfileSettingsForm.json" }, + { + "descriptors": [ + { + "defaultMessage": "!!!Newsfeed", + "description": "Newsfeed", + "end": { + "column": 3, + "line": 23 + }, + "file": "source/renderer/app/components/widgets/NewsFeedIcon.tsx", + "id": "news.newsfeed.iconTooltip", + "start": { + "column": 15, + "line": 19 + } + } + ], + "path": "source/renderer/app/components/widgets/NewsFeedIcon.json" + }, { "descriptors": [ { @@ -18401,7 +18481,7 @@ { "descriptors": [ { - "defaultMessage": "!!!Toggle discreet mode on.", + "defaultMessage": "!!!Toggle discreet mode on", "description": "Text for the tooltip on \"discreet mode\" button when mode is on", "end": { "column": 3, @@ -18415,7 +18495,7 @@ } }, { - "defaultMessage": "!!!Toggle discreet mode off.", + "defaultMessage": "!!!Toggle discreet mode off", "description": "Text for the tooltip on \"discreet mode\" button when mode is off", "end": { "column": 3, @@ -18427,20 +18507,6 @@ "column": 7, "line": 10 } - }, - { - "defaultMessage": "!!!You can toggle auto discreet mode in Settings.", - "description": "Text for the tooltip on \"discreet mode\" button description", - "end": { - "column": 3, - "line": 20 - }, - "file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts", - "id": "discreetMode.discreetToggle.description", - "start": { - "column": 15, - "line": 16 - } } ], "path": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.json" diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json index e62d0e2320..7e6f5e0aa3 100755 --- a/source/renderer/app/i18n/locales/en-US.json +++ b/source/renderer/app/i18n/locales/en-US.json @@ -147,9 +147,8 @@ "dapp.transaction.request.transactionFee.label": "Transaction fee", "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ Add wallet", "dapp.transaction.request.walletsDropdown.placeholder": "Select a wallet", - "discreetMode.discreetToggle.description": "You can toggle auto discreet mode in Settings.", - "discreetMode.discreetToggle.off": "Toggle discreet mode off.", - "discreetMode.discreetToggle.on": "Toggle discreet mode on.", + "discreetMode.discreetToggle.off": "Toggle discreet mode off", + "discreetMode.discreetToggle.on": "Toggle discreet mode on", "environment.apiName.cardano": "Cardano", "environment.currency.ada": "Ada", "environment.network.alonzo_purple": "Alonzo Purple", @@ -249,6 +248,7 @@ "loading.screen.validatingChunk": "Verifying on-disk blockchain state", "loading.screen.validatingChunkDescription": "Verifying the integrity of the blockchain calculating hashes", "news.newsfeed.empty": "Newsfeed is empty", + "news.newsfeed.iconTooltip": "Newsfeed", "news.newsfeed.noFetch": "Trying to fetch the newsfeed...", "news.newsfeed.title": "Newsfeed", "noDiskSpace.error.overlayContent": "Daedalus requires at least {diskSpaceRequired} of hard drive space to operate. Your computer is missing {diskSpaceMissing} of available space. Please delete some files to increase available hard drive space to continue using Daedalus.

It is recommended to have at least 15% of hard drive space available ({diskSpaceRecommended} in your case) for normal and stable operation of the operating system and installed programs. We strongly recommend that you free up at least that amount of space from your hard drive.", @@ -382,6 +382,10 @@ "settings.wallets.currency.poweredBy.label": "Powered by ", "settings.wallets.currency.selectLabel": "Select currency", "settings.wallets.currency.titleLabel": "Display ada balances in other currency", + "sidebar.categoryTooltip.settings": "Settings", + "sidebar.categoryTooltip.staking": "Staking", + "sidebar.categoryTooltip.voting": "Voting", + "sidebar.categoryTooltip.wallets": "Wallets", "sidebar.wallets.addWallet": "Add wallet", "sidebar.wallets.search.placeholder": "Filter", "sidebar.wallets.sortByBalanceButton": "Balance", diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json index 0221e1e76e..3610b11a88 100755 --- a/source/renderer/app/i18n/locales/ja-JP.json +++ b/source/renderer/app/i18n/locales/ja-JP.json @@ -147,9 +147,8 @@ "dapp.transaction.request.transactionFee.label": "トランザクション手数料", "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ ウォレット追加", "dapp.transaction.request.walletsDropdown.placeholder": "ウォレットを選択してください", - "discreetMode.discreetToggle.description": "設定で自動ディスクリートモードに切り替えられます。", - "discreetMode.discreetToggle.off": "ディスクリートモードオフ.", - "discreetMode.discreetToggle.on": "ディスクリートモードオン.", + "discreetMode.discreetToggle.off": "ディスクリートモードオフ", + "discreetMode.discreetToggle.on": "ディスクリートモードオン", "environment.apiName.cardano": "Cardano", "environment.currency.ada": "ADA", "environment.network.alonzo_purple": "Alonzo Purple", @@ -249,6 +248,7 @@ "loading.screen.validatingChunk": "ディスクのブロックチェーンステータスの検証", "loading.screen.validatingChunkDescription": "ブロックチェーンのハッシュ計算の整合性を検証します", "news.newsfeed.empty": "Newsfeed is empty", + "news.newsfeed.iconTooltip": "ニュースフィード", "news.newsfeed.noFetch": "ニュースフィードを読み込んでいます...", "news.newsfeed.title": "ニュースフィード", "noDiskSpace.error.overlayContent": "Daedalusを動作させるには、ハードディスクに{diskSpaceRequired}以上の空き容量が必要です。ご使用のコンピューターには空き容量が{diskSpaceMissing}不足しています。Daedalusのご利用を続けるためには、ファイルをいくつか削除して空き容量を増やしてください。

オペレーティングシステムとインストール済みプログラムを正常かつ安定した状態で動作させるには、ハードディスクに少なくとも15%（ご使用のコンピューターの場合は{diskSpaceRecommended}）の空き容量が必要です。ハードディスクにこれ以上の空き容量を確保してください。", @@ -382,6 +382,10 @@ "settings.wallets.currency.poweredBy.label": "提供：", "settings.wallets.currency.selectLabel": "通貨を選択してください", "settings.wallets.currency.titleLabel": "ADA残高を別の通貨で表示する", + "sidebar.categoryTooltip.settings": "設定", + "sidebar.categoryTooltip.staking": "!!!Staking", + "sidebar.categoryTooltip.voting": "!!!Voting", + "sidebar.categoryTooltip.wallets": "ウォレット", "sidebar.wallets.addWallet": "ウォレット追加", "sidebar.wallets.search.placeholder": "フィルター", "sidebar.wallets.sortByBalanceButton": "残高", From 5d4ce18ea51db2b8c4dd80278f8af65d8e025c16 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 30 Mar 2022 08:40:15 -0300 Subject: [PATCH 08/20] [DDW-1028] CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f57bff07b4..7a852af9e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Features +- Implemented hover tooltips for menu ([PR 2937](https://github.com/input-output-hk/daedalus/pull/2937)) - 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)) From 1875795e65f8da2b4d276d2286a3fa76d4d1782f Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 30 Mar 2022 08:40:47 -0300 Subject: [PATCH 09/20] [DDW-1028] Translations --- source/renderer/app/i18n/locales/ja-JP.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json index 3610b11a88..891dce2166 100755 --- a/source/renderer/app/i18n/locales/ja-JP.json +++ b/source/renderer/app/i18n/locales/ja-JP.json @@ -383,8 +383,8 @@ "settings.wallets.currency.selectLabel": "通貨を選択してください", "settings.wallets.currency.titleLabel": "ADA残高を別の通貨で表示する", "sidebar.categoryTooltip.settings": "設定", - "sidebar.categoryTooltip.staking": "!!!Staking", - "sidebar.categoryTooltip.voting": "!!!Voting", + "sidebar.categoryTooltip.staking": "ステーキング", + "sidebar.categoryTooltip.voting": "投票", "sidebar.categoryTooltip.wallets": "ウォレット", "sidebar.wallets.addWallet": "ウォレット追加", "sidebar.wallets.search.placeholder": "フィルター", From 6516c24c024317d8993575411213d1c41f2989fb Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 30 Mar 2022 08:47:17 -0300 Subject: [PATCH 10/20] [DDW-1028] Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a852af9e2..fd56fd90da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ ### Features -- Implemented hover tooltips for menu ([PR 2937](https://github.com/input-output-hk/daedalus/pull/2937)) +- 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)) From e6e329e4cef73ae689c903cdd86cee58844afc81 Mon Sep 17 00:00:00 2001 From: Lucas Araujo Date: Wed, 30 Mar 2022 10:13:10 -0300 Subject: [PATCH 11/20] [DDW-1028] Fix stories --- source/renderer/app/components/sidebar/SidebarCategory.tsx | 2 +- source/renderer/app/config/sidebarConfig.ts | 1 + storybook/stories/navigation/SidebarCategory.stories.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx index 69c8971615..573b372792 100644 --- a/source/renderer/app/components/sidebar/SidebarCategory.tsx +++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx @@ -42,7 +42,7 @@ function SidebarCategory({
-
onHandleSort(tableHeader.name)} +export const StakePoolsTableHeader = observer( + ({ + availableTableHeaders, + stakePoolsSortBy, + stakePoolsOrder, + onHandleSort, + onTableHeaderMouseEnter, + onTableHeaderMouseLeave, + }: Props) => { + const { setTargetRef, isInViewport } = useInViewPort(); + + return ( + <> +
+
onHandleSort(tableHeader.name)} + > + {tableHeader.title} + +