Live css update, cache fix, design updates and various stuff

+ AppName fixes and compile bump
+ Bump dark theme and added highcontrast + various fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

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'],
     ],
 ];

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%);
+}

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

apps/accessibility/css/style.scss

@@ -1,39 +1,53 @@
 .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);
 	transition: all 200ms ease-in-out;
 	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;
 		user-select: none;
 	}
 	&: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));
+	}
 }

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);
+			}
+		}
 	}
 }

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -29,6 +29,7 @@
 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 @@ public function getCss(): DataDisplayResponse {
 			$scss->setIgnoreErrors(true);
 			$scss->setFormatter(Crunched::class);
 
-			// Compile
+			// Import theme, variables and compile css4 variables
 			try {
 				$css .= $scss->compile(
 					$imports .
@@ -139,9 +147,9 @@ public function getCss(): DataDisplayResponse {
 
 		$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 @@ public function getCss(): DataDisplayResponse {
 	}
 
 	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) {

apps/accessibility/lib/Settings/Personal.php

@@ -83,20 +83,20 @@ public function getForm() {
 
 		$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]);
 	}
 
 	/**
 	 * @return string the section ID, e.g. 'sharing'
 	 * @since 9.1
 	 */
 	public function getSection() {
-		return 'accessibility';
+		return $this->appName;
 	}
 
 	/**

apps/accessibility/lib/Settings/PersonalSection.php

@@ -29,6 +29,9 @@
 
 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 @@ public function __construct(IURLGenerator $urlGenerator,
 	 * @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 @@ public function getIcon() {
 	 * @since 9.1
 	 */
 	public function getID() {
-		return 'accessibility';
+		return $this->appName;
 	}
 
 	/**

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

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>

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/',