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

+ AppName fixes and compile bump

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

@@ -10,5 +10,11 @@
 // SCSS variables
 $color-main-text: #d8d8d8;
 $color-main-background: #181818;
+
+$color-background-dark: nc-darken($color-main-background, 4%);
+$color-background-darker: nc-darken($color-main-background, 8%);
+
 $color-loading-light: #777;
 $color-loading-dark: #ccc;
+
+$color-box-shadow: rgba(darken($color-main-background, 70%), .5);

apps/accessibility/css/style.scss

@@ -1,28 +1,29 @@
 .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;
 	}
@@ -36,4 +37,18 @@
 	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,27 @@
 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
+		$cssMd5 = $this->config->getUserValue($this->userSession->getUser()->getUID(), $this->appName, 'generated', 0);
+		\OCP\Util::addStyle($this->appName, 'user-' . md5($cssMd5), true);
 	}
 }

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -75,14 +75,15 @@ class AccessibilityController extends Controller {
 	 * @param IUserSession $userSession
 	 */
 	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) {
 		parent::__construct($appName, $request);
+		$this->appName      = $appName;
 		$this->config       = $config;
 		$this->userManager  = $userManager;
 		$this->logger       = $logger;
@@ -104,8 +105,9 @@ public function getCss(): DataDisplayResponse {
 
 		$css     = '';
 		$imports = '';
+		$scssFiles = $this->getUserValues();
 
-		foreach ($this->getUserValues() as $scssFile) {
+		foreach ($scssFiles as $scssFile) {
 			if ($scssFile !== false) {
 				$imports .= '@import "' . $scssFile . '";';
 			}
@@ -139,21 +141,25 @@ 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());
+		$now = $this->timeFactory->getTime();
+		$expires->setTimestamp($now);
 		$expires->add(new \DateInterval('PT' . $ttl . 'S'));
 		$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
 		$response->addHeader('Pragma', 'cache');
 
+		// Update last generation key
+		$this->config->setUserValue($this->userSession->getUser()->getUID(), $this->appName, 'generated', implode('-', $scssFiles));
+
 		return $response;
 	}
 
 	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,

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>