From 0c84a2c93e1f4ac1085a3aad48637cf23fee24da Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 14 Feb 2018 09:31:29 +0100 Subject: [PATCH 1/7] Make caps of votes progress bars round --- i18n/locales/en/common.json | 1 + package.json | 2 +- src/components/votesPreview/index.js | 11 +++++++---- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 9999752be3..02d524bb97 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -79,6 +79,7 @@ "I understand": "I understand", "In": "In", "Incoming": "Incoming", + "Insufficient funds": "Insufficient funds", "Insufficient funds for {{amount}} LSK fee": "Insufficient funds for {{amount}} LSK fee", "Invalid address. Please check again": "Invalid address. Please check again", "Keep it": "Keep it", diff --git a/package.json b/package.json index 5dba7efe2c..6af93672af 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "react": "=16.2.0", "react-animate-on-change": "=1.0.0", "react-chartjs-2": "2.6.4", - "react-circular-progressbar": "0.2.1", + "react-circular-progressbar": "0.8.0", "react-copy-to-clipboard": "5.0.1", "react-countdown-now": "1.2.0", "react-css-themr": "=2.1.2", diff --git a/src/components/votesPreview/index.js b/src/components/votesPreview/index.js index ad92634515..0f14afba45 100644 --- a/src/components/votesPreview/index.js +++ b/src/components/votesPreview/index.js @@ -28,7 +28,9 @@ class VotesPreview extends React.Component { } render() { - const { votes, t, nextStep, updateList } = this.props; + const { + votes, t, nextStep, updateList, + } = this.props; const { maxCountOfVotes, maxCountOfVotesInOneTurn } = votingConst; const voteList = getVoteList(votes); const unvoteList = getUnvoteList(votes); @@ -36,7 +38,7 @@ class VotesPreview extends React.Component { const totalNewVotesCount = voteList.length + unvoteList.length; const selectionClass = totalNewVotesCount > maxCountOfVotesInOneTurn ? styles.red : ''; const totalClass = totalVotesCount > 101 ? styles.red : ''; - const createPercentage = (count, total) => Math.ceil((count / total) * 100); + const createPercentage = (count, total) => ((count / total) * 100); const surpassedVoteLimit = totalNewVotesCount > maxCountOfVotesInOneTurn || totalVotesCount > 101; const insufficientFunds = this.props.account.balance - fees.vote < 0; @@ -46,6 +48,7 @@ class VotesPreview extends React.Component { ? t('Maximum of 101 votes in total') : t('Maximum of {{maxcount}} votes at a time', { maxcount: maxCountOfVotesInOneTurn }); }; + const progressBarStyles = { path: { strokeLinecap: 'round' } }; return (
''}/>
@@ -70,7 +73,7 @@ class VotesPreview extends React.Component {
''}/>
From 755387cedae60a29af23cd8ba13d9d0b865c9e5d Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 14 Feb 2018 10:36:50 +0100 Subject: [PATCH 2/7] Fix purge of voting redux store on account switch It was listening to accountLoggedOut action that was no longer used for account switch --- src/store/reducers/voting.js | 2 +- src/store/reducers/voting.test.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/store/reducers/voting.js b/src/store/reducers/voting.js index e7395681b0..fefc9e72a3 100644 --- a/src/store/reducers/voting.js +++ b/src/store/reducers/voting.js @@ -81,7 +81,7 @@ const voting = (state = { }); - case actionTypes.accountLoggedOut: + case actionTypes.accountLoading: return Object.assign({}, state, { votes: {}, delegates: [], diff --git a/src/store/reducers/voting.test.js b/src/store/reducers/voting.test.js index f7ba5203b2..feaeecb8fc 100644 --- a/src/store/reducers/voting.test.js +++ b/src/store/reducers/voting.test.js @@ -44,9 +44,9 @@ describe('Reducer: voting(state, action)', () => { expect(changedState).to.be.equal(state); }); - it('should clean up with action: accountLoggedOut', () => { + it('should clean up with action: accountLoading', () => { const action = { - type: actionTypes.accountLoggedOut, + type: actionTypes.accountLoading, }; const state = { votes: cleanVotes, delegates: fullDelegates, refresh: false }; const changedState = voting(state, action); From eb4dc1abf6ef3b058627e0934bc6e5b41d14825d Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 14 Feb 2018 12:01:03 +0100 Subject: [PATCH 3/7] Fix delegateList grid layout --- src/components/delegateList/delegateList.css | 29 ++++++++++++-------- src/components/delegateList/delegateList.js | 10 +++---- src/components/delegateList/votingRow.js | 10 +++---- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/components/delegateList/delegateList.css b/src/components/delegateList/delegateList.css index 67ad7113af..d2263684f5 100644 --- a/src/components/delegateList/delegateList.css +++ b/src/components/delegateList/delegateList.css @@ -18,8 +18,7 @@ --main-header-font-size-XL: 32px; --main-header-font-size-L: 28px; --main-header-font-size-XS: 24px; - --grid-padding-XL: 32px; - --grid-padding-L: 32px; + --grid-padding-L: 24px; --grid-padding-XS: 19px; --list-line-height: 25px; --grid-header-line-height: 60px; @@ -123,8 +122,7 @@ & ul { list-style-type: none; line-height: 48px; - margin-top: 0; - margin-bottom: 0; + margin: 0; padding-left: var(--grid-padding-L); padding-right: var(--grid-padding-L); } @@ -132,7 +130,7 @@ .header { line-height: var(--header-line-height); - padding: 20px var(--grid-padding-XL); + padding: 20px var(--grid-padding-L); & h2 { margin-bottom: 0; @@ -284,15 +282,20 @@ .delegatesList { overflow-y: auto; - & .tableHead li { - color: var(--color-grayscale-dark) !important; - font-size: 15px !important; - transition: all ease 200ms; - font-weight: 500; + & .tableHead { + flex-wrap: nowrap; + + & li { + color: var(--color-grayscale-dark) !important; + font-size: 15px !important; + transition: all ease 200ms; + font-weight: 700; + } } & .row { background: linear-gradient(90deg, var(--color-white) 0%, #f5f8fc 82%); + flex-wrap: nowrap; &:nth-child(2n) { background: var(--color-white); @@ -310,6 +313,11 @@ } } +.username { + overflow: hidden; + text-overflow: ellipsis; +} + .showChangeSummery { & .filters .filter:not(.search) { display: none; @@ -424,7 +432,6 @@ & .tableHead li { font-size: 12px !important; - font-weight: 700; } } diff --git a/src/components/delegateList/delegateList.js b/src/components/delegateList/delegateList.js index 11bc6762cd..63852a0f1f 100644 --- a/src/components/delegateList/delegateList.js +++ b/src/components/delegateList/delegateList.js @@ -157,11 +157,11 @@ class DelegateList extends React.Component {
    -
  • {this.props.t('Vote', { context: 'verb' })}
    • -
  • {this.props.t('Rank')}
    • -
  • {this.props.t('Name')}
    • -
  • {this.props.t('Lisk ID')}
    • -
  • {this.props.t('Productivity')}
    • +
  • {this.props.t('Vote', { context: 'verb' })}
    • +
  • {this.props.t('Rank')}
    • +
  • {this.props.t('Name')}
    • +
  • {this.props.t('Lisk ID')}
    • +
  • {this.props.t('Productivity')}
{ this.getList(filteredList) }
diff --git a/src/components/delegateList/votingRow.js b/src/components/delegateList/votingRow.js index 216ec571d8..8aa68d9572 100644 --- a/src/components/delegateList/votingRow.js +++ b/src/components/delegateList/votingRow.js @@ -30,7 +30,7 @@ class VotingRow extends React.Component { render() { const { data, voteStatus, voteToggled } = this.props; return (
    -
  • +
    • -
  • {data.rank}
    • -
  • {data.username}
    • -
  • {data.address}
    • -
  • {data.productivity} %
    • +
  • {data.rank}
    • +
  • {data.username}
    • +
  • {data.address}
    • +
  • {data.productivity} %
); } From 1fc5baa18381b885b21d6a40f9705b0306fc3b18 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 14 Feb 2018 16:45:30 +0100 Subject: [PATCH 4/7] Fix empty "Voted" list messsage --- src/components/delegateList/delegateList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/delegateList/delegateList.js b/src/components/delegateList/delegateList.js index 63852a0f1f..d548e43245 100644 --- a/src/components/delegateList/delegateList.js +++ b/src/components/delegateList/delegateList.js @@ -122,7 +122,7 @@ class DelegateList extends React.Component { if (!this.isInitial && this.props.delegates.length === 0) { message = 'No delegates found.'; - } else if (this.state.filter === voteFilters.voted && + } else if (this.state.activeFilter === voteFilters.voted && Object.keys(this.props.votes).length === 0) { message = 'You have not voted yet.'; } else if (this.query !== '' && Object.keys(filteredList).length === 0) { From 08977ce5feffe2aa1f70e9c390536f41b44f664a Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 14 Feb 2018 16:45:53 +0100 Subject: [PATCH 5/7] Fix delegate list filters not to wrap on width ~1050px --- src/components/delegateList/delegateList.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/delegateList/delegateList.css b/src/components/delegateList/delegateList.css index d2263684f5..7eda742c57 100644 --- a/src/components/delegateList/delegateList.css +++ b/src/components/delegateList/delegateList.css @@ -168,7 +168,7 @@ vertical-align: middle; &:not(:last-of-type) { - margin-right: 50px; + margin-right: 40px; } } From f53a8f691dab9e448299bb40db8ff853e1e08d37 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Wed, 14 Feb 2018 16:54:23 +0100 Subject: [PATCH 6/7] Fix votes preview styles on mobile --- src/components/votesPreview/index.js | 2 +- src/components/votesPreview/votesPreview.css | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/votesPreview/index.js b/src/components/votesPreview/index.js index 0f14afba45..aeac9f78ff 100644 --- a/src/components/votesPreview/index.js +++ b/src/components/votesPreview/index.js @@ -87,7 +87,7 @@ class VotesPreview extends React.Component { {surpassMessage()} -
+
diff --git a/src/components/delegateList/votingRow.js b/src/components/delegateList/votingRow.js index 8aa68d9572..da00476059 100644 --- a/src/components/delegateList/votingRow.js +++ b/src/components/delegateList/votingRow.js @@ -41,7 +41,7 @@ class VotingRow extends React.Component {
  • {data.rank}
  • {data.username}
  • {data.address}
    • -
  • {data.productivity} %
    • +
  • {data.productivity} %
    • ); }