git ssb - add showNumbers option for days

Commit f9d6722111546ffee8db81eaf805211d19e68f64

add showNumbers option for days

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

Files changed

day-tile.js	changed
index.js	changed
styles/day-tile.mcss	changed
example/index-classic-cal.js	added
example/index-letnice.js	added
example/index-marama.js	added
test/index-classic-cal.js	deleted
test/index-letnice.js	deleted

day-tile.jsView
		@@ -1,8 +1,8 @@
1	1 …	const h = require('mutant/h')
2	2 …	const getDay = require('./lib/get-day')
3	3 …
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 }) {
5	5 …	const date = new Date(year, monthIndex, day)
6	6 …	const dateEnd = new Date(year, monthIndex, day + 1)
7	7 …	const weekday = getDay(date)
8	8 …	const week = Math.ceil((day + offset) / 7)
		@@ -40,16 +40,12 @@
40	40 …	],
41	41 …	'ev-click': handleRangeSetting
42	42 …	}
43	43 …
44		- if (!eventsOnDay.length) return h('MaramaDayTile', opts)
45		-
46	44 …	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') : ''
52	48 …	])
53	49 …
54	50 …	function handleRangeSetting (ev) {
55	51 …	if (ev.shiftKey && range && range.lt) {

index.jsView
		@@ -31,8 +31,9 @@
31	31 …	// day TBD
32	32 …	today,
33	33 …	offset: getDay(new Date(year, monthIndex, 1)) - 1, // how far into the week the month starts
34	34 …	weekFormat: getWeekFormat(styles),
	35 …	+ showNumbers: Boolean(styles.showNumbers),
35	36 …	range,
36	37 …	setRange
37	38 …	}
38	39 …

styles/day-tile.mcssView
		@@ -8,8 +8,10 @@
8	8 …	display: flex
9	9 …	justify-content: center
10	10 …	align-items: center
11	11 …
	12 …	+ font-family: sans
	13 …	+
12	14 …	-past {
13	15 …	background: hsl(0, 0%, 20%)
14	16 …	}
15	17 …

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 } },
WritePreview
	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

mixmix / marama

Commit f9d6722111546ffee8db81eaf805211d19e68f64

add showNumbers option for days

Files changed