git ssb - add dyslexia fonts toggle to /settings

mixmix committed on 6/7/2019, 8:43:01 AM
Parent: a90e479d4bb512807a6f0fc73713b8a205c849a1

app/html/settings/accessibility.js	changed
app/html/settings/custom-styles.mcss	changed
app/html/settings/dyslexia-fonts.js	added
app/page/settings.mcss	changed
app/sync/initialise/styles.js	changed

app/html/settings/accessibility.jsView
		@@ -20,9 +20,10 @@
20	20 …	const brightness = api.settings.obs.get('patchbay.accessibility.brightness')
21	21 …	const contrast = api.settings.obs.get('patchbay.accessibility.contrast')
22	22 …
23	23 …	return {
24		- title: 'Accessibility',
	24 …	+ group: 'accessibility',
	25 …	+ title: 'Accessibility Styles',
25	26 …	body: h('AccessibilityStyles', [
26	27 …	h('div', { 'ev-click': () => invert.set(!invert()) }, [
27	28 …	h('label', 'Invert colors'),
28	29 …	h('i.fa', { className: when(invert, 'fa-check-square', 'fa-square-o') })

app/html/settings/custom-styles.mcssView
		@@ -1,9 +1,13 @@
1	1 …	CustomStyles {
2	2 …	textarea {
WritePreview
3	3 …	font-family: monospace
4	4 …	line-height: 1.2rem
	5 …	+ max-width: calc(100% - 1rem)
	6 …	+ min-height: 400px
	7 …	+ border: 1px solid gainsboro
5	8 …	}
	9 …	+
6	10 …	button {
7	11 …	display: block
8	12 …	margin: .5rem 0
9	13 …	}

app/html/settings/dyslexia-fonts.jsView
		@@ -1,0 +1,31 @@
	1 …	+const nest = require('depnest')
	2 …	+const { h, when } = require('mutant')
	3 …	+
	4 …	+exports.gives = nest({
	5 …	+ 'app.html.settings': true
	6 …	+})
	7 …	+
	8 …	+exports.needs = nest({
	9 …	+ 'settings.obs.get': 'first'
	10 …	+})
	11 …	+
	12 …	+exports.create = function (api) {
	13 …	+ return nest({
	14 …	+ 'app.html.settings': accessibility
	15 …	+ })
	16 …	+
	17 …	+ function accessibility () {
	18 …	+ const font = api.settings.obs.get('patchbay.accessibility.openDyslexicEnabled', false)
	19 …	+
	20 …	+ return {
	21 …	+ group: 'accessibility',
	22 …	+ title: 'Dyslexia Fonts',
	23 …	+ body: h('AccessibilityStyles', [
	24 …	+ h('div', { 'ev-click': () => font.set(!font()) }, [
	25 …	+ h('label', 'Enable OpenDyslexic font'),
	26 …	+ h('i.fa', { className: when(font, 'fa-check-square', 'fa-square-o') })
	27 …	+ ])
	28 …	+ ])
	29 …	+ }
	30 …	+ }
	31 …	+}

app/sync/initialise/styles.jsView
		@@ -1,7 +1,7 @@
1	1 …	const nest = require('depnest')
2	2 …	const compileCss = require('micro-css')
3		-const { h, computed } = require('mutant')
	3 …	+const { h, computed, when } = require('mutant')
4	4 …	const get = require('lodash/get')
5	5 …
6	6 …	exports.gives = nest('app.sync.initialise')
7	7 …
		@@ -16,8 +16,9 @@
16	16 …	function styles () {
17	17 …	const css = values(api.styles.css()).join('\n')
18	18 …	const custom = api.settings.obs.get('patchbay.customStyles')
19	19 …	const accessibility = api.settings.obs.get('patchbay.accessibility')
	20 …	+ const openDyslexicEnabled = api.settings.obs.get('patchbay.accessibility.openDyslexicEnabled')
20	21 …
21	22 …	document.head.appendChild(
22	23 …	h('style', { innerHTML: css })
23	24 …	)
		@@ -31,8 +32,13 @@
31	32 …	return compileCss(accessibilityMcss(a11y))
32	33 …	})
33	34 …	})
34	35 …	)
	36 …	+ document.head.appendChild(
	37 …	+ h('style', {
	38 …	+ innerHTML: when(openDyslexicEnabled, '.App { font-family: OpenDyslexicRegular; }', '')
	39 …	+ })
	40 …	+ )
35	41 …	}
36	42 …	}
37	43 …
38	44 …	// ////////////////////////////

Dominic / patchbay