m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

fix grid repositioning on label change (#8713)

Browse Source
This commit is contained in:
Brad Decker 2020-06-03 09:47:12 -05:00 committed by GitHub
parent 171704d980
commit c6b77c9734
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/threebox.spec.js
View File

@ -223,7 +223,7 @@ describe('MetaMask', function () {
it('finds the blockies toggle turned on', async function () { it('finds the blockies toggle turned on', async function () {
await driver.delay(regularDelayMs) await driver.delay(regularDelayMs)
const toggleLabel = await driver.findElement(By.css('.toggle-button__status-label')) const toggleLabel = await driver.findElement(By.css('.toggle-button__status'))
const toggleLabelText = await toggleLabel.getText() const toggleLabelText = await toggleLabel.getText()
assert.equal(toggleLabelText, 'ON') assert.equal(toggleLabelText, 'ON')
}) })

28
ui/app/components/ui/toggle-button/index.scss
View File

@ -1,7 +1,8 @@
.toggle-button { .toggle-button {
display: flex; display: flex;
$self: &;
&__status-label { &__status {
font-family: Roboto; font-family: Roboto;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -10,5 +11,28 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-transform: uppercase; text-transform: uppercase;
display: grid;
} }
}
&__label-off, &__label-on {
grid-area: 1 / 1 / 1 / 1;
}
&__label-off {
visibility: hidden;
}
&__label-on {
visibility: visible;
}
&--off {
#{ $self }__label-off {
visibility: visible;
}
#{ $self }__label-on {
visibility: hidden;
}
}
}

9
ui/app/components/ui/toggle-button/toggle-button.component.js
View File

@ -48,8 +48,10 @@ const colors = {
const ToggleButton = (props) => { const ToggleButton = (props) => {
const { value, onToggle, offLabel, onLabel } = props const { value, onToggle, offLabel, onLabel } = props
const modifier = value ? 'on' : 'off'
return ( return (
<div className="toggle-button"> <div className={`toggle-button toggle-button--${modifier}`}>
<ReactToggleButton <ReactToggleButton
value={value} value={value}
onToggle={onToggle} onToggle={onToggle}
@ -60,7 +62,10 @@ const ToggleButton = (props) => {
thumbAnimateRange={[3, 18]} thumbAnimateRange={[3, 18]}
colors={colors} colors={colors}
/> />
<div className="toggle-button__status-label">{ value ? onLabel : offLabel }</div> <div className="toggle-button__status">
<span className="toggle-button__label-off">{offLabel}</span>
<span className="toggle-button__label-on">{onLabel}</span>
</div>
</div> </div>
) )
} }