Commit a035e0e448371bb320700598868f4917a757c12b
add dyslexia fonts toggle to /settings
mixmix committed on 6/7/2019, 8:43:01 AMParent: a90e479d4bb512807a6f0fc73713b8a205c849a1
Files changed
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.js | ||
---|---|---|
@@ -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.mcss | |||
---|---|---|---|
@@ -1,9 +1,13 @@ | |||
1 | 1 … | CustomStyles { | |
2 | 2 … | textarea { | |
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.js | ||
---|---|---|
@@ -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/page/settings.mcss | ||
---|---|---|
@@ -51,16 +51,8 @@ | ||
51 | 51 … | margin-top: .2rem |
52 | 52 … | margin-left: .3rem |
53 | 53 … | } |
54 | 54 … | |
55 | - textarea { | |
56 | - min-width: 400px | |
57 | - width: 600px | |
58 | - max-width: 600px | |
59 | - min-height: 200px | |
60 | - border: 1px solid gainsboro | |
61 | - } | |
62 | - | |
63 | 55 … | input { |
64 | 56 … | font-size: 1rem |
65 | 57 … | |
66 | 58 … | padding: .5rem |
app/sync/initialise/styles.js | ||
---|---|---|
@@ -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 … | // //////////////////////////// |
Built with git-ssb-web