From ec8b0a286698cba0da7101c7cfdca78d7a052b0f Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Thu, 9 Apr 2020 09:55:45 +0200 Subject: [PATCH] add admin settings --- appinfo/app.php | 16 ++- appinfo/info.xml | 4 + appinfo/routes.php | 1 + css/admin.css | 25 +++++ css/sideMenu.css | 2 +- img/app-dark.svg | 1 + img/side-menu-opener-hamburger.svg | 7 ++ img/side-menu-opener.svg | 172 +++-------------------------- lib/Controller/CssController.php | 74 +++++++++++++ lib/Settings/Admin.php | 79 +++++++++++++ lib/Settings/Section.php | 84 ++++++++++++++ src/SideMenu.js | 1 + src/admin.js | 65 +++++++++++ templates/settings/admin-form.php | 94 ++++++++++++++++ webpack.js | 1 + 15 files changed, 467 insertions(+), 159 deletions(-) create mode 100644 css/admin.css create mode 100644 img/app-dark.svg create mode 100644 img/side-menu-opener-hamburger.svg create mode 100644 lib/Controller/CssController.php create mode 100644 lib/Settings/Admin.php create mode 100644 lib/Settings/Section.php create mode 100644 src/admin.js create mode 100644 templates/settings/admin-form.php diff --git a/appinfo/app.php b/appinfo/app.php index f4dda8b..aad5dc5 100644 --- a/appinfo/app.php +++ b/appinfo/app.php @@ -24,12 +24,24 @@ use OCP\Util; $config = \OC::$server->getConfig(); $cspnm = \OC::$server->getContentSecurityPolicyNonceManager(); +$stylesheet = \OC::$server->getURLGenerator()->linkToRoute( + 'side_menu.Css.stylesheet', + [ + 'v' => $config->getAppValue('side_menu', 'cache', '0'), + ] +); + +Util::addHeader( + 'link', + [ + 'href' => $stylesheet, + 'rel' => 'stylesheet' + ], '' +); Util::addScript('side_menu', 'main'); Util::addScript('side_menu', 'sideMenu'); Util::addStyle('side_menu', 'sideMenu'); - - // whitelist the URL to allow loading JS from this external domain // $CSPManager = \OC::$server->getContentSecurityPolicyManager(); // $policy = new ContentSecurityPolicy(); diff --git a/appinfo/info.xml b/appinfo/info.xml index 0f56337..389e4ee 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -17,4 +17,8 @@ + + OCA\SideMenu\Settings\Admin + OCA\SideMenu\Settings\Section + diff --git a/appinfo/routes.php b/appinfo/routes.php index 2e45bbc..021def5 100644 --- a/appinfo/routes.php +++ b/appinfo/routes.php @@ -19,5 +19,6 @@ return [ 'routes' => [ + ['name' => 'Css#stylesheet', 'url' => '/css/stylesheet', 'verb' => 'GET'], ], ]; diff --git a/css/admin.css b/css/admin.css new file mode 100644 index 0000000..1cc6083 --- /dev/null +++ b/css/admin.css @@ -0,0 +1,25 @@ +/** + * @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 . + */ + +#side-menu-section input[type="color"] { + width: 100px; + margin: 10px 0 10px 0; +} + +#side-menu-section select { + margin: 10px 0 10px 0; +} diff --git a/css/sideMenu.css b/css/sideMenu.css index 247521c..304ff7e 100644 --- a/css/sideMenu.css +++ b/css/sideMenu.css @@ -38,7 +38,7 @@ } .side-menu-opener { - background: url('../img/side-menu-opener.svg'); + background: var(--side-menu-opener, url('../img/side-menu-opener.svg')); height: 40px; width: 40px; border-radius: 0; diff --git a/img/app-dark.svg b/img/app-dark.svg new file mode 100644 index 0000000..adf9796 --- /dev/null +++ b/img/app-dark.svg @@ -0,0 +1 @@ + diff --git a/img/side-menu-opener-hamburger.svg b/img/side-menu-opener-hamburger.svg new file mode 100644 index 0000000..9477581 --- /dev/null +++ b/img/side-menu-opener-hamburger.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/side-menu-opener.svg b/img/side-menu-opener.svg index f8f55aa..3169ea1 100644 --- a/img/side-menu-opener.svg +++ b/img/side-menu-opener.svg @@ -1,159 +1,19 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/lib/Controller/CssController.php b/lib/Controller/CssController.php new file mode 100644 index 0000000..136659c --- /dev/null +++ b/lib/Controller/CssController.php @@ -0,0 +1,74 @@ +. + */ + +namespace OCA\SideMenu\Controller; + +use OCP\AppFramework\Controller; +use OCP\AppFramework\Http\DataDownloadResponse; +use OCP\AppFramework\Http\Response; +use OCP\IConfig; +use OCP\IRequest; + +class CssController extends Controller +{ + + /** @var \OCP\IConfig */ + protected $config; + + /** + * @param string $appName + * @param IRequest $request + * @param IConfig $config + */ + public function __construct($appName, IRequest $request, IConfig $config) + { + parent::__construct($appName, $request); + $this->config = $config; + } + + /** + * @NoAdminRequired + * @NoCSRFRequired + * @PublicPage + * + * @return Response + */ + public function stylesheet() + { + $parameters = [ + '--side-menu-background-color' => $this->config->getAppValue('side_menu', 'background-color', '#333333'), + '--side-menu-current-app-background-color' => $this->config->getAppValue('side_menu', 'current-app-background-color', '#444444'), + '--side-menu-text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'), + '--side-menu-opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'), + ]; + + $css = ''; + + foreach ($parameters as $key => $value) { + if ($key === '--side-menu-opener') { + $value = sprintf("url('../img/%s.svg')", $value); + } + + $css.= sprintf('%s: %s;', $key, $value); + } + + $css = sprintf(':root { %s }', $css); + + return new DataDownloadResponse($css, 'stylesheet', 'text/css'); + } +} diff --git a/lib/Settings/Admin.php b/lib/Settings/Admin.php new file mode 100644 index 0000000..ca7a121 --- /dev/null +++ b/lib/Settings/Admin.php @@ -0,0 +1,79 @@ +. + */ + +namespace OCA\SideMenu\Settings; + +use OCP\AppFramework\Http\TemplateResponse; +use OCP\IL10N; +use OCP\ILogger; +use OCP\Settings\ISettings; +use OCP\IConfig; + +class Admin implements ISettings +{ + /** @var IL10N */ + private $l; + + /** @var ILogger */ + private $logger; + + /** @var IConfig */ + private $config; + + public function __construct(IL10N $l, ILogger $logger, IConfig $config) { + $this->l = $l; + $this->logger = $logger; + $this->config = $config; + } + + /** + * @return TemplateResponse + */ + public function getForm() + { + $parameters = [ + 'background-color' => $this->config->getAppValue('side_menu', 'background-color', '#333333'), + 'current-app-background-color' => $this->config->getAppValue('side_menu', 'current-app-background-color', '#444444'), + 'text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'), + 'cache' => $this->config->getAppValue('side_menu', 'cache', '0'), + 'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'), + ]; + + return new TemplateResponse('side_menu', 'settings/admin-form', $parameters, ''); + } + + /** + * @return string the section ID, e.g. 'sharing' + */ + public function getSection() + { + return 'side_menu'; + } + + /** + * @return int whether the form should be rather on the top or bottom of + * the admin section. The forms are arranged in ascending order of the + * priority values. It is required to return a value between 0 and 100. + * + * E.g.: 70 + */ + public function getPriority() + { + return 70; + } +} diff --git a/lib/Settings/Section.php b/lib/Settings/Section.php new file mode 100644 index 0000000..ade31a8 --- /dev/null +++ b/lib/Settings/Section.php @@ -0,0 +1,84 @@ +. + */ + +namespace OCA\SideMenu\Settings; + +use OCP\IL10N; +use OCP\IURLGenerator; +use OCP\Settings\IIconSection; + +class Section implements IIconSection +{ + /** @var IL10N */ + private $l; + + /** @var IURLGenerator */ + private $url; + + /** + * @param IURLGenerator $url + * @param IL10N $l + */ + public function __construct(IURLGenerator $url, IL10N $l) + { + $this->url = $url; + $this->l = $l; + } + + /** + * returns the ID of the section. It is supposed to be a lower case string, + * e.g. 'ldap' + * + * @returns string + */ + public function getID() + { + return 'side_menu'; + } + + /** + * returns the translated name as it should be displayed, e.g. 'LDAP / AD + * integration'. Use the L10N service to translate it. + * + * @return string + */ + public function getName() + { + return $this->l->t('Side menu'); + } + + /** + * @return int whether the form should be rather on the top or bottom of + * the settings navigation. The sections are arranged in ascending order of + * the priority values. It is required to return a value between 0 and 99. + * + * E.g.: 70 + */ + public function getPriority() + { + return 70; + } + + /** + * {@inheritdoc} + */ + public function getIcon() + { + return $this->url->imagePath('theming', 'app-dark.svg'); + } +} diff --git a/src/SideMenu.js b/src/SideMenu.js index 4d7abc8..b259521 100644 --- a/src/SideMenu.js +++ b/src/SideMenu.js @@ -20,6 +20,7 @@ import SideMenu from './SideMenu.vue' Vue.prototype.t = t Vue.prototype.OC = OC +Vue.prototype.OC = OCP const View = Vue.extend(SideMenu) const sideMenu = new View({ diff --git a/src/admin.js b/src/admin.js new file mode 100644 index 0000000..7709b98 --- /dev/null +++ b/src/admin.js @@ -0,0 +1,65 @@ +/** + * @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 . + */ + +const elements = [ + 'side-menu-background-color', + 'side-menu-current-app-background-color', + 'side-menu-text-color', + 'side-menu-save', + 'side-menu-opener', + 'side-menu-cache', +]; + +const selector = '#side-menu-message'; + +const saveSettings = (key) => { + const element = elements[key] + const name = $('#' + element).attr('name') + let value = $('#' + element).val() + const size = elements.length + + if (element === 'side-menu-cache') { + value++ + } + + OCP.AppConfig.setValue('side_menu', name, value, { + success: () => { + OC.msg.finishedSuccess( + selector, + t('settings', (key + 1) + '/' + size) + ) + + if (key < size -1) { + saveSettings(++key) + } else { + OC.msg.finishedSuccess(selector, t('settings', 'Saved')) + } + }, + error: () => { + OC.msg.finishedError(selector, t('side_menu', 'Error while saving "' + element + '"')) + } + }); +} + +$(document).ready(() => { + $('#side-menu-save').on('click', (event) => { + event.preventDefault() + OC.msg.startSaving(selector) + + saveSettings(0) + }); +}); diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php new file mode 100644 index 0000000..3a608a1 --- /dev/null +++ b/templates/settings/admin-form.php @@ -0,0 +1,94 @@ +. + */ + +script('side_menu', 'admin'); +style('side_menu', 'admin'); + +?> + +
+

t('Side menu settings')); ?>

+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ + 'side-menu-opener', + 'Hamburger' => 'side-menu-opener-hamburger', + ]; + ?> + +
+ +
+ + + + + + +
diff --git a/webpack.js b/webpack.js index b9c370b..ab4d735 100644 --- a/webpack.js +++ b/webpack.js @@ -5,6 +5,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin') module.exports = { entry: { 'main': path.join(__dirname, 'src', 'main.js'), + 'admin': path.join(__dirname, 'src', 'admin.js'), 'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'), }, output: {