From 969cabb5600ed1ac7de5e612b64ce5f428765f4f Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Mon, 20 Feb 2017 05:15:28 +0300 Subject: [PATCH] Accessibility update --- src/client/components/AccessibilityControl.js | 39 ++++++++--- src/client/services/theme.js | 50 +++++++++----- .../components/accessibility-control.scss | 8 ++- src/style/main.scss | 20 ------ src/style/style.scss | 7 +- ...s => theme-accessibility-black-white.scss} | 4 +- .../themes/theme-accessibility-font-big.scss | 13 ++++ .../theme-accessibility-font-biggest.scss | 13 ++++ .../themes/theme-accessibility-font-sans.scss | 5 ++ .../theme-accessibility-font-serif.scss | 5 ++ .../theme-accessibility-white-black.scss | 68 +++++++++++++++++++ src/style/themes/theme-default.scss | 4 ++ .../components/accessibility-control.html | 57 +++++++++++++++- 13 files changed, 237 insertions(+), 56 deletions(-) rename src/style/themes/{theme-accessibility-bw.scss => theme-accessibility-black-white.scss} (95%) create mode 100644 src/style/themes/theme-accessibility-font-big.scss create mode 100644 src/style/themes/theme-accessibility-font-biggest.scss create mode 100644 src/style/themes/theme-accessibility-font-sans.scss create mode 100644 src/style/themes/theme-accessibility-font-serif.scss create mode 100644 src/style/themes/theme-accessibility-white-black.scss diff --git a/src/client/components/AccessibilityControl.js b/src/client/components/AccessibilityControl.js index 29ac3e2f..787eb86b 100644 --- a/src/client/components/AccessibilityControl.js +++ b/src/client/components/AccessibilityControl.js @@ -4,16 +4,35 @@ export default function (app) { app.component('accessibilityControl', { template, controller: ($scope, theme) => { - //const update = () => { - // $scope.isMainTheme = theme.currentTheme === theme.mainTheme - //} - // - //$scope.toggleTheme = () => { - // theme.toggle() - // update() - //} - // - //update() + const themeSet = { + accessibility: 'accessibility', + color: '', + fontSize: '', + fontFamily: '', + } + + const install = () => { + const baked = Object + .values(themeSet) + .filter(Boolean) + .join(' ') + theme.setTheme(baked) + } + + $scope.setColorTheme = (color) => { + themeSet.color = color + install() + } + + $scope.setFontTheme = (font) => { + themeSet.fontSize = font + install() + } + + $scope.setFontFamilyTheme = (font) => { + themeSet.fontFamily = font + install() + } }, }) } diff --git a/src/client/services/theme.js b/src/client/services/theme.js index 2ce8d776..27c5e7cc 100644 --- a/src/client/services/theme.js +++ b/src/client/services/theme.js @@ -1,29 +1,43 @@ -const themes = { - main: 'theme-default', - accessibility: 'accessibility theme-accessibility-bw', -} +const defaultTheme = 'theme-default' +const defaultAccessibilityTheme = 'accessibility theme-accessibility-black-white' -const defaultTheme = 'main' +const getTheme = () => localStorage.getItem('theme') + +const isDefaultTheme = () => { + const theme = getTheme() + if (!theme) return true + return theme === defaultTheme +} class Theme { constructor($rootScope) { this.mainTheme = defaultTheme - this.currentTheme = null - - const getTheme = value => themes[value] - const setTheme = value => { - const theme = value in themes ? value : defaultTheme - localStorage.setItem('theme', theme) - this.currentTheme = theme - $rootScope.theme = getTheme(theme) - } - - setTheme(localStorage.getItem('theme')) + this.currentTheme = defaultAccessibilityTheme this.toggle = () => { - const t = this.currentTheme === 'main' ? 'accessibility' : 'main' - setTheme(t) + if (isDefaultTheme()) { + this.setTheme(this.currentTheme) + } else { + this.setMainTheme() + } } + + this.setTheme = (themeName) => { + if (!themeName) { + this.setMainTheme() + } else { + localStorage.setItem('theme', themeName) + this.currentTheme = themeName + $rootScope.theme = themeName + } + } + + this.setMainTheme = () => { + localStorage.removeItem('theme') + $rootScope.theme = this.mainTheme + } + + this.setTheme(getTheme()) } } diff --git a/src/style/components/accessibility-control.scss b/src/style/components/accessibility-control.scss index 97697756..684049b2 100644 --- a/src/style/components/accessibility-control.scss +++ b/src/style/components/accessibility-control.scss @@ -1,9 +1,11 @@ @import "../variables"; .accessibility-control{ - //display: none; - - background-color: gold; + background-color: white; height: 100px; width: 100%; + + ul li { + display: inline; + } } diff --git a/src/style/main.scss b/src/style/main.scss index df6a9284..15ecc6f2 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -16,28 +16,8 @@ body { h2{ text-align: center; margin-bottom: $single-margin; - - //background-color: hsl(0, 0, 95%); -} - -h1, h2{ - font-family: $title-font; } h3{ margin-bottom: $single-margin / 2; - - //a { - // color: $dark-color; - // text-decoration: none; - // border-bottom: 1px solid lighten($dark-color, 10%); - // - // &:hover { - // border-bottom: 1px solid lighten($dark-color, 25%); - // } - // - // &:active { - // border-bottom: 1px solid $dark-color; - // } - //} } diff --git a/src/style/style.scss b/src/style/style.scss index 47c89f16..43d8d847 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -42,4 +42,9 @@ // THEMES @import "themes/theme-default"; -@import "themes/theme-accessibility-bw"; \ No newline at end of file +@import "themes/theme-accessibility-black-white"; +@import "themes/theme-accessibility-white-black"; +@import "themes/theme-accessibility-font-big"; +@import "themes/theme-accessibility-font-biggest"; +@import "themes/theme-accessibility-font-sans"; +@import "themes/theme-accessibility-font-serif"; diff --git a/src/style/themes/theme-accessibility-bw.scss b/src/style/themes/theme-accessibility-black-white.scss similarity index 95% rename from src/style/themes/theme-accessibility-bw.scss rename to src/style/themes/theme-accessibility-black-white.scss index 6c0d7255..47813728 100644 --- a/src/style/themes/theme-accessibility-bw.scss +++ b/src/style/themes/theme-accessibility-black-white.scss @@ -1,6 +1,6 @@ @import "../variables"; -.theme-accessibility-bw { +.theme-accessibility-black-white { background-color: $darker-color; color: $lighter-color; @@ -23,9 +23,7 @@ border-width: 2px; } } - } - .main-menu { .selected { border-top: $menu-colored-mark-thickness solid $dark-color; diff --git a/src/style/themes/theme-accessibility-font-big.scss b/src/style/themes/theme-accessibility-font-big.scss new file mode 100644 index 00000000..f3a86e08 --- /dev/null +++ b/src/style/themes/theme-accessibility-font-big.scss @@ -0,0 +1,13 @@ +@import "../variables"; + +.theme-accessibility-font-big { + font-size: 18pt; + + .main-menu { + font-size: $bigger-font-size; + } + + footer { + font-size: $bigger-font-size; + } +} diff --git a/src/style/themes/theme-accessibility-font-biggest.scss b/src/style/themes/theme-accessibility-font-biggest.scss new file mode 100644 index 00000000..ccf7c583 --- /dev/null +++ b/src/style/themes/theme-accessibility-font-biggest.scss @@ -0,0 +1,13 @@ +@import "../variables"; + +.theme-accessibility-font-biggest { + font-size: 24pt; + + .main-menu { + font-size: $bigger-font-size; + } + + footer { + font-size: $bigger-font-size; + } +} diff --git a/src/style/themes/theme-accessibility-font-sans.scss b/src/style/themes/theme-accessibility-font-sans.scss new file mode 100644 index 00000000..27a9c9a3 --- /dev/null +++ b/src/style/themes/theme-accessibility-font-sans.scss @@ -0,0 +1,5 @@ +@import "../variables"; + +.theme-accessibility-font-sans { + font-family: sans-serif; +} diff --git a/src/style/themes/theme-accessibility-font-serif.scss b/src/style/themes/theme-accessibility-font-serif.scss new file mode 100644 index 00000000..a5fa83bd --- /dev/null +++ b/src/style/themes/theme-accessibility-font-serif.scss @@ -0,0 +1,5 @@ +@import "../variables"; + +.theme-accessibility-font-serif { + font-family: serif; +} diff --git a/src/style/themes/theme-accessibility-white-black.scss b/src/style/themes/theme-accessibility-white-black.scss new file mode 100644 index 00000000..f9dc41a8 --- /dev/null +++ b/src/style/themes/theme-accessibility-white-black.scss @@ -0,0 +1,68 @@ +@import "../variables"; + +.theme-accessibility-white-black { + background-color: $lighter-color; + color: $darker-color; + + a { + color: $darker-color; + text-decoration: none; + border-bottom: 1px solid $darker-color; + + &:hover { + border-width: 2px; + } + } + + .main-menu { + a { + color: $darker-color; + border-bottom: 1px solid $darker-color; + + &:hover { + border-width: 2px; + } + } + + .selected { + border-top: $menu-colored-mark-thickness solid $darker-color; + + a:link, a:visited { + color: $darker-color; + } + } + + } + + .content { + &.content--padding-top--menu { + padding-top: $menu-thickness + $double-margin + 5em; + padding-bottom: $single-margin; + } + } + + .navigation { + background-color: $lighter-color; + } + + .parallax { + &__end { + background-color: $lighter-color; + } + } + + .article { + &__head { + .date { + color: $darker-color; + } + } + } + + footer { + color: $darker-color; + background-color: $lighter-color; + + font-size: $normal-font-size; + } +} diff --git a/src/style/themes/theme-default.scss b/src/style/themes/theme-default.scss index 5325c279..9adf41c5 100644 --- a/src/style/themes/theme-default.scss +++ b/src/style/themes/theme-default.scss @@ -1,6 +1,10 @@ @import "../variables"; .theme-default { + h1, h2{ + font-family: $title-font; + } + a { color: $dark-color; diff --git a/src/templates/components/accessibility-control.html b/src/templates/components/accessibility-control.html index c55fdbb8..a3dc37b2 100644 --- a/src/templates/components/accessibility-control.html +++ b/src/templates/components/accessibility-control.html @@ -1,3 +1,58 @@
- + + + + +
\ No newline at end of file