git ssb

0+

mixmix / marama



Commit f9d6722111546ffee8db81eaf805211d19e68f64

add showNumbers option for days

mixmix committed on 8/20/2018, 9:19:28 AM
Parent: 64e9abb6cd8d8e8be200248e9a8eeabe10f3dfe2

Files changed

day-tile.jschanged
index.jschanged
styles/day-tile.mcsschanged
example/index-classic-cal.jsadded
example/index-letnice.jsadded
example/index-marama.jsadded
test/index-classic-cal.jsdeleted
test/index-letnice.jsdeleted
day-tile.jsView
@@ -1,8 +1,8 @@
11 const h = require('mutant/h')
22 const getDay = require('./lib/get-day')
33
4-module.exports = function Day ({ today, year, monthIndex, day, offset, weekFormat, events, range, setRange }) {
4 +module.exports = function Day ({ today, year, monthIndex, day, offset, weekFormat, showNumbers, events, range, setRange }) {
55 const date = new Date(year, monthIndex, day)
66 const dateEnd = new Date(year, monthIndex, day + 1)
77 const weekday = getDay(date)
88 const week = Math.ceil((day + offset) / 7)
@@ -40,16 +40,12 @@
4040 ],
4141 'ev-click': handleRangeSetting
4242 }
4343
44- if (!eventsOnDay.length) return h('MaramaDayTile', opts)
45-
4644 return h('MaramaDayTile', opts, [
47- // TODO add awareness of whether I'm going to events
48- // TODO try a FontAwesome circle
49- h('div.dot', [
50- // Math.random() > 0.3 ? h('div') : ''
51- ])
45 + showNumbers
46 + ? day : !eventsOnDay.length
47 + ? h('div.dot') : ''
5248 ])
5349
5450 function handleRangeSetting (ev) {
5551 if (ev.shiftKey && range && range.lt) {
index.jsView
@@ -31,8 +31,9 @@
3131 // day TBD
3232 today,
3333 offset: getDay(new Date(year, monthIndex, 1)) - 1, // how far into the week the month starts
3434 weekFormat: getWeekFormat(styles),
35 + showNumbers: Boolean(styles.showNumbers),
3536 range,
3637 setRange
3738 }
3839
styles/day-tile.mcssView
@@ -8,8 +8,10 @@
88 display: flex
99 justify-content: center
1010 align-items: center
1111
12 + font-family: sans
13 +
1214 -past {
1315 background: hsl(0, 0%, 20%)
1416 }
1517
example/index-classic-cal.jsView
@@ -1,0 +1,86 @@
1 +// run this from the terminal using :
2 +// npx electro example/index-classic-cal.js
3 +
4 +const { h } = require('mutant')
5 +const compile = require('micro-css')
6 +
7 +const Marama = require('../')
8 +require('../lib/styles-inject')()
9 +
10 +const marama = Marama({
11 + today: new Date(2018, 6, 12),
12 + events: [
13 + { date: new Date(2018, 3, 4), data: { attending: true } },
14 + { date: new Date(2018, 6, 5), data: { attending: true } },
15 + { date: new Date(2018, 6, 7), data: { attending: false } },
16 + { date: new Date(2018, 6, 17), data: { attending: true } },
17 + { date: new Date(2018, 6, 21), data: { attending: false } },
18 + { date: new Date(2018, 6, 27), data: { attending: true } }
19 + ],
20 + // range: {
21 + // gte: new Date(2018, 6, 9),
22 + // lt: new Date(2018, 6, 23)
23 + // },
24 + styles: {
25 + weekFormat: 'rows',
26 + showNumbers: true,
27 + tileRadius: 16,
28 + tileGap: 8
29 + }
30 +})
31 +
32 +const page = h('div',
33 + {
34 + style: { margin: '3rem' }
35 + },
36 + marama
37 +)
38 +
39 +document.body.appendChild(page)
40 +
41 +//
42 +const mcss = `
43 +MaramaDayTile {
44 + border-radius: 4rem
45 +
46 + -past {
47 + background: none
48 + color: hsl(0, 0%, 60%)
49 +
50 + -events {
51 + border: 1px solid hsl(0, 0%, 40%)
52 +
53 + -attending {
54 + background: hsl(0, 0%, 40%)
55 + color: #fff
56 + }
57 + }
58 + }
59 +
60 + -future {
61 + background: none
62 +
63 + -events {
64 + border: 1px solid deepskyblue
65 + color: deepskyblue
66 +
67 + -attending {
68 + background: deepskyblue
69 + color: #fff
70 + }
71 + }
72 + }
73 +
74 + -range {
75 + background: deeppink
76 +
77 + -future {
78 + background: deepskyblue
79 + }
80 + }
81 +}
82 +
83 +`
84 +document.head.appendChild(
85 + h('style', { innerHTML: compile(mcss) })
86 +)
example/index-letnice.jsView
@@ -1,0 +1,35 @@
1 +// run this from the terminal using :
2 +// npx electro example/index-letnice.js
3 +
4 +const { h } = require('mutant')
5 +
6 +const Marama = require('../')
7 +require('../lib/styles-inject')()
8 +
9 +const marama = Marama({
10 + today: new Date(2018, 6, 12),
11 + events: [
12 + { date: new Date(2018, 3, 4), data: { attending: true } },
13 + { date: new Date(2018, 6, 5), data: { attending: true } },
14 + { date: new Date(2018, 6, 7), data: { attending: false } },
15 + { date: new Date(2018, 6, 17), data: { attending: true } },
16 + { date: new Date(2018, 6, 21), data: { attending: false } },
17 + { date: new Date(2018, 6, 27), data: { attending: true } }
18 + ],
19 + range: {
20 + gte: new Date(2018, 6, 9),
21 + lt: new Date(2018, 6, 23)
22 + },
23 + styles: {
24 + weekFormat: 'columns'
25 + }
26 +})
27 +
28 +const page = h('div',
29 + {
30 + style: { margin: '3rem' }
31 + },
32 + marama
33 +)
34 +
35 +document.body.appendChild(page)
example/index-marama.jsView
@@ -1,0 +1,37 @@
1 +// run this from the terminal using :
2 +// npx electro example/index-classic-cal.js
3 +
4 +const { h } = require('mutant')
5 +
6 +const Marama = require('../')
7 +require('../lib/styles-inject')()
8 +
9 +const marama = Marama({
10 + today: new Date(2018, 6, 12),
11 + events: [
12 + { date: new Date(2018, 3, 4), data: { attending: true } },
13 + { date: new Date(2018, 6, 5), data: { attending: true } },
14 + { date: new Date(2018, 6, 7), data: { attending: false } },
15 + { date: new Date(2018, 6, 17), data: { attending: true } },
16 + { date: new Date(2018, 6, 21), data: { attending: false } },
17 + { date: new Date(2018, 6, 27), data: { attending: true } }
18 + ],
19 + range: {
20 + gte: new Date(2018, 6, 9),
21 + lt: new Date(2018, 6, 23)
22 + },
23 + styles: {
24 + weekFormat: 'rows',
25 + tileRadius: 18,
26 + tileGap: 4
27 + }
28 +})
29 +
30 +const page = h('div',
31 + {
32 + style: { margin: '3rem' }
33 + },
34 + marama
35 +)
36 +
37 +document.body.appendChild(page)
test/index-classic-cal.jsView
@@ -1,37 +1,0 @@
1-// run this from the terminal using :
2-// npx electro test/index-classic-cal.js
3-
4-const { h } = require('mutant')
5-
6-const Marama = require('../')
7-require('../lib/styles-inject')()
8-
9-const marama = Marama({
10- today: new Date(2018, 6, 12),
11- events: [
12- { date: new Date(2018, 3, 4), data: { attending: true } },
13- { date: new Date(2018, 6, 5), data: { attending: true } },
14- { date: new Date(2018, 6, 7), data: { attending: false } },
15- { date: new Date(2018, 6, 17), data: { attending: true } },
16- { date: new Date(2018, 6, 21), data: { attending: false } },
17- { date: new Date(2018, 6, 27), data: { attending: true } }
18- ],
19- range: {
20- gte: new Date(2018, 6, 9),
21- lt: new Date(2018, 6, 23)
22- },
23- styles: {
24- weekFormat: 'rows',
25- tileRadius: 18,
26- tileGap: 4
27- }
28-})
29-
30-const page = h('div',
31- {
32- style: { margin: '3rem' }
33- },
34- marama
35-)
36-
37-document.body.appendChild(page)
test/index-letnice.jsView
@@ -1,32 +1,0 @@
1-// run this from the terminal using :
2-// npx electro test/index-letnice.js
3-
4-const { h } = require('mutant')
5-
6-const Marama = require('../')
7-require('../lib/styles-inject')()
8-
9-const marama = Marama({
10- today: new Date(2018, 7, 19),
11- events: [
12- { date: new Date(2018, 3, 4), data: { attending: true } },
13- { date: new Date(2018, 7, 19), data: { attending: true } },
14- { date: new Date(2018, 7, 21), data: { attending: false } }
15- ],
16- range: {
17- gte: new Date(2018, 7, 13),
18- lt: new Date(2018, 7, 20)
19- },
20- styles: {
21- weekFormat: 'columns'
22- }
23-})
24-
25-const page = h('div',
26- {
27- style: { margin: '3rem' }
28- },
29- marama
30-)
31-
32-document.body.appendChild(page)

Built with git-ssb-web