Skip to content

Commit 567b224

Browse files
author
Janis Köhr
committed
Add theme class for selected theme to body, fix for accessibility theme selection and separated highcontrast theme
Signed-off-by: Janis Köhr <janis.koehr@novatec-gmbh.de>
1 parent 9629015 commit 567b224

10 files changed

Lines changed: 76 additions & 39 deletions

File tree

apps/accessibility/css/themedark.scss renamed to apps/accessibility/css/dark.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,4 @@ input[type=checkbox] {
8484
background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg');
8585
}
8686
}
87-
}
87+
}

apps/accessibility/css/themehighcontrast.scss renamed to apps/accessibility/css/highcontrast.scss

File renamed without changes.

‎apps/accessibility/js/accessibility.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/accessibility/js/accessibility.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/accessibility/lib/AccessibilityProvider.php‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,19 +56,25 @@ public function __construct(string $appName,
5656
public function getThemes() {
5757
return array(
5858
[
59-
'id' => 'themehighcontrast',
60-
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-highcontrast.jpg'),
61-
'title' => $this->l->t('High contrast theme'),
62-
'text' => $this->l->t('A high contrast theme to ease your navigation. Visual quality will be reduced but clarity will be increased.')
63-
], [
64-
'id' => 'themedark',
59+
'id' => 'dark',
6560
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-dark.jpg'),
6661
'title' => $this->l->t('Dark theme'),
6762
'text' => $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness. It is still under development, so please report any issues you may find.')
6863
]
6964
);
7065
}
7166

67+
public function getHighContrast() {
68+
return array(
69+
[
70+
'id' => 'highcontrast',
71+
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-highcontrast.jpg'),
72+
'title' => $this->l->t('High contrast theme'),
73+
'text' => $this->l->t('A high contrast theme to ease your navigation. Visual quality will be reduced but clarity will be increased.')
74+
]
75+
);
76+
}
77+
7278
public function getFonts() {
7379
return array(
7480
[

‎apps/accessibility/lib/Controller/AccessibilityController.php‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ public function getCss(): DataDisplayResponse {
167167
$appWebRoot = substr($this->appRoot, strlen($this->serverRoot) - strlen(\OC::$WEBROOT));
168168
$css = $this->rebaseUrls($css, $appWebRoot . '/css');
169169

170-
if (in_array('themedark', $userValues) && $this->iconsCacher->getCachedList() && $this->iconsCacher->getCachedList()->getSize() > 0) {
170+
if (in_array('dark', $userValues) && $this->iconsCacher->getCachedList() && $this->iconsCacher->getCachedList()->getSize() > 0) {
171171
$iconsCss = $this->invertSvgIconsColor($this->iconsCacher->getCachedList()->getContent());
172172
$css = $css . $iconsCss;
173173
}
@@ -201,16 +201,27 @@ public function getJavascript(): DataDownloadResponse {
201201

202202
if ($user === null) {
203203
$theme = false;
204+
$highcontrast = false;
204205
} else {
205206
$theme = $this->config->getUserValue($user->getUID(), $this->appName, 'theme', false);
207+
$highcontrast = $this->config->getUserValue($user->getUID(), $this->appName, 'highcontrast', false) !== false;
206208
}
207-
208-
$responseJS = '(function() {
209+
if ($theme !== false) {
210+
$responseJS = '(function() {
209211
OCA.Accessibility = {
212+
highcontrast: ' . json_encode($highcontrast) . ',
210213
theme: ' . json_encode($theme) . ',
211-
212214
};
215+
document.body.classList.add(' . json_encode($theme) . ');
213216
})();';
217+
} else {
218+
$responseJS = '(function() {
219+
OCA.Accessibility = {
220+
highcontrast: ' . json_encode($highcontrast) . ',
221+
theme: ' . json_encode($theme) . ',
222+
};
223+
})();';
224+
}
214225
$response = new DataDownloadResponse($responseJS, 'javascript', 'text/javascript');
215226
$response->cacheFor(3600);
216227
return $response;
@@ -224,8 +235,9 @@ public function getJavascript(): DataDownloadResponse {
224235
private function getUserValues(): array{
225236
$userTheme = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false);
226237
$userFont = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false);
238+
$userHighContrast = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'highcontrast', false);
227239

228-
return [$userTheme, $userFont];
240+
return [$userTheme, $userHighContrast, $userFont];
229241
}
230242

231243
/**

‎apps/accessibility/lib/Controller/ConfigController.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ public function __construct(string $appName,
8383
*/
8484
public function getConfig(): DataResponse {
8585
return new DataResponse([
86+
'highcontrast' => $this->config->getUserValue($this->userId, $this->appName, 'highcontrast', false),
8687
'theme' => $this->config->getUserValue($this->userId, $this->appName, 'theme', false),
8788
'font' => $this->config->getUserValue($this->userId, $this->appName, 'font', false)
8889
]);
@@ -98,7 +99,7 @@ public function getConfig(): DataResponse {
9899
* @throws Exception
99100
*/
100101
public function setConfig(string $key, $value): DataResponse {
101-
if ($key === 'theme' || $key === 'font') {
102+
if ($key === 'theme' || $key === 'font' || $key === 'highcontrast') {
102103

103104
if ($value === false) {
104105
$this->config->deleteUserValue($this->userId, $this->appName, $key);
@@ -113,11 +114,12 @@ public function setConfig(string $key, $value): DataResponse {
113114
}
114115

115116
$themes = $this->accessibilityProvider->getThemes();
117+
$highcontrast = $this->accessibilityProvider->getHighContrast();
116118
$fonts = $this->accessibilityProvider->getFonts();
117119

118120
$availableOptions = array_map(function($option) {
119121
return $option['id'];
120-
}, array_merge($themes, $fonts));
122+
}, array_merge($themes, $highcontrast, $fonts));
121123

122124
if (in_array($value, $availableOptions)) {
123125
$this->config->setUserValue($this->userId, $this->appName, $key, $value);
@@ -130,4 +132,4 @@ public function setConfig(string $key, $value): DataResponse {
130132
throw new OCSBadRequestException('Invalid key: ' . $key);
131133
}
132134

133-
}
135+
}

‎apps/accessibility/lib/Settings/Personal.php‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,12 @@ public function getForm() {
8484
$serverData = [
8585
'themes' => $this->accessibilityProvider->getThemes(),
8686
'fonts' => $this->accessibilityProvider->getFonts(),
87-
'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
88-
'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
87+
'highcontrast' => $this->accessibilityProvider->getHighContrast(),
88+
'selected' => [
89+
'highcontrast' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'highcontrast', false),
90+
'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
91+
'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
92+
]
8993
];
9094

9195
return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);

‎apps/accessibility/src/App.vue‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<p v-html="descriptionDetail" />
66

77
<div class="preview-list">
8+
<preview v-for="preview in highcontrast" :preview="preview"
9+
:key="preview.id" :selected="selected.highcontrast"
10+
v-on:select="selectHighContrast"></preview>
811
<preview v-for="preview in themes" :preview="preview"
912
:key="preview.id" :selected="selected.theme"
1013
v-on:select="selectTheme"></preview>
@@ -40,13 +43,17 @@ export default {
4043
themes() {
4144
return this.serverData.themes;
4245
},
46+
highcontrast() {
47+
return this.serverData.highcontrast;
48+
},
4349
fonts() {
4450
return this.serverData.fonts;
4551
},
4652
selected() {
4753
return {
48-
theme: this.serverData.theme,
49-
font: this.serverData.font
54+
theme: this.serverData.selected.theme,
55+
highcontrast: this.serverData.selected.highcontrast,
56+
font: this.serverData.selected.font
5057
};
5158
},
5259
description() {
@@ -81,8 +88,13 @@ export default {
8188
}
8289
},
8390
methods: {
84-
selectTheme(id) {
91+
selectHighContrast(id) {
92+
this.selectItem('highcontrast', id);
93+
},
94+
selectTheme(id, idSelectedBefore) {
8595
this.selectItem('theme', id);
96+
document.body.classList.remove(idSelectedBefore);
97+
if (id) document.body.classList.add(id);
8698
},
8799
selectFont(id) {
88100
this.selectItem('font', id);
@@ -92,7 +104,7 @@ export default {
92104
* Commit a change and force reload css
93105
* Fetching the file again will trigger the server update
94106
*
95-
* @param {string} type type of the change (font or theme)
107+
* @param {string} type type of the change (font, highcontrast or theme)
96108
* @param {string} id the data of the change
97109
*/
98110
selectItem(type, id) {
@@ -101,7 +113,7 @@ export default {
101113
{ value: id }
102114
)
103115
.then(response => {
104-
this.serverData[type] = id;
116+
this.serverData.selected[type] = id;
105117
106118
// Remove old link
107119
let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');

‎apps/accessibility/src/components/itemPreview.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="preview-description">
55
<h3>{{preview.title}}</h3>
66
<p>{{preview.text}}</p>
7-
<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" @change="selectItem" />
7+
<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" />
88
<label :for="'accessibility-' + preview.id">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
99
</div>
1010
</div>
@@ -14,18 +14,19 @@
1414
export default {
1515
name: 'itemPreview',
1616
props: ['preview', 'selected'],
17-
data() {
18-
return {
19-
checked: this.selected === this.preview.id,
20-
};
21-
},
22-
methods: {
23-
selectItem() {
24-
this.$emit(
25-
'select',
26-
this.checked ? this.preview.id : false
27-
);
17+
computed: {
18+
checked: {
19+
get() {
20+
return this.selected === this.preview.id;
21+
},
22+
set(val) {
23+
this.$emit(
24+
'select',
25+
val ? this.preview.id : false,
26+
this.selected
27+
);
28+
}
2829
}
29-
}
30+
},
3031
};
3132
</script>

0 commit comments

Comments
 (0)