Skip to content

Commit

Permalink
Merge pull request #2036 from LiskHQ/1971-implement-start-voting
Browse files Browse the repository at this point in the history
Implement "start voting" - Closes #1971
  • Loading branch information
slaweet committed May 22, 2019
2 parents a13ceac + 7259bfa commit 120aaa9
Show file tree
Hide file tree
Showing 34 changed files with 584 additions and 570 deletions.
14 changes: 14 additions & 0 deletions i18n/locales/en/common.json
Expand Up @@ -30,6 +30,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",
Expand Down Expand Up @@ -69,6 +70,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",
Expand Down Expand Up @@ -148,6 +150,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",
Expand Down Expand Up @@ -287,6 +290,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",
Expand All @@ -298,10 +302,12 @@
"Next": "Next",
"No Public Key": "No Public Key",
"No Updates": "No Updates",
"No delegates found.": "No delegates found.",
"No newsfeed available": "No newsfeed available",
"No results": "No results",
"No results found": "No results found",
"No results found.": "No results found.",
"No search result in given criteria.": "No search result in given criteria.",
"No transactions yet": "No transactions yet",
"No, thanks": "No, thanks",
"Not Yet Implemented. Sorry.": "Not Yet Implemented. Sorry.",
Expand Down Expand Up @@ -355,6 +361,7 @@
"Redo": "Redo",
"Reference": "Reference",
"Register": "Register",
"Register as a Delegate": "Register as a Delegate",
"Registered": "Registered",
"Registrant": "Registrant",
"Release Notes": "Release Notes",
Expand All @@ -363,6 +370,7 @@
"Remove Extension": "Remove Extension",
"Remove from bookmarks": "Remove from bookmarks",
"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",
Expand Down Expand Up @@ -397,6 +405,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",
Expand Down Expand Up @@ -428,7 +437,9 @@
"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",
"Status": "Status",
"Step 1 / 4": "Step 1 / 4",
Expand Down Expand Up @@ -465,6 +476,8 @@
"To recover you can": "To recover you can",
"Toggle full screen": "Toggle full screen",
"Total": "Total",
"Total actions (": "Total actions (",
"Total fee: ": "Total fee: ",
"Transaction": "Transaction",
"Transaction Fee": "Transaction Fee",
"Transaction ID": "Transaction ID",
Expand Down Expand Up @@ -537,6 +550,7 @@
"You have cancelled the transaction on your hardware wallet.": "You have cancelled the transaction on your hardware wallet.",
"You have cancelled the transaction on your hardware wallet. You can either continue or retry.": "You have cancelled the transaction on your hardware wallet. You can either continue or retry.",
"You have cancelled voting on your hardware wallet.": "You have cancelled voting on your hardware wallet.",
"You have not voted yet.": "You have not voted yet.",
"You will be able to select the desired network when signing in": "You will be able to select the desired network when signing in",
"You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.": "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.",
"You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.": "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.",
Expand Down
6 changes: 6 additions & 0 deletions src/assets/images/icons-v2/checkmark-16-filled.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/components/app/type.css
Expand Up @@ -120,7 +120,6 @@ h6 {

p,
a,
b,
i,
strong {
font-size: var(--paragraph-font-size-l);
Expand Down
1 change: 1 addition & 0 deletions src/components/app/variablesV2.css
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/boxV2/box.css
Expand Up @@ -27,7 +27,7 @@
display: flex;
flex-direction: row;
height: 48px;
justify-content: flex-start;
justify-content: space-between;
margin: 0;
padding: 16px 20px;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion src/components/boxV2/index.js
Expand Up @@ -4,7 +4,7 @@ import styles from './box.css';
const Box = (props) => {
const childs = props.children;

const hasHeader = Array.isArray(childs) && childs.some(child => child.type === 'header');
const hasHeader = Array.isArray(childs) && childs.some(child => child && child.type === 'header');

return (
<div className={`${styles.wrapper} ${hasHeader ? styles.withHeader : ''} ${props.className}`}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/splashscreen/splashscreen.js
Expand Up @@ -101,7 +101,7 @@ class Splashscreen extends React.Component {
</Link>
<Tooltip
className={`${styles.tooltip}`}
infoIconClassName={styles.infoIcon}
styles={{ infoIcon: styles.infoIcon }}
title={t('Guest mode')}>
<React.Fragment>
<p className={`${styles.tooltipText}`}>
Expand Down
@@ -1,10 +1,11 @@
@import '../app/variablesV2.css';
@import '../../app/variablesV2.css';

.checkbox {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
cursor: pointer;

& input {
visibility: hidden;
Expand All @@ -13,10 +14,13 @@

& span {
color: var(--color-ultramarine-blue);
border-radius: var(--border-radius-standard);
font-size: 20px;
position: absolute;
left: 0;
top: 0;
width: 15px;
height: 15px;

&.checked {
display: none;
Expand All @@ -26,11 +30,22 @@
&.unchecked {
font-size: 16px;
background-color: var(--color-white);
border: 1px solid var(--dark-border-color);
border-radius: var(--border-radius-standard);
border: solid 1px rgba(0, 0, 0, 0.08);
color: var(--color-white);
display: block;
}

&.accent {
border: 1px solid var(--color-ultramarine-blue);
border-radius: calc(var(--border-radius-standard) + 1px);
box-shadow: 0 0 5px 0 var(--color-ultramarine-blue);
line-height: 15px !important;
}

&.removed {
border: solid 1px var(--color-burnt-sienna);
box-shadow: unset;
}
}

& input:checked {
Expand Down
20 changes: 20 additions & 0 deletions src/components/toolbox/checkBox/index.js
@@ -0,0 +1,20 @@
import React from 'react';
import styles from './checkBox.css';
import svgIcons from '../../../utils/svgIcons';

const CheckBox = ({
added, removed, id, onChange, accent, checked, className,
}) => (
<label className={`${styles.checkbox} ${className} ${checked ? 'checked' : 'unchecked'}`} htmlFor={id}>
<input type='checkbox'
id={id}
checked={!!checked}
onChange={onChange} />
<span className={`${styles.checked} ${(accent || added) && styles.accent}`}>
<img src={svgIcons.checkmark} />
</span>
<span className={`${styles.unchecked} ${accent && styles.accent} ${removed && styles.removed}`} />
</label>
);

export default CheckBox;
27 changes: 27 additions & 0 deletions src/components/toolbox/checkBox/index.test.js
@@ -0,0 +1,27 @@
import React from 'react';
import { mount } from 'enzyme';
import CheckBox from './index';

describe('CheckBox', () => {
const props = {
added: true,
removed: false,
onChange: () => {},
};

it('should render checkmark icon if props.checked is true', () => {
const wrapper = mount(<CheckBox {...props} checked={true} />);
expect(wrapper.find('img').props()).toHaveProperty('src', 'test-file-stub');
});

it('should render with "accent" class if props.accent is true', () => {
const wrapper = mount(<CheckBox {...props} accent={true} />);
expect(wrapper.find('.checked').hasClass('accent')).toEqual(true);
});

it('should render with "removed" class if props.removed is true', () => {
const wrapper = mount(<CheckBox {...props} removed={true} />);
expect(wrapper.find('span.unchecked').hasClass('removed')).toEqual(true);
});
});

24 changes: 24 additions & 0 deletions src/components/toolbox/tabs/index.js
@@ -0,0 +1,24 @@
import React from 'react';
import styles from './tabs.css';

const Tabs = ({
tabs, active, onClick, className,
}) => (
<ul className={styles.wrapper}>
{tabs.map((filter, i) => (
<li key={i}
className={`${className} ${filter.className} ${(active === filter.value) ? styles.active : ''}`}
onClick={() => onClick(filter)}>
{filter.name}
</li>
))}
</ul>
);

Tabs.defaultProps = {
tabs: [],
onClick: () => {},
className: '',
};

export default Tabs;
41 changes: 41 additions & 0 deletions src/components/toolbox/tabs/index.test.js
@@ -0,0 +1,41 @@
import React from 'react';
import { mount } from 'enzyme';
import Tabs from './index';

describe('Tabs', () => {
const props = {
tabs: [{
value: 'All',
},
{
value: 'Voted',
}],
active: 'All',
};

it('should render list of length of props.tabs', () => {
const wrapper = mount(<Tabs {...props} />);
expect(wrapper.find('li')).toHaveLength(props.tabs.length);
});

it('should render empty even if no props.tabs', () => {
const wrapper = mount(<Tabs />);
expect(wrapper.find('li')).toHaveLength(0);
});

it('should call props.onClick when li clicked', () => {
const index = 1;
const onClick = jest.fn();
const wrapper = mount(<Tabs {...props} onClick={onClick} />);
(wrapper.find('li').at(index)).simulate('click');
expect(onClick).toHaveBeenCalledWith(props.tabs[index]);
});

it('should not fail if no props.onClick passed when li clicked', () => {
const index = 1;
const onClick = jest.fn();
const wrapper = mount(<Tabs {...props} />);
(wrapper.find('li').at(index)).simulate('click');
expect(onClick).not.toHaveBeenCalledWith(props.tabs[index]);
});
});
41 changes: 41 additions & 0 deletions src/components/toolbox/tabs/tabs.css
@@ -0,0 +1,41 @@
@import '../../app/variablesV2.css';
@import '../../app/mixins.css';

.wrapper {
border-radius: inherit;
background-color: var(--color-white-smoke);
display: flex;
list-style: none;
margin: 0;
margin-left: -20px;
padding: 0;

& > li {
@mixin contentNormal;

align-items: center;
border-bottom: 1px solid var(--color-platinum);
border-right: 1px solid var(--color-platinum);
color: var(--color-slate-gray);
cursor: pointer;
display: flex;
justify-content: center;
margin-bottom: -2px;
padding: 14px 20px;
position: relative;

&:first-child {
border-top-left-radius: var(--border-radius-box);
}

&:last-child:not(.active) {
border-right: 0 none;
}

&.active {
background: var(--color-white);
border-bottom: 1px solid var(--color-white);
color: var(--color-ultramarine-blue);
}
}
}
12 changes: 9 additions & 3 deletions src/components/toolbox/tooltip/tooltip.js
Expand Up @@ -64,19 +64,25 @@ class Tooltip extends React.Component {

render() {
const {
title, children, footer, className, infoIconClassName,
title, children, footer, className, alwaysShow,
} = this.props;
const {
showTooltip,
} = this.state;
const {
infoIcon = '', tooltip = '',
} = this.props.styles || {};
return React.isValidElement(children) && (
<div
className={`${styles.tooltipWrapper} ${className}`}
onMouseLeave={this.handleMouseLeave}
onMouseMove={this.handleMouseMove}
ref={this.setWrapperRef}>
<span
className={`${styles.infoIcon} ${infoIconClassName}`}
className={`${styles.infoIcon} ${infoIcon}`}
onClick={this.handleClick}
/>
<div className={`${styles.tooltip} ${this.state.showTooltip ? 'shownTooltip' : ''} tooltip-window`}>
<div className={`${styles.tooltip} ${(alwaysShow || showTooltip) ? 'shownTooltip' : ''} ${tooltip} tooltip-window`}>
<span className={`${styles.tooltipArrow} tooltip-arrow`}>
<svg stroke="inherit" fill="currentColor" viewBox="0 0 14 28">
<path d="M13.307.5S.5 10.488.5 13.896c0 3.409 12.785 12.893 12.785 12.893"/>
Expand Down
Expand Up @@ -84,7 +84,7 @@ describe('TransactionsOverview V2', () => {
});

it('should call onFilterSet when filtering transations', () => {
wrapper.find('.transaction-filter-item').first().simulate('click');
wrapper.find('.filter-all').first().simulate('click');
expect(props.onFilterSet).to.have.been.calledWith();
});
});

0 comments on commit 120aaa9

Please sign in to comment.