git ssb

0+

mixmix / patchbay-scry



Commit 988caf44b54d771fc4246af26cbfcdec87f9dcc8

Browse Files

factor out new-steps/pick-times

mixmix committed on 8/27/2018, 6:43:11 AM
Parent: fdf219a4cc6267361e534f21330817706b26fd64

Files changed

views/component/day-picker.mcsschanged
views/component/time-picker.mcsschanged
views/new.jschanged
views/new.mcsschanged
views/new-steps/pick-times.jsadded
views/new-steps/pick-times.mcssadded
views/component/day-picker.mcssView
@@ -29,4 +29,59 @@
2929 …
3030 … div.Marama {}
3131 …
3232 … }
33 …+
34 …+/* over-rides or extension to marama */
35 …+
36 …+Marama {
37 …+ grid-template-rows: repeat(7, var(--tile-width)) !important
38 …+}
39 …+
40 …+MaramaDayLabel {
41 …+ font-size: 1rem
42 …+}
43 …+
44 …+MaramaDayTile {
45 …+ border-radius: 4rem
46 …+ border: 1px solid hsla(0, 0%, 100%, 0)
47 …+
48 …+ -past {
49 …+ cursor: not-allowed
50 …+ background: none
51 …+ color: hsl(0, 0%, 60%)
52 …+
53 …+ -events {
54 …+ border: 1px solid hsl(0, 0%, 40%)
55 …+
56 …+ -attending {
57 …+ background: hsl(0, 0%, 40%)
58 …+ color: #fff
59 …+ }
60 …+ }
61 …+ }
62 …+
63 …+ -future {
64 …+ background: none
65 …+ --color: hsla(320, 100%, 60%, 1)
66 …+ /* deepskyblue */
67 …+
68 …+ -events {
69 …+ border: 1px solid var(--color)
70 …+ color: var(--color)
71 …+
72 …+ -attending {
73 …+ background: var(--color)
74 …+ color: #fff
75 …+ }
76 …+ }
77 …+ }
78 …+
79 …+ -range {
80 …+ background: deeppink
81 …+
82 …+ -future {
83 …+ background: deepskyblue
84 …+ }
85 …+ }
86 …+}
87 …+
views/component/time-picker.mcssView
@@ -47,5 +47,4 @@
4747 … justify-content: center
4848 … }
4949 … }
5050 … }
51-
views/new.jsView
@@ -1,51 +1,23 @@
1-const { h, Struct, Array: MutantArray, when, computed } = require('mutant')
2-const DayPicker = require('./component/day-picker.js')
3-const TimePicker = require('./component/time-picker.js')
1 …+const { h, Struct, Array: MutantArray, computed } = require('mutant')
2 …+const PickTimes = require('./new-steps/pick-times')
43 …
54 … module.exports = function ScryNew (opts) {
65 … // const {
76 … // i18n
87 … // } = opts
98 …
109 … const state = Struct({
10 …+ step: 0,
1111 … monthIndex: new Date().getMonth(),
1212 … days: MutantArray([]),
1313 … times: MutantArray([])
1414 … })
1515 …
1616 … return h('ScryNew', [
17- DayPicker(state),
18- when(computed(state.days, d => Boolean(d.length)),
19- h('div.time-picker', [
20- h('label', computed(state.days, days => `Same times for all dates (${days.length})`)),
21- TimePicker(state),
22- h('div.timezone', [
23- h('label', 'Timezone of your scry is'),
24- h('div.zone', [
25- getTimezone(),
26- h('span', ['(UTC ', getTimezoneOffset(), ')'])
27- ])
28- ])
29- ]),
30- h('div.time-picker-pristine', [
31- h('label', 'Dates and Times'),
32- h('div.instruction', 'Select one or multiple dates')
33- ])
34- )
17 …+ computed(state.step, step => {
18 …+ switch (step) {
19 …+ case 0: return PickTimes(state)
20 …+ }
21 …+ })
3522 … ])
3623 … }
37-
38-// functions
39-
40-function getTimezone () {
41- try {
42- return Intl.DateTimeFormat().resolvedOptions().timeZone
43- } catch (e) {
44- return '??'
45- }
46-}
47-
48-function getTimezoneOffset () {
49- const offset = new Date().getTimezoneOffset() / -60
50- return offset > 0 ? `+${offset}` : offset
51-}
views/new.mcssView
@@ -4,135 +4,6 @@
44 … --feature-color: hsla(295, 67%, 60%, 1)
55 …
66 … font-family: sans, arial
77 …
8- display: grid
9- grid-template-columns: auto 1fr
10- grid-template-rows: auto auto
11- grid-column-gap: 1rem
12- grid-row-gap: 0
13-
14- div.ScryDayPicker {}
15-
16- div.time-picker {
17- grid-row: 1 / 3
18- grid-column: 2
19-
20- max-width: 350px
21- color: #fff
22- background: hsla(0, 0%, 100%, .3)
23- border-radius: var(--br)
24-
25- display: grid
26- grid-template-rows: auto 1fr auto
27- align-items: start
28-
29- label {
30- font-size: .7rem
31- letter-spacing: 1px
32- font-weight: 600
33- text-transform: uppercase
34-
35- margin: var(--boundary) var(--boundary) calc(var(--boundary) / 2) var(--boundary)
36- }
37-
38-
39- div.timezone {
40- padding: var(--boundary)
41- border-top: hsla(0, 0%, 100%, .5) 1px dashed
42-
43- label {}
44-
45- div.zone {
46- margin-top: .3rem
47-
48- font-weight: 600
49- display: flex
50- align-items: center
51-
52- span {
53- margin-left: .5rem
54- font-weight: initial
55- font-size: .8rem
56- }
57- }
58- }
59- }
60-
61- div.time-picker-pristine {
62- grid-row: 1 / 3
63- grid-column: 2
64-
65- color: #fff
66- max-width: 350px
67-
68- display: grid
69- grid-gap: .5rem
70- justify-content: center
71- justify-items: center
72- align-content: center
73-
74- label {
75- font-size: .8rem
76- letter-spacing: 1px
77- font-weight: 600
78- text-transform: uppercase
79- }
80- div.instruction {
81- }
82- }
838 … }
849 …
85-/* over-rides or extension to marama */
86-
87-Marama {
88- grid-template-rows: repeat(7, var(--tile-width)) !important
89-}
90-
91-MaramaDayLabel {
92- font-size: 1rem
93-}
94-
95-MaramaDayTile {
96- border-radius: 4rem
97- border: 1px solid hsla(0, 0%, 100%, 0)
98-
99- -past {
100- cursor: not-allowed
101- background: none
102- color: hsl(0, 0%, 60%)
103-
104- -events {
105- border: 1px solid hsl(0, 0%, 40%)
106-
107- -attending {
108- background: hsl(0, 0%, 40%)
109- color: #fff
110- }
111- }
112- }
113-
114- -future {
115- background: none
116- --color: hsla(320, 100%, 60%, 1)
117- /* deepskyblue */
118-
119- -events {
120- border: 1px solid var(--color)
121- color: var(--color)
122-
123- -attending {
124- background: var(--color)
125- color: #fff
126- }
127- }
128- }
129-
130- -range {
131- background: deeppink
132-
133- -future {
134- background: deepskyblue
135- }
136- }
137-}
138-
views/new-steps/pick-times.jsView
@@ -1,0 +1,41 @@
1 …+const { h, when, computed } = require('mutant')
2 …+const DayPicker = require('../component/day-picker.js')
3 …+const TimePicker = require('../component/time-picker.js')
4 …+
5 …+module.exports = function PickTimes (state) {
6 …+ return h('ScryNewPickTimes', [
7 …+ DayPicker(state),
8 …+ when(computed(state.days, d => Boolean(d.length)),
9 …+ h('div.time-picker', [
10 …+ h('label', computed(state.days, days => `Same times for all dates (${days.length})`)),
11 …+ TimePicker(state),
12 …+ h('div.timezone', [
13 …+ h('label', 'Timezone of your scry is'),
14 …+ h('div.zone', [
15 …+ getTimezone(),
16 …+ h('span', ['(UTC ', getTimezoneOffset(), ')'])
17 …+ ])
18 …+ ])
19 …+ ]),
20 …+ h('div.time-picker-pristine', [
21 …+ h('label', 'Dates and Times'),
22 …+ h('div.instruction', 'Select one or multiple dates')
23 …+ ])
24 …+ )
25 …+ ])
26 …+}
27 …+
28 …+// functions
29 …+
30 …+function getTimezone () {
31 …+ try {
32 …+ return Intl.DateTimeFormat().resolvedOptions().timeZone
33 …+ } catch (e) {
34 …+ return '??'
35 …+ }
36 …+}
37 …+
38 …+function getTimezoneOffset () {
39 …+ const offset = new Date().getTimezoneOffset() / -60
40 …+ return offset > 0 ? `+${offset}` : offset
41 …+}
views/new-steps/pick-times.mcssView
@@ -1,0 +1,76 @@
1 …+ScryNewPickTimes {
2 …+ display: grid
3 …+ grid-template-columns: auto 1fr
4 …+ grid-template-rows: auto auto
5 …+ grid-column-gap: 1rem
6 …+ grid-row-gap: 0
7 …+
8 …+ div.ScryDayPicker {}
9 …+
10 …+ div.time-picker {
11 …+ grid-row: 1 / 3
12 …+ grid-column: 2
13 …+
14 …+ max-width: 350px
15 …+ color: #fff
16 …+ background: hsla(0, 0%, 100%, .3)
17 …+ border-radius: var(--br)
18 …+
19 …+ display: grid
20 …+ grid-template-rows: auto 1fr auto
21 …+ align-items: start
22 …+
23 …+ label {
24 …+ font-size: .7rem
25 …+ letter-spacing: 1px
26 …+ font-weight: 600
27 …+ text-transform: uppercase
28 …+
29 …+ margin: var(--boundary) var(--boundary) calc(var(--boundary) / 2) var(--boundary)
30 …+ }
31 …+
32 …+ div.timezone {
33 …+ padding: var(--boundary)
34 …+ border-top: hsla(0, 0%, 100%, .5) 1px dashed
35 …+
36 …+ label {}
37 …+
38 …+ div.zone {
39 …+ margin-top: .3rem
40 …+
41 …+ font-weight: 600
42 …+ display: flex
43 …+ align-items: center
44 …+
45 …+ span {
46 …+ margin-left: .5rem
47 …+ font-weight: initial
48 …+ font-size: .8rem
49 …+ }
50 …+ }
51 …+ }
52 …+ }
53 …+
54 …+ div.time-picker-pristine {
55 …+ grid-row: 1 / 3
56 …+ grid-column: 2
57 …+
58 …+ color: #fff
59 …+ max-width: 350px
60 …+
61 …+ display: grid
62 …+ grid-gap: .5rem
63 …+ justify-content: center
64 …+ justify-items: center
65 …+ align-content: center
66 …+
67 …+ label {
68 …+ font-size: .8rem
69 …+ letter-spacing: 1px
70 …+ font-weight: 600
71 …+ text-transform: uppercase
72 …+ }
73 …+ div.instruction {
74 …+ }
75 …+ }
76 …+}

Built with git-ssb-web