Skip to content

Commit 9c81a64

Browse files
edbrettedbrett
authored
Merge pull request #3479 from Vizzuality/feature/settings-new-design
Feature/settings new design
2 parents 7dec5dd + 1f22d66 commit 9c81a64

File tree

10 files changed

+498
-161
lines changed

10 files changed

+498
-161
lines changed

‎app/javascript/components/ui/dropdown/dropdown-styles.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '~styles/settings.scss';
22

3-
$dd-height: rem(35px);
3+
$dd-height: rem(34px);
44
$dd-font-size: rem(13px);
55

66
.c-dropdown {
@@ -9,7 +9,7 @@ $dd-font-size: rem(13px);
99
text-align: left;
1010

1111
.label {
12-
margin-bottom: rem(10px);
12+
margin-bottom: rem(5px);
1313
display: flex;
1414
justify-content: flex-start;
1515
align-items: center;

‎app/javascript/components/ui/dropdown/themes/dropdown-button.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $dd-button-height: rem(28px);
66
text-align: center;
77

88
.container {
9-
max-width: rem(85px);
9+
max-width: rem(70px);
1010

1111
.selector {
1212
border-radius: rem(25px);

‎app/javascript/components/ui/switch/react-toggle.scss

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.react-toggle {
2+
touch-action: pan-x;
3+
4+
display: block;
5+
position: relative;
6+
cursor: pointer;
7+
background-color: transparent;
8+
border: 0;
9+
padding: 0;
10+
11+
-webkit-touch-callout: none;
12+
-webkit-user-select: none;
13+
-khtml-user-select: none;
14+
-moz-user-select: none;
15+
-ms-user-select: none;
16+
user-select: none;
17+
18+
-webkit-tap-highlight-color: rgba(0,0,0,0);
19+
-webkit-tap-highlight-color: transparent;
20+
}
21+
22+
.react-toggle-screenreader-only {
23+
border: 0;
24+
clip: rect(0 0 0 0);
25+
height: 1px;
26+
margin: -1px;
27+
overflow: hidden;
28+
padding: 0;
29+
position: absolute;
30+
width: 1px;
31+
}
32+
33+
.react-toggle--disabled {
34+
cursor: not-allowed;
35+
opacity: 0.5;
36+
-webkit-transition: opacity 0.25s;
37+
transition: opacity 0.25s;
38+
}
39+
40+
.react-toggle-track {
41+
width: 50px;
42+
height: 24px;
43+
padding: 0;
44+
border-radius: 30px;
45+
background-color: #4D4D4D;
46+
-webkit-transition: all 0.2s ease;
47+
-moz-transition: all 0.2s ease;
48+
transition: all 0.2s ease;
49+
}
50+
51+
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
52+
background-color: #000000;
53+
}
54+
55+
.react-toggle--checked .react-toggle-track {
56+
background-color: #19AB27;
57+
}
58+
59+
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
60+
background-color: #128D15;
61+
}
62+
63+
.react-toggle-track-check {
64+
position: absolute;
65+
width: 14px;
66+
height: 10px;
67+
top: 0px;
68+
bottom: 0px;
69+
margin-top: auto;
70+
margin-bottom: auto;
71+
line-height: 0;
72+
left: 8px;
73+
opacity: 0;
74+
-webkit-transition: opacity 0.25s ease;
75+
-moz-transition: opacity 0.25s ease;
76+
transition: opacity 0.25s ease;
77+
}
78+
79+
.react-toggle--checked .react-toggle-track-check {
80+
opacity: 1;
81+
-webkit-transition: opacity 0.25s ease;
82+
-moz-transition: opacity 0.25s ease;
83+
transition: opacity 0.25s ease;
84+
}
85+
86+
.react-toggle-track-x {
87+
position: absolute;
88+
width: 10px;
89+
height: 10px;
90+
top: 0px;
91+
bottom: 0px;
92+
margin-top: auto;
93+
margin-bottom: auto;
94+
line-height: 0;
95+
right: 10px;
96+
opacity: 1;
97+
-webkit-transition: opacity 0.25s ease;
98+
-moz-transition: opacity 0.25s ease;
99+
transition: opacity 0.25s ease;
100+
}
101+
102+
.react-toggle--checked .react-toggle-track-x {
103+
opacity: 0;
104+
}
105+
106+
.react-toggle-thumb {
107+
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
108+
position: absolute;
109+
top: 1px;
110+
left: 1px;
111+
width: 22px;
112+
height: 22px;
113+
border: 1px solid #4D4D4D;
114+
border-radius: 50%;
115+
background-color: #FAFAFA;
116+
117+
-webkit-box-sizing: border-box;
118+
-moz-box-sizing: border-box;
119+
box-sizing: border-box;
120+
121+
-webkit-transition: all 0.25s ease;
122+
-moz-transition: all 0.25s ease;
123+
transition: all 0.25s ease;
124+
}
125+
126+
.react-toggle--checked .react-toggle-thumb {
127+
left: 27px;
128+
border-color: #19AB27;
129+
}
130+
131+
.react-toggle--focus .react-toggle-thumb {
132+
-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
133+
-moz-box-shadow: 0px 0px 3px 2px #0099E0;
134+
box-shadow: 0px 0px 2px 3px #0099E0;
135+
}
136+
137+
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
138+
-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
139+
-moz-box-shadow: 0px 0px 5px 5px #0099E0;
140+
box-shadow: 0px 0px 5px 5px #0099E0;
141+
}

‎app/javascript/components/ui/switch/switch-component.jsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
import Toggle from 'react-toggle';
4+
5+
import './react-toggle.scss';
6+
import './switch-styles.scss';
7+
import './themes/switch-light.scss';
8+
9+
class Switch extends PureComponent {
10+
render() {
11+
const { theme, label, value, options, onChange } = this.props;
12+
return (
13+
<div className={`c-switch ${theme || ''}`}>
14+
{label && <div className="label">{label}</div>}
15+
<Toggle
16+
icons={{
17+
checked: options[0].label,
18+
unchecked: options[1].label
19+
}}
20+
defaultChecked={options[1].value === value}
21+
onChange={e => {
22+
const result = e.target.checked
23+
? options[1].value
24+
: options[0].value;
25+
onChange(result);
26+
}}
27+
/>
28+
</div>
29+
);
30+
}
31+
}
32+
33+
Switch.propTypes = {
34+
theme: PropTypes.string,
35+
label: PropTypes.string,
36+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
37+
options: PropTypes.array,
38+
onChange: PropTypes.func
39+
};
40+
41+
export default Switch;

‎app/javascript/components/ui/switch/switch-styles.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import '~styles/settings.scss';
2+
3+
.c-switch {
4+
.label {
5+
margin-bottom: rem(5px);
6+
display: flex;
7+
justify-content: flex-start;
8+
align-items: center;
9+
font-weight: 400;
10+
font-size: 13px;
11+
}
12+
}

‎app/javascript/components/ui/switch/switch.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Component from './switch-component';
2+
3+
export default Component;

‎app/javascript/components/ui/switch/themes/switch-light.scss

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@import '~styles/settings.scss';
2+
3+
.theme-switch-light {
4+
.react-toggle {
5+
width: 100%;
6+
}
7+
8+
.react-toggle-track {
9+
width: 100%;
10+
height: rem(34px);
11+
background-color: transparent !important;
12+
border: solid 1px $border;
13+
14+
> div {
15+
width: 50%;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
opacity: 1;
20+
font-size: 13px;
21+
color: $slate;
22+
}
23+
24+
.react-toggle-track-check {
25+
left: 0;
26+
}
27+
28+
.react-toggle-track-x {
29+
right: 0;
30+
}
31+
}
32+
33+
.react-toggle-thumb {
34+
top: 0;
35+
left: 0;
36+
width: 50%;
37+
height: 100%;
38+
background-color: transparent;
39+
border-radius: 30px;
40+
border: solid 1px $green-gfw;
41+
box-shadow: none !important;
42+
}
43+
44+
.react-toggle--checked {
45+
.react-toggle-thumb {
46+
left: 50%;
47+
}
48+
}
49+
}

0 commit comments

Comments
 (0)