Skip to content

Commit aa38b1f

Browse files
gregueirasgregueiras
committed
Multi tab WIP
1 parent a26d4fb commit aa38b1f

File tree

3 files changed

+204
-1
lines changed

3 files changed

+204
-1
lines changed

‎browser/main/modals/PreferencesModal/ConfigTab.styl

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,83 @@
11
@import('./Tab')
22

3+
.container
4+
display: flex
5+
flex-direction: column
6+
align-items: center
7+
justify-content: center
8+
position relative
9+
margin-bottom: 2em
10+
11+
.box-minmax
12+
width 608px
13+
display flex
14+
justify-content space-between
15+
font-size $tab--button-font-size
16+
color $ui-text-color
17+
span first-child
18+
margin-top 18px
19+
padding-right 10px
20+
position relative
21+
22+
div[id^="secondRow"]
23+
position absolute;
24+
z-index 2;
25+
left 0;
26+
top 0;
27+
margin-bottom -42px;
28+
29+
div[id^="firstRow"]
30+
position absolute;
31+
z-index 2;
32+
left 0;
33+
top 0;
34+
margin-bottom -25px;
35+
36+
.rs-range
37+
margin-top: 29px
38+
width: 600px
39+
-webkit-appearance: none
40+
&:focus
41+
outline: black
42+
&::-webkit-slider-runnable-track
43+
width: 100%
44+
height: 0.1px
45+
cursor: pointer
46+
box-shadow: none
47+
background: $ui-backgroundColor
48+
border-radius: 0px
49+
border: 0px solid #010101
50+
51+
&::-webkit-slider-thumb
52+
box-shadow: none
53+
border: 0px solid $ui-borderColor
54+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
55+
height: 42px
56+
width: 22px
57+
border-radius: 22px
58+
background: $ui-backgroundColor
59+
cursor: pointer
60+
-webkit-appearance: none
61+
margin-top: -20px
62+
63+
.rs-label
64+
position: relative
65+
transform-origin: center center
66+
display: block
67+
background: transparent
68+
border-radius: none
69+
line-height: 30px
70+
font-weight: normal
71+
box-sizing: border-box
72+
border: none
73+
margin-bottom: -15px
74+
margin-left: 0px
75+
left: attr(value)
76+
color: $ui-text-color
77+
font-style: normal
78+
font-weight: normal
79+
line-height: normal
80+
font-size: $tab--button-font-size
381
.root
482
padding 15px
583
color $ui-text-color
@@ -170,6 +248,11 @@ body[data-theme="dark"]
170248
select, .group-section-control-input
171249
colorDarkControl()
172250

251+
.box-minmax
252+
colorDarkControl()
253+
254+
.rs-range
255+
colorDarkControl()
173256

174257
body[data-theme="solarized-dark"]
175258
.root

‎browser/main/modals/PreferencesModal/Slider.styl

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.container
2+
display: flex
3+
flex-direction: column
4+
align-items: center
5+
justify-content: center
6+
.box-minmax
7+
margin-top: 30px
8+
width: 608px
9+
display: flex
10+
justify-content: space-between
11+
font-size: 20px
12+
color: #FFFFFF
13+
span:first-child
14+
margin-left: 10px
15+
.range-slider
16+
margin-top: 30vh
17+
.rs-range
18+
margin-top: 29px
19+
width: 600px
20+
-webkit-appearance: none
21+
&:focus
22+
outline: none
23+
&::-webkit-slider-runnable-track
24+
width: 100%
25+
height: 1px
26+
cursor: pointer
27+
box-shadow: none
28+
background: #ffffff
29+
border-radius: 0px
30+
border: 0px solid #010101
31+
&::-moz-range-track
32+
width: 100%
33+
height: 1px
34+
cursor: pointer
35+
box-shadow: none
36+
background: #ffffff
37+
border-radius: 0px
38+
border: 0px solid #010101
39+
&::-webkit-slider-thumb
40+
box-shadow: none
41+
border: 0px solid #ffffff
42+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
43+
height: 42px
44+
width: 22px
45+
border-radius: 22px
46+
background: rgba(255, 255, 255, 1)
47+
cursor: pointer
48+
-webkit-appearance: none
49+
margin-top: -20px
50+
&::-moz-range-thumb
51+
box-shadow: none
52+
border: 0px solid #ffffff
53+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
54+
height: 42px
55+
width: 22px
56+
border-radius: 22px
57+
background: rgba(255, 255, 255, 1)
58+
cursor: pointer
59+
-webkit-appearance: none
60+
margin-top: -20px
61+
&::-moz-focus-outer
62+
border: 0
63+
.rs-label
64+
position: relative
65+
transform-origin: center center
66+
display: block
67+
width: 98px
68+
height: 98px
69+
background: transparent
70+
border-radius: 50%
71+
line-height: 30px
72+
text-align: center
73+
font-weight: bold
74+
padding-top: 22px
75+
box-sizing: border-box
76+
border: 2px solid #fff
77+
margin-top: 20px
78+
margin-left: -38px
79+
left: attr(value)
80+
color: #fff
81+
font-style: normal
82+
font-weight: normal
83+
line-height: normal
84+
font-size: 36px
85+
&::after
86+
content: "kg"
87+
display: block
88+
font-size: 20px
89+
letter-spacing: 0.07em
90+
margin-top: -2px

‎browser/main/modals/PreferencesModal/UiTab.js

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import _ from 'lodash'
1212
import i18n from 'browser/lib/i18n'
1313
import { getLanguages } from 'browser/lib/Languages'
1414
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
15-
1615
const OSX = global.process.platform === 'darwin'
1716

1817
const electron = require('electron')
@@ -163,6 +162,20 @@ class UiTab extends React.Component {
163162
}, 2000)()
164163
}
165164

165+
handleSlider (number) {
166+
const sliderID = 'rs-range-line-' + number
167+
const bulletID = 'rs-bullet-' + number
168+
169+
const rangeSlider = document.getElementById(sliderID)
170+
const rangeBullet = document.getElementById(bulletID)
171+
172+
if (rangeSlider && rangeBullet) {
173+
rangeBullet.innerHTML = Math.floor(rangeSlider.value / 60) + ':' + rangeSlider.value % 60
174+
const bulletPosition = (rangeSlider.value / rangeSlider.max)
175+
rangeBullet.style.left = (bulletPosition * 578) + 'px'
176+
}
177+
}
178+
166179
render () {
167180
const UiAlert = this.state.UiAlert
168181
const UiAlertElement = UiAlert != null
@@ -199,6 +212,23 @@ class UiTab extends React.Component {
199212
</select>
200213
</div>
201214
</div>
215+
<div styleName='group-section'>
216+
<div styleName='container'>
217+
<div styleName='range-slider' id='firstRow'>
218+
<span id='rs-bullet-1' styleName='rs-label'>00:00</span>
219+
<input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5'
220+
onChange={() => this.handleSlider(1)} />
221+
</div>
222+
<div styleName='range-slider' id='secondRow'>
223+
<span id='rs-bullet-2' styleName='rs-label'>24:00</span>
224+
<input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5'
225+
onInput={() => this.handleSlider(2)} />
226+
</div>
227+
<div styleName='box-minmax'>
228+
<span>00:00</span><span>24:00</span>
229+
</div>
230+
</div>
231+
</div>
202232

203233
<div styleName='group-section'>
204234
<div styleName='group-section-label'>

0 commit comments

Comments
 (0)