Skip to content

Commit c1a32b4

Browse files
author
Lucas Araujo
committed
[DDW-738] Remove popOver from DiscreetToggle
1 parent a61b677 commit c1a32b4

File tree

14 files changed

+140
-131
lines changed

14 files changed

+140
-131
lines changed

‎source/renderer/app/components/layout/TopBar.scss‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
display: flex;
3131
flex-direction: column;
3232
font-family: var(--font-regular);
33-
max-width: 73%;
33+
max-width: 45%;
3434
text-align: center;
3535
user-select: text;
3636

@@ -89,21 +89,6 @@
8989
width: calc(100% - 140px);
9090
}
9191

92-
.discreetModeToggle {
93-
position: absolute;
94-
right: 91px;
95-
96-
&.hasTadaIcon {
97-
right: 149px;
98-
}
99-
100-
svg {
101-
path {
102-
fill: var(--theme-node-sync-icon-color);
103-
}
104-
}
105-
}
106-
10792
.rectangle {
10893
&.hasTadaIcon {
10994
right: 220px;

‎source/renderer/app/containers/TopBarContainer.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { observer, inject } from 'mobx-react';
44
import classnames from 'classnames';
55
import TopBar from '../components/layout/TopBar';
66
import NodeSyncStatusIcon from '../components/widgets/NodeSyncStatusIcon';
7-
import DiscreetToggle from '../features/discreet-mode/ui/discreet-toggle/DiscreetToggle';
7+
import DiscreetToggleTopBar from '../features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar';
88
import NewsFeedIcon from '../components/widgets/NewsFeedIcon';
99
import TadaButton from '../components/widgets/TadaButton';
1010
import WalletTestEnvironmentLabel from '../components/widgets/WalletTestEnvironmentLabel';
@@ -15,7 +15,6 @@ import { matchRoute } from '../utils/routing';
1515
import { ROUTES } from '../routes-config';
1616
import { IS_TADA_ICON_AVAILABLE } from '../config/topBarConfig';
1717
import topBarStyles from '../components/layout/TopBar.scss';
18-
import { useDiscreetModeFeature } from '../features/discreet-mode';
1918

2019
const TopBarContainer = (
2120
{ actions, stores }: InjectedProps = { actions: null, stores: null }
@@ -83,8 +82,6 @@ const TopBarContainer = (
8382

8483
const hasUnreadNews = unread.length > 0;
8584

86-
const discreetModeFeature = useDiscreetModeFeature();
87-
8885
return (
8986
<TopBar
9087
leftIcon={leftIcon}
@@ -108,14 +105,7 @@ const TopBarContainer = (
108105
shouldShowTadaIcon && topBarStyles.hasTadaIcon
109106
)}
110107
/>
111-
<DiscreetToggle
112-
className={classnames(
113-
topBarStyles.discreetModeToggle,
114-
shouldShowTadaIcon && topBarStyles.hasTadaIcon
115-
)}
116-
isDiscreetMode={discreetModeFeature.isDiscreetMode}
117-
onToggle={discreetModeFeature.toggleDiscreetMode}
118-
/>
108+
<DiscreetToggleTopBar hasTadaIcon={shouldShowTadaIcon} />
119109
{shouldShowTadaIcon && (
120110
<TadaButton
121111
onClick={onClickTadaButton}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// @flow
2+
import React from 'react';
3+
import classnames from 'classnames';
4+
import { observer } from 'mobx-react';
5+
import { PopOver } from 'react-polymorph/lib/components/PopOver';
6+
import { injectIntl } from 'react-intl';
7+
import styles from './DiscreetToggleTopBar.scss';
8+
import { messages } from './DiscreetToggleTopBar.messages';
9+
import { useDiscreetModeFeature } from '../../index';
10+
import DiscreetToggle from '../discreet-toggle/DiscreetToggle';
11+
import type { Intl } from '../../../../types/i18nTypes';
12+
13+
type Props = {
14+
intl: Intl,
15+
hasTadaIcon?: boolean,
16+
};
17+
18+
const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
19+
const discreetModeFeature = useDiscreetModeFeature();
20+
21+
return (
22+
<div className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}>
23+
<PopOver
24+
content={
25+
<span className={styles.tooltip}>
26+
{intl.formatMessage(
27+
messages[
28+
discreetModeFeature.isDiscreetMode
29+
? 'discreetModeOff'
30+
: 'discreetModeOn'
31+
]
32+
)}
33+
</span>
34+
}
35+
>
36+
<DiscreetToggle
37+
className={styles.discreetToggle}
38+
isDiscreetMode={discreetModeFeature.isDiscreetMode}
39+
onToggle={discreetModeFeature.toggleDiscreetMode}
40+
/>
41+
</PopOver>
42+
</div>
43+
);
44+
};
45+
46+
export default injectIntl(observer(DiscreetToggleTopBar));

‎source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.messages.js‎ renamed to ‎source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.js‎

File renamed without changes.

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.root {
2+
position: absolute;
3+
right: 91px;
4+
5+
&.hasTadaIcon {
6+
right: 149px;
7+
}
8+
9+
.discreetToggle {
10+
border-radius: 50%;
11+
height: 44px;
12+
opacity: 0.4;
13+
width: 44px;
14+
15+
&:hover {
16+
background-color: var(
17+
--theme-news-feed-icon-toggle-hover-background-color
18+
);
19+
opacity: 0.8;
20+
}
21+
22+
svg {
23+
path {
24+
fill: var(--theme-node-sync-icon-color);
25+
}
26+
}
27+
}
28+
}
29+
30+
.tooltip {
31+
font-family: var(--font-light);
32+
font-size: 14px;
33+
}

‎source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.js‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,29 @@
22
import React from 'react';
33
import SVGInline from 'react-svg-inline';
44
import classNames from 'classnames';
5-
import { PopOver } from 'react-polymorph/lib/components/PopOver';
6-
import { intlShape, injectIntl } from 'react-intl';
75
import revealIcon from '../../../../assets/images/reveal-key.inline.svg';
86
import hideIcon from '../../../../assets/images/hide-key.inline.svg';
97
import styles from './DiscreetToggle.scss';
10-
import { messages } from './DiscreetToggle.messages';
118

129
type Props = {
1310
className?: string,
14-
intl: intlShape.isRequired,
15-
isDiscreetMode?: Boolean,
11+
isDiscreetMode?: boolean,
1612
onToggle: Function,
1713
};
1814

1915
const DiscreetToggle = ({
2016
className,
21-
intl,
2217
isDiscreetMode = true,
2318
onToggle,
2419
}: Props) => {
2520
return (
26-
<div className={classNames(styles.root, className)}>
27-
<PopOver
28-
content={
29-
<span className={styles.tooltip}>
30-
{intl.formatMessage(
31-
messages[isDiscreetMode ? 'discreetModeOff' : 'discreetModeOn']
32-
)}
33-
</span>
34-
}
35-
>
36-
<button className={styles.button} onClick={onToggle}>
37-
<SVGInline
38-
svg={isDiscreetMode ? hideIcon : revealIcon}
39-
className={classNames(
40-
styles.icon,
41-
isDiscreetMode && styles.hideIcon
42-
)}
43-
/>
44-
</button>
45-
</PopOver>
46-
</div>
21+
<button className={classNames(styles.root, className)} onClick={onToggle}>
22+
<SVGInline
23+
svg={isDiscreetMode ? hideIcon : revealIcon}
24+
className={classNames(styles.icon, isDiscreetMode && styles.hideIcon)}
25+
/>
26+
</button>
4727
);
4828
};
4929

50-
export default injectIntl(DiscreetToggle);
30+
export default DiscreetToggle;

‎source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.scss‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,13 @@
11
.root {
2-
.button {
3-
border-radius: 50%;
4-
cursor: pointer;
5-
height: 44px;
6-
opacity: 0.4;
7-
width: 44px;
8-
9-
&:hover {
10-
background-color: var(
11-
--theme-news-feed-icon-toggle-hover-background-color
12-
);
13-
opacity: 0.8;
14-
}
15-
}
2+
cursor: pointer;
163

174
.icon {
18-
svg {
19-
height: 15px;
20-
width: 21px;
21-
}
5+
display: inline-block;
6+
height: 15px;
7+
width: 21px;
228

239
&.hideIcon {
24-
svg {
25-
height: 18px;
26-
}
10+
height: 18px;
2711
}
2812
}
2913
}
30-
31-
.tooltip {
32-
font-family: var(--font-light);
33-
font-size: 14px;
34-
}

‎source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.story.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// @flow
2+
import React from 'react';
3+
import { storiesOf } from '@storybook/react';
4+
import { withKnobs } from '@storybook/addon-knobs';
5+
import { action } from '@storybook/addon-actions';
6+
import DiscreetToggle from './DiscreetToggle';
7+
8+
storiesOf('Discreet Mode|Discreet Toggle', module)
9+
.addDecorator(withKnobs)
10+
.add('Main', () => (
11+
<div style={{ padding: 20 }}>
12+
<div style={{ marginBottom: 20 }}>
13+
<DiscreetToggle onToggle={action('onChange')} isDiscreetMode />
14+
</div>
15+
<div>
16+
<DiscreetToggle onToggle={action('onChange')} isDiscreetMode={false} />
17+
</div>
18+
</div>
19+
));

‎source/renderer/app/i18n/locales/defaultMessages.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17549,7 +17549,7 @@
1754917549
"column": 3,
1755017550
"line": 10
1755117551
},
17552-
"file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.messages.js",
17552+
"file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.js",
1755317553
"id": "widgets.discreetToggle.on",
1755417554
"start": {
1755517555
"column": 18,
@@ -17563,15 +17563,15 @@
1756317563
"column": 3,
1756417564
"line": 16
1756517565
},
17566-
"file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.messages.js",
17566+
"file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.js",
1756717567
"id": "widgets.discreetToggle.off",
1756817568
"start": {
1756917569
"column": 19,
1757017570
"line": 11
1757117571
}
1757217572
}
1757317573
],
17574-
"path": "source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle.messages.json"
17574+
"path": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.json"
1757517575
},
1757617576
{
1757717577
"descriptors": [

‎storybook/stories/_support/StoryLayout.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { NUMBER_OPTIONS } from '../../../source/renderer/app/config/profileConfi
2020
import { formattedWalletAmount } from '../../../source/renderer/app/utils/formatters';
2121
import NodeSyncStatusIcon from '../../../source/renderer/app/components/widgets/NodeSyncStatusIcon';
2222
import TadaButton from '../../../source/renderer/app/components/widgets/TadaButton';
23-
import DiscreetToggle from '../../../source/renderer/app/features/discreet-mode/ui/discreet-toggle/DiscreetToggle';
23+
import DiscreetToggleTopBar from '../../../source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar';
2424
import Wallet, {
2525
WalletSyncStateStatuses,
2626
} from '../../../source/renderer/app/domains/Wallet.js';
@@ -236,14 +236,7 @@ export default class StoryLayout extends Component<Props> {
236236
boolean('hasTadaIcon') && topBarStyles.hasTadaIcon
237237
)}
238238
/>
239-
<DiscreetToggle
240-
className={classNames(
241-
topBarStyles.discreetModeToggle,
242-
boolean('hasTadaIcon') && topBarStyles.hasTadaIcon
243-
)}
244-
onToggle={action('onDiscreetModeToggle')}
245-
isDiscreetMode={boolean('isDiscreetMode', true)}
246-
/>
239+
<DiscreetToggleTopBar hasTadaIcon={boolean('hasTadaIcon')} />
247240
{boolean('hasTadaIcon') && (
248241
<TadaButton onClick={action('onClickTadaButton')} shouldAnimate />
249242
)}

0 commit comments

Comments
 (0)