Commit f4987c4f059ea50695536df292a96d0dc3c5af4f
accessibility: refactor the style additions
mixmix committed on 8/13/2018, 10:31:07 AMParent: deef6f4525d00a84b10de760ede55bf07c561630
Files changed
| app/html/settings/accessibility.mcss | ||
|---|---|---|
| @@ -20,10 +20,9 @@ | ||
| 20 | 20 … | :focus { |
| 21 | 21 … | box-shadow: none |
| 22 | 22 … | } |
| 23 | 23 … | } |
| 24 … | + | |
| 24 | 25 … | i { |
| 25 | 26 … | } |
| 26 | 27 … | } |
| 27 | - | |
| 28 | 28 … | } |
| 29 | - | |
| 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/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/settings.mcss | ||
|---|---|---|
| @@ -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({ |
| @@ -15,9 +17,10 @@ | ||
| 15 | 17 … | invert: false, |
| 16 | 18 … | saturation: 100, |
| 17 | 19 … | brightness: 100, |
| 18 | 20 … | contrast: 100 |
| 19 | - } | |
| 21 … | + }, | |
| 22 … | + customStyles: defaultStyles() | |
| 20 | 23 … | }, |
| 21 | 24 … | filter: { |
| 22 | 25 … | exclude: { |
| 23 | 26 … | channels: '' |
| @@ -47,4 +50,11 @@ | ||
| 47 | 50 … | |
| 48 | 51 … | set(settings) |
| 49 | 52 … | } |
| 50 | 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 | |||
|---|---|---|---|
| @@ -14,19 +14,22 @@ | |||
| 14 | 14 … | return nest('app.sync.initialise', styles) | |
| 15 | 15 … | ||
| 16 | 16 … | function styles () { | |
| 17 | 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', '') | ||
| 18 … | + const custom = api.settings.obs.get('patchbay.customStyles') | ||
| 19 … | + const accessibility = api.settings.obs.get('patchbay.accessibility') | ||
| 20 | 20 … | ||
| 21 | 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( | ||
| 22 | 29 … | h('style', { | |
| 23 | - innerHTML: computed([custom, accessibility], (custom, accessibility) => { | ||
| 24 | - return [ | ||
| 25 | - css, | ||
| 26 | - compileCss(custom), | ||
| 27 | - compileCss(accessibilityMcss(accessibility)) | ||
| 28 | - ].join('\n') | ||
| 30 … | + innerHTML: computed(accessibility, a11y => { | ||
| 31 … | + return compileCss(accessibilityMcss(a11y)) | ||
| 29 | 32 … | }) | |
| 30 | 33 … | }) | |
| 31 | 34 … | ) | |
| 32 | 35 … | } | |
| @@ -40,19 +43,25 @@ | |||
| 40 | 43 … | const saturation = get(settings, 'saturation', 100) | |
| 41 | 44 … | const brightness = get(settings, 'brightness', 100) | |
| 42 | 45 … | const contrast = get(settings, 'contrast', 100) | |
| 43 | 46 … | ||
| 44 | - return ` | ||
| 45 | - body { | ||
| 46 | - filter: ${invert ? 'invert()' : ''} saturate(${saturation}%) brightness(${brightness}%) contrast(${contrast}%) | ||
| 47 … | + const css = ` | ||
| 48 … | +body { | ||
| 49 … | + filter: ${invert ? 'invert()' : ''} saturate(${saturation}%) brightness(${brightness}%) contrast(${contrast}%) | ||
| 47 | 50 … | ||
| 48 | - (img) { | ||
| 49 | - filter: ${invert ? 'invert()' : ''} | ||
| 50 | - } | ||
| 51 | - | ||
| 52 | - } | ||
| 53 | - ` | ||
| 51 … | + (img) { | ||
| 52 … | + filter: ${invert ? 'invert()' : ''} | ||
| 53 … | + } | ||
| 54 … | + (video) { | ||
| 55 … | + filter: ${invert ? 'invert()' : ''} | ||
| 56 … | + } | ||
| 57 … | + (button) { | ||
| 58 … | + filter: ${invert ? 'invert()' : ''} | ||
| 59 … | + } | ||
| 54 | 60 … | } | |
| 61 … | +` | ||
| 62 … | + return css | ||
| 63 … | +} | ||
| 55 | 64 … | // //////////////////////////// | |
| 56 | 65 … | ||
| 57 | 66 … | function values (object) { | |
| 58 | 67 … | const keys = Object.keys(object) | |
Built with git-ssb-web