Add theme class to body and fix for theme selection (#16929)

Add theme class to body and fix for theme selection

apps/accessibility/appinfo/info.xml

@@ -19,6 +19,12 @@
         <nextcloud min-version="18" max-version="18"/>
     </dependencies>
 
+	<repair-steps>
+		<pre-migration>
+			<step>OCA\Accessibility\Migration\RepairUserConfig</step>
+		</pre-migration>
+	</repair-steps>
+
     <settings>
         <personal>OCA\Accessibility\Settings\Personal</personal>
         <personal-section>OCA\Accessibility\Settings\PersonalSection</personal-section>

apps/accessibility/composer/composer/autoload_classmap.php

@@ -10,6 +10,7 @@ return array(
     'OCA\\Accessibility\\AppInfo\\Application' => $baseDir . '/../lib/AppInfo/Application.php',
     'OCA\\Accessibility\\Controller\\AccessibilityController' => $baseDir . '/../lib/Controller/AccessibilityController.php',
     'OCA\\Accessibility\\Controller\\ConfigController' => $baseDir . '/../lib/Controller/ConfigController.php',
+    'OCA\\Accessibility\\Migration\\RepairUserConfig' => $baseDir . '/../lib/Migration/RepairUserConfig.php',
     'OCA\\Accessibility\\Settings\\Personal' => $baseDir . '/../lib/Settings/Personal.php',
     'OCA\\Accessibility\\Settings\\PersonalSection' => $baseDir . '/../lib/Settings/PersonalSection.php',
 );

apps/accessibility/composer/composer/autoload_static.php

@@ -25,6 +25,7 @@ class ComposerStaticInitAccessibility
         'OCA\\Accessibility\\AppInfo\\Application' => __DIR__ . '/..' . '/../lib/AppInfo/Application.php',
         'OCA\\Accessibility\\Controller\\AccessibilityController' => __DIR__ . '/..' . '/../lib/Controller/AccessibilityController.php',
         'OCA\\Accessibility\\Controller\\ConfigController' => __DIR__ . '/..' . '/../lib/Controller/ConfigController.php',
+        'OCA\\Accessibility\\Migration\\RepairUserConfig' => __DIR__ . '/..' . '/../lib/Migration/RepairUserConfig.php',
         'OCA\\Accessibility\\Settings\\Personal' => __DIR__ . '/..' . '/../lib/Settings/Personal.php',
         'OCA\\Accessibility\\Settings\\PersonalSection' => __DIR__ . '/..' . '/../lib/Settings/PersonalSection.php',
     );

apps/accessibility/css/dark.scss

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

apps/accessibility/css/highcontrastdark.scss

@@ -0,0 +1,25 @@
+// SCSS variables
+$color-main-text: #fff;
+$color-main-background: #000;
+
+$color-background-dark: lighten($color-main-background, 30%);
+$color-background-darker: lighten($color-main-background, 30%);
+
+$color-text-maxcontrast: $color-main-text;
+$color-text-light: $color-main-text;
+$color-text-lighter: $color-main-text;
+
+$color-loading-light: #000;
+$color-loading-dark: #ddd;
+
+$color-box-shadow: $color-main-text;
+
+$color-border: lighten($color-main-background, 50%);
+$color-border-dark: lighten($color-main-background, 50%);
+
+[class^='icon-'], [class*=' icon-'],
+.action,
+#appmenu li a,
+.menutoggle {
+	opacity: 1 !important;
+}

apps/accessibility/lib/AccessibilityProvider.php

@@ -2,6 +2,7 @@
 
 /**
  * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -56,12 +57,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 +65,15 @@ class AccessibilityProvider {
 		);
 	}
 
+	public function getHighContrast() {
+		return [
+				'id'    => 'highcontrast',
+				'img'   => $this->urlGenerator->imagePath($this->appName, 'mode-highcontrast.jpg'),
+				'title' => $this->l->t('High contrast mode'),
+				'text'  => $this->l->t('A high contrast mode to ease your navigation. Visual quality will be reduced but clarity will be increased.')
+			];
+	}
+
 	public function getFonts() {
 		return array(
 			[

apps/accessibility/lib/AppInfo/Application.php

@@ -31,7 +31,7 @@ use OCP\IURLGenerator;
 class Application extends App {
 
 	/** @var string */
-	protected $appName = 'accessibility';
+	public const APP_NAME = 'accessibility';
 
 	/** @var IConfig */
 	private $config;
