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>
This commit is contained in:
parent
9629015b4b
commit
567b224df4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -56,12 +56,7 @@ class AccessibilityProvider {
|
||||||
public function getThemes() {
|
public function getThemes() {
|
||||||
return array(
|
return array(
|
||||||
[
|
[
|
||||||
'id' => 'themehighcontrast',
|
'id' => 'dark',
|
||||||
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-highcontrast.jpg'),
|
|
||||||
'title' => $this->l->t('High contrast theme'),
|
|
||||||
'text' => $this->l->t('A high contrast theme to ease your navigation. Visual quality will be reduced but clarity will be increased.')
|
|
||||||
], [
|
|
||||||
'id' => 'themedark',
|
|
||||||
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-dark.jpg'),
|
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-dark.jpg'),
|
||||||
'title' => $this->l->t('Dark theme'),
|
'title' => $this->l->t('Dark theme'),
|
||||||
'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.')
|
'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.')
|
||||||
|
@ -69,6 +64,17 @@ class AccessibilityProvider {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function getHighContrast() {
|
||||||
|
return array(
|
||||||
|
[
|
||||||
|
'id' => 'highcontrast',
|
||||||
|
'img' => $this->urlGenerator->imagePath($this->appName, 'theme-highcontrast.jpg'),
|
||||||
|
'title' => $this->l->t('High contrast theme'),
|
||||||
|
'text' => $this->l->t('A high contrast theme to ease your navigation. Visual quality will be reduced but clarity will be increased.')
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
public function getFonts() {
|
public function getFonts() {
|
||||||
return array(
|
return array(
|
||||||
[
|
[
|
||||||
|
|
|
@ -167,7 +167,7 @@ class AccessibilityController extends Controller {
|
||||||
$appWebRoot = substr($this->appRoot, strlen($this->serverRoot) - strlen(\OC::$WEBROOT));
|
$appWebRoot = substr($this->appRoot, strlen($this->serverRoot) - strlen(\OC::$WEBROOT));
|
||||||
$css = $this->rebaseUrls($css, $appWebRoot . '/css');
|
$css = $this->rebaseUrls($css, $appWebRoot . '/css');
|
||||||
|
|
||||||
if (in_array('themedark', $userValues) && $this->iconsCacher->getCachedList() && $this->iconsCacher->getCachedList()->getSize() > 0) {
|
if (in_array('dark', $userValues) && $this->iconsCacher->getCachedList() && $this->iconsCacher->getCachedList()->getSize() > 0) {
|
||||||
$iconsCss = $this->invertSvgIconsColor($this->iconsCacher->getCachedList()->getContent());
|
$iconsCss = $this->invertSvgIconsColor($this->iconsCacher->getCachedList()->getContent());
|
||||||
$css = $css . $iconsCss;
|
$css = $css . $iconsCss;
|
||||||
}
|
}
|
||||||
|
@ -201,16 +201,27 @@ class AccessibilityController extends Controller {
|
||||||
|
|
||||||
if ($user === null) {
|
if ($user === null) {
|
||||||
$theme = false;
|
$theme = false;
|
||||||
|
$highcontrast = false;
|
||||||
} else {
|
} else {
|
||||||
$theme = $this->config->getUserValue($user->getUID(), $this->appName, 'theme', false);
|
$theme = $this->config->getUserValue($user->getUID(), $this->appName, 'theme', false);
|
||||||
|
$highcontrast = $this->config->getUserValue($user->getUID(), $this->appName, 'highcontrast', false) !== false;
|
||||||
}
|
}
|
||||||
|
if ($theme !== false) {
|
||||||
$responseJS = '(function() {
|
$responseJS = '(function() {
|
||||||
OCA.Accessibility = {
|
OCA.Accessibility = {
|
||||||
|
highcontrast: ' . json_encode($highcontrast) . ',
|
||||||
|
theme: ' . json_encode($theme) . ',
|
||||||
|
};
|
||||||
|
document.body.classList.add(' . json_encode($theme) . ');
|
||||||
|
})();';
|
||||||
|
} else {
|
||||||
|
$responseJS = '(function() {
|
||||||
|
OCA.Accessibility = {
|
||||||
|
highcontrast: ' . json_encode($highcontrast) . ',
|
||||||
theme: ' . json_encode($theme) . ',
|
theme: ' . json_encode($theme) . ',
|
||||||
|
|
||||||
};
|
};
|
||||||
})();';
|
})();';
|
||||||
|
}
|
||||||
$response = new DataDownloadResponse($responseJS, 'javascript', 'text/javascript');
|
$response = new DataDownloadResponse($responseJS, 'javascript', 'text/javascript');
|
||||||
$response->cacheFor(3600);
|
$response->cacheFor(3600);
|
||||||
return $response;
|
return $response;
|
||||||
|
@ -224,8 +235,9 @@ class AccessibilityController extends Controller {
|
||||||
private function getUserValues(): array{
|
private function getUserValues(): array{
|
||||||
$userTheme = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false);
|
$userTheme = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false);
|
||||||
$userFont = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false);
|
$userFont = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false);
|
||||||
|
$userHighContrast = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'highcontrast', false);
|
||||||
|
|
||||||
return [$userTheme, $userFont];
|
return [$userTheme, $userHighContrast, $userFont];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -83,6 +83,7 @@ class ConfigController extends OCSController {
|
||||||
*/
|
*/
|
||||||
public function getConfig(): DataResponse {
|
public function getConfig(): DataResponse {
|
||||||
return new DataResponse([
|
return new DataResponse([
|
||||||
|
'highcontrast' => $this->config->getUserValue($this->userId, $this->appName, 'highcontrast', false),
|
||||||
'theme' => $this->config->getUserValue($this->userId, $this->appName, 'theme', false),
|
'theme' => $this->config->getUserValue($this->userId, $this->appName, 'theme', false),
|
||||||
'font' => $this->config->getUserValue($this->userId, $this->appName, 'font', false)
|
'font' => $this->config->getUserValue($this->userId, $this->appName, 'font', false)
|
||||||
]);
|
]);
|
||||||
|
@ -98,7 +99,7 @@ class ConfigController extends OCSController {
|
||||||
* @throws Exception
|
* @throws Exception
|
||||||
*/
|
*/
|
||||||
public function setConfig(string $key, $value): DataResponse {
|
public function setConfig(string $key, $value): DataResponse {
|
||||||
if ($key === 'theme' || $key === 'font') {
|
if ($key === 'theme' || $key === 'font' || $key === 'highcontrast') {
|
||||||
|
|
||||||
if ($value === false) {
|
if ($value === false) {
|
||||||
$this->config->deleteUserValue($this->userId, $this->appName, $key);
|
$this->config->deleteUserValue($this->userId, $this->appName, $key);
|
||||||
|
@ -113,11 +114,12 @@ class ConfigController extends OCSController {
|
||||||
}
|
}
|
||||||
|
|
||||||
$themes = $this->accessibilityProvider->getThemes();
|
$themes = $this->accessibilityProvider->getThemes();
|
||||||
|
$highcontrast = $this->accessibilityProvider->getHighContrast();
|
||||||
$fonts = $this->accessibilityProvider->getFonts();
|
$fonts = $this->accessibilityProvider->getFonts();
|
||||||
|
|
||||||
$availableOptions = array_map(function($option) {
|
$availableOptions = array_map(function($option) {
|
||||||
return $option['id'];
|
return $option['id'];
|
||||||
}, array_merge($themes, $fonts));
|
}, array_merge($themes, $highcontrast, $fonts));
|
||||||
|
|
||||||
if (in_array($value, $availableOptions)) {
|
if (in_array($value, $availableOptions)) {
|
||||||
$this->config->setUserValue($this->userId, $this->appName, $key, $value);
|
$this->config->setUserValue($this->userId, $this->appName, $key, $value);
|
||||||
|
|
|
@ -84,8 +84,12 @@ class Personal implements ISettings {
|
||||||
$serverData = [
|
$serverData = [
|
||||||
'themes' => $this->accessibilityProvider->getThemes(),
|
'themes' => $this->accessibilityProvider->getThemes(),
|
||||||
'fonts' => $this->accessibilityProvider->getFonts(),
|
'fonts' => $this->accessibilityProvider->getFonts(),
|
||||||
|
'highcontrast' => $this->accessibilityProvider->getHighContrast(),
|
||||||
|
'selected' => [
|
||||||
|
'highcontrast' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'highcontrast', false),
|
||||||
'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
|
'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
|
||||||
'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
|
'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
|
||||||
|
]
|
||||||
];
|
];
|
||||||
|
|
||||||
return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);
|
return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);
|
||||||
|
|
|
@ -5,6 +5,9 @@
|
||||||
<p v-html="descriptionDetail" />
|
<p v-html="descriptionDetail" />
|
||||||
|
|
||||||
<div class="preview-list">
|
<div class="preview-list">
|
||||||
|
<preview v-for="preview in highcontrast" :preview="preview"
|
||||||
|
:key="preview.id" :selected="selected.highcontrast"
|
||||||
|
v-on:select="selectHighContrast"></preview>
|
||||||
<preview v-for="preview in themes" :preview="preview"
|
<preview v-for="preview in themes" :preview="preview"
|
||||||
:key="preview.id" :selected="selected.theme"
|
:key="preview.id" :selected="selected.theme"
|
||||||
v-on:select="selectTheme"></preview>
|
v-on:select="selectTheme"></preview>
|
||||||
|
@ -40,13 +43,17 @@ export default {
|
||||||
themes() {
|
themes() {
|
||||||
return this.serverData.themes;
|
return this.serverData.themes;
|
||||||
},
|
},
|
||||||
|
highcontrast() {
|
||||||
|
return this.serverData.highcontrast;
|
||||||
|
},
|
||||||
fonts() {
|
fonts() {
|
||||||
return this.serverData.fonts;
|
return this.serverData.fonts;
|
||||||
},
|
},
|
||||||
selected() {
|
selected() {
|
||||||
return {
|
return {
|
||||||
theme: this.serverData.theme,
|
theme: this.serverData.selected.theme,
|
||||||
font: this.serverData.font
|
highcontrast: this.serverData.selected.highcontrast,
|
||||||
|
font: this.serverData.selected.font
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
description() {
|
description() {
|
||||||
|
@ -81,8 +88,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectTheme(id) {
|
selectHighContrast(id) {
|
||||||
|
this.selectItem('highcontrast', id);
|
||||||
|
},
|
||||||
|
selectTheme(id, idSelectedBefore) {
|
||||||
this.selectItem('theme', id);
|
this.selectItem('theme', id);
|
||||||
|
document.body.classList.remove(idSelectedBefore);
|
||||||
|
if (id) document.body.classList.add(id);
|
||||||
},
|
},
|
||||||
selectFont(id) {
|
selectFont(id) {
|
||||||
this.selectItem('font', id);
|
this.selectItem('font', id);
|
||||||
|
@ -92,7 +104,7 @@ export default {
|
||||||
* Commit a change and force reload css
|
* Commit a change and force reload css
|
||||||
* Fetching the file again will trigger the server update
|
* Fetching the file again will trigger the server update
|
||||||
*
|
*
|
||||||
* @param {string} type type of the change (font or theme)
|
* @param {string} type type of the change (font, highcontrast or theme)
|
||||||
* @param {string} id the data of the change
|
* @param {string} id the data of the change
|
||||||
*/
|
*/
|
||||||
selectItem(type, id) {
|
selectItem(type, id) {
|
||||||
|
@ -101,7 +113,7 @@ export default {
|
||||||
{ value: id }
|
{ value: id }
|
||||||
)
|
)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.serverData[type] = id;
|
this.serverData.selected[type] = id;
|
||||||
|
|
||||||
// Remove old link
|
// Remove old link
|
||||||
let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
|
let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="preview-description">
|
<div class="preview-description">
|
||||||
<h3>{{preview.title}}</h3>
|
<h3>{{preview.title}}</h3>
|
||||||
<p>{{preview.text}}</p>
|
<p>{{preview.text}}</p>
|
||||||
<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" @change="selectItem" />
|
<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" />
|
||||||
<label :for="'accessibility-' + preview.id">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
|
<label :for="'accessibility-' + preview.id">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,18 +14,19 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'itemPreview',
|
name: 'itemPreview',
|
||||||
props: ['preview', 'selected'],
|
props: ['preview', 'selected'],
|
||||||
data() {
|
computed: {
|
||||||
return {
|
checked: {
|
||||||
checked: this.selected === this.preview.id,
|
get() {
|
||||||
};
|
return this.selected === this.preview.id;
|
||||||
},
|
},
|
||||||
methods: {
|
set(val) {
|
||||||
selectItem() {
|
|
||||||
this.$emit(
|
this.$emit(
|
||||||
'select',
|
'select',
|
||||||
this.checked ? this.preview.id : false
|
val ? this.preview.id : false,
|
||||||
|
this.selected
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue