Commit ca2790e4654757e6f97c0d5cff97163c1865af61
refactor styles, build out start of doodle example
mixmix committed on 8/21/2018, 6:38:47 AMParent: c99cbbf914e6a178a87b75810cb4784f19010329
Files changed
example/2_doodle.js | added |
index.js | changed |
styles/day-label.mcss | changed |
styles/day-tile.mcss | changed |
styles/index.mcss | changed |
example/2_doodle.js | ||
---|---|---|
@@ -1,0 +1,170 @@ | ||
1 … | +// run this from the terminal using : | |
2 … | +// npx electro example/2_doodle.js | |
3 … | + | |
4 … | +const { h, Struct, Array: MutantArray, computed } = require('mutant') | |
5 … | +const Marama = require('../') | |
6 … | + | |
7 … | +const state = Struct({ | |
8 … | + month: new Date().getMonth() + 1, | |
9 … | + events: MutantArray([]) | |
10 … | +}) | |
11 … | + | |
12 … | +const page = h('div.page', [ | |
13 … | + h('div.picker', [ | |
14 … | + h('div.month-picker', [ | |
15 … | + h('button', { 'ev-click': () => setMonth(-1) }, '<'), | |
16 … | + monthName(state.month), | |
17 … | + h('button', { 'ev-click': () => setMonth(+1) }, '>') | |
18 … | + ]), | |
19 … | + computed(state, ({ month, events }) => { | |
20 … | + return Marama({ | |
21 … | + month, | |
22 … | + events, | |
23 … | + onSelect, | |
24 … | + styles: { | |
25 … | + weekFormat: 'rows', | |
26 … | + showNumbers: true, | |
27 … | + tileRadius: 16, | |
28 … | + tileGap: 8 | |
29 … | + } | |
30 … | + }) | |
31 … | + }) | |
32 … | + ]), | |
33 … | + h('div.dates', [ | |
34 … | + computed(state.events, events => { | |
35 … | + return events | |
36 … | + .sort((a, b) => a.date - b.date) | |
37 … | + .map(e => h('div.date', e.date.toDateString())) | |
38 … | + }) | |
39 … | + ]) | |
40 … | +]) | |
41 … | + | |
42 … | +function setMonth (d) { | |
43 … | + state.month.set(state.month() + d) | |
44 … | +} | |
45 … | + | |
46 … | +function monthName (month) { | |
47 … | + const MONTHS = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] | |
48 … | + | |
49 … | + return computed(state.month, m => { | |
50 … | + var monthIndex = m - 1 | |
51 … | + while (monthIndex < 0) { monthIndex += 12 } | |
52 … | + return MONTHS[(monthIndex) % 12] | |
53 … | + }) | |
54 … | +} | |
55 … | + | |
56 … | +function onSelect ({ gte, lt, events }) { | |
57 … | + if (!events.length) addEmptyEvent() | |
58 … | + else clearDay() | |
59 … | + | |
60 … | + function addEmptyEvent () { | |
61 … | + state.events.push({ | |
62 … | + date: gte, | |
63 … | + data: {attending: true} | |
64 … | + }) | |
65 … | + } | |
66 … | + function clearDay () { | |
67 … | + const filteredEvents = state.events().filter(e => !events.includes(e)) | |
68 … | + state.events.set(filteredEvents) | |
69 … | + } | |
70 … | +} | |
71 … | + | |
72 … | +document.body.appendChild(page) | |
73 … | + | |
74 … | + | |
75 … | +// styles | |
76 … | + | |
77 … | +require('../lib/styles-inject')() | |
78 … | +const compile = require('micro-css') | |
79 … | + | |
80 … | +const css = compile(` | |
81 … | + | |
82 … | +div.page { | |
83 … | + display: grid | |
84 … | + grid-template-columns: auto 1fr | |
85 … | + grid-gap: 2rem | |
86 … | + | |
87 … | + margin: 3rem | |
88 … | + | |
89 … | + div.picker { | |
90 … | + div.month-picker { | |
91 … | + font-family: sans | |
92 … | + display: flex | |
93 … | + justify-content: space-between | |
94 … | + align-items: center | |
95 … | + | |
96 … | + margin-bottom: 1rem | |
97 … | + | |
98 … | + button { | |
99 … | + background: none | |
100 … | + border: none | |
101 … | + cursor: pointer | |
102 … | + font-size: 1.5rem | |
103 … | + } | |
104 … | + } | |
105 … | + } | |
106 … | + | |
107 … | + div.dates { | |
108 … | + div.date { | |
109 … | + background: rebeccapurple | |
110 … | + color: #fff | |
111 … | + font-family: sans | |
112 … | + font-weight: 600 | |
113 … | + | |
114 … | + padding: .5rem | |
115 … | + margin-bottom: .5rem | |
116 … | + } | |
117 … | + } | |
118 … | +} | |
119 … | + | |
120 … | +MaramaDayTile { | |
121 … | + border-radius: 4rem | |
122 … | + border: 1px solid hsl(0, 0%, 100%) | |
123 … | + | |
124 … | + -past { | |
125 … | + cursor: initial | |
126 … | + background: none | |
127 … | + color: hsl(0, 0%, 60%) | |
128 … | + | |
129 … | + -events { | |
130 … | + border: 1px solid hsl(0, 0%, 40%) | |
131 … | + | |
132 … | + -attending { | |
133 … | + background: hsl(0, 0%, 40%) | |
134 … | + color: #fff | |
135 … | + } | |
136 … | + } | |
137 … | + } | |
138 … | + | |
139 … | + -future { | |
140 … | + background: none | |
141 … | + | |
142 … | + -events { | |
143 … | + border: 1px solid deepskyblue | |
144 … | + color: deepskyblue | |
145 … | + | |
146 … | + -attending { | |
147 … | + background: deepskyblue | |
148 … | + color: #fff | |
149 … | + } | |
150 … | + } | |
151 … | + } | |
152 … | + | |
153 … | + -range { | |
154 … | + background: deeppink | |
155 … | + | |
156 … | + -future { | |
157 … | + background: deepskyblue | |
158 … | + } | |
159 … | + } | |
160 … | +} | |
161 … | + | |
162 … | +MaramaDayLabel { | |
163 … | + font-size: 1rem | |
164 … | +} | |
165 … | + | |
166 … | +`) | |
167 … | + | |
168 … | +document.head.appendChild( | |
169 … | + h('style', { innerHTML: css }) | |
170 … | +) |
index.js | ||
---|---|---|
@@ -36,16 +36,14 @@ | ||
36 | 36 … | range, |
37 | 37 … | onSelect |
38 | 38 … | } |
39 | 39 … | |
40 | - return h('div.Marama', [ | |
41 | - h('div.days', { style: getStyles(styles) }, [ | |
42 | - DAYS.map((day, i) => DayLabel(day, i, dayOpts.weekFormat)), | |
43 | - days.map(day => { | |
44 | - dayOpts.day = day // note we're mutating this object (might save memory?) | |
45 | - return DayTile(dayOpts) | |
46 | - }) | |
47 | - ]) | |
40 … | + return h('div.Marama', { style: getStyles(styles) }, [ | |
41 … | + DAYS.map((day, i) => DayLabel(day, i, dayOpts.weekFormat)), | |
42 … | + days.map(day => { | |
43 … | + dayOpts.day = day // note we're mutating this object (might save memory?) | |
44 … | + return DayTile(dayOpts) | |
45 … | + }) | |
48 | 46 … | ]) |
49 | 47 … | } |
50 | 48 … | |
51 | 49 … | function getStyles (styles = {}) { |
@@ -55,16 +53,18 @@ | ||
55 | 53 … | dotRadius, |
56 | 54 … | dotBorder = 1 |
57 | 55 … | } = styles |
58 | 56 … | const format = getWeekFormat(styles) |
57 … | + const transFormat = ['rows', 'columns'].find(f => f !== format) | |
59 | 58 … | |
60 | 59 … | const _styles = { |
61 | - '--tile-radius': `${tileRadius}px`, | |
60 … | + '--tile-width': `${2 * tileRadius}px`, | |
62 | 61 … | '--tile-gap': `${tileGap}px`, |
63 | - '--dot-radius': `${dotRadius || Math.floor(tileRadius / 2)}px`, | |
62 … | + '--dot-width': `${2 * dotRadius || tileRadius}px`, | |
64 | 63 … | '--dot-border': `${dotBorder}px`, |
65 | 64 … | display: 'grid', |
66 | - [`grid-template-${format}`]: '2 * calc(var(--tile-radius) + 2 * var(--tile-gap)) repeat(6, calc(2 * var(--tile-radius)))' | |
65 … | + [`grid-template-${format}`]: 'calc(var(--tile-width) + 2 * var(--tile-gap)) repeat(6, var(--tile-width))', | |
66 … | + [`grid-template-${transFormat}`]: 'repeat(7, var(--tile-width))' | |
67 | 67 … | } |
68 | 68 … | |
69 | 69 … | return _styles |
70 | 70 … | } |
styles/day-label.mcss | ||
---|---|---|
@@ -1,11 +1,11 @@ | ||
1 | 1 … | MaramaDayLabel { |
2 | 2 … | color: hsl(0, 0%, 40%) |
3 | 3 … | font-family: arial |
4 | - font-size: calc(2 * var(--tile-radius) - 4px) | |
4 … | + font-size: calc(var(--tile-width) - 4px) | |
5 | 5 … | |
6 | - width: calc(2 * var(--tile-radius)) | |
7 | - height: calc(2 * var(--tile-radius)) | |
6 … | + width: var(--tile-width) | |
7 … | + height: var(--tile-width) | |
8 | 8 … | |
9 | 9 … | display: flex |
10 | 10 … | align-items: center |
11 | 11 … | justify-content: center |
styles/day-tile.mcss | ||
---|---|---|
@@ -1,7 +1,7 @@ | ||
1 | 1 … | MaramaDayTile { |
2 | - width: calc(2 * var(--tile-radius)) | |
3 | - height: calc(2 * var(--tile-radius)) | |
2 … | + width: var(--tile-width) | |
3 … | + height: var(--tile-width) | |
4 | 4 … | cursor: pointer |
5 | 5 … | |
6 | 6 … | border-radius: 2px |
7 | 7 … | |
@@ -29,19 +29,19 @@ | ||
29 | 29 … | |
30 | 30 … | -events { |
31 | 31 … | div.dot { |
32 | 32 … | background: none |
33 | - width: calc(2 * var(--dot-radius) - 2 * var(--dot-border)) | |
34 | - height: calc(2 * var(--dot-radius) - 2 * var(--dot-border)) | |
33 … | + width: calc(var(--dot-width) - 2 * var(--dot-border)) | |
34 … | + height: calc(var(--dot-width) - 2 * var(--dot-border)) | |
35 | 35 … | border: var(--dot-border) solid #fff |
36 | - border-radius: calc(2 * var(--dot-radius)) | |
36 … | + border-radius: var(--dot-width) | |
37 | 37 … | } |
38 | 38 … | |
39 | 39 … | -attending { |
40 | 40 … | div.dot { |
41 | 41 … | background: #fff |
42 | - width: calc(2 * var(--dot-radius)) | |
43 | - height: calc(2 * var(--dot-radius)) | |
42 … | + width: var(--dot-width) | |
43 … | + height: var(--dot-width) | |
44 | 44 … | border: none |
45 | 45 … | } |
46 | 46 … | } |
47 | 47 … | } |
Built with git-ssb-web