From 2eb6785b0d54d847dfe96cce3149c9f254d28b78 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 6 Dec 2018 19:28:50 +0100 Subject: [PATCH 1/7] styles for readOnly input --- src/components/inputs/Input/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 6645da8d..c335e75d 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -62,6 +62,13 @@ const StyledInput = styled.input` color: ${colors.TEXT_SECONDARY}; } + &:read-only { + ${props => !props.isReceiveAddress && css` + background: ${colors.GRAY_LIGHT}; + color: ${colors.TEXT_SECONDARY}; + `} + } + ${props => props.trezorAction && css` z-index: 10001; position: relative; /* bigger than modal container */ @@ -184,6 +191,7 @@ class Input extends PureComponent { autoCorrect={this.props.autocorrect} autoCapitalize={this.props.autocapitalize} spellCheck={this.props.spellCheck} + isReceiveAddress={this.props.isReceiveAddress} isSmallText={this.props.isSmallText} value={this.props.value} readOnly={this.props.readOnly} @@ -235,12 +243,14 @@ Input.propTypes = { name: PropTypes.string, isSmallText: PropTypes.bool, isPartiallyHidden: PropTypes.bool, + isReceiveAddress: PropTypes.bool, }; Input.defaultProps = { type: 'text', autoSelect: false, height: 40, + isReceiveAddress: false, }; export default Input; From a94d949ad46dfd65d72bcf5977efd705adc9cb06 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 6 Dec 2018 19:31:53 +0100 Subject: [PATCH 2/7] added readOnly property and styles to textarea component --- src/components/Textarea/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 736158e2..71abf085 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -57,6 +57,16 @@ const StyledTextarea = styled(Textarea)` opacity: 1; } + &:read-only { + background: ${colors.GRAY_LIGHT}; + color: ${colors.TEXT_SECONDARY}; + + &::placeholder { + color: ${disabledColor}; + opacity: 1; + } + } + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; @@ -150,11 +160,13 @@ const TextArea = ({ onFocus, onBlur, isDisabled, + readOnly, name, onChange, topLabel, rows, maxRows, + maxLength, autoSelect, state = '', bottomText = '', @@ -169,6 +181,7 @@ const TextArea = ({ autoCorrect="off" autoCapitalize="off" maxRows={maxRows} + maxLength={maxLength} rows={rows} className={className} disabled={isDisabled} @@ -177,6 +190,7 @@ const TextArea = ({ onFocus={onFocus} onBlur={onBlur} value={value} + readOnly={readOnly} onClick={autoSelect ? event => event.target.select() : null} placeholder={placeholder} onChange={onChange} @@ -202,7 +216,9 @@ TextArea.propTypes = { customStyle: PropTypes.string, placeholder: PropTypes.string, value: PropTypes.string, + readOnly: PropTypes.bool, maxRows: PropTypes.number, + maxLength: PropTypes.number, rows: PropTypes.number, name: PropTypes.string, isDisabled: PropTypes.bool, From 5605f967701b36c41ef32a59e450ca6b19f41cd2 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 6 Dec 2018 19:33:39 +0100 Subject: [PATCH 3/7] pass isReceiveAddress to Input component to ignore readOnly styles --- src/views/Wallet/views/Account/Receive/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 755fcb43..d9d12adc 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -120,6 +120,7 @@ const AccountReceive = (props: Props) => { Date: Thu, 6 Dec 2018 19:36:13 +0100 Subject: [PATCH 4/7] address and sig as readonly to enable text selection --- src/views/Wallet/views/Account/SignVerify/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index fad97374..0f486b98 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -87,7 +87,7 @@ class SignVerify extends Component { type="text" isSmallText autoSelect - isDisabled + readOnly /> @@ -110,7 +110,7 @@ class SignVerify extends Component { autoSelect maxRows={4} maxLength="255" - isDisabled + readOnly /> From 375136a586cf813fcd00e6bb35448a002d51aa61 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 7 Dec 2018 12:52:28 +0100 Subject: [PATCH 5/7] removed placeholder pseudoselector --- src/components/Textarea/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 71abf085..080b09fd 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -60,11 +60,6 @@ const StyledTextarea = styled(Textarea)` &:read-only { background: ${colors.GRAY_LIGHT}; color: ${colors.TEXT_SECONDARY}; - - &::placeholder { - color: ${disabledColor}; - opacity: 1; - } } &:disabled { From e0cb1886036d0d125279841db925e88b6fb80797 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 7 Dec 2018 14:39:15 +0100 Subject: [PATCH 6/7] pass number instead of string in maxLength --- src/views/Wallet/views/Account/SignVerify/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index 0f486b98..b2ddbfb3 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -98,7 +98,7 @@ class SignVerify extends Component { onChange={this.handleInputChange} rows={4} maxRows={4} - maxLength="255" + maxLength={255} /> @@ -109,7 +109,7 @@ class SignVerify extends Component { rows={4} autoSelect maxRows={4} - maxLength="255" + maxLength={255} readOnly /> @@ -147,7 +147,7 @@ class SignVerify extends Component { onChange={this.handleInputChange} rows={4} maxRows={4} - maxLength="255" + maxLength={255} /> @@ -159,7 +159,7 @@ class SignVerify extends Component { onChange={this.handleInputChange} rows={4} maxRows={4} - maxLength="255" + maxLength={255} /> From 678ce4867417e083a61f4b4cfef27a63bc9186ce Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 10 Dec 2018 16:57:10 +0100 Subject: [PATCH 7/7] removed special styling for receive address --- src/components/inputs/Input/index.js | 11 +++-------- src/views/Wallet/views/Account/Receive/index.js | 5 ++--- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 8047c2c3..4866b04c 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -63,10 +63,8 @@ const StyledInput = styled.input` } &:read-only { - ${props => !props.isReceiveAddress && css` - background: ${colors.GRAY_LIGHT}; - color: ${colors.TEXT_SECONDARY}; - `} + background: ${colors.GRAY_LIGHT}; + color: ${colors.TEXT_SECONDARY}; } ${props => props.trezorAction && css` @@ -102,7 +100,7 @@ const Overlay = styled.div` height: 100%; background-image: linear-gradient(to right, rgba(0,0,0, 0) 0%, - rgba(255,255,255, 1) 220px + rgba(249,249,249, 1) 220px ); `} `; @@ -191,7 +189,6 @@ class Input extends PureComponent { autoCorrect={this.props.autocorrect} autoCapitalize={this.props.autocapitalize} spellCheck={this.props.spellCheck} - isReceiveAddress={this.props.isReceiveAddress} isSmallText={this.props.isSmallText} value={this.props.value} readOnly={this.props.readOnly} @@ -243,14 +240,12 @@ Input.propTypes = { name: PropTypes.string, isSmallText: PropTypes.bool, isPartiallyHidden: PropTypes.bool, - isReceiveAddress: PropTypes.bool, }; Input.defaultProps = { type: 'text', autoSelect: false, height: 40, - isReceiveAddress: false, }; export default Input; diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 41ccac6c..67870d8e 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -65,13 +65,13 @@ const EyeButton = styled(Button)` z-index: 10001; padding: 0; width: 30px; - background: white; + background: transparent; top: 5px; position: absolute; right: 10px; &:hover { - background: white; + background: transparent; } `; @@ -122,7 +122,6 @@ const AccountReceive = (props: Props) => {