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

Add theme class to body and fix for theme selection
This commit is contained in:
John Molakvoæ 2019-09-18 00:56:50 +02:00 committed by GitHub
commit b636aa79c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 203 additions and 44 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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;
}

View File

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -2,6 +2,7 @@
/** /**
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> * @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> * @author John Molakvoæ <skjnldsv@protonmail.com>
* *
@ -56,12 +57,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 +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() { public function getFonts() {
return array( return array(
[ [

View File

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

View File

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

View File

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

View File

@ -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();
}
}

View File

@ -1,6 +1,7 @@
<?php <?php
/** /**
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> * @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> * @author John Molakvoæ <skjnldsv@protonmail.com>
* *
@ -84,8 +85,12 @@ class Personal implements ISettings {
$serverData = [ $serverData = [
'themes' => $this->accessibilityProvider->getThemes(), 'themes' => $this->accessibilityProvider->getThemes(),
'fonts' => $this->accessibilityProvider->getFonts(), 'fonts' => $this->accessibilityProvider->getFonts(),
'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'theme', false), 'highcontrast' => $this->accessibilityProvider->getHighContrast(),
'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'font', false) '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]); return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);

View File

@ -5,6 +5,9 @@
<p v-html="descriptionDetail" /> <p v-html="descriptionDetail" />
<div class="preview-list"> <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" <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,15 @@ 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 +106,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 +115,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-]');

View File

@ -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,15 @@
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(checked) {
selectItem() { this.$emit('select', checked ? this.preview.id : false, this.selected);
this.$emit( }
'select',
this.checked ? this.preview.id : false
);
} }
} },
}; };
</script> </script>