tmshv/hudozka
1
0 Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Accessibility update

Browse Source
This commit is contained in:
tmshv committed 2017-02-20 05:15:28 +03:00
1 parent ba102fc9fc
commit 969cabb560
13 files changed
+237 -56
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/client/components/AccessibilityControl.js
+29 -10
View File
@@ -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()
}
},
})
}
src/client/services/theme.js
+32 -18
View File
@@ -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())
}
}
src/style/components/accessibility-control.scss
+5 -3
View File
@@ -1,9 +1,11 @@
@import "../variables";
.accessibility-control{
//display: none;
background-color: gold;
background-color: white;
height: 100px;
width: 100%;
ul li {
display: inline;
}
}
src/style/main.scss
-20
View File
@@ -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;
// }
//}
}
src/style/style.scss
+6 -1
View File
@@ -42,4 +42,9 @@
// THEMES
@import "themes/theme-default";
@import "themes/theme-accessibility-bw";
@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";
src/style/themes/theme-accessibility-bw.scss → src/style/themes/theme-accessibility-black-white.scss
+1 -3
View File
@@ -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;
src/style/themes/theme-accessibility-font-big.scss
+13
View File
@@ -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;
}
}
src/style/themes/theme-accessibility-font-biggest.scss
+13
View File
@@ -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;
}
}
src/style/themes/theme-accessibility-font-sans.scss
+5
View File
@@ -0,0 +1,5 @@
@import "../variables";
.theme-accessibility-font-sans {
font-family: sans-serif;
}
src/style/themes/theme-accessibility-font-serif.scss
+5
View File
@@ -0,0 +1,5 @@
@import "../variables";
.theme-accessibility-font-serif {
font-family: serif;
}
src/style/themes/theme-accessibility-white-black.scss
+68
View File
@@ -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;
}
}
src/style/themes/theme-default.scss
+4
View File
@@ -1,6 +1,10 @@
@import "../variables";
.theme-default {
h1, h2{
font-family: $title-font;
}
a {
color: $dark-color;
src/templates/components/accessibility-control.html
+56 -1
View File
@@ -1,3 +1,58 @@
<div class="accessibility-control">
<button>Let's rock!</button>
<ul>
<li>
<button ng-click="setColorTheme('theme-accessibility-black-white')"
>Белым по черному
</button>
</li>
<li>
<button ng-click="setColorTheme('theme-accessibility-white-black')"
>Черным по белому
</button>
</li>
<!--<li>-->
<!--<button ng-click="setTheme('dark-blue')"-->
<!--&gt;Темно-синим по голубому-->
<!--</button>-->
<!--</li>-->
<!--<li>-->
<!--<button ng-click="setTheme('brown')"-->
<!--&gt;Коричневым по бежевому</button>-->
<!--</li>-->
<!--<li>-->
<!--<button ng-click="setTheme('green')"-->
<!--&gt;Зеленым по темно-коричневому</button>-->
<!--</li>-->
</ul>
<ul>
<li>
<button ng-click="setFontTheme('')"
>Нормально
</button>
</li>
<li>
<button ng-click="setFontTheme('theme-accessibility-font-big')"
>Большие
</button>
</li>
<li>
<button ng-click="setFontTheme('theme-accessibility-font-biggest')"
>Огромные
</button>
</li>
</ul>
<ul>
<li>
<button ng-click="setFontFamilyTheme('theme-accessibility-font-sans')"
>Без засечек
</button>
</li>
<li>
<button ng-click="setFontFamilyTheme('theme-accessibility-font-serif')"
>С засечками
</button>
</li>
</ul>
</div>