Accessibility ♿

.drone.yml

@@ -35,6 +35,13 @@ pipeline:
     when:
       matrix:
         TESTS: vue-build-oauth2
+  vue-build-accessibility:
+    image: node
+    commands:
+     - ./build/vue-builds.sh ./apps/accessibility/js/accessibility.js
+    when:
+      matrix:
+        TESTS: vue-build-accessibility
   checkers:
     image: nextcloudci/php7.0:php7.0-19
     commands:
@@ -693,6 +700,7 @@ matrix:
     - TESTS: vue-build-settings
     - TESTS: vue-build-updatenotification
     - TESTS: vue-build-oauth2
+    - TESTS: vue-build-accessibility
     - TESTS: nodb-codecov
       ENABLE_REDIS: true
     - TESTS: db-codecov

.gitignore

@@ -12,6 +12,7 @@
 
 # ignore all apps except core ones
 /apps*/*
+!/apps/accessibility
 !/apps/comments
 !/apps/dav
 !/apps/files

apps/accessibility/.babelrc

@@ -0,0 +1,12 @@
+{
+	"presets": [
+		[
+			"env",
+			{
+				"targets": {
+					"browsers": ["last 2 versions", "not ie <= 11"]
+				}
+			}
+		]
+	]
+}

apps/accessibility/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

apps/accessibility/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+	env: {
+		browser: true,
+		es6: true
+	},
+	extends: 'eslint:recommended',
+	parserOptions: {
+		sourceType: 'module'
+	},
+	rules: {
+		indent: ['error', 'tab'],
+		'linebreak-style': ['error', 'unix'],
+		quotes: ['error', 'single'],
+		semi: ['error', 'always']
+	}
+};

apps/accessibility/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

apps/accessibility/.jshintrc

@@ -0,0 +1,3 @@
+{
+	"esversion": 6
+}

apps/accessibility/Makefile

@@ -0,0 +1,26 @@
+all: dev-setup build-js-production
+
+dev-setup: clean clean-dev npm-init
+
+npm-init:
+	npm install
+
+npm-update:
+	npm update
+
+build-js:
+	npm run dev
+
+build-js-production:
+	npm run build
+
+watch-js:
+	npm run watch
+
+clean:
+	rm -f js/accessibility.js
+	rm -f js/accessibility.js.map
+
+clean-dev:
+	rm -rf node_modules
+

apps/accessibility/README.md

@@ -0,0 +1,22 @@
+# Accessibility ♿
+
+> This app provide multiple features to ease the use of nextcloud.
+
+## Build Setup
+
+``` bash
+# install dependencies
+make dev-setup
+
+# build for development
+make build-js
+
+# build for development and watch edits
+make watch-js
+
+# build for production with minification
+make build-js-production
+
+# clean output files
+make clean
+```

apps/accessibility/appinfo/app.php

@@ -0,0 +1,30 @@
+<?php
+declare (strict_types = 1);
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.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/>.
+ *
+ */
+
+$app = new \OCA\Accessibility\AppInfo\Application();
+
+// Separate from the constructor since the route are not initialized before that
+// 1. create the app
+// 2. generate css route and inject
+$app->injectCss();

apps/accessibility/appinfo/info.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<info xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="https://apps.nextcloud.com/schema/apps/info.xsd">
+    <id>accessibility</id>
+    <name>Accessibility</name>
+    <summary>Accessibility options for nextcloud</summary>
+    <description><![CDATA[Provides multiple accessibilities options to ease your use of nextcloud]]></description>
+    <version>1.0.0</version>
+    <licence>agpl</licence>
+    <author>John Molakvoæ</author>
+    <namespace>Accessibility</namespace>
+    <category>accessibility</category>
+    <default_enable/>
+    <dependencies>
+        <nextcloud min-version="14" max-version="14"/>
+    </dependencies>
+    <default_enable/>
+    <bugs>https://github.com/nextcloud/server/issues</bugs>
+    <settings>
+        <personal>OCA\Accessibility\Settings\Personal</personal>
+        <personal-section>OCA\Accessibility\Settings\PersonalSection</personal-section>
+    </settings>
+</info>

apps/accessibility/appinfo/routes.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.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/>.
+ *
+ */
+
+return [
+    'routes' => [
+        ['name' => 'accessibility#getCss', 'url' => '/css/user-{md5}.css', 'verb' => 'GET'],
+    ],
+    'ocs' => [
+		[
+			'name' => 'Config#getConfig',
+			'url'  => '/api/v1/config',
+			'verb' => 'GET',
+        ],
+		[
+			'name' => 'Config#setConfig',
+			'url'  => '/api/v1/config/{key}',
+			'verb' => 'POST',
+		],
+    ]
+];

apps/accessibility/css/fontdyslexic.scss

@@ -0,0 +1,22 @@
+@font-face {
+	font-family: 'OpenDyslexic';
+	font-style: normal;
+	font-weight: 300;
+	src: url('../fonts/OpenDyslexic-Regular.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'OpenDyslexic';
+	font-style: normal;
+	font-weight: normal;
+	src: url('../fonts/OpenDyslexic-Regular.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'OpenDyslexic';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../fonts/OpenDyslexic-Bold.woff') format('woff');
+}
+
+$font-face: OpenDyslexic, 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;

apps/accessibility/css/style.scss

@@ -0,0 +1,59 @@
+.preview-list {
+	display: flex;
+	flex-wrap: wrap;
+}
+.preview {
+	display: flex;
+	flex-direction: column;
+	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;
+	margin: 10px;
+	position: relative;
+	&,
+	* {
+		cursor: pointer;
+		user-select: none;
+	}
+	&:hover,
+	&:focus,
+	&.selected {
+		filter: drop-shadow(0 1px 4px var(--color-box-shadow));
+		opacity: 1;
+	}
+	.preview-image {
+		height: 200px;
+		background-position: top left;
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+	h3 {
+		display: flex;
+		justify-content: space-between;
+		line-height: 1em;
+		align-items: center;
+	}
+	p {
+		text-align: justify;
+	}
+	.icon-checkmark-color {
+		transition: all 100ms ease-in-out;
+		border-radius: 1em;
+		padding: 4px 5px 4px 20px;
+		background-position: 4px center;
+		opacity: 0;
+		visibility: hidden;
+	}
+	&.selected .icon-checkmark-color {
+		opacity: 1;
+		visibility: visible;
+		box-shadow: 0 0 0 1px var(--color-success);
+	}
+}

apps/accessibility/css/themedark.scss

@@ -0,0 +1,48 @@
+// 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%), 0.5);
+
+$color-border: lighten($color-main-background, 7%);
+$color-border-dark: lighten($color-main-background, 14%);
+
+#app-navigation > ul > li > a:first-child,
+#app-navigation > ul > li > ul > li > a:first-child,
+#expanddiv a {
+	img {
+		filter: invert(100%);
+	}
+}
+.bubble,
+.app-navigation-entry-menu,
+.popovermenu {
+	li {
+		> button,
+		> a,
+		> .menuitem {
+			> img {
+				filter: invert(100%);
+			}
+		}
+	}
+}
+.federation-menu .icon-federation-menu {
+	filter: invert(100%);
+}
+.bubble,
+.app-navigation-entry-menu,
+.popovermenu,
+#header .menu {
+	border: 1px solid var(--color-border);
+}