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:
commit
b636aa79c3
|
@ -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>
|
||||||
|
|
|
@ -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',
|
||||||
);
|
);
|
||||||
|
|
|
@ -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',
|
||||||
);
|
);
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
}
|
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
|
@ -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(
|
||||||
[
|
[
|
||||||
|
|
|
@ -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'),
|
||||||
]
|
]
|
||||||
|
|
|
@ -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];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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]);
|
||||||
|
|
|
@ -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-]');
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue