git ssb - settings: use drop down select for theme picker instead of buttons

Matt McKegg committed on 9/23/2017, 12:45:44 AM
Parent: fd3ba19e9256f7022a96a017f86001422756189f

modules/page/html/render/settings.js	changed
styles/dark/base.mcss	changed
styles/light/base.mcss	changed

modules/page/html/render/settings.jsView
		@@ -20,9 +20,9 @@
20	20	var prepend = [
21	21	h('PageHeading', [
22	22	h('h1', [
23	23	h('strong', 'Settings')
24		- ]),
	24	+ ])
25	25	])
26	26	]
27	27
28	28	return h('Scroller', { style: { overflow: 'auto' } }, [
		@@ -30,22 +30,19 @@
30	30	h('section.prepend', prepend),
31	31	h('section.content', [
32	32	h('section', [
33	33	h('h2', 'Theme'),
34		- computed(currentTheme, currentTheme => {
35		- return themeNames.map(name => {
36		- const style = currentTheme == name
37		- ? { 'margin-right': '1rem', 'border-color': 'teal' }
38		- : { 'margin-right': '1rem' }
39		-
40		- return h('button', {
41		- 'ev-click': () => api.settings.sync.set({
42		- patchwork: {theme: name}
43		- }),
44		- style
45		- }, name)
	34	+ h('select', {
	35	+ style: {
	36	+ 'font-size': '120%'
	37	+ },
	38	+ value: currentTheme,
	39	+ 'ev-change': (ev) => api.settings.sync.set({
	40	+ patchwork: {theme: ev.target.value}
46	41	})
47		- })
	42	+ }, [
	43	+ themeNames.map(name => h('option', {value: name}, [name]))
	44	+ ])
48	45	]),
49	46	h('section', [
50	47	h('h2', 'Filters'),
51	48	h('label', [

styles/dark/base.mcssView
		@@ -21,41 +21,8 @@
21	21	font-weight: normal
22	22	flex: 1
23	23	}
24	24
25		-select {
26		- font-size: 80%
27		- display: inline-block
28		- padding: 2px 4px
29		- height: 18px
30		- border: 1px solid #A9A9A9
31		- background: #666 svg(dropArrow) no-repeat right
32		- -webkit-appearance: none
33		- color: #FFF
34		- padding-right: 12px
35		- border-radius: 0
36		-
37		- :hover {
38		- background-image: svg(dropArrow -active)
39		- }
40		-
41		- @svg dropArrow {
42		- width: 12px
43		- height: 6px
44		- content: "<path d='M2,0 L10,0 L6,6 Z' />"
45		-
46		- path {
47		- fill: #888
48		- }
49		-
50		- -active {
51		- path {
52		- fill: #DDD
53		- }
54		- }
55		- }
56		-}
57		-
58	25	input {
59	26	[type='text'] {
60	27	font-size: 80%
61	28	display: inline-block

styles/light/base.mcssView
		@@ -21,41 +21,8 @@
21	21	font-weight: normal
22	22	flex: 1
23	23	}
24	24
25		-select {
26		- font-size: 80%
27		- display: inline-block
28		- padding: 2px 4px
29		- height: 18px
30		- border: 1px solid #A9A9A9
31		- background: #666 svg(dropArrow) no-repeat right
32		- -webkit-appearance: none
33		- color: #FFF
34		- padding-right: 12px
35		- border-radius: 0
36		-
37		- :hover {
38		- background-image: svg(dropArrow -active)
39		- }
40		-
41		- @svg dropArrow {
42		- width: 12px
43		- height: 6px
44		- content: "<path d='M2,0 L10,0 L6,6 Z' />"
45		-
46		- path {
47		- fill: #888
48		- }
49		-
50		- -active {
51		- path {
52		- fill: #DDD
53		- }
54		- }
55		- }
56		-}
57		-
58	25	input {
59	26	[type='text'] {
60	27	font-size: 80%
61	28	display: inline-block

alanz / patchwork