OpenSans font contrast option

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

apps/accessibility/css/fonthighcontrast.scss

@@ -0,0 +1,24 @@
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: normal;
+	src: local('Open Sans'), local('OpenSans'),
+		url('../../../core/fonts/OpenSans-Regular.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+		url('../../../core/fonts/OpenSans-Semibold.woff') format('woff');
+}
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: local('Open Sans Bold'), local('OpenSans-Bold'),
+		url('../../../core/fonts/OpenSans-Bold.woff') format('woff');
+}
+
+$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;

apps/accessibility/lib/AccessibilityProvider.php

@@ -56,12 +56,12 @@ class AccessibilityProvider {
 	public function getThemes() {
 		return array(
 			[
-				'id'    => 'highcontrast',
+				'id'    => 'themehighcontrast',
 				'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'    => 'dark',
+				'id'    => 'themedark',
 				'img'   => $this->urlGenerator->imagePath($this->appName, 'theme-dark.jpg'),
 				'title' => $this->l->t('Dark theme'),
 				'text'  => $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness of your navigation. This is suitable for people who use computes a lot or in low luminosity spaces.')
@@ -72,10 +72,16 @@ class AccessibilityProvider {
 	public function getFonts() {
 		return array(
 			[
-				'id'    => 'dyslexic',
+				'id'    => 'fontdyslexic',
 				'img'   => $this->urlGenerator->imagePath($this->appName, 'font-opendyslexic.jpg'),
 				'title' => $this->l->t('Dyslexia font'),
 				'text'  => $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia. The typeface was created by Abelardo Gonzalez, who released it through an open-source license.')
+			],
+			[
+				'id'    => 'fonthighcontrast',
+				'img'   => $this->urlGenerator->imagePath($this->appName, 'font-highcontrast.jpg'),
+				'title' => $this->l->t('High Contrast font'),
+				'text'  => $this->l->t('Increase the weight of the font to improve the readability.')
 			]
 		);
 	}

apps/accessibility/package-lock.json

@@ -2837,12 +2837,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2857,17 +2859,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2984,7 +2989,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2996,6 +3002,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3010,6 +3017,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3017,12 +3025,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3041,6 +3051,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3121,7 +3132,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3133,6 +3145,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3254,6 +3267,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

apps/accessibility/src/App.vue

@@ -79,17 +79,17 @@ export default {
 					this.serverData[type] = id;
 
 					// Remove old link
-					let oldLink = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
+					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
-					if (oldLink) {
+					if (!link) {
-						oldLink.remove();
+						// insert new css
+						let link = document.createElement('link');
+						link.rel = 'stylesheet';
+						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css');
+						document.head.appendChild(link)
+					} else {
+						// force update
+						link.href = link.href.split('?')[0] + '?v=' + new Date().getTime();
 					}
-					
-					// Insert new css
-					let link = document.createElement('link');
-					link.rel = 'stylesheet';
-					link.href = OC.generateUrl('/apps/accessibility/css/user-style.css');
-					link.href = link.href.split('?')[0] + '?v=' + new Date().getTime();
-					document.head.appendChild(link)
 				})
 				.catch(err => {
 					console.log(err, err.response);