git ssb

16+

Dominic / patchbay



Commit 6aed4c72a3b36330eb67723b515b426ec7f5f06d

Browse Files

Merge pull request #233 from ssbc/accessibility

accessibility v1
mix 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.jschanged
app/html/settings/custom-styles.mcsschanged
app/html/settings/accessibility.jsadded
app/html/settings/accessibility.mcssadded
app/page/imageSearch.mcsschanged
app/page/page.mcsschanged
app/page/settings.mcsschanged
app/sync/initialise/settings.jschanged
app/sync/initialise/styles.jschanged
app/html/settings/custom-styles.jsView
@@ -5,9 +5,8 @@
55 … 'app.html.settings': true
66 … })
77 …
88 … exports.needs = nest({
9- 'app.html.settings': 'map',
109 … 'settings.obs.get': 'first',
1110 … 'settings.sync.set': 'first'
1211 … })
1312 …
@@ -24,13 +23,13 @@
2423 … title: 'Custom Styles',
2524 … body: h('CustomStyles', [
2625 … h('p', 'Custom MCSS to be applied on this window.'),
2726 … styles,
28- h('button', {'ev-click': peachify}, 'Apply Styles')
27 …+ h('button', {'ev-click': save}, 'Apply Styles')
2928 … ])
3029 … }
3130 …
32- function peachify () {
31 …+ function save () {
3332 … api.settings.sync.set({
3433 … patchbay: {
3534 … customStyles: styles.value
3635 … }
app/html/settings/custom-styles.mcssView
@@ -1,5 +1,9 @@
11 … CustomStyles {
2 …+ textarea {
3 …+ font-family: monospace
4 …+ line-height: 1.2rem
5 …+ }
26 … button {
37 … display: block
48 … margin: .5rem 0
59 … }
app/html/settings/accessibility.jsView
@@ -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.mcssView
@@ -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.mcssView
@@ -1,9 +1,9 @@
11 … Page -imageSearch {
22 … overflow-y: auto
33 …
44 … display: grid
5- grid-template-columns: 85vw
5 …+ grid-template-columns: 95vw
66 … grid-template-rows: 5rem auto
77 … justify-content: center
88 … align-items: start
99 …
@@ -16,25 +16,26 @@
1616 … }
1717 …
1818 … section.results {
1919 … display: flex
20 …+ justify-content: center
2021 … align-items: center
2122 … flex-wrap: wrap
2223 …
2324 … div {
2425 … cursor: pointer
2526 …
2627 … min-width: 5rem
2728 … min-height: 5rem
28- max-width: 19rem
29 …+ max-width: calc(95vw / 4 - 1rem)
2930 … max-height: 19rem
3031 …
3132 … display: flex
3233 … justify-content: center
3334 … align-items: center
3435 …
3536 … img {
36- max-width: 19rem
37 …+ max-width: calc(95vw / 4 - 1rem)
3738 … max-height: 19rem
3839 … }
3940 …
4041 … margin: 0 1rem 1rem 0
app/page/page.mcssView
@@ -1,9 +1,7 @@
11 … Page {
22 … width: 100%
33 …
4- $backgroundPrimary
5-
64 … display: flex
75 … flex-wrap: wrap
86 … }
97 …
app/page/settings.mcssView
@@ -27,9 +27,9 @@
2727 … letter-spacing: 2px
2828 … }
2929 …
3030 … div {
31- p {
31 …+ p, div {
3232 … margin-top: .2rem
3333 … margin-left: .3rem
3434 … }
3535 …
@@ -49,9 +49,8 @@
4949 …
5050 … width: 600px
5151 … max-width: 600px
5252 … }
53-
5453 … }
5554 … }
5655 … }
5756 … }
app/sync/initialise/settings.jsView
@@ -1,6 +1,8 @@
11 … const nest = require('depnest')
22 … const merge = require('lodash/merge')
3 …+const fs = require('fs')
4 …+const { join } = require('path')
35 …
46 … exports.gives = nest('app.sync.initialise')
57 …
68 … exports.needs = nest({
@@ -9,9 +11,16 @@
911 … })
1012 …
1113 … const defaults = {
1214 … 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()
1423 … },
1524 … filter: {
1625 … exclude: {
1726 … channels: ''
@@ -41,4 +50,11 @@
4150 …
4251 … set(settings)
4352 … }
4453 … }
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.jsView
@@ -1,7 +1,8 @@
11 … const nest = require('depnest')
22 … const compileCss = require('micro-css')
33 … const { h, computed } = require('mutant')
4 …+const get = require('lodash/get')
45 …
56 … exports.gives = nest('app.sync.initialise')
67 …
78 … exports.needs = nest({
@@ -13,22 +14,56 @@
1314 … return nest('app.sync.initialise', styles)
1415 …
1516 … function styles () {
1617 … 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')
1720 …
1821 … 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(
1929 … 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))
2532 … })
2633 … })
2734 … )
2835 … }
2936 … }
3037 …
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 …+
3166 … function values (object) {
3267 … const keys = Object.keys(object)
3368 … return keys.map(k => object[k])
3469 … }

Built with git-ssb-web