From 6bd9a8a029e999d7dabc86ba46e6ff11b95ba0e7 Mon Sep 17 00:00:00 2001 From: Adam Ridovics Date: Fri, 10 May 2019 22:18:58 +0200 Subject: [PATCH 01/34] fix(account): change styling & add aeur tag --- src/containers/account/components/Balance.js | 19 +++++++++++-------- src/containers/account/index.js | 12 +++++++++++- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/containers/account/components/Balance.js b/src/containers/account/components/Balance.js index 39f83704..e97c50b5 100644 --- a/src/containers/account/components/Balance.js +++ b/src/containers/account/components/Balance.js @@ -3,6 +3,7 @@ import styled from "styled-components"; import { default as theme, remCalc } from "styles/theme"; import { Pgrid, Pblock } from "components/PageLayout"; import { DECIMALS } from "utils/constants"; +import { AEUR } from "components/augmint-ui/currencies"; const Label = styled.div` font-size: ${remCalc(14)}; @@ -15,7 +16,10 @@ const Label = styled.div` const TokenBalance = styled.div` font-family: ${theme.typography.fontFamilies.currency}; font-size: ${remCalc(48)}; - .currency { + /* .currency { + font-size: ${remCalc(24)}; + } */ + .currency > span { font-size: ${remCalc(24)}; } `; @@ -45,24 +49,23 @@ export default class Balance extends React.Component { return ( -
+
- {userAccount.tokenBalance} - A€ +
- + - {loansAmount} A€ + - + - {locksAmount} A€ + diff --git a/src/containers/account/index.js b/src/containers/account/index.js index 62ec51be..f8413ac0 100644 --- a/src/containers/account/index.js +++ b/src/containers/account/index.js @@ -22,7 +22,10 @@ class AccountHome extends React.Component { lockManagerProvider(); augmintTokenProvider(); } + render() { + const isDesktop = window.innerWidth > 768; + return ( @@ -33,7 +36,14 @@ class AccountHome extends React.Component { - + Date: Fri, 10 May 2019 23:17:02 +0200 Subject: [PATCH 02/34] fix(Balance): delete unnec lines --- src/containers/account/components/Balance.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/containers/account/components/Balance.js b/src/containers/account/components/Balance.js index e97c50b5..ed8316b3 100644 --- a/src/containers/account/components/Balance.js +++ b/src/containers/account/components/Balance.js @@ -3,7 +3,7 @@ import styled from "styled-components"; import { default as theme, remCalc } from "styles/theme"; import { Pgrid, Pblock } from "components/PageLayout"; import { DECIMALS } from "utils/constants"; -import { AEUR } from "components/augmint-ui/currencies"; +import { AEUR, ETH } from "components/augmint-ui/currencies"; const Label = styled.div` font-size: ${remCalc(14)}; @@ -16,9 +16,6 @@ const Label = styled.div` const TokenBalance = styled.div` font-family: ${theme.typography.fontFamilies.currency}; font-size: ${remCalc(48)}; - /* .currency { - font-size: ${remCalc(24)}; - } */ .currency > span { font-size: ${remCalc(24)}; } @@ -71,7 +68,7 @@ export default class Balance extends React.Component { -
{userAccount.ethBalance} ETH
+ {children} From 9497b678365aac5d07b68a7669a6c5ea27be258a Mon Sep 17 00:00:00 2001 From: Adam Ridovics Date: Tue, 14 May 2019 11:45:57 +0200 Subject: [PATCH 03/34] fix(accpuntInfo): add currency tag & change styling --- src/assets/images/close-black.svg | 5 -- src/assets/images/close-dark.svg | 3 ++ src/components/accountAddress/index.js | 5 +- src/components/accountAddress/styles.js | 7 +++ src/components/accountInfo/index.js | 52 +++++++++++++++---- src/components/accountInfo/styles.js | 19 ++++--- src/components/augmint-ui/button/styles.js | 5 ++ .../dashboard/containers/topNav/index.js | 4 +- .../dashboard/containers/topNav/styles.js | 2 + src/containers/app/index.js | 2 +- 10 files changed, 76 insertions(+), 28 deletions(-) delete mode 100644 src/assets/images/close-black.svg create mode 100644 src/assets/images/close-dark.svg diff --git a/src/assets/images/close-black.svg b/src/assets/images/close-black.svg deleted file mode 100644 index f19b016b..00000000 --- a/src/assets/images/close-black.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/images/close-dark.svg b/src/assets/images/close-dark.svg new file mode 100644 index 00000000..96d54af0 --- /dev/null +++ b/src/assets/images/close-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/accountAddress/index.js b/src/components/accountAddress/index.js index 480bd771..0a832ec9 100644 --- a/src/components/accountAddress/index.js +++ b/src/components/accountAddress/index.js @@ -5,8 +5,9 @@ import { shortAccountAddresConverter } from "utils/converter"; import { StyledContainer, StyledClicked, StyledHint } from "./styles"; export default function AccountAddress(props) { - const { address, showCopyIcon, title, shortAddress } = props; + const { address, showCopyIcon, title, shortAddress, breakToLines } = props; const _title = title !== undefined ? title : "Account: "; + const _className = breakToLines ? "breakToLines" : ""; function copyAddress(e) { let element = e.target; @@ -34,7 +35,7 @@ export default function AccountAddress(props) { } return ( - + {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} {showCopyIcon && ( diff --git a/src/components/accountAddress/styles.js b/src/components/accountAddress/styles.js index 1c9e206a..cf87574e 100644 --- a/src/components/accountAddress/styles.js +++ b/src/components/accountAddress/styles.js @@ -42,4 +42,11 @@ export const StyledContainer = styled.div` content: "Copied!"; } } + + &.breakToLines { + @media (max-width: 600px) { + display: block; + max-width: 260px; + } + } `; diff --git a/src/components/accountInfo/index.js b/src/components/accountInfo/index.js index 780711bf..035287b2 100644 --- a/src/components/accountInfo/index.js +++ b/src/components/accountInfo/index.js @@ -4,8 +4,12 @@ import { Link } from "react-router-dom"; import { ConnectionStatus } from "components/MsgPanels"; import AccountAddress from "components/accountAddress"; import { StyledAccountInfo, StyledAccountDiv, StyledAccInfoLink } from "./styles"; +import { AEUR, ETH } from "components/augmint-ui/currencies"; +import { ETHEUR } from "utils/constants"; import Icon from "components/augmint-ui/icon"; -import WatchAssetButton from "components/watchAssetButton.js"; +import Button from "components/augmint-ui/button"; +import WatchAssetButton from "components/watchAssetButton"; +import { default as theme } from "styles/theme"; export class AccountInfo extends React.Component { render() { @@ -33,27 +37,55 @@ export class AccountInfo extends React.Component { > - Account address: -
+ Account address: +

- Balance: -
- ETH: {data.account.ethBalance} + Balance: +
+
- A-EUR: {data.account.tokenBalance} +
- €/ETH {data.rates.info.ethFiatRate} + + {ETHEUR}: + + {data.rates.info.ethFiatRate} + + + {/*
diff --git a/src/containers/account/components/Balance.js b/src/containers/account/components/Balance.js index ed8316b3..52c6eaad 100644 --- a/src/containers/account/components/Balance.js +++ b/src/containers/account/components/Balance.js @@ -4,6 +4,7 @@ import { default as theme, remCalc } from "styles/theme"; import { Pgrid, Pblock } from "components/PageLayout"; import { DECIMALS } from "utils/constants"; import { AEUR, ETH } from "components/augmint-ui/currencies"; +import AccountAddress from "components/accountAddress"; const Label = styled.div` font-size: ${remCalc(14)}; @@ -70,6 +71,18 @@ export default class Balance extends React.Component { +
+ + +
{children} ); diff --git a/src/containers/account/index.js b/src/containers/account/index.js index f8413ac0..6a9e13d8 100644 --- a/src/containers/account/index.js +++ b/src/containers/account/index.js @@ -24,8 +24,6 @@ class AccountHome extends React.Component { } render() { - const isDesktop = window.innerWidth > 768; - return ( @@ -36,14 +34,7 @@ class AccountHome extends React.Component { - + Date: Tue, 21 May 2019 12:45:21 +0200 Subject: [PATCH 18/34] feat(accountAddress, Balance): add acc copy feat to Balance module --- src/components/accountAddress/index.js | 133 ++++++++---------- src/components/accountAddress/styles.js | 48 ++++++- src/components/accountInfo/index.js | 2 +- src/components/augmint-ui/button/styles.js | 7 +- .../dashboard/containers/topNav/index.js | 19 ++- .../dashboard/containers/topNav/styles.js | 7 - src/containers/account/components/Balance.js | 12 +- 7 files changed, 127 insertions(+), 101 deletions(-) diff --git a/src/components/accountAddress/index.js b/src/components/accountAddress/index.js index a4364687..584e347e 100644 --- a/src/components/accountAddress/index.js +++ b/src/components/accountAddress/index.js @@ -1,78 +1,25 @@ import React from "react"; import Icon from "components/augmint-ui/icon"; -import styled from "styled-components"; -import theme from "styles/theme"; +import Button from "components/augmint-ui/button"; import { shortAccountAddresConverter } from "utils/converter"; -// import { StyledContainer, StyledClicked, StyledHint } from "./styles"; - -const StyledClicked = styled.span` - color: ${theme.colors.darkGreen}; - display: none; -`; - -const StyledHint = styled.span` - -webkit-font-smoothing: antialiased; - color: ${theme.colors.white}; - display: none; - position: absolute; - background-color: ${theme.colors.primary}; - font-weight: lighter; - padding: 5px 10px; - border-radius: 5px; - - &::after { - content: "Click to copy!"; - } -`; - -const StyledContainer = styled.div` - cursor: pointer; - display: inline-block; - font-weight: 400; - - &.clicked ${StyledClicked} { - display: inline-block; - padding-right: 5px; - } - - &:hover ${StyledHint} { - display: block; - } - - &.clicked:hover ${StyledHint} { - display: block; - - &::after { - color: ${theme.colors.lightGreen}; - content: "Copied!"; - } - } - - &.breakToLines { - .onMobile { - @media (max-width: 600px) { - display: block; - max-width: 260px; - } - } - } - - &.bold { - font-weight: 700; - } -`; +import { StyledContainer, StyledClicked, StyledHint, StyledDiv } from "./styles"; export default function AccountAddress(props) { - const { address, showCopyIcon, title, shortAddress, className } = props; + const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = props; const _title = title !== undefined ? title : "Account: "; - // const _className = breakToLines ? (bold ? "breakToLines bold" : "breakToLines") : bold ? "bold" : ""; + const _className = className + " container"; function copyAddress(e) { let element = e.target; + let siblingElem; if (element.attributes.name && element.attributes.name.nodeValue === "copy") { element = element.parentElement; } + if (e.target.nextSibling) { + siblingElem = e.target.nextSibling; + siblingElem.classList.add("show"); + } element.classList.add("clicked"); const el = document.createElement("textarea"); el.value = address; @@ -87,25 +34,63 @@ export default function AccountAddress(props) { function removeClicked(e) { let element = e.target; + let siblingElem; if (element.attributes.name && element.attributes.name.nodeValue === "copy") { element = element.parentElement; } + if (e.target.nextSibling) { + siblingElem = e.target.nextSibling; + setTimeout(() => { + siblingElem.classList.remove("show"); + }, 3000); + } element.classList.remove("clicked"); } return ( - - {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} - {showCopyIcon && ( - +
+ {showCopyLink ? ( + + {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} + {showCopyIcon && ( + + )} + + + + Copied! + + + ) : ( + + {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} + {showCopyIcon && ( + + )} + + + + + + )} - {/* {showCopyLink && - } */} - - - - - - +
); } diff --git a/src/components/accountAddress/styles.js b/src/components/accountAddress/styles.js index 731bd8d9..ce852395 100644 --- a/src/components/accountAddress/styles.js +++ b/src/components/accountAddress/styles.js @@ -19,12 +19,24 @@ export const StyledHint = styled.span` &::after { content: "Click to copy!"; } + + &.noHint { + display: none; + } `; export const StyledContainer = styled.div` cursor: pointer; display: inline-block; - font-weight: 700; + font-weight: 400; + + &.container { + position: relative; + } + + &.noClick { + cursor: default; + } &.clicked ${StyledClicked} { display: inline-block; @@ -45,9 +57,39 @@ export const StyledContainer = styled.div` } &.breakToLines { - @media (max-width: 600px) { + &.onMobile { + @media (max-width: 600px) { + display: block; + max-width: 260px; + } + } + &.always { display: block; - max-width: 260px; + max-width: 210px; + margin: auto; } } + + &.bold { + font-weight: 700; + } + + &.font { + font-family: ${theme.typography.fontFamilies.currency}; + } +`; + +export const StyledDiv = styled.div` + font-family: ${theme.typography.fontFamilies.default}; + display: none; + + &.show { + display: block; + background-color: white; + border-radius: 3px; + padding: 10px 20px; + position: absolute; + left: 45px; + top: 42px; + } `; diff --git a/src/components/accountInfo/index.js b/src/components/accountInfo/index.js index 1f5a9f68..9d4957bd 100644 --- a/src/components/accountInfo/index.js +++ b/src/components/accountInfo/index.js @@ -48,7 +48,7 @@ export class AccountInfo extends React.Component { address={data.account.address} showCopyIcon="true" title="" - className={"breakToLines bold"} + className={"breakToLines onMobile bold"} />
diff --git a/src/components/augmint-ui/button/styles.js b/src/components/augmint-ui/button/styles.js index a99619d6..e7c6ac4c 100644 --- a/src/components/augmint-ui/button/styles.js +++ b/src/components/augmint-ui/button/styles.js @@ -128,11 +128,16 @@ export const BaseButton = styledComponent => styledComponent` border: transparent; color: ${theme.colors.primary}; + &.sanserif { + font-family: ${theme.typography.fontFamilies.default}; + } + &:hover, &:focus { background: transparent; - color: ${theme.colors.secondaryDark}; + color: ${theme.colors.primary}; border-color: transparent; + text-decoration: underline; } } diff --git a/src/components/dashboard/containers/topNav/index.js b/src/components/dashboard/containers/topNav/index.js index b66b6b94..200c1c73 100644 --- a/src/components/dashboard/containers/topNav/index.js +++ b/src/components/dashboard/containers/topNav/index.js @@ -124,23 +124,20 @@ class TopNav extends React.Component { Balance - + - + - +
diff --git a/src/components/dashboard/containers/topNav/styles.js b/src/components/dashboard/containers/topNav/styles.js index 590a5d19..a3fa1dd7 100644 --- a/src/components/dashboard/containers/topNav/styles.js +++ b/src/components/dashboard/containers/topNav/styles.js @@ -84,13 +84,6 @@ export const StyledTopNavLi = styled.li` justify-content: center; align-items: center; height: ${TOP_NAV_HEIGHT}; - - /* &.navLinkRight:hover ${StyledAccount} { - display: block; - position: absolute; - right: 64px; - top: ${TOP_NAV_HEIGHT}; - } */ `; export const StyledTopNavLink = styled(Link)` diff --git a/src/containers/account/components/Balance.js b/src/containers/account/components/Balance.js index 52c6eaad..546e58eb 100644 --- a/src/containers/account/components/Balance.js +++ b/src/containers/account/components/Balance.js @@ -73,15 +73,19 @@ export default class Balance extends React.Component {
- +
{children} From 986f8a5bc24de294f7227ff69d800a640c64589f Mon Sep 17 00:00:00 2001 From: Adam Ridovics Date: Wed, 22 May 2019 18:17:07 +0200 Subject: [PATCH 19/34] fix(accountAddress): convert to class component --- src/components/accountAddress/index.js | 191 +++++++++++++++++++----- src/components/accountAddress/styles.js | 2 +- 2 files changed, 151 insertions(+), 42 deletions(-) diff --git a/src/components/accountAddress/index.js b/src/components/accountAddress/index.js index 584e347e..f23a6e39 100644 --- a/src/components/accountAddress/index.js +++ b/src/components/accountAddress/index.js @@ -3,26 +3,31 @@ import Icon from "components/augmint-ui/icon"; import Button from "components/augmint-ui/button"; import { shortAccountAddresConverter } from "utils/converter"; -import { StyledContainer, StyledClicked, StyledHint, StyledDiv } from "./styles"; +import { StyledContainer, StyledClicked, StyledHint, StyledHintBtn } from "./styles"; -export default function AccountAddress(props) { - const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = props; - const _title = title !== undefined ? title : "Account: "; - const _className = className + " container"; +export default class AccountAddress extends React.Component { + constructor(props) { + super(props); + this.copyAddress = this.copyAddress.bind(this); + this.removeClicked = this.removeClicked.bind(this); + } - function copyAddress(e) { + copyAddress(e) { let element = e.target; - let siblingElem; - if (element.attributes.name && element.attributes.name.nodeValue === "copy") { - element = element.parentElement; + let elHint; + + if (element.id === "addressBtn") { + elHint = document.querySelector("#StyledHinBtn"); + elHint.classList.add("show"); } - if (e.target.nextSibling) { - siblingElem = e.target.nextSibling; - siblingElem.classList.add("show"); + + if (element.id === "StyledContainer") { + element = document.querySelector("#StyledContainer"); + element.classList.add("clicked"); } - element.classList.add("clicked"); + const el = document.createElement("textarea"); - el.value = address; + el.value = this.props.address; el.setAttribute("readonly", ""); el.style.position = "absolute"; el.style.left = "-9999px"; @@ -32,56 +37,68 @@ export default function AccountAddress(props) { document.body.removeChild(el); } - function removeClicked(e) { - let element = e.target; - let siblingElem; - if (element.attributes.name && element.attributes.name.nodeValue === "copy") { - element = element.parentElement; - } - if (e.target.nextSibling) { - siblingElem = e.target.nextSibling; + removeClicked(e) { + let element = document.querySelector("#StyledContainer"); + let elHint; + if (document.querySelector("#StyledHinBtn")) { + elHint = document.querySelector("#StyledHinBtn"); setTimeout(() => { - siblingElem.classList.remove("show"); + elHint.classList.remove("show"); }, 3000); } element.classList.remove("clicked"); } - return ( -
- {showCopyLink ? ( + render() { + const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = this.props; + const _title = title !== undefined ? title : "Account: "; + const _className = className + " container"; + const ShortAddress = () => _title + (shortAddress === true ? shortAccountAddresConverter(address) : address); + + const ContainerWBtn = () => { + return ( - {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} + {showCopyIcon && ( )} - + Copied! - + - ) : ( - - {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} + ); + }; + + const ContainerWHint = () => { + return ( + + {showCopyIcon && ( )} @@ -90,7 +107,99 @@ export default function AccountAddress(props) { - )} -
- ); + ); + }; + + return
{showCopyLink ? : }
; + } } + +// export default function AccountAddress(props) { +// const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = props; +// const _title = title !== undefined ? title : "Account: "; +// const _className = className + " container"; + +// function copyAddress(e) { +// let element = e.target; +// let siblingElem; +// if (element.attributes.name && element.attributes.name.nodeValue === "copy") { +// element = element.parentElement; +// } +// if (e.target.nextSibling) { +// siblingElem = e.target.nextSibling; +// siblingElem.classList.add("show"); +// } +// element.classList.add("clicked"); +// const el = document.createElement("textarea"); +// el.value = address; +// el.setAttribute("readonly", ""); +// el.style.position = "absolute"; +// el.style.left = "-9999px"; +// document.body.appendChild(el); +// el.select(); +// document.execCommand("copy"); +// document.body.removeChild(el); +// } + +// function removeClicked(e) { +// let element = e.target; +// let siblingElem; +// if (element.attributes.name && element.attributes.name.nodeValue === "copy") { +// element = element.parentElement; +// } +// if (e.target.nextSibling) { +// siblingElem = e.target.nextSibling; +// setTimeout(() => { +// siblingElem.classList.remove("show"); +// }, 3000); +// } +// element.classList.remove("clicked"); +// } + +// return ( +//
+// {showCopyLink ? ( +// +// {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} +// {showCopyIcon && ( +// +// )} +// +// +// +// Copied! +// +// +// ) : ( +// +// {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} +// {showCopyIcon && ( +// +// )} +// +// +// +// +// +// +// )} +//
+// ); +// } diff --git a/src/components/accountAddress/styles.js b/src/components/accountAddress/styles.js index ce852395..537d4c0d 100644 --- a/src/components/accountAddress/styles.js +++ b/src/components/accountAddress/styles.js @@ -79,7 +79,7 @@ export const StyledContainer = styled.div` } `; -export const StyledDiv = styled.div` +export const StyledHintBtn = styled.div` font-family: ${theme.typography.fontFamilies.default}; display: none; From af3247c7361addcbdcf69d95d6c471b39617d89c Mon Sep 17 00:00:00 2001 From: Adam Ridovics Date: Thu, 23 May 2019 15:07:54 +0200 Subject: [PATCH 20/34] fix(accountAddress): make it statful --- src/components/accountAddress/index.js | 159 +++++------------------- src/components/accountAddress/styles.js | 6 +- 2 files changed, 35 insertions(+), 130 deletions(-) diff --git a/src/components/accountAddress/index.js b/src/components/accountAddress/index.js index f23a6e39..a3b9d70d 100644 --- a/src/components/accountAddress/index.js +++ b/src/components/accountAddress/index.js @@ -8,24 +8,31 @@ import { StyledContainer, StyledClicked, StyledHint, StyledHintBtn } from "./sty export default class AccountAddress extends React.Component { constructor(props) { super(props); + this.toggleHint = this.toggleHint.bind(this); this.copyAddress = this.copyAddress.bind(this); - this.removeClicked = this.removeClicked.bind(this); + this.state = { + showHint: false + }; } - copyAddress(e) { - let element = e.target; - let elHint; - - if (element.id === "addressBtn") { - elHint = document.querySelector("#StyledHinBtn"); - elHint.classList.add("show"); - } - - if (element.id === "StyledContainer") { - element = document.querySelector("#StyledContainer"); - element.classList.add("clicked"); + toggleHint(e, toggle, timeout) { + if (toggle) { + this.setState({ showHint: true }); + this.copyAddress(); + timeout && + setTimeout(() => { + this.setState({ + showHint: false + }); + }, 2000); + } else { + this.setState({ + showHint: false + }); } + } + copyAddress(e) { const el = document.createElement("textarea"); el.value = this.props.address; el.setAttribute("readonly", ""); @@ -37,46 +44,34 @@ export default class AccountAddress extends React.Component { document.body.removeChild(el); } - removeClicked(e) { - let element = document.querySelector("#StyledContainer"); - let elHint; - if (document.querySelector("#StyledHinBtn")) { - elHint = document.querySelector("#StyledHinBtn"); - setTimeout(() => { - elHint.classList.remove("show"); - }, 3000); - } - element.classList.remove("clicked"); - } - render() { const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = this.props; const _title = title !== undefined ? title : "Account: "; - const _className = className + " container"; + const _className = this.state.showHint ? className + " showHint" : className; const ShortAddress = () => _title + (shortAddress === true ? shortAccountAddresConverter(address) : address); const ContainerWBtn = () => { return ( - + {showCopyIcon && ( this.toggleHint(e, true)} + onMouseLeave={e => this.toggleHint(e, false)} /> )} - + Copied! @@ -87,9 +82,9 @@ export default class AccountAddress extends React.Component { const ContainerWHint = () => { return ( this.toggleHint(e, true)} + onMouseLeave={e => this.toggleHint(e, false)} + className={_className} id="StyledContainer" > @@ -97,8 +92,8 @@ export default class AccountAddress extends React.Component { this.toggleHint(e, true)} + onMouseLeave={e => this.toggleHint(e, false)} /> )} @@ -113,93 +108,3 @@ export default class AccountAddress extends React.Component { return
{showCopyLink ? : }
; } } - -// export default function AccountAddress(props) { -// const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = props; -// const _title = title !== undefined ? title : "Account: "; -// const _className = className + " container"; - -// function copyAddress(e) { -// let element = e.target; -// let siblingElem; -// if (element.attributes.name && element.attributes.name.nodeValue === "copy") { -// element = element.parentElement; -// } -// if (e.target.nextSibling) { -// siblingElem = e.target.nextSibling; -// siblingElem.classList.add("show"); -// } -// element.classList.add("clicked"); -// const el = document.createElement("textarea"); -// el.value = address; -// el.setAttribute("readonly", ""); -// el.style.position = "absolute"; -// el.style.left = "-9999px"; -// document.body.appendChild(el); -// el.select(); -// document.execCommand("copy"); -// document.body.removeChild(el); -// } - -// function removeClicked(e) { -// let element = e.target; -// let siblingElem; -// if (element.attributes.name && element.attributes.name.nodeValue === "copy") { -// element = element.parentElement; -// } -// if (e.target.nextSibling) { -// siblingElem = e.target.nextSibling; -// setTimeout(() => { -// siblingElem.classList.remove("show"); -// }, 3000); -// } -// element.classList.remove("clicked"); -// } - -// return ( -//
-// {showCopyLink ? ( -// -// {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} -// {showCopyIcon && ( -// -// )} -// -// -// -// Copied! -// -// -// ) : ( -// -// {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)} -// {showCopyIcon && ( -// -// )} -// -// -// -// -// -// -// )} -//
-// ); -// } diff --git a/src/components/accountAddress/styles.js b/src/components/accountAddress/styles.js index 537d4c0d..b1e8666c 100644 --- a/src/components/accountAddress/styles.js +++ b/src/components/accountAddress/styles.js @@ -38,7 +38,7 @@ export const StyledContainer = styled.div` cursor: default; } - &.clicked ${StyledClicked} { + &.showHint ${StyledClicked} { display: inline-block; padding-right: 5px; } @@ -47,7 +47,7 @@ export const StyledContainer = styled.div` display: block; } - &.clicked:hover ${StyledHint} { + &.showHint:hover ${StyledHint} { display: block; &::after { @@ -83,7 +83,7 @@ export const StyledHintBtn = styled.div` font-family: ${theme.typography.fontFamilies.default}; display: none; - &.show { + &.showHint { display: block; background-color: white; border-radius: 3px; From c4896650778eabeceadcda867e2cfcd105bd12c3 Mon Sep 17 00:00:00 2001 From: Adam Ridovics Date: Mon, 27 May 2019 11:47:44 +0200 Subject: [PATCH 21/34] feat(button): add variations to button --- src/components/accountAddress/index.js | 27 ++++++++++-- src/components/augmint-ui/button/styles.js | 51 +++++++++++++++++++--- src/containers/account/index.js | 2 +- 3 files changed, 70 insertions(+), 10 deletions(-) diff --git a/src/components/accountAddress/index.js b/src/components/accountAddress/index.js index a3b9d70d..40954323 100644 --- a/src/components/accountAddress/index.js +++ b/src/components/accountAddress/index.js @@ -62,15 +62,34 @@ export default class AccountAddress extends React.Component { onMouseLeave={e => this.toggleHint(e, false)} /> )} - + */} + */}