@@ -43,7 +43,7 @@ class Application extends App {
 	private $urlGenerator;
 
 	public function __construct() {
-		parent::__construct($this->appName);
+		parent::__construct(self::APP_NAME);
 		$this->config       = \OC::$server->getConfig();
 		$this->userSession  = \OC::$server->getUserSession();
 		$this->urlGenerator = \OC::$server->getURLGenerator();
@@ -53,11 +53,11 @@ class Application extends App {
 		// Inject the fake css on all pages if enabled and user is logged
 		$loggedUser = $this->userSession->getUser();
 		if (!is_null($loggedUser)) {
-			$userValues = $this->config->getUserKeys($loggedUser->getUID(), $this->appName);
+			$userValues = $this->config->getUserKeys($loggedUser->getUID(), self::APP_NAME);
 			// we want to check if any theme or font is enabled.
 			if (count($userValues) > 0) {
-				$hash = $this->config->getUserValue($loggedUser->getUID(), $this->appName, 'icons-css', md5(implode('-', $userValues)));
-				$linkToCSS = $this->urlGenerator->linkToRoute($this->appName . '.accessibility.getCss', ['md5' => $hash]);
+				$hash = $this->config->getUserValue($loggedUser->getUID(), self::APP_NAME, 'icons-css', md5(implode('-', $userValues)));
+				$linkToCSS = $this->urlGenerator->linkToRoute(self::APP_NAME . '.accessibility.getCss', ['md5' => $hash]);
 				\OCP\Util::addHeader('link', ['rel' => 'stylesheet', 'href' => $linkToCSS]);
 			}
 		}
@@ -65,7 +65,7 @@ class Application extends App {
 
 	public function injectJavascript() {
 		$linkToJs = $this->urlGenerator->linkToRoute(
-			$this->appName . '.accessibility.getJavascript',
+			self::APP_NAME . '.accessibility.getJavascript',
 			[
 				'v' => \OC::$server->getConfig()->getAppValue('accessibility', 'cachebuster', '0'),
 			]

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -2,6 +2,7 @@
 declare (strict_types = 1);
 /**
  * @copyright Copyright (c) 2018 John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -132,6 +133,9 @@ class AccessibilityController extends Controller {
 
 		foreach ($userValues as $key => $scssFile) {
 			if ($scssFile !== false) {
+				if ($scssFile === 'highcontrast' && in_array('dark', $userValues)) {
+					$scssFile .= 'dark';
+				}
 				$imports .= '@import "' . $scssFile . '";';
 			}
 		}
@@ -167,7 +171,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 +205,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 +239,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

@@ -2,6 +2,7 @@
 declare (strict_types = 1);
 /**
  * @copyright Copyright (c) 2018 John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -83,6 +84,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 +100,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 +115,12 @@ class ConfigController extends OCSController {
 			}
 
 			$themes = $this->accessibilityProvider->getThemes();
+			$highcontrast = array($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 +133,4 @@ class ConfigController extends OCSController {
 		throw new OCSBadRequestException('Invalid key: ' . $key);
 	}
 
-}
+}

apps/accessibility/lib/Migration/RepairUserConfig.php

@@ -0,0 +1,86 @@
+<?php
+declare (strict_types = 1);
+/**
+ * @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OCA\Accessibility\Migration;
+
+use OCA\Accessibility\AppInfo\Application;
+use OCP\IConfig;
+use OCP\IUser;
+use OCP\IUserManager;
+use OCP\Migration\IOutput;
+use OCP\Migration\IRepairStep;
+
+class RepairUserConfig implements IRepairStep {
+
+	/** @var IUserManager */
+	protected $userManager;
+
+	/** @var IConfig */
+	protected $config;
+
+	/**
+	 * MigrateUserConfig constructor.
+	 *
+	 * @param IConfig $config
+	 * @param IUserManager $userManager
+	 */
+	public function __construct(IConfig $config,
+								IUserManager $userManager) {
+		$this->config = $config;
+		$this->userManager = $userManager;
+	}
+
+	/**
+	 * Returns the step's name
+	 *
+	 * @return string
+	 * @since 9.1.0
+	 */
+	public function getName() {
+		return 'Migrate old user config';
+	}
+
+	/**
+	 * Run repair step.
+	 * Must throw exception on error.
+	 *
+	 * @param IOutput $output
+	 * @throws \Exception in case of failure
+	 * @since 9.1.0
+	 */
+	public function run(IOutput $output) {
+		$output->startProgress();
+		$this->userManager->callForSeenUsers(function(IUser $user) use ($output) {
+			$theme = $this->config->getUserValue($user->getUID(), Application::APP_NAME, 'theme', false);
+			if ($theme === 'themedark') {
+				$this->config->setUserValue($user->getUID(), Application::APP_NAME, 'theme', 'dark');
+			}
+			if ($theme === 'themehighcontrast') {
+				$this->config->setUserValue($user->getUID(), Application::APP_NAME, 'highcontrast', 'highcontrast');
+				$this->config->deleteUserValue($user->getUID(), Application::APP_NAME, 'theme');
+			}
+			$output->advance();
+		});
+		$output->finishProgress();
+	}
+
+}

apps/accessibility/lib/Settings/Personal.php

@@ -1,6 +1,7 @@
 <?php
 /**
  * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2019 Janis Köhr <janiskoehr@icloud.com>
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -84,8 +85,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 :preview="highcontrast"
+				 :key="highcontrast.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,15 @@ 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 +106,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 +115,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,15 @@
 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(checked) {
+				this.$emit('select', checked ? this.preview.id : false,	this.selected);
+			}
 		}
-	}
+    },
 };
 </script>