diff --git a/src/client/components/AccessibilityControl.js b/src/client/components/AccessibilityControl.js index 3463b006..dba1e27f 100644 --- a/src/client/components/AccessibilityControl.js +++ b/src/client/components/AccessibilityControl.js @@ -4,9 +4,45 @@ export default function (app) { app.component('accessibilityControl', { template, controller: ($scope, theme) => { + + $scope.scopes = { + color: [ + ['bw', 'белым по черному'], + ['wb', 'черным по белому'], + ], + + fontSize: [ + ['normal', 'нормальный'], + ['big', 'большой'], + ['biggest', 'огромный'], + ], + + fontFamily: [ + ['sans', 'без засечек'], + ['serif', 'с засечками'], + ], + + image: [ + ['yesImg', 'отображаются'], + ['noImg', 'спрятаны'], + ], + + kerning: [ + ['normal', 'обычный'], + ['big', 'увеличенный'], + ], + } + + $scope.isActive = (scope, [name,]) => theme.isActive(scope, name) + + $scope.setDefaultTheme = () => theme.toggle() + $scope.setDefaultSettings = () => theme.setDefaultAccessibilityTheme() + $scope.setColorTheme = theme.setColorTheme.bind(theme) $scope.setFontTheme = theme.setFontTheme.bind(theme) $scope.setFontFamilyTheme = theme.setFontFamilyTheme.bind(theme) + $scope.setImageTheme = theme.setImageTheme.bind(theme) + $scope.setKerningTheme = theme.setKerningTheme.bind(theme) }, }) } diff --git a/src/client/services/theme.js b/src/client/services/theme.js index 1c99fdc0..bc29c52c 100644 --- a/src/client/services/theme.js +++ b/src/client/services/theme.js @@ -14,10 +14,20 @@ const themeScheme = { }, fontSize: { - normal: 'theme-accessibility-font-normal', + normal: '', big: 'theme-accessibility-font-big', biggest: 'theme-accessibility-font-biggest', }, + + image: { + yesImg: '', + noImg: 'theme-accessibility-no-image', + }, + + kerning: { + normal: '', + big: 'theme-accessibility-kerning-big', + }, } const defaultAccessibilityTheme = () => ({ @@ -26,7 +36,9 @@ const defaultAccessibilityTheme = () => ({ accessibility: 'accessibility', color: 'wb', font: 'sans', - fontSize: 'big', + fontSize: 'normal', + image: 'yesImg', + kerning: 'normal', }, }) @@ -121,13 +133,36 @@ class Theme { this.install() } + setImageTheme(theme) { + this.themeSetup.theme.image = theme + this.install() + } + + setKerningTheme(theme) { + this.themeSetup.theme.kerning = theme + this.install() + } + install() { this.setTheme(this.themeSetup) } - isDefaultTheme(){ - const theme = loadTheme() - return !theme // default theme cleared up local storage + isDefaultTheme() { + return this.__scope.theme === this.mainTheme + } + + isActive(scope, name) { + if (this.isDefaultTheme()) return false + + try { + return this.themeSetup.theme[scope] === name + } catch (e) { + return false + } + } + + setDefaultAccessibilityTheme () { + this.setTheme(defaultAccessibilityTheme()) } } diff --git a/src/style/components/accessibility-control.scss b/src/style/components/accessibility-control.scss index 684049b2..d78e3e51 100644 --- a/src/style/components/accessibility-control.scss +++ b/src/style/components/accessibility-control.scss @@ -1,11 +1,34 @@ @import "../variables"; -.accessibility-control{ - background-color: white; - height: 100px; +.accessibility-control { width: 100%; + padding: $single-margin; + + span { + margin-right: $single-margin; + } + + span.active { + font-weight: bold; + } + + &__block { + margin-bottom: $half-margin; + } + ul li { display: inline; + margin-right: $single-margin; + } + + ul { + display: inline; } } + +.accessibility .accessibility-control { + a { + border-bottom-style: dashed; + } +} \ No newline at end of file diff --git a/src/style/main.scss b/src/style/main.scss index 15ecc6f2..046aea88 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -21,3 +21,11 @@ h2{ h3{ margin-bottom: $single-margin / 2; } + +.actor { + border-bottom: 1px dashed black; + + &:hover { + border-bottom: 2px solid black; + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 43d8d847..f1baca35 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -48,3 +48,5 @@ @import "themes/theme-accessibility-font-biggest"; @import "themes/theme-accessibility-font-sans"; @import "themes/theme-accessibility-font-serif"; +@import "themes/theme-accessibility-no-image"; +@import "themes/theme-accessibility-kerning-big"; diff --git a/src/style/themes/theme-accessibility-black-white.scss b/src/style/themes/theme-accessibility-black-white.scss index 31fec877..79e6d8a9 100644 --- a/src/style/themes/theme-accessibility-black-white.scss +++ b/src/style/themes/theme-accessibility-black-white.scss @@ -14,6 +14,10 @@ } } + .accessibility-control{ + color: $darker-color; + } + .main-menu { a { color: $dark-color; diff --git a/src/style/themes/theme-accessibility-font-big.scss b/src/style/themes/theme-accessibility-font-big.scss index f3a86e08..6c137b84 100644 --- a/src/style/themes/theme-accessibility-font-big.scss +++ b/src/style/themes/theme-accessibility-font-big.scss @@ -1,7 +1,7 @@ @import "../variables"; .theme-accessibility-font-big { - font-size: 18pt; + font-size: 16pt; .main-menu { 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 index 6030c1c5..85ee732b 100644 --- a/src/style/themes/theme-accessibility-font-biggest.scss +++ b/src/style/themes/theme-accessibility-font-biggest.scss @@ -1,7 +1,7 @@ @import "../variables"; .theme-accessibility-font-biggest { - font-size: 36pt; + font-size: 18pt; a { &:hover { diff --git a/src/style/themes/theme-accessibility-kerning-big.scss b/src/style/themes/theme-accessibility-kerning-big.scss new file mode 100644 index 00000000..0009ed92 --- /dev/null +++ b/src/style/themes/theme-accessibility-kerning-big.scss @@ -0,0 +1,6 @@ +@import "../variables"; + +.theme-accessibility-kerning-big { + line-height: 2rem; + letter-spacing: .5rem; +} diff --git a/src/style/themes/theme-accessibility-no-image.scss b/src/style/themes/theme-accessibility-no-image.scss new file mode 100644 index 00000000..142c439d --- /dev/null +++ b/src/style/themes/theme-accessibility-no-image.scss @@ -0,0 +1,19 @@ +@import "../variables"; + +.theme-accessibility-no-image { + img { + display: none; + } + + video { + display: none; + } + + .html5-video-player { + display: none; + } + + .main-image{ + display: none; + } +} diff --git a/src/style/themes/theme-accessibility-white-black.scss b/src/style/themes/theme-accessibility-white-black.scss index b32040dc..b34a4d3c 100644 --- a/src/style/themes/theme-accessibility-white-black.scss +++ b/src/style/themes/theme-accessibility-white-black.scss @@ -14,6 +14,10 @@ } } + .accessibility-control{ + color: $darker-color; + } + .main-menu { a { color: $darker-color; diff --git a/src/templates/components/accessibility-control.html b/src/templates/components/accessibility-control.html index 611342fc..1b0576a4 100644 --- a/src/templates/components/accessibility-control.html +++ b/src/templates/components/accessibility-control.html @@ -1,58 +1,75 @@
- +
+ Цветовая схема: + +
-
\ No newline at end of file