From 519ea320d6d34c71906a78389f56b3c5d27690a5 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Fri, 17 May 2019 14:58:08 +0200 Subject: [PATCH 01/37] :seedling: Create basic layout of votingHeaderV2 --- i18n/locales/en/common.json | 3 +++ src/components/votingV2/votingHeader.js | 31 +++++++++++++++++++++++++ src/components/votingV2/votingV2.js | 2 ++ 3 files changed, 36 insertions(+) create mode 100644 src/components/votingV2/votingHeader.js diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 12d2fa1129..11c0551089 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -293,6 +293,7 @@ "My Account": "My Account", "My Wallet": "My Wallet", "My Wallet Details": "My Wallet Details", + "My votes after confirmation": "My votes after confirmation", "Name": "Name", "Name is already taken!": "Name is already taken!", "Name is available": "Name is available", @@ -362,6 +363,7 @@ "Redo": "Redo", "Reference": "Reference", "Register": "Register", + "Register as a Delegate": "Register as a Delegate", "Registered": "Registered", "Registrant": "Registrant", "Release Notes": "Release Notes", @@ -436,6 +438,7 @@ "Since Last Login": "Since Last Login", "Standby": "Standby", "Start here": "Start here", + "Start voting": "Start voting", "Stats": "Stats", "Status": "Status", "Step 1 / 4": "Step 1 / 4", diff --git a/src/components/votingV2/votingHeader.js b/src/components/votingV2/votingHeader.js new file mode 100644 index 0000000000..c6a5a26230 --- /dev/null +++ b/src/components/votingV2/votingHeader.js @@ -0,0 +1,31 @@ +import React from 'react'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import { SecondaryButtonV2, PrimaryButtonV2 } from '../toolbox/buttons/button'; + +class VotingHeader extends React.Component { + render() { + const { t, votes } = this.props; + return ( +
+
+
+ +

{Object.keys(votes).length}/101

+
{t('My votes after confirmation')}
+ + + + {t('Register as a Delegate')} + + + {t('Start voting')} + + +
+
+
+ ); + } +} + +export default VotingHeader; diff --git a/src/components/votingV2/votingV2.js b/src/components/votingV2/votingV2.js index 7d51dcab54..e46901b719 100644 --- a/src/components/votingV2/votingV2.js +++ b/src/components/votingV2/votingV2.js @@ -2,6 +2,7 @@ import React from 'react'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import styles from './votingV2.css'; import VotingListViewV2 from '../votingListViewV2'; +import VotingHeader from './votingHeader'; class VotingV2 extends React.Component { constructor() { @@ -35,6 +36,7 @@ class VotingV2 extends React.Component { render() { return (
{ this.root = el; }}> +
Date: Fri, 17 May 2019 15:06:44 +0200 Subject: [PATCH 02/37] :seedling: Implement Register as a delegate link --- src/components/votingV2/votingHeader.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/votingV2/votingHeader.js b/src/components/votingV2/votingHeader.js index c6a5a26230..4678fc0818 100644 --- a/src/components/votingV2/votingHeader.js +++ b/src/components/votingV2/votingHeader.js @@ -1,6 +1,8 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { SecondaryButtonV2, PrimaryButtonV2 } from '../toolbox/buttons/button'; +import routes from './../../constants/routes'; class VotingHeader extends React.Component { render() { @@ -14,9 +16,11 @@ class VotingHeader extends React.Component {
{t('My votes after confirmation')}
- - {t('Register as a Delegate')} - + + + {t('Register as a Delegate')} + + {t('Start voting')} From 5b88fb54e75b9acf2ac0792b356624b3f776d09b Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Fri, 17 May 2019 15:14:57 +0200 Subject: [PATCH 03/37] :seedling: Implement "Start voting" state toggle --- i18n/locales/en/common.json | 1 + src/components/votingV2/votingHeader.js | 19 +++++++++++++++++-- src/components/votingV2/votingV2.js | 15 ++++++++++++++- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 11c0551089..25f7ce2e10 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -72,6 +72,7 @@ "By voting you decide who is trusted to verify transactions and maintain the Lisk network, whilst collecting the rewards for doing so.": "By voting you decide who is trusted to verify transactions and maintain the Lisk network, whilst collecting the rewards for doing so.", "Bytes counter": "Bytes counter", "Cancel": "Cancel", + "Cancel voting": "Cancel voting", "Check for updates...": "Check for updates...", "Check spelling – name does not exist on mainnet": "Check spelling – name does not exist on mainnet", "Choose": "Choose", diff --git a/src/components/votingV2/votingHeader.js b/src/components/votingV2/votingHeader.js index 4678fc0818..9e0988f66e 100644 --- a/src/components/votingV2/votingHeader.js +++ b/src/components/votingV2/votingHeader.js @@ -6,7 +6,12 @@ import routes from './../../constants/routes'; class VotingHeader extends React.Component { render() { - const { t, votes } = this.props; + const { + t, + votes, + toggleVotingMode, + votingModeEnabled, + } = this.props; return (
@@ -15,16 +20,26 @@ class VotingHeader extends React.Component {

{Object.keys(votes).length}/101

{t('My votes after confirmation')}
+ { votingModeEnabled ? + + + {t('Cancel voting')} + + + {t('Go to Confirmation')} + + : {t('Register as a Delegate')} - + {t('Start voting')} + }
diff --git a/src/components/votingV2/votingV2.js b/src/components/votingV2/votingV2.js index e46901b719..87a0ccd02f 100644 --- a/src/components/votingV2/votingV2.js +++ b/src/components/votingV2/votingV2.js @@ -10,7 +10,10 @@ class VotingV2 extends React.Component { this.state = { showChangeSummery: false, nextStepCalled: false, + votingModeEnabled: false, }; + + this.toggleVotingMode = this.toggleVotingMode.bind(this); } toggleSummery(value) { @@ -33,10 +36,20 @@ class VotingV2 extends React.Component { this.setState({ nextStepCalled: true }); } + toggleVotingMode() { + this.setState({ votingModeEnabled: !this.state.votingModeEnabled }); + } + render() { + const { t, votes } = this.props; + const { votingModeEnabled } = this.state; return (
{ this.root = el; }}> - +
Date: Fri, 17 May 2019 15:52:11 +0200 Subject: [PATCH 04/37] :seedling: Implement voting header statistics --- i18n/locales/en/common.json | 4 +++ src/components/votingV2/votingHeader.js | 45 +++++++++++++++++++++++-- src/constants/voting.js | 1 + 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 25f7ce2e10..70d31d9a54 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -33,6 +33,7 @@ "Add to bookmarks": "Add to bookmarks", "Add to list": "Add to list", "Added Votes": "Added Votes", + "Added votes": "Added votes", "Adding extensions is currently disabled in production version of Lisk Hub": "Adding extensions is currently disabled in production version of Lisk Hub", "Address": "Address", "Advanced features": "Advanced features", @@ -152,6 +153,7 @@ "Downvotes": "Downvotes", "Drag to reveal": "Drag to reveal", "Each LSK token is worth one vote.": "Each LSK token is worth one vote.", + "Each time you add or remove a vote it is counted as an action. There's {{fee}} LSK fee per every 33 actions.": "Each time you add or remove a vote it is counted as an action. There's {{fee}} LSK fee per every 33 actions.", "Edit": "Edit", "Edit transaction": "Edit transaction", "Enter URL of the *.js file with the extension": "Enter URL of the *.js file with the extension", @@ -372,6 +374,7 @@ "Reload the page": "Reload the page", "Remove Extension": "Remove Extension", "Remove from bookmarks": "Remove from bookmarks", + "Remove votes": "Remove votes", "Removed Votes": "Removed Votes", "Report the error via E-Mail": "Report the error via E-Mail", "Request": "Request", @@ -476,6 +479,7 @@ "To recover you can": "To recover you can", "Toggle full screen": "Toggle full screen", "Total": "Total", + "Total actions (Total fee:": "Total actions (Total fee:", "Transaction": "Transaction", "Transaction Fee": "Transaction Fee", "Transaction ID": "Transaction ID", diff --git a/src/components/votingV2/votingHeader.js b/src/components/votingV2/votingHeader.js index 9e0988f66e..b07d70f637 100644 --- a/src/components/votingV2/votingHeader.js +++ b/src/components/votingV2/votingHeader.js @@ -2,7 +2,14 @@ import React from 'react'; import { Link } from 'react-router-dom'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { SecondaryButtonV2, PrimaryButtonV2 } from '../toolbox/buttons/button'; +import Tooltip from '../toolbox/tooltip/tooltip'; import routes from './../../constants/routes'; +import votingConst from '../../constants/voting'; +import { + getTotalVotesCount, + getVoteList, + getUnvoteList, +} from './../../utils/voting'; class VotingHeader extends React.Component { render() { @@ -12,13 +19,47 @@ class VotingHeader extends React.Component { toggleVotingMode, votingModeEnabled, } = this.props; + const voteList = getVoteList(votes); + const unvoteList = getUnvoteList(votes); + const { + maxCountOfVotesInOneTurn, + maxCountOfVotes, + fee, + } = votingConst; + const totalActions = Math.ceil(( + voteList.length + unvoteList.length + ) / maxCountOfVotesInOneTurn); return (
-

{Object.keys(votes).length}/101

-
{t('My votes after confirmation')}
+ +

{getTotalVotesCount(votes)}/{maxCountOfVotes}

+
{t('My votes after confirmation')}
+ + { votingModeEnabled ? + +

{voteList.length}

+ {t('Added votes')} + : + null } + { unvoteList.length ? + +

{unvoteList.length}

+ {t('Remove votes')} + : + null } + { votingModeEnabled ? + +

{totalActions} + +

{t('Each time you add or remove a vote it is counted as an action. There\'s {{fee}} LSK fee per every 33 actions.', { fee })}

+ +

+ {t('Total actions (Total fee:')}{fee * totalActions} LSK) + : + null } { votingModeEnabled ? diff --git a/src/constants/voting.js b/src/constants/voting.js index bc8bcaa0f8..db6508b349 100644 --- a/src/constants/voting.js +++ b/src/constants/voting.js @@ -1,6 +1,7 @@ const votingConst = { maxCountOfVotesInOneTurn: 33, maxCountOfVotes: 101, + fee: 1, }; export default votingConst; From 5fd543fae20ecad610a01f2b4e07233d7f5ca6a5 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Fri, 17 May 2019 16:30:21 +0200 Subject: [PATCH 05/37] :seedling: Implement styles of the new voting header --- i18n/locales/en/common.json | 4 +- src/components/votingV2/votingHeader.css | 54 ++++++++++++++++++++++++ src/components/votingV2/votingHeader.js | 31 ++++++-------- 3 files changed, 70 insertions(+), 19 deletions(-) create mode 100644 src/components/votingV2/votingHeader.css diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 70d31d9a54..ee72a99527 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -374,8 +374,8 @@ "Reload the page": "Reload the page", "Remove Extension": "Remove Extension", "Remove from bookmarks": "Remove from bookmarks", - "Remove votes": "Remove votes", "Removed Votes": "Removed Votes", + "Removed votes": "Removed votes", "Report the error via E-Mail": "Report the error via E-Mail", "Request": "Request", "Request LSK": "Request LSK", @@ -479,7 +479,7 @@ "To recover you can": "To recover you can", "Toggle full screen": "Toggle full screen", "Total": "Total", - "Total actions (Total fee:": "Total actions (Total fee:", + "Total actions (Total fee: ": "Total actions (Total fee: ", "Transaction": "Transaction", "Transaction Fee": "Transaction Fee", "Transaction ID": "Transaction ID", diff --git a/src/components/votingV2/votingHeader.css b/src/components/votingV2/votingHeader.css new file mode 100644 index 0000000000..92935100b3 --- /dev/null +++ b/src/components/votingV2/votingHeader.css @@ -0,0 +1,54 @@ +@import '../app/variablesV2.css'; +@import './../app/mixins.css'; + +.wrapper { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 25px; +} + +.box, +.outlinedBox { + @mixin contentSmallest; + + display: inline-block; + padding: 7px 10px; + margin-right: 20px; + color: var(--color-slate-gray); + + & h2 { + @mixin headingLarge; + + margin: 5px 0; + color: var(--color-maastricht-blue); + } + + & h3 { + @mixin headingNormal; + + margin: 5px 0; + color: var(--color-maastricht-blue); + } +} + +.box:first-child { + @mixin contentSmall; + + padding-left: 0; +} + +.outlinedBox { + background-color: var(--color-white); + border-radius: 3px; + border: solid 1px var(--color-platinum); +} + +.tooltip { + display: inline-block; +} + +.btn { + margin-left: 25px; + margin-top: 15px; +} diff --git a/src/components/votingV2/votingHeader.js b/src/components/votingV2/votingHeader.js index b07d70f637..eb43fe7e0a 100644 --- a/src/components/votingV2/votingHeader.js +++ b/src/components/votingV2/votingHeader.js @@ -1,6 +1,5 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { SecondaryButtonV2, PrimaryButtonV2 } from '../toolbox/buttons/button'; import Tooltip from '../toolbox/tooltip/tooltip'; import routes from './../../constants/routes'; @@ -11,6 +10,8 @@ import { getUnvoteList, } from './../../utils/voting'; +import styles from './votingHeader.css'; + class VotingHeader extends React.Component { render() { const { @@ -30,59 +31,55 @@ class VotingHeader extends React.Component { voteList.length + unvoteList.length ) / maxCountOfVotesInOneTurn); return ( -
-
-
+
- +

{getTotalVotesCount(votes)}/{maxCountOfVotes}

{t('My votes after confirmation')}
 { votingModeEnabled ? - +

{voteList.length}

{t('Added votes')} : null } { unvoteList.length ? - +

{unvoteList.length}

- {t('Remove votes')} + {t('Removed votes')} : null } { votingModeEnabled ? - +

{totalActions} - +

{t('Each time you add or remove a vote it is counted as an action. There\'s {{fee}} LSK fee per every 33 actions.', { fee })}

- {t('Total actions (Total fee:')}{fee * totalActions} LSK) + {t('Total actions (Total fee: ')} {fee * totalActions} LSK) : null } { votingModeEnabled ? - + {t('Cancel voting')} - + {t('Go to Confirmation')} : - + {t('Register as a Delegate')} - + {t('Start voting')} } -
-
); } From 1e98fe53e7303464b4cbb85332d1f828010b45ab Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Mon, 20 May 2019 12:21:50 +0200 Subject: [PATCH 06/37] :bug: Fix delegate loading overlay styles --- src/components/votingListViewV2/votingListViewV2.css | 2 +- src/components/votingV2/votingV2.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/votingListViewV2/votingListViewV2.css b/src/components/votingListViewV2/votingListViewV2.css index f4266a9b0d..8964ace3ac 100644 --- a/src/components/votingListViewV2/votingListViewV2.css +++ b/src/components/votingListViewV2/votingListViewV2.css @@ -257,7 +257,7 @@ background: rgba(255, 255, 255, 0.8); bottom: 0; position: absolute; - top: 0; + top: 48px; width: 100%; z-index: 1; } diff --git a/src/components/votingV2/votingV2.css b/src/components/votingV2/votingV2.css index b6d65d72fd..937cb61646 100644 --- a/src/components/votingV2/votingV2.css +++ b/src/components/votingV2/votingV2.css @@ -30,6 +30,7 @@ .votes { padding-left: 0px; background-color: var(--color-white); + position: relative; } @media (--medium-viewport) { From 776cf7267d3e5c13077a0d429bc85f428b6c7895 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Mon, 20 May 2019 13:02:41 +0200 Subject: [PATCH 07/37] :seedling: Implement "Selecting Delegates" tooltip --- i18n/locales/en/common.json | 2 ++ src/components/app/variablesV2.css | 1 + src/components/toolbox/tooltip/tooltip.js | 8 ++++---- .../votingListViewV2/voteCheckboxV2.css | 2 ++ .../votingListViewV2/votingListViewV2.css | 19 +++++++++++++++++++ .../votingListViewV2/votingListViewV2.js | 15 ++++++++++++++- src/components/votingV2/votingV2.js | 1 + 7 files changed, 43 insertions(+), 5 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index ee72a99527..e9daf903ba 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -410,6 +410,7 @@ "Select device": "Select device", "Select the missing words to confirm": "Select the missing words to confirm", "Select this account": "Select this account", + "Selecting Delegates": "Selecting Delegates", "Selection": "Selection", "Send": "Send", "Send LSK": "Send LSK", @@ -441,6 +442,7 @@ "Simply scan the QR code using the Lisk Mobile app or any other QR code reader": "Simply scan the QR code using the Lisk Mobile app or any other QR code reader", "Since Last Login": "Since Last Login", "Standby": "Standby", + "Start by Selecting the delegates you’d like to vote for.": "Start by Selecting the delegates you’d like to vote for.", "Start here": "Start here", "Start voting": "Start voting", "Stats": "Stats", diff --git a/src/components/app/variablesV2.css b/src/components/app/variablesV2.css index 56e880852f..ca68e4330d 100644 --- a/src/components/app/variablesV2.css +++ b/src/components/app/variablesV2.css @@ -124,6 +124,7 @@ or "warn/action" ineastd of "red/green" --color-title-header-box: #4c4c4c; --color-link: var(--color-primary-standard); --color-rows-hover: rgba(157, 184, 250, 0.2); + --color-highlight-checkboxes: rgba(64, 112, 244, 0.08); /************************* Box diff --git a/src/components/toolbox/tooltip/tooltip.js b/src/components/toolbox/tooltip/tooltip.js index 4f4741a373..44b9d27133 100644 --- a/src/components/toolbox/tooltip/tooltip.js +++ b/src/components/toolbox/tooltip/tooltip.js @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import styles from './tooltip.css'; class Tooltip extends React.Component { - constructor() { + constructor(props) { super(); this.state = { - showTooltip: false, + showTooltip: props.showTooltip, timeoutObj: null, clicked: false, }; @@ -64,7 +64,7 @@ class Tooltip extends React.Component { render() { const { - title, children, footer, className, infoIconClassName, + title, children, footer, className, infoIconClassName, tooltipClassName, } = this.props; return React.isValidElement(children) && (
-
+
diff --git a/src/components/votingListViewV2/voteCheckboxV2.css b/src/components/votingListViewV2/voteCheckboxV2.css index 63c3803dd0..f84d225e91 100644 --- a/src/components/votingListViewV2/voteCheckboxV2.css +++ b/src/components/votingListViewV2/voteCheckboxV2.css @@ -5,6 +5,8 @@ width: 16px; height: 16px; position: relative; + z-index: 2; + cursor: pointer; & input { visibility: hidden; diff --git a/src/components/votingListViewV2/votingListViewV2.css b/src/components/votingListViewV2/votingListViewV2.css index 8964ace3ac..6a0b348eb8 100644 --- a/src/components/votingListViewV2/votingListViewV2.css +++ b/src/components/votingListViewV2/votingListViewV2.css @@ -274,6 +274,25 @@ } } +.selectingDelegates { + position: absolute; + top: 100px; + bottom: 46px; + left: 11px; + width: 36px; + border-radius: 3px; + background-color: var(--color-highlight-checkboxes); + z-index: 1; +} + +.tooltipClassName { + top: 220px; +} + +.infoIconClassName { + display: none; +} + @media (--xLarge-viewport) { .delegatesList { margin: 0px calc(0 - var(--box-padding-left-XL)); diff --git a/src/components/votingListViewV2/votingListViewV2.js b/src/components/votingListViewV2/votingListViewV2.js index 8d81596568..2c542d19e5 100644 --- a/src/components/votingListViewV2/votingListViewV2.js +++ b/src/components/votingListViewV2/votingListViewV2.js @@ -8,6 +8,8 @@ import { parseSearchParams } from '../../utils/searchParams'; import VoteListV2 from './voteListV2'; import DelegateListV2 from './delegateListV2'; import ProgressBar from '../toolbox/progressBar/progressBar'; +import Tooltip from '../toolbox/tooltip/tooltip'; +import { getTotalVotesCount } from './../../utils/voting'; // Create a new Table component injecting Head and Row class VotingListViewV2 extends React.Component { @@ -146,7 +148,7 @@ class VotingListViewV2 extends React.Component { render() { const filteredList = this.filter(this.props.delegates); const { - showChangeSummery, isDelegate, voteToggled, votes, t, + showChangeSummery, isDelegate, voteToggled, votes, t, votingModeEnabled, } = this.props; return ( @@ -155,6 +157,16 @@ class VotingListViewV2 extends React.Component {
) : null} + {votingModeEnabled && getTotalVotesCount(votes) === 0 ? + +

{t('Start by Selecting the delegates you’d like to vote for.')}

+ : + null} { !this.showInfo() ? @@ -169,6 +181,7 @@ class VotingListViewV2 extends React.Component {
From 7042434b2cd06736ce3db083724bd4431939eb33 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Mon, 20 May 2019 14:09:48 +0200 Subject: [PATCH 08/37] :fire: Remove redundant VoteListV2 component --- .../votingListViewV2/delegateListV2.js | 6 --- src/components/votingListViewV2/voteListV2.js | 24 ----------- .../votingListViewV2/voteRow.test.js | 40 ------------------- src/components/votingListViewV2/voteRowV2.js | 28 ------------- .../votingListViewV2/votingListViewV2.js | 9 +---- src/components/votingV2/votingV2.js | 6 --- 6 files changed, 2 insertions(+), 111 deletions(-) delete mode 100644 src/components/votingListViewV2/voteListV2.js delete mode 100644 src/components/votingListViewV2/voteRow.test.js delete mode 100644 src/components/votingListViewV2/voteRowV2.js diff --git a/src/components/votingListViewV2/delegateListV2.js b/src/components/votingListViewV2/delegateListV2.js index 88a715b5a0..a83e7d4f63 100644 --- a/src/components/votingListViewV2/delegateListV2.js +++ b/src/components/votingListViewV2/delegateListV2.js @@ -11,12 +11,6 @@ class DelegateListV2 extends React.Component { this.state = { didMount: false }; } - componentWillUpdate(nextProps) { - if (this.props.showChangeSummery === false && nextProps.showChangeSummery === true) { - this.props.nextStep(); - } - } - componentDidMount() { this.setState({ didMount: true }); } diff --git a/src/components/votingListViewV2/voteListV2.js b/src/components/votingListViewV2/voteListV2.js deleted file mode 100644 index bb875173ae..0000000000 --- a/src/components/votingListViewV2/voteListV2.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import VoteRowV2 from './voteRowV2'; - -class VoteListV2 extends React.Component { - componentDidUpdate(nextProps) { - // istanbul ignore else - if (this.props.showChangeSummery === true && nextProps.showChangeSummery === false) { - this.props.prevStep(); - } - } - - render() { - const { votes, safari } = this.props; - return Object.keys(votes) - .filter(item => votes[item].confirmed !== votes[item].unconfirmed) - .map(item => ( - - )); - } -} - -export default VoteListV2; diff --git a/src/components/votingListViewV2/voteRow.test.js b/src/components/votingListViewV2/voteRow.test.js deleted file mode 100644 index 5807013c3e..0000000000 --- a/src/components/votingListViewV2/voteRow.test.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount, shallow } from 'enzyme'; -import VoteRowV2 from './voteRowV2'; - -describe('VoteRowV2', () => { - const downVoteStatus = { confirmed: true, unconfirmed: false, publicKey: 'sample_key' }; - const upVoteStatus = { confirmed: false, unconfirmed: true, publicKey: 'sample_key' }; - const props = { - data: { rank: 1, productivity: 99, address: '1000001L' }, - className: 'custom-class-name', - username: 'username1', - }; - - it('should have a list item with class name of "downVoteRow" when unconfirmed is false', () => { - const downVoteProps = { ...props, data: { ...props.data, ...downVoteStatus } }; - const wrapper = mount(); - const expectedClass = 'downVoteRow'; - const className = wrapper.find('ul').prop('className'); - expect(className).to.contain(expectedClass); - }); - - it('should have a list item with class name of "upVoteRow" when unconfirmed is true', () => { - const upVoteProps = { ...props, data: { ...props.data, ...upVoteStatus } }; - const wrapper = mount(); - const expectedClass = 'upVoteRow'; - const className = wrapper.find('ul').prop('className'); - expect(className).to.contain(expectedClass); - }); - - it('should not re-render if voteStatus has not been changed', () => { - const oldProps = { ...props, data: { ...props.data, ...downVoteStatus } }; - const newProps = { ...props, data: { ...props.data, ...downVoteStatus } }; - const wrapper = shallow(); - const shouldUpdate = wrapper.instance() - .shouldComponentUpdate(newProps); - expect(shouldUpdate).to.be.equal(false); - }); -}); - diff --git a/src/components/votingListViewV2/voteRowV2.js b/src/components/votingListViewV2/voteRowV2.js deleted file mode 100644 index 85b129eaef..0000000000 --- a/src/components/votingListViewV2/voteRowV2.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import styles from './votingListViewV2.css'; - -class VoteRowV2 extends React.Component { - shouldComponentUpdate({ data }) { - const oldData = this.props.data; - return (!oldData && !!data) || - (!!oldData && !data) || - ((!!oldData && !!data) && - (oldData.unconfirmed !== data.unconfirmed)); - } - - render() { - const { data, className, username } = this.props; - const voteType = data.unconfirmed ? styles.upVoteRow : styles.downVoteRow; - - return (
    -
  • {data.rank}
    • -
  • {username}
    • -
  • {data.address}
    • -
  • {data.productivity} %
    • -
- ); - } -} - -export default VoteRowV2; diff --git a/src/components/votingListViewV2/votingListViewV2.js b/src/components/votingListViewV2/votingListViewV2.js index 2c542d19e5..12aeeeceaa 100644 --- a/src/components/votingListViewV2/votingListViewV2.js +++ b/src/components/votingListViewV2/votingListViewV2.js @@ -1,11 +1,9 @@ import React, { Fragment } from 'react'; -import MultiStep from './../multiStep'; import VotingHeaderV2 from './votingHeaderV2'; import styles from './votingListViewV2.css'; import VoteUrlProcessor from '../voteUrlProcessor'; import voteFilters from './../../constants/voteFilters'; import { parseSearchParams } from '../../utils/searchParams'; -import VoteListV2 from './voteListV2'; import DelegateListV2 from './delegateListV2'; import ProgressBar from '../toolbox/progressBar/progressBar'; import Tooltip from '../toolbox/tooltip/tooltip'; @@ -178,15 +176,12 @@ class VotingListViewV2 extends React.Component { voteToggled={voteToggled} search={ value => this.search(value) } /> - +
- - +
{ (filteredList.length === 0) ?
diff --git a/src/components/votingV2/votingV2.js b/src/components/votingV2/votingV2.js index 7751ea9a0f..1542b29591 100644 --- a/src/components/votingV2/votingV2.js +++ b/src/components/votingV2/votingV2.js @@ -9,7 +9,6 @@ class VotingV2 extends React.Component { super(); this.state = { showChangeSummery: false, - nextStepCalled: false, votingModeEnabled: false, }; @@ -32,10 +31,6 @@ class VotingV2 extends React.Component { } } - nextStepGotCalled() { - this.setState({ nextStepCalled: true }); - } - toggleVotingMode() { this.setState({ votingModeEnabled: !this.state.votingModeEnabled }); } @@ -53,7 +48,6 @@ class VotingV2 extends React.Component {
From bf04921c95907469f9c3aad4c71ca6ce5d5e342f Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Mon, 20 May 2019 14:48:21 +0200 Subject: [PATCH 09/37] :seedling: Implement voting checkbox inactive state --- .../votingListViewV2/delegateListV2.js | 2 ++ .../votingListViewV2/delegateRowV2.js | 10 +++--- .../votingListViewV2/voteCheckboxV2.js | 36 +++++++++++-------- 3 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/components/votingListViewV2/delegateListV2.js b/src/components/votingListViewV2/delegateListV2.js index a83e7d4f63..7ffd8c7000 100644 --- a/src/components/votingListViewV2/delegateListV2.js +++ b/src/components/votingListViewV2/delegateListV2.js @@ -16,6 +16,7 @@ class DelegateListV2 extends React.Component { } render() { + const { votingModeEnabled } = this.props; const shouldLoadMore = this.props.list.length > 0 && this.props.list[this.props.list.length - 1].rank % 100 === 0; return (
@@ -28,6 +29,7 @@ class DelegateListV2 extends React.Component { className={this.props.safari} voteToggled={this.props.voteToggled} voteStatus={this.props.votes[item.username]} + votingModeEnabled={votingModeEnabled} />) } {shouldLoadMore ?
: null}
#{data.rank}
{data.account.address}
-
{data.productivity} %
+
{data.productivity} %
{this.props.t(' LSK')}
diff --git a/src/components/votingListViewV2/listLabelsV2.js b/src/components/votingListViewV2/listLabelsV2.js index c43a7162ec..75a6aa621e 100644 --- a/src/components/votingListViewV2/listLabelsV2.js +++ b/src/components/votingListViewV2/listLabelsV2.js @@ -3,17 +3,17 @@ import grid from 'flexboxgrid/dist/flexboxgrid.css'; import TableRow from '../toolbox/table/tableRow'; import styles from './votingListViewV2.css'; -const ListLabelsV2 = ({ status, t }) => +const ListLabelsV2 = ({ shouldShowVoteColumn, t }) => ( { - !status ? + shouldShowVoteColumn ?
{t('Vote', { context: 'verb' })}
: null }
{t('Rank')}
{t('Delegate')}
-
{t('Productivity')}
+
{t('Productivity')}
{t('Vote weight')}
); From 5aa0639005ca9f27d8a767d0ea445dd524c7db76 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 21 May 2019 11:04:59 +0200 Subject: [PATCH 19/37] :seedling: Implement the start voting overlay --- .../votingListViewV2/votingListViewV2.css | 2 +- .../votingListViewV2/votingListViewV2.js | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/votingListViewV2/votingListViewV2.css b/src/components/votingListViewV2/votingListViewV2.css index 6a0b348eb8..6e690d6e8f 100644 --- a/src/components/votingListViewV2/votingListViewV2.css +++ b/src/components/votingListViewV2/votingListViewV2.css @@ -276,7 +276,7 @@ .selectingDelegates { position: absolute; - top: 100px; + top: 80px; bottom: 46px; left: 11px; width: 36px; diff --git a/src/components/votingListViewV2/votingListViewV2.js b/src/components/votingListViewV2/votingListViewV2.js index bec8c1c713..398328f83c 100644 --- a/src/components/votingListViewV2/votingListViewV2.js +++ b/src/components/votingListViewV2/votingListViewV2.js @@ -146,14 +146,16 @@ class VotingListViewV2 extends React.Component {
) : null} {votingModeEnabled && getTotalVotesCount(votes) === 0 ? - -

{t('Start by Selecting the delegates you’d like to vote for.')}

- : +
+ +

{t('Start by Selecting the delegates you’d like to vote for.')}

+ +
: null}
Date: Tue, 21 May 2019 11:13:58 +0200 Subject: [PATCH 20/37] :bug: Fix styles of "Load more" delegates button --- src/components/votingListViewV2/votingListViewV2.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/votingListViewV2/votingListViewV2.css b/src/components/votingListViewV2/votingListViewV2.css index 6e690d6e8f..be2b4ed721 100644 --- a/src/components/votingListViewV2/votingListViewV2.css +++ b/src/components/votingListViewV2/votingListViewV2.css @@ -125,14 +125,15 @@ .loadMore { @mixin contentSmall bold; - z-index: 20; width: 100%; height: 36px; color: var(--color-maastricht-blue) !important; - border: solid 1px var(--color-platinum); + border-top: solid 1px var(--color-platinum); background-color: var(--color-white-smoke) !important; box-shadow: none; min-height: 36px; + margin-top: -1px; + border-radius: unset; &:hover { color: var(--color-maastricht-blue) !important; From 7d427ae975b6e42888377c2bb40c03d26b4905bd Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 21 May 2019 11:23:45 +0200 Subject: [PATCH 21/37] :recycle: Change tooltip component to accept styles prop --- src/components/splashscreen/splashscreen.js | 2 +- src/components/toolbox/tooltip/tooltip.js | 9 ++++++--- src/components/votingListViewV2/votingListViewV2.css | 12 ++++++------ src/components/votingListViewV2/votingListViewV2.js | 5 ++++- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/splashscreen/splashscreen.js b/src/components/splashscreen/splashscreen.js index 85916a5951..72fa438399 100644 --- a/src/components/splashscreen/splashscreen.js +++ b/src/components/splashscreen/splashscreen.js @@ -101,7 +101,7 @@ class Splashscreen extends React.Component {

diff --git a/src/components/toolbox/tooltip/tooltip.js b/src/components/toolbox/tooltip/tooltip.js index 44b9d27133..0d995346f5 100644 --- a/src/components/toolbox/tooltip/tooltip.js +++ b/src/components/toolbox/tooltip/tooltip.js @@ -64,8 +64,11 @@ class Tooltip extends React.Component { render() { const { - title, children, footer, className, infoIconClassName, tooltipClassName, + title, children, footer, className, } = this.props; + const { + infoIcon = '', tooltip = '', + } = this.props.styles || {}; return React.isValidElement(children) && (

-
+
diff --git a/src/components/votingListViewV2/votingListViewV2.css b/src/components/votingListViewV2/votingListViewV2.css index be2b4ed721..53d716deee 100644 --- a/src/components/votingListViewV2/votingListViewV2.css +++ b/src/components/votingListViewV2/votingListViewV2.css @@ -284,14 +284,14 @@ border-radius: 3px; background-color: var(--color-highlight-checkboxes); z-index: 1; -} -.tooltipClassName { - top: 220px; -} + & .tooltipClass { + top: 220px; + } -.infoIconClassName { - display: none; + & .infoIcon { + display: none; + } } @media (--xLarge-viewport) { diff --git a/src/components/votingListViewV2/votingListViewV2.js b/src/components/votingListViewV2/votingListViewV2.js index 398328f83c..a9516e7af0 100644 --- a/src/components/votingListViewV2/votingListViewV2.js +++ b/src/components/votingListViewV2/votingListViewV2.js @@ -148,7 +148,10 @@ class VotingListViewV2 extends React.Component { {votingModeEnabled && getTotalVotesCount(votes) === 0 ?
Date: Tue, 21 May 2019 11:28:28 +0200 Subject: [PATCH 22/37] :recycle: Rename showTooltip prop of Tooltip to alwaysShow --- src/components/toolbox/tooltip/tooltip.js | 11 +++++++---- src/components/votingListViewV2/votingListViewV2.js | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/toolbox/tooltip/tooltip.js b/src/components/toolbox/tooltip/tooltip.js index 0d995346f5..372df5b50d 100644 --- a/src/components/toolbox/tooltip/tooltip.js +++ b/src/components/toolbox/tooltip/tooltip.js @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import styles from './tooltip.css'; class Tooltip extends React.Component { - constructor(props) { + constructor() { super(); this.state = { - showTooltip: props.showTooltip, + showTooltip: false, timeoutObj: null, clicked: false, }; @@ -64,8 +64,11 @@ class Tooltip extends React.Component { render() { const { - title, children, footer, className, + title, children, footer, className, alwaysShow, } = this.props; + const { + showTooltip, + } = this.state; const { infoIcon = '', tooltip = '', } = this.props.styles || {}; @@ -79,7 +82,7 @@ class Tooltip extends React.Component { className={`${styles.infoIcon} ${infoIcon}`} onClick={this.handleClick} /> -
+
diff --git a/src/components/votingListViewV2/votingListViewV2.js b/src/components/votingListViewV2/votingListViewV2.js index a9516e7af0..1bf683c09d 100644 --- a/src/components/votingListViewV2/votingListViewV2.js +++ b/src/components/votingListViewV2/votingListViewV2.js @@ -154,7 +154,7 @@ class VotingListViewV2 extends React.Component { }} tooltipClassName={styles.tooltipClassName} className={styles.selectingDelegates} - showTooltip={true} + alwaysShow={true} title={t('Selecting Delegates')} >

{t('Start by Selecting the delegates you’d like to vote for.')}

From ed31ab76e0a762d065050288b6f7aa7bc37cc618 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 21 May 2019 12:13:54 +0200 Subject: [PATCH 23/37] :seedling: Implement all 4 states of vote checkbox --- .../votingListViewV2/delegateListV2.js | 3 ++- .../votingListViewV2/delegateRowV2.js | 10 +++++++--- .../votingListViewV2/voteCheckboxV2.css | 17 +++++++++++++++-- .../votingListViewV2/voteCheckboxV2.js | 9 ++++++--- .../votingListViewV2/votingListViewV2.js | 4 +++- 5 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/components/votingListViewV2/delegateListV2.js b/src/components/votingListViewV2/delegateListV2.js index 1441de1112..93554edd47 100644 --- a/src/components/votingListViewV2/delegateListV2.js +++ b/src/components/votingListViewV2/delegateListV2.js @@ -16,7 +16,7 @@ class DelegateListV2 extends React.Component { } render() { - const { votingModeEnabled, votes } = this.props; + const { votingModeEnabled, votes, firstTimeVotingActive } = this.props; const shouldLoadMore = this.props.list.length > 0 && this.props.list[this.props.list.length - 1].rank % 100 === 0; const shouldShowVoteColumn = votingModeEnabled || Object.keys(votes).length > 0; @@ -32,6 +32,7 @@ class DelegateListV2 extends React.Component { voteStatus={votes[item.username]} votingModeEnabled={votingModeEnabled} shouldShowVoteColumn={shouldShowVoteColumn} + shouldHightlightCheckbox={firstTimeVotingActive} />) } {shouldLoadMore ?