diff --git a/apps/accessibility/appinfo/routes.php b/apps/accessibility/appinfo/routes.php
index 21b48fab24a4b07aaea262ceb76dd30dc8b84b30..af4ef53601be5cff3bdf1fd6a908a46295cd2898 100644
--- a/apps/accessibility/appinfo/routes.php
+++ b/apps/accessibility/appinfo/routes.php
@@ -23,6 +23,6 @@
return [
'routes' => [
- ['name' => 'accessibility#getCss', 'url' => '/css/user.css', 'verb' => 'GET'],
+ ['name' => 'accessibility#getCss', 'url' => '/css/user-{md5}.css', 'verb' => 'GET'],
],
];
diff --git a/apps/accessibility/css/dark.scss b/apps/accessibility/css/dark.scss
index cc4ebc20e1d5483307243fe2ac7fef89577432e7..6a220d1f063dbaacaee94a5772d16825eee2a009 100644
--- a/apps/accessibility/css/dark.scss
+++ b/apps/accessibility/css/dark.scss
@@ -1,14 +1,23 @@
-// Revert lighten/darken
-@function nc-darken($color, $value) {
- @return lighten($color, $value);
-}
-
-@function nc-lighten($color, $value) {
- @return darken($color, $value);
-}
-
// SCSS variables
$color-main-text: #d8d8d8;
$color-main-background: #181818;
+
+$color-background-dark: lighten($color-main-background, 4%);
+$color-background-darker: lighten($color-main-background, 8%);
+
+$color-text-maxcontrast: darken($color-main-text, 30%);
+$color-text-light: darken($color-main-text, 10%);
+$color-text-lighter: darken($color-main-text, 20%);
+
$color-loading-light: #777;
$color-loading-dark: #ccc;
+
+$color-box-shadow: rgba(darken($color-main-background, 70%), .5);
+
+$color-border: lighten($color-main-background, 7%);
+$color-border-dark: lighten($color-main-background, 14%);
+
+#app-navigation > ul > li > a:first-child img,
+#app-navigation > ul > li > ul > li > a:first-child img {
+ filter: invert(100%);
+}
\ No newline at end of file
diff --git a/apps/accessibility/css/highcontrast.scss b/apps/accessibility/css/highcontrast.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7929677fbb68975857b2cd0b9d8f99d9d78bc10f 100644
--- a/apps/accessibility/css/highcontrast.scss
+++ b/apps/accessibility/css/highcontrast.scss
@@ -0,0 +1,22 @@
+// SCSS variables
+$color-main-text: #000;
+$color-main-background: #fff;
+
+$color-background-dark: darken($color-main-background, 30%);
+$color-background-darker: darken($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: #ddd;
+$color-loading-dark: #000;
+
+$color-box-shadow: $color-main-text;
+
+$color-border: darken($color-main-background, 50%);
+$color-border-dark: darken($color-main-background, 50%);
+
+* {
+ opacity: 1 !important;
+}
\ No newline at end of file
diff --git a/apps/accessibility/css/style.scss b/apps/accessibility/css/style.scss
index f05336e76fac6384aa303702d423bc9c14971195..8c18a628188d8db26908662caf2d4dcc3a269d6f 100644
--- a/apps/accessibility/css/style.scss
+++ b/apps/accessibility/css/style.scss
@@ -1,10 +1,13 @@
.preview-list {
display: flex;
+ flex-wrap: wrap;
}
.preview {
display: flex;
flex-direction: column;
- width: 300px;
+ min-width: 250px;
+ max-width: 400px;
+ flex: 1 1 300px;
border: 1px solid var(--color-border);
padding: 10px;
border-radius: var(--border-radius);
@@ -12,9 +15,8 @@
filter: drop-shadow(0 1px 2px var(--color-box-shadow));
background-color: var(--color-main-background);
opacity: 0.9;
- &:not(:last-child) {
- margin-right: 20px;
- }
+ margin: 10px;
+ position: relative;
&,
* {
cursor: pointer;
@@ -22,18 +24,30 @@
}
&:hover,
&.selected {
- background-color: var(--color-background-dark);
filter: drop-shadow(0 1px 4px var(--color-box-shadow));
opacity: 1;
}
.preview-image {
- width: 100%;
- height: 150px;
- background-position: center;
+ height: 200px;
+ background-position: top left;
background-size: cover;
background-repeat: no-repeat;
}
p {
text-align: justify;
}
+ .icon-checkmark {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background-size: contain;
+ right: -10px;
+ top: -15px;
+ opacity: 0;
+ transition: all 100ms ease-in-out;
+ }
+ &.selected .icon-checkmark {
+ opacity: 1;
+ filter: drop-shadow(0 1px 1px var(--color-box-shadow));
+ }
}
diff --git a/apps/accessibility/img/theme-highcontrast.jpg b/apps/accessibility/img/theme-highcontrast.jpg
index b47d5acef1f36683027592598f8ae2f0572edf3c..1a7a2de082893efb85ab91c59a85b1832e30be9d 100644
Binary files a/apps/accessibility/img/theme-highcontrast.jpg and b/apps/accessibility/img/theme-highcontrast.jpg differ
diff --git a/apps/accessibility/js/accessibility.js b/apps/accessibility/js/accessibility.js
new file mode 100644
index 0000000000000000000000000000000000000000..bfb8d5d0ce8290ac732e343ae3465689b6b5e89e
Binary files /dev/null and b/apps/accessibility/js/accessibility.js differ
diff --git a/apps/accessibility/js/accessibility.js.map b/apps/accessibility/js/accessibility.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..fe540840a88923ad0c118c0b5533108587ae6f70
Binary files /dev/null and b/apps/accessibility/js/accessibility.js.map differ
diff --git a/apps/accessibility/lib/AppInfo/Application.php b/apps/accessibility/lib/AppInfo/Application.php
index 1c5e4b5cec17e7df9498895d56b3c5f4e508ce6b..dda2fd60698e7c24a6bc592b7255b08576adc101 100644
--- a/apps/accessibility/lib/AppInfo/Application.php
+++ b/apps/accessibility/lib/AppInfo/Application.php
@@ -24,16 +24,32 @@
namespace OCA\Accessibility\AppInfo;
use OCP\AppFramework\App;
+use OCP\IConfig;
+use OCP\IUserSession;
class Application extends App {
/** @var string */
protected $appName = 'accessibility';
+ /** @var IConfig */
+ private $config;
+
+ /** @var IUserSession */
+ private $userSession;
+
public function __construct() {
parent::__construct($this->appName);
-
- // Inject the fake css on all pages
- \OCP\Util::addStyle('accessibility', 'user', true);
+ $this->config = \OC::$server->getConfig();
+ $this->userSession = \OC::$server->getUserSession();
+
+ // 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);
+ if(count($userValues) > 0) {
+ \OCP\Util::addStyle($this->appName, 'user-' . md5(implode('-', $userValues)), true);
+ }
+ }
}
}
diff --git a/apps/accessibility/lib/Controller/AccessibilityController.php b/apps/accessibility/lib/Controller/AccessibilityController.php
index ee1f42dfebbfd2a8751e866d61d0633d60c5e904..ff5da9c0827975856916411d84dbbe367ce7dd87 100644
--- a/apps/accessibility/lib/Controller/AccessibilityController.php
+++ b/apps/accessibility/lib/Controller/AccessibilityController.php
@@ -29,6 +29,7 @@ use OCP\AppFramework\Controller;
use OCP\AppFramework\Http;
use OCP\AppFramework\Http\DataDisplayResponse;
use OCP\AppFramework\Utility\ITimeFactory;
+use OCP\App\IAppManager;
use OCP\IConfig;
use OCP\ILogger;
use OCP\IRequest;
@@ -62,6 +63,9 @@ class AccessibilityController extends Controller {
/** @var IUserSession */
private $userSession;
+ /** @var IAppManager */
+ private $appManager;
+
/**
* Account constructor.
*
@@ -73,39 +77,43 @@ class AccessibilityController extends Controller {
* @param IURLGenerator $urlGenerator
* @param ITimeFactory $timeFactory
* @param IUserSession $userSession
+ * @param IAppManager $appManager
*/
public function __construct(string $appName,
- IRequest $request,
- IConfig $config,
- IUserManager $userManager,
- ILogger $logger,
- IURLGenerator $urlGenerator,
- ITimeFactory $timeFactory,
- IUserSession $userSession) {
+ IRequest $request,
+ IConfig $config,
+ IUserManager $userManager,
+ ILogger $logger,
+ IURLGenerator $urlGenerator,
+ ITimeFactory $timeFactory,
+ IUserSession $userSession,
+ IAppManager $appManager) {
parent::__construct($appName, $request);
+ $this->appName = $appName;
$this->config = $config;
$this->userManager = $userManager;
$this->logger = $logger;
$this->urlGenerator = $urlGenerator;
$this->timeFactory = $timeFactory;
$this->userSession = $userSession;
+ $this->appManager = $appManager;
$this->serverRoot = \OC::$SERVERROOT;
- $this->appRoot = \OC_App::getAppPath($this->appName);
+ $this->appRoot = $this->appManager->getAppPath($this->appName);
}
/**
* @NoAdminRequired
* @NoCSRFRequired
*
- * @return DataResponse
+ * @return DataDisplayResponse
*/
public function getCss(): DataDisplayResponse {
$css = '';
$imports = '';
- foreach ($this->getUserValues() as $scssFile) {
+ foreach ($this->getUserValues() as $key => $scssFile) {
if ($scssFile !== false) {
$imports .= '@import "' . $scssFile . '";';
}
@@ -122,7 +130,7 @@ class AccessibilityController extends Controller {
$scss->setIgnoreErrors(true);
$scss->setFormatter(Crunched::class);
- // Compile
+ // Import theme, variables and compile css4 variables
try {
$css .= $scss->compile(
$imports .
@@ -139,9 +147,9 @@ class AccessibilityController extends Controller {
$response = new DataDisplayResponse($css, Http::STATUS_OK, ['Content-Type' => 'text/css']);
+ // Set cache control
$ttl = 31536000;
$response->addHeader('Cache-Control', 'max-age=' . $ttl . ', immutable');
-
$expires = new \DateTime();
$expires->setTimestamp($this->timeFactory->getTime());
$expires->add(new \DateInterval('PT' . $ttl . 'S'));
@@ -152,13 +160,10 @@ class AccessibilityController extends Controller {
}
private function getUserValues() {
- $userTheme = $this->config->getUserValue($this->userSession->getUser()->getUID(), 'accessibility', 'theme', false);
- $userFont = $this->config->getUserValue($this->userSession->getUser()->getUID(), 'accessibility', 'font', 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);
- return [
- 'theme' => $userTheme,
- 'font' => $userFont
- ];
+ return [$userTheme, $userFont];
}
private function filterOutRule(string $rule, string $css) {
diff --git a/apps/accessibility/lib/Settings/Personal.php b/apps/accessibility/lib/Settings/Personal.php
index d28625449a7daffb519eb1862fa8b524334bca22..6bce287e6e173614481bd3e78d435b8966a77de0 100644
--- a/apps/accessibility/lib/Settings/Personal.php
+++ b/apps/accessibility/lib/Settings/Personal.php
@@ -83,12 +83,12 @@ class Personal implements ISettings {
$serverData = [
'themes' => $this->accessibilityProvider->getThemes(),
- 'fonts' => $this->accessibilityProvider->getFonts(),
- 'theme' => $this->config->getUserValue($this->userSession->getUser()->getUID(), 'accessibility', 'theme', 'dark'),
- 'font' => $this->config->getUserValue($this->userSession->getUser()->getUID(), 'accessibility', 'font', false)
+ '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)
];
- return new TemplateResponse('accessibility', 'settings-personal', ['serverData' => $serverData]);
+ return new TemplateResponse($this->appName, 'settings-personal', ['serverData' => $serverData]);
}
/**
@@ -96,7 +96,7 @@ class Personal implements ISettings {
* @since 9.1
*/
public function getSection() {
- return 'accessibility';
+ return $this->appName;
}
/**
diff --git a/apps/accessibility/lib/Settings/PersonalSection.php b/apps/accessibility/lib/Settings/PersonalSection.php
index bd3afa7935525031e57c77ead81441e027887c38..3e89635c7bbf94570720eadc87b977abbd8c1ff2 100644
--- a/apps/accessibility/lib/Settings/PersonalSection.php
+++ b/apps/accessibility/lib/Settings/PersonalSection.php
@@ -29,6 +29,9 @@ use OCP\Settings\IIconSection;
class PersonalSection implements IIconSection {
+ /** @var string */
+ protected $appName;
+
/** @var IURLGenerator */
private $urlGenerator;
@@ -38,11 +41,14 @@ class PersonalSection implements IIconSection {
/**
* Personal Section constructor.
*
+ * @param string $appName
* @param IURLGenerator $urlGenerator
* @param IL10N $l
*/
- public function __construct(IURLGenerator $urlGenerator,
+ public function __construct(string $appName,
+ IURLGenerator $urlGenerator,
IL10N $l) {
+ $this->appName = $appName;
$this->urlGenerator = $urlGenerator;
$this->l = $l;
}
@@ -55,7 +61,7 @@ class PersonalSection implements IIconSection {
* @since 13.0.0
*/
public function getIcon() {
- return $this->urlGenerator->imagePath('accessibility', 'app-dark.svg');
+ return $this->urlGenerator->imagePath($this->appName, 'app-dark.svg');
}
/**
@@ -66,7 +72,7 @@ class PersonalSection implements IIconSection {
* @since 9.1
*/
public function getID() {
- return 'accessibility';
+ return $this->appName;
}
/**
diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
index d83d72b36eb9bf40cefc98885af6ce1d1491d333..7b196f840ab6f4ab8c2c5b1ffc416f64eb91c78f 100644
--- a/apps/accessibility/src/App.vue
+++ b/apps/accessibility/src/App.vue
@@ -62,14 +62,19 @@ export default {
},
/**
- * Commit a change
+ * 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} id the data of the change
*/
selectItem(type, id) {
this.serverData[type] = id;
- console.log(type, id);
+ let cssLink = document.querySelector(
+ 'link[rel=stylesheet][href*=accessibility][href*=user-]'
+ );
+ cssLink.href =
+ cssLink.href.split('?')[0] + '?v=' + new Date().getTime();
}
}
};
diff --git a/apps/accessibility/src/components/itemPreview.vue b/apps/accessibility/src/components/itemPreview.vue
index 79f3f0494eb245a3b309f145d8d70c9de30a5d52..d1139aa407e05ee5bed89b4b82547103eff01da3 100644
--- a/apps/accessibility/src/components/itemPreview.vue
+++ b/apps/accessibility/src/components/itemPreview.vue
@@ -1,6 +1,7 @@
<template>
<div :class="{preview: true, selected: preview.id === selected}"
@click="selectItem">
+ <div class="icon-checkmark"></div>
<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
<h3>{{preview.title}}</h3>
<p>{{preview.text}}</p>
diff --git a/apps/accessibility/webpack.common.js b/apps/accessibility/webpack.common.js
index cb38e307cf73cc3dbc0ff7286e160a6e4dc85331..0496ca90fe48b86b31556265cd0531f54f46ecea 100644
--- a/apps/accessibility/webpack.common.js
+++ b/apps/accessibility/webpack.common.js
@@ -1,8 +1,8 @@
const path = require('path');
-const { VueLoaderPlugin } = require(`vue-loader`);
+const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
- entry: path.join(__dirname, `src`, `main.js`),
+ entry: path.join(__dirname, 'src', 'main.js'),
output: {
path: path.resolve(__dirname, './js'),
publicPath: '/js/',