From 3975f3be2881cda8b014d71106c3dd260b8b9d06 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Thu, 21 Oct 2021 21:37:32 +0200 Subject: [PATCH] fix #63: add a new side menu with categories --- css/sideMenu.css | 24 ++- img/admin/layout-side-with-categories.svg | 223 ++++++++++++++++++++++ lib/Controller/JsController.php | 1 + lib/Settings/Admin.php | 1 + src/SideMenu.js | 6 +- src/SideMenuWithCategories.vue | 126 ++++++++++++ src/admin.js | 1 + src/l10n/fixtures/cs.yaml | 3 +- src/l10n/fixtures/de.yaml | 3 +- src/l10n/fixtures/fr.yaml | 3 +- src/l10n/fixtures/zh_CN.yaml | 3 +- templates/js/script.php | 28 ++- templates/settings/admin-form.php | 66 +++++-- 13 files changed, 453 insertions(+), 35 deletions(-) create mode 100644 img/admin/layout-side-with-categories.svg create mode 100644 src/SideMenuWithCategories.vue diff --git a/css/sideMenu.css b/css/sideMenu.css index e78ffa0..08b0539 100644 --- a/css/sideMenu.css +++ b/css/sideMenu.css @@ -162,23 +162,23 @@ transition-property: width; } -#side-menu.side-menu-big { +#side-menu.side-menu-big, #side-menu.side-menu-with-categories { max-width: 100%; height: auto; } -.side-menu-big .side-menu-header { +.side-menu-big .side-menu-header, .side-menu-with-categories .side-menu-header { height: auto; } -.side-menu-big .side-menu-apps-list { +.side-menu-big .side-menu-apps-list, .side-menu-with-categories .side-menu-apps-list { height: auto; position: static; max-width: 100vw; overflow: auto; } -.side-menu-big .side-menu-app a { +.side-menu-big .side-menu-app a, .side-menu-with-categories .side-menu-app a { padding: 7px 0 7px 7px; } @@ -217,7 +217,7 @@ stroke: var(--side-menu-text-color, #fff); } -.side-menu-big .side-menu-app-icon { +.side-menu-with-categories .side-menu-app-icon, .side-menu-big .side-menu-app-icon { vertical-align: middle; margin-top: -2px; } @@ -271,6 +271,20 @@ transform: translateX(calc(-100% + 50px)) !important; } +#side-menu.side-menu-with-categories { + max-width: 290px; + height: 100vh; +} + +.side-menu-with-categories .side-menu-categories { + display: block; + padding: 0; +} + +.side-menu-with-categories .side-menu-category { + padding: 10px 0; +} + @media screen and (max-width: 1024px) { #side-menu.side-menu-big { max-width: 290px; diff --git a/img/admin/layout-side-with-categories.svg b/img/admin/layout-side-with-categories.svg new file mode 100644 index 0000000..739d5b2 --- /dev/null +++ b/img/admin/layout-side-with-categories.svg @@ -0,0 +1,223 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/Controller/JsController.php b/lib/Controller/JsController.php index b5ed845..135b1ab 100644 --- a/lib/Controller/JsController.php +++ b/lib/Controller/JsController.php @@ -152,6 +152,7 @@ class JsController extends Controller 'hide-when-no-apps' => $this->config->getAppValueBool('hide-when-no-apps', '0'), 'loader-enabled' => $this->config->getAppValueBool('loader-enabled', '1'), 'always-displayed' => $this->config->getAppValueBool('always-displayed', '0'), + 'side-with-categories' => $this->config->getAppValueBool('side-with-categories', '0'), 'big-menu' => $this->config->getAppValueBool('big-menu', '0'), 'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'), 'avatar' => $avatar, diff --git a/lib/Settings/Admin.php b/lib/Settings/Admin.php index d77978c..8885c13 100644 --- a/lib/Settings/Admin.php +++ b/lib/Settings/Admin.php @@ -102,6 +102,7 @@ class Admin implements ISettings 'cache' => $this->config->getAppValue('cache', '0'), 'always-displayed' => $this->config->getAppValue('always-displayed', '0'), 'big-menu' => $this->config->getAppValue('big-menu', '0'), + 'side-with-categories' => $this->config->getAppValue('side-with-categories', '0'), 'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'), 'display-logo' => $this->config->getAppValue('display-logo', '1'), 'add-logo-link' => $this->config->getAppValue('add-logo-link', '1'), diff --git a/src/SideMenu.js b/src/SideMenu.js index 05d5e17..441d0a4 100644 --- a/src/SideMenu.js +++ b/src/SideMenu.js @@ -18,11 +18,9 @@ import Vue from 'vue' import SideMenu from './SideMenu.vue' import SideMenuBig from './SideMenuBig.vue' +import SideMenuWithCategories from './SideMenuWithCategories.vue' -// Vue.prototype.t = t Vue.prototype.OC = OC -// Vue.prototype.OC = OCP - const mountSideMenuComponent = () => { const sideMenuContainer = document.querySelector('#side-menu') @@ -32,6 +30,8 @@ const mountSideMenuComponent = () => { if (sideMenuContainer.getAttribute('data-bigmenu')) { component = SideMenuBig + } else if(sideMenuContainer.getAttribute('data-sidewithcategories')) { + component = SideMenuWithCategories } else { component = SideMenu } diff --git a/src/SideMenuWithCategories.vue b/src/SideMenuWithCategories.vue new file mode 100644 index 0000000..6b63689 --- /dev/null +++ b/src/SideMenuWithCategories.vue @@ -0,0 +1,126 @@ + + + + diff --git a/src/admin.js b/src/admin.js index 2a0a668..c9b3c4d 100644 --- a/src/admin.js +++ b/src/admin.js @@ -103,6 +103,7 @@ jQuery(document).ready(() => { jQuery('#side-menu-always-displayed').val(target.attr('data-alwaysdiplayed')) jQuery('#side-menu-big-menu').val(target.attr('data-bigmenu')) + jQuery('#side-menu-side-with-categories').val(target.attr('data-sidewithcategories')) }) jQuery('.side-menu-setting-live').on('change', (event) => { diff --git a/src/l10n/fixtures/cs.yaml b/src/l10n/fixtures/cs.yaml index a16b4ca..215c0e3 100644 --- a/src/l10n/fixtures/cs.yaml +++ b/src/l10n/fixtures/cs.yaml @@ -40,7 +40,7 @@ "Panel": "Panel" "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Otevřít nabídku při najetím ukazatelem na tlačítko nabídky (automaticky vypnuto pro dotykové obrazovky)." "Display the big menu": "Zobrazit velkou nabídku" -"The big menu is not compatible with AppOrder.": "Velká nabídka není kompatibilní s jinou aplikací (doplňkem) „Pořadí aplikací“." +"This menu is not compatible with AppOrder.": "Nabídka není kompatibilní s jinou aplikací (doplňkem) „Pořadí aplikací“." "Display the logo": "Zobrazit logo" "This feature is not compatible with the big menu display.": "Tato funkce není kompatibilní se zobrazením velké nabídky." "Icons and texts": "Ikony a texty" @@ -76,3 +76,4 @@ "Show and hide the list of categories": "Zobrazit/skrýt seznam kategorií" "This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Tyto parametry jsou použity v případě, že je zapnutý (Breeze) tmavý motiv vzhledu." "Dark mode colors": "Barvy tmavého režimu" +"With categories": "S kategoriemi" diff --git a/src/l10n/fixtures/de.yaml b/src/l10n/fixtures/de.yaml index e67d0fc..5d8353a 100644 --- a/src/l10n/fixtures/de.yaml +++ b/src/l10n/fixtures/de.yaml @@ -40,7 +40,7 @@ "Panel": "Panel" "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Öffne das Menü, wenn die Maus über das Menü-Symbol bewegt wird (auf Touchscreens automatisch deaktiviert)." "Display the big menu": "Großes Menü anzeigen" -"The big menu is not compatible with AppOrder.": "Das große Menü ist nicht mit AppOrder kompatibel." +"This menu is not compatible with AppOrder.": "Dieses Menü ist nicht mit AppOrder kompatibel." "Display the logo": "Logo anzeigen" "This feature is not compatible with the big menu display.": "Diese Funktion ist nicht mit dem großen Menü kompatibel." "Icons and texts": "Symbole und Texte" @@ -76,3 +76,4 @@ "Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden" "This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Optionen werden auf Dark Theme oder Breeze Dark Theme angewendet." "Dark mode colors": "Farben für den dunklen Modus" +"With categories": "Mit Kategorien" diff --git a/src/l10n/fixtures/fr.yaml b/src/l10n/fixtures/fr.yaml index 778a0cf..56b286e 100644 --- a/src/l10n/fixtures/fr.yaml +++ b/src/l10n/fixtures/fr.yaml @@ -40,7 +40,7 @@ "Panel": "Panneau" "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "Ouvrir le menu au passage de la souris (automatiquement désactivé sur les écrans tactiles)" "Display the big menu": "Afficher le menu large" -"The big menu is not compatible with AppOrder.": "Le menu large n'est pas compatible avec l'application AppOrder" +"This menu is not compatible with AppOrder.": "Ce menu n'est pas compatible avec l'application AppOrder" "Display the logo": "Afficher le logo" "This feature is not compatible with the big menu display.": "Cette fonctionnalité n'est pas compatible avec l'affichage du menu large." "Icons and texts": "Icônes et textes" @@ -76,3 +76,4 @@ "Show and hide the list of categories": "Afficher et masquer la liste des catégories" "This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés." "Dark mode colors": "Couleurs du mode sombre" +"With categories": "Avec les catégories" diff --git a/src/l10n/fixtures/zh_CN.yaml b/src/l10n/fixtures/zh_CN.yaml index 9a43ff0..969583d 100644 --- a/src/l10n/fixtures/zh_CN.yaml +++ b/src/l10n/fixtures/zh_CN.yaml @@ -40,7 +40,7 @@ "Panel": "面板" "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "鼠标悬停时打开菜单 (触摸屏时将自动禁用)" "Display the big menu": "显示大型菜单" -"The big menu is not compatible with AppOrder.": "大型菜单与应用顺序不兼容" +"This menu is not compatible with AppOrder.": "型菜单与应用顺序不兼容" "Display the logo": "显示logo" "This feature is not compatible with the big menu<\/code> display.": "此功能与显示大型菜单<\/code>不兼容。" "Icons and texts": "图标与文字" @@ -76,3 +76,4 @@ "Show and hide the list of categories": "显示或隐藏类别列表" "This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "此参数将应用于暗黑主题激活时。" "Dark mode colors": "暗黑模式颜色" +"With categories": "有类别" diff --git a/templates/js/script.php b/templates/js/script.php index 3f834fe..cf4b2ce 100644 --- a/templates/js/script.php +++ b/templates/js/script.php @@ -1,3 +1,17 @@ + + (function() { var sideMenuContainer = jQuery('
') var sideMenuOpener = jQuery('') @@ -6,8 +20,10 @@ var html = jQuery('html') var isTouchDevice = window.matchMedia("(pointer: coarse)").matches - + sideMenu.attr('data-bigmenu', '1') + + sideMenu.attr('data-sidewithcategories', '1') var targetBlankApps = ; @@ -25,7 +41,7 @@ sideMenuOpener.removeClass('hide') } - + if (apps.length === 0) { html.removeClass('side-menu-always-displayed'); } else { @@ -33,7 +49,7 @@ } - + if (apps.length === 0) { html.removeClass('side-menu-always-displayed'); } else { @@ -61,7 +77,7 @@ } } - + var sideMenuMouseLeave = function() { sideMenu .removeClass('open') @@ -97,7 +113,7 @@ sideMenu.find('.side-menu-app.active a').focus() }) - + sideMenuOpener.on('click', function() { sideMenu.toggleClass('open') }) @@ -138,7 +154,7 @@ - + })(); diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php index 0a21220..0f2e509 100644 --- a/templates/settings/admin-form.php +++ b/templates/settings/admin-form.php @@ -441,41 +441,56 @@ $choicesSizes = [ t('Panel')); ?> + !$_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'], + 'always-displayed' => $_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'], + 'side-with-categories' => $_['side-with-categories'] && !$_['always-displayed'] && !$_['big-menu'], + 'big-menu' => $_['big-menu'] && !$_['always-displayed'] && !$_['side-with-categories'], + ]; + ?> +
- - !$_['always-displayed'] && !$_['big-menu'], - 'always-displayed' => $_['always-displayed'] && !$_['big-menu'], - 'big-menu' => $_['big-menu'], - ]; - ?> -

<?php p($l->t('Default')); ?>

+
+ +
+

t('This menu is not compatible with AppOrder.'); ?>

+

+ <?php p($l->t('With categories')); ?> +

+
- -

t('The big menu is not compatible with AppOrder.'); ?>

- +

t('This menu is not compatible with AppOrder.'); ?>

<?php p($l->t('Big menu')); ?>

@@ -485,20 +500,37 @@ $choicesSizes = [ t('Experimental')); ?>
-

t('Not compatible with touch screens.')); ?>

-

<?php p($l->t('Always displayed')); ?>

- - - + + +