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>

apps/accessibility/css/themedark.scss → apps/accessibility/css/dark.scss

@@ -84,4 +84,4 @@ input[type=checkbox] {
 			background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg');
 		}
 	}
-}
+}

apps/accessibility/lib/AccessibilityProvider.php

@@ -56,12 +56,7 @@ class AccessibilityProvider {
 	public function getThemes() {
 		return array(
 			[
-				'id'    => 'themehighcontrast',
-				'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',
+				'id'    => 'dark',
 				'img'   => $this->urlGenerator->imagePath($this->appName, 'theme-dark.jpg'),
 				'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.')
@@ -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() {
 		return array(
 			[

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -167,7 +167,7 @@ class AccessibilityController extends Controller {
 		$appWebRoot = substr($this->appRoot, strlen($this->serverRoot) - strlen(\OC::$WEBROOT));
 		$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());
 			$css = $css . $iconsCss;
 		}
@@ -201,16 +201,27 @@ class AccessibilityController extends Controller {
 
 		if ($user === null) {
 			$theme = false;
+			$highcontrast = false;
 		} else {
 			$theme = $this->config->getUserValue($user->getUID(), $this->appName, 'theme', false);
+			$highcontrast = $this->config->getUserValue($user->getUID(), $this->appName, 'highcontrast', false) !== false;
 		}
-
-		$responseJS = '(function() {
+		if ($theme !== false) {
+			$responseJS = '(function() {
 	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) . ',
+	};
+})();';
+		}
 		$response = new DataDownloadResponse($responseJS, 'javascript', 'text/javascript');
 		$response->cacheFor(3600);
 		return $response;
@@ -224,8 +235,9 @@ class AccessibilityController extends Controller {
 	private function getUserValues(): array{
 		$userTheme = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', 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];
 	}
 
 	/**

apps/accessibility/lib/Controller/ConfigController.php

@@ -83,6 +83,7 @@ class ConfigController extends OCSController {
 	 */
 	public function getConfig(): DataResponse {
 		return new DataResponse([
+			'highcontrast' => $this->config->getUserValue($this->userId, $this->appName, 'highcontrast', false),
 			'theme' => $this->config->getUserValue($this->userId, $this->appName, 'theme', false),
 			'font' => $this->config->getUserValue($this->userId, $this->appName, 'font', false)
 		]);
@@ -98,7 +99,7 @@ class ConfigController extends OCSController {
 	 * @throws Exception
 	 */
 	public function setConfig(string $key, $value): DataResponse {
-		if ($key === 'theme' || $key === 'font') {
+		if ($key === 'theme' || $key === 'font' || $key === 'highcontrast') {
 
 			if ($value === false) {
 				$this->config->deleteUserValue($this->userId, $this->appName, $key);
@@ -113,11 +114,12 @@ class ConfigController extends OCSController {
 			}
 
 			$themes = $this->accessibilityProvider->getThemes();
+			$highcontrast = $this->accessibilityProvider->getHighContrast();
 			$fonts  = $this->accessibilityProvider->getFonts();
 
 			$availableOptions = array_map(function($option) {
 				return $option['id'];
-			}, array_merge($themes, $fonts));
+			}, array_merge($themes, $highcontrast, $fonts));
 
 			if (in_array($value, $availableOptions)) {
 				$this->config->setUserValue($this->userId, $this->appName, $key, $value);
@@ -130,4 +132,4 @@ class ConfigController extends OCSController {
 		throw new OCSBadRequestException('Invalid key: ' . $key);
 	}
 
-}
+}

apps/accessibility/lib/Settings/Personal.php

@@ -84,8 +84,12 @@ class Personal implements ISettings {
 		$serverData = [
 			'themes' => $this->accessibilityProvider->getThemes(),
 			'fonts'  => $this->accessibilityProvider->getFonts(),
-			'theme'  => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false),
-			'font'   => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
+			'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),
+				'font'   => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false)
+			]
 		];
 
 		return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);

apps/accessibility/src/App.vue

@@ -5,6 +5,9 @@
 		<p v-html="descriptionDetail" />
 
 		<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"
 				 :key="preview.id" :selected="selected.theme"
 				 v-on:select="selectTheme"></preview>
@@ -40,13 +43,17 @@ export default {
 		themes() {
 			return this.serverData.themes;
 		},
+		highcontrast() {
+			return this.serverData.highcontrast;
+		},
 		fonts() {
 			return this.serverData.fonts;
 		},
 		selected() {
 			return {
-				theme: this.serverData.theme,
-				font: this.serverData.font
+				theme: this.serverData.selected.theme,
+				highcontrast: this.serverData.selected.highcontrast,
+				font: this.serverData.selected.font
 			};
 		},
 		description() {
@@ -81,8 +88,13 @@ export default {
 		}
 	},
 	methods: {
-		selectTheme(id) {
+		selectHighContrast(id) {
+			this.selectItem('highcontrast', id);
+		},
+		selectTheme(id, idSelectedBefore) {
 			this.selectItem('theme', id);
+			document.body.classList.remove(idSelectedBefore);
+			if (id) document.body.classList.add(id);
 		},
 		selectFont(id) {
 			this.selectItem('font', id);
@@ -92,7 +104,7 @@ export default {
 		 * Commit a change and force reload css
 		 * 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
 		 */
 		selectItem(type, id) {
@@ -101,7 +113,7 @@ export default {
 					{ value: id }
 				)
 				.then(response => {
-					this.serverData[type] = id;
+					this.serverData.selected[type] = id;
 
 					// Remove old link
 					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');

apps/accessibility/src/components/itemPreview.vue

@@ -4,7 +4,7 @@
 		<div class="preview-description">
 			<h3>{{preview.title}}</h3>
 			<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>
 		</div>
 	</div>
@@ -14,18 +14,19 @@
 export default {
 	name: 'itemPreview',
 	props: ['preview', 'selected'],
-	data() {
-		return {
-			checked: this.selected === this.preview.id,
-		};
-	},
-	methods: {
-		selectItem() {
-			this.$emit(
-				'select',
-				this.checked ? this.preview.id : false
-			);
+	computed: {
+		checked: {
+			get() {
+				return this.selected === this.preview.id;
+			},
+			set(val) {
+				this.$emit(
+					'select',
+					val ? this.preview.id : false,
+					this.selected
+				);
+			}
 		}
-	}
+    },
 };
 </script>