git ssb

0+

mixmix / marama



Commit ca2790e4654757e6f97c0d5cff97163c1865af61

Browse Files

refactor styles, build out start of doodle example

mixmix committed on 8/21/2018, 6:38:47 AM
Parent: c99cbbf914e6a178a87b75810cb4784f19010329

Files changed

example/2_doodle.jsadded
index.jschanged
styles/day-label.mcsschanged
styles/day-tile.mcsschanged
styles/index.mcsschanged
example/2_doodle.jsView
@@ -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.jsView
@@ -36,16 +36,14 @@
3636 … range,
3737 … onSelect
3838 … }
3939 …
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 …+ })
4846 … ])
4947 … }
5048 …
5149 … function getStyles (styles = {}) {
@@ -55,16 +53,18 @@
5553 … dotRadius,
5654 … dotBorder = 1
5755 … } = styles
5856 … const format = getWeekFormat(styles)
57 …+ const transFormat = ['rows', 'columns'].find(f => f !== format)
5958 …
6059 … const _styles = {
61- '--tile-radius': `${tileRadius}px`,
60 …+ '--tile-width': `${2 * tileRadius}px`,
6261 … '--tile-gap': `${tileGap}px`,
63- '--dot-radius': `${dotRadius || Math.floor(tileRadius / 2)}px`,
62 …+ '--dot-width': `${2 * dotRadius || tileRadius}px`,
6463 … '--dot-border': `${dotBorder}px`,
6564 … 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))'
6767 … }
6868 …
6969 … return _styles
7070 … }
styles/day-label.mcssView
@@ -1,11 +1,11 @@
11 … MaramaDayLabel {
22 … color: hsl(0, 0%, 40%)
33 … font-family: arial
4- font-size: calc(2 * var(--tile-radius) - 4px)
4 …+ font-size: calc(var(--tile-width) - 4px)
55 …
6- width: calc(2 * var(--tile-radius))
7- height: calc(2 * var(--tile-radius))
6 …+ width: var(--tile-width)
7 …+ height: var(--tile-width)
88 …
99 … display: flex
1010 … align-items: center
1111 … justify-content: center
styles/day-tile.mcssView
@@ -1,7 +1,7 @@
11 … 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)
44 … cursor: pointer
55 …
66 … border-radius: 2px
77 …
@@ -29,19 +29,19 @@
2929 …
3030 … -events {
3131 … div.dot {
3232 … 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))
3535 … border: var(--dot-border) solid #fff
36- border-radius: calc(2 * var(--dot-radius))
36 …+ border-radius: var(--dot-width)
3737 … }
3838 …
3939 … -attending {
4040 … div.dot {
4141 … 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)
4444 … border: none
4545 … }
4646 … }
4747 … }
styles/index.mcssView
@@ -1,9 +1,7 @@
11 … Marama {
2- div.days {
3- grid-gap: var(--tile-gap)
4- justify-content: start
5- align-content: start
2 …+ grid-gap: var(--tile-gap)
3 …+ justify-content: start
4 …+ align-content: start
65 …
7- div.MaramaDay {}
8- }
6 …+ div.MaramaDay {}
97 … }

Built with git-ssb-web