Commit 6aed4c72a3b36330eb67723b515b426ec7f5f06d
Merge pull request #233 from ssbc/accessibility
accessibility v1mix irving authored on 8/13/2018, 10:31:49 AM
GitHub committed on 8/13/2018, 10:31:49 AM
Parent: 4ca8ad06f6eb102ed4dc8d4ee6177a1359cfee43
Parent: f4987c4f059ea50695536df292a96d0dc3c5af4f
Files changed
app/html/settings/custom-styles.js | ||
---|---|---|
@@ -5,9 +5,8 @@ | ||
5 | 5 … | 'app.html.settings': true |
6 | 6 … | }) |
7 | 7 … | |
8 | 8 … | exports.needs = nest({ |
9 | - 'app.html.settings': 'map', | |
10 | 9 … | 'settings.obs.get': 'first', |
11 | 10 … | 'settings.sync.set': 'first' |
12 | 11 … | }) |
13 | 12 … | |
@@ -24,13 +23,13 @@ | ||
24 | 23 … | title: 'Custom Styles', |
25 | 24 … | body: h('CustomStyles', [ |
26 | 25 … | h('p', 'Custom MCSS to be applied on this window.'), |
27 | 26 … | styles, |
28 | - h('button', {'ev-click': peachify}, 'Apply Styles') | |
27 … | + h('button', {'ev-click': save}, 'Apply Styles') | |
29 | 28 … | ]) |
30 | 29 … | } |
31 | 30 … | |
32 | - function peachify () { | |
31 … | + function save () { | |
33 | 32 … | api.settings.sync.set({ |
34 | 33 … | patchbay: { |
35 | 34 … | customStyles: styles.value |
36 | 35 … | } |
app/html/settings/custom-styles.mcss | ||
---|---|---|
@@ -1,5 +1,9 @@ | ||
1 | 1 … | CustomStyles { |
2 … | + textarea { | |
3 … | + font-family: monospace | |
4 … | + line-height: 1.2rem | |
5 … | + } | |
2 | 6 … | button { |
3 | 7 … | display: block |
4 | 8 … | margin: .5rem 0 |
5 | 9 … | } |
app/html/settings/accessibility.js | ||
---|---|---|
@@ -1,0 +1,45 @@ | ||
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 invert = api.settings.obs.get('patchbay.accessibility.invert') | |
19 … | + const saturation = api.settings.obs.get('patchbay.accessibility.saturation') | |
20 … | + const brightness = api.settings.obs.get('patchbay.accessibility.brightness') | |
21 … | + const contrast = api.settings.obs.get('patchbay.accessibility.contrast') | |
22 … | + | |
23 … | + return { | |
24 … | + title: 'Accessibility', | |
25 … | + body: h('AccessibilityStyles', [ | |
26 … | + h('div', { 'ev-click': () => invert.set(!invert()) }, [ | |
27 … | + h('label', 'Invert colors'), | |
28 … | + h('i.fa', { className: when(invert, 'fa-check-square', 'fa-square-o') }) | |
29 … | + ]), | |
30 … | + h('div', [ | |
31 … | + h('label', 'Saturation'), | |
32 … | + h('input', { type: 'range', min: 0, max: 100, value: saturation, 'ev-input': ev => saturation.set(ev.target.value) }) | |
33 … | + ]), | |
34 … | + h('div', [ | |
35 … | + h('label', 'Brightness'), | |
36 … | + h('input', { type: 'range', min: 0, max: 100, value: brightness, 'ev-input': ev => brightness.set(ev.target.value) }) | |
37 … | + ]), | |
38 … | + h('div', [ | |
39 … | + h('label', 'Contrast'), | |
40 … | + h('input', { type: 'range', min: 0, max: 100, value: contrast, 'ev-input': ev => contrast.set(ev.target.value) }) | |
41 … | + ]) | |
42 … | + ]) | |
43 … | + } | |
44 … | + } | |
45 … | +} |
app/html/settings/accessibility.mcss | ||
---|---|---|
@@ -1,0 +1,28 @@ | ||
1 … | +AccessibilityStyles { | |
2 … | + div { | |
3 … | + margin-left: .5rem | |
4 … | + cursor: pointer | |
5 … | + | |
6 … | + display: flex | |
7 … | + align-items: center | |
8 … | + | |
9 … | + :hover { | |
10 … | + text-decoration: underline | |
11 … | + } | |
12 … | + | |
13 … | + label { | |
14 … | + min-width: 6rem | |
15 … | + margin-right: .5rem | |
16 … | + } | |
17 … | + | |
18 … | + input[type=range] { | |
19 … | + filter: drop-shadow(0 0 8px rgba(0,0,0,.2)) | |
20 … | + :focus { | |
21 … | + box-shadow: none | |
22 … | + } | |
23 … | + } | |
24 … | + | |
25 … | + i { | |
26 … | + } | |
27 … | + } | |
28 … | +} |
app/page/imageSearch.mcss | ||
---|---|---|
@@ -1,9 +1,9 @@ | ||
1 | 1 … | Page -imageSearch { |
2 | 2 … | overflow-y: auto |
3 | 3 … | |
4 | 4 … | display: grid |
5 | - grid-template-columns: 85vw | |
5 … | + grid-template-columns: 95vw | |
6 | 6 … | grid-template-rows: 5rem auto |
7 | 7 … | justify-content: center |
8 | 8 … | align-items: start |
9 | 9 … | |
@@ -16,25 +16,26 @@ | ||
16 | 16 … | } |
17 | 17 … | |
18 | 18 … | section.results { |
19 | 19 … | display: flex |
20 … | + justify-content: center | |
20 | 21 … | align-items: center |
21 | 22 … | flex-wrap: wrap |
22 | 23 … | |
23 | 24 … | div { |
24 | 25 … | cursor: pointer |
25 | 26 … | |
26 | 27 … | min-width: 5rem |
27 | 28 … | min-height: 5rem |
28 | - max-width: 19rem | |
29 … | + max-width: calc(95vw / 4 - 1rem) | |
29 | 30 … | max-height: 19rem |
30 | 31 … | |
31 | 32 … | display: flex |
32 | 33 … | justify-content: center |
33 | 34 … | align-items: center |
34 | 35 … | |
35 | 36 … | img { |
36 | - max-width: 19rem | |
37 … | + max-width: calc(95vw / 4 - 1rem) | |
37 | 38 … | max-height: 19rem |
38 | 39 … | } |
39 | 40 … | |
40 | 41 … | margin: 0 1rem 1rem 0 |
app/page/page.mcss | ||
---|---|---|
@@ -1,9 +1,7 @@ | ||
1 | 1 … | Page { |
2 | 2 … | width: 100% |
3 | 3 … | |
4 | - $backgroundPrimary | |
5 | - | |
6 | 4 … | display: flex |
7 | 5 … | flex-wrap: wrap |
8 | 6 … | } |
9 | 7 … |
app/page/settings.mcss | ||
---|---|---|
@@ -27,9 +27,9 @@ | ||
27 | 27 … | letter-spacing: 2px |
28 | 28 … | } |
29 | 29 … | |
30 | 30 … | div { |
31 | - p { | |
31 … | + p, div { | |
32 | 32 … | margin-top: .2rem |
33 | 33 … | margin-left: .3rem |
34 | 34 … | } |
35 | 35 … | |
@@ -49,9 +49,8 @@ | ||
49 | 49 … | |
50 | 50 … | width: 600px |
51 | 51 … | max-width: 600px |
52 | 52 … | } |
53 | - | |
54 | 53 … | } |
55 | 54 … | } |
56 | 55 … | } |
57 | 56 … | } |
app/sync/initialise/settings.js | ||
---|---|---|
@@ -1,6 +1,8 @@ | ||
1 | 1 … | const nest = require('depnest') |
2 | 2 … | const merge = require('lodash/merge') |
3 … | +const fs = require('fs') | |
4 … | +const { join } = require('path') | |
3 | 5 … | |
4 | 6 … | exports.gives = nest('app.sync.initialise') |
5 | 7 … | |
6 | 8 … | exports.needs = nest({ |
@@ -9,9 +11,16 @@ | ||
9 | 11 … | }) |
10 | 12 … | |
11 | 13 … | const defaults = { |
12 | 14 … | patchbay: { |
13 | - defaultTabs: ['/public', '/inbox', '/notifications'] | |
15 … | + defaultTabs: ['/public', '/inbox', '/notifications'], | |
16 … | + accessibility: { | |
17 … | + invert: false, | |
18 … | + saturation: 100, | |
19 … | + brightness: 100, | |
20 … | + contrast: 100 | |
21 … | + }, | |
22 … | + customStyles: defaultStyles() | |
14 | 23 … | }, |
15 | 24 … | filter: { |
16 | 25 … | exclude: { |
17 | 26 … | channels: '' |
@@ -41,4 +50,11 @@ | ||
41 | 50 … | |
42 | 51 … | set(settings) |
43 | 52 … | } |
44 | 53 … | } |
54 … | + | |
55 … | +function defaultStyles () { | |
56 … | + // TODO add a nice little helper README / comments | |
57 … | + const path = join(__dirname, '../../styles/mcss/app-theme-vars.mcss') | |
58 … | + const styles = fs.readFileSync(path, 'utf8') | |
59 … | + return styles | |
60 … | +} |
app/sync/initialise/styles.js | ||
---|---|---|
@@ -1,7 +1,8 @@ | ||
1 | 1 … | const nest = require('depnest') |
2 | 2 … | const compileCss = require('micro-css') |
3 | 3 … | const { h, computed } = require('mutant') |
4 … | +const get = require('lodash/get') | |
4 | 5 … | |
5 | 6 … | exports.gives = nest('app.sync.initialise') |
6 | 7 … | |
7 | 8 … | exports.needs = nest({ |
@@ -13,22 +14,56 @@ | ||
13 | 14 … | return nest('app.sync.initialise', styles) |
14 | 15 … | |
15 | 16 … | function styles () { |
16 | 17 … | const css = values(api.styles.css()).join('\n') |
18 … | + const custom = api.settings.obs.get('patchbay.customStyles') | |
19 … | + const accessibility = api.settings.obs.get('patchbay.accessibility') | |
17 | 20 … | |
18 | 21 … | document.head.appendChild( |
22 … | + h('style', { innerHTML: css }) | |
23 … | + ) | |
24 … | + | |
25 … | + document.head.appendChild( | |
26 … | + h('style', { innerHTML: computed(custom, compileCss) }) | |
27 … | + ) | |
28 … | + document.head.appendChild( | |
19 | 29 … | h('style', { |
20 | - innerHTML: computed(api.settings.obs.get('patchbay.customStyles', ''), styles => { | |
21 | - const customStyles = compileCss(styles) | |
22 | - | |
23 | - // apply styles twice so our mixins 'win' | |
24 | - return [customStyles, css, customStyles].join('\n') | |
30 … | + innerHTML: computed(accessibility, a11y => { | |
31 … | + return compileCss(accessibilityMcss(a11y)) | |
25 | 32 … | }) |
26 | 33 … | }) |
27 | 34 … | ) |
28 | 35 … | } |
29 | 36 … | } |
30 | 37 … | |
38 … | +// //////////////////////////// | |
39 … | +// The parts that feed into this are in app/html/settings/accessibility.js | |
40 … | + | |
41 … | +function accessibilityMcss (settings) { | |
42 … | + const invert = get(settings, 'invert') | |
43 … | + const saturation = get(settings, 'saturation', 100) | |
44 … | + const brightness = get(settings, 'brightness', 100) | |
45 … | + const contrast = get(settings, 'contrast', 100) | |
46 … | + | |
47 … | + const css = ` | |
48 … | +body { | |
49 … | + filter: ${invert ? 'invert()' : ''} saturate(${saturation}%) brightness(${brightness}%) contrast(${contrast}%) | |
50 … | + | |
51 … | + (img) { | |
52 … | + filter: ${invert ? 'invert()' : ''} | |
53 … | + } | |
54 … | + (video) { | |
55 … | + filter: ${invert ? 'invert()' : ''} | |
56 … | + } | |
57 … | + (button) { | |
58 … | + filter: ${invert ? 'invert()' : ''} | |
59 … | + } | |
60 … | +} | |
61 … | +` | |
62 … | + return css | |
63 … | +} | |
64 … | +// //////////////////////////// | |
65 … | + | |
31 | 66 … | function values (object) { |
32 | 67 … | const keys = Object.keys(object) |
33 | 68 … | return keys.map(k => object[k]) |
34 | 69 … | } |
Built with git-ssb-web