Browse Source

SONAR-11183 UI toggle switch state should be more obvious

tags/7.5
Stas Vilchik 5 years ago
parent
commit
e9f1c8b3bb

+ 4
- 1
server/sonar-web/src/main/js/components/controls/Toggle.tsx View File

@@ -20,6 +20,7 @@
import * as React from 'react';
import * as classNames from 'classnames';
import { Button } from '../ui/buttons';
import CheckIcon from '../icons-components/CheckIcon';
import './styles.css';

export interface Props {
@@ -47,7 +48,9 @@ export default class Toggle extends React.PureComponent<Props> {

return (
<Button className={className} name={this.props.name} onClick={this.handleClick}>
<div className="boolean-toggle-handle" />
<div className="boolean-toggle-handle">
<CheckIcon size={12} />
</div>
</Button>
);
}

+ 13
- 0
server/sonar-web/src/main/js/components/controls/styles.css View File

@@ -105,6 +105,9 @@
}

.boolean-toggle-handle {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
border: 1px solid var(--gray80);
@@ -114,9 +117,15 @@
transition: transform 0.3s cubic-bezier(0.87, -0.41, 0.19, 1.44), border 0.3s ease;
}

.boolean-toggle-handle > * {
opacity: 0;
transition: opacity 0.3s ease;
}

.button.boolean-toggle-on {
border-color: var(--darkBlue);
background-color: var(--darkBlue);
color: var(--darkBlue);
}

.button.boolean-toggle-on:hover {
@@ -131,3 +140,7 @@
border-color: #f6f6f6;
transform: translateX(var(--controlHeight));
}

.button.boolean-toggle-on .boolean-toggle-handle > * {
opacity: 1;
}

Loading…
Cancel
Save