Merge pull request 'release v3.3.0' (#167) from develop into master

Reviewed-on: #167
2022-11-04 22:43:18 +01:00 · 2022-11-04 22:43:18 +01:00 · dbf1c4316a
parent 39fd049642 e9fb46b7b7
commit dbf1c4316a
19 changed files with 309 additions and 153 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,9 +1,17 @@
 ## [Unreleased]

+## 3.3.0
+### Added
+* add documentation in admin page
+* add app sorter in user config side (#160)
+### Fixed
+* fix #164: open apps in new tab does not work
+* fix #162 #159: top and side apps does work correctly
+
 ## 3.2.1
 ### Fixed
-* fix #150: Active app is not visible has active in menu (except in default menu)
-* fix #150: opener position
+* fix #150: active app is not visible has active in menu (except in default menu)
+* fix #151: opener position

 ## 3.2.0
 ### Added
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@ -32,7 +32,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>3.2.1</version>
+    <version>3.3.0</version>
    <licence>agpl</licence>
    <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
    <namespace>SideMenu</namespace>
--- a/css/admin.css
+++ b/css/admin.css
@ -73,7 +73,7 @@

 .side-menu-setting-list {
  margin: 10px 4px 4px 0px;
-  border: 1px solid var(--color-border-dark);
+  border: 2px solid var(--color-border-dark);
  border-radius: 15px;
 }

@ -175,3 +175,42 @@
 .btn-reset--progress {
  transform: rotate(-359deg);
 }
+
+.badges {
+  margin-bottom: 14px;
+  margin-top: 4px;
+}
+
+.badge {
+  border-size: 1px;
+  padding: 2px 8px;
+  margin-right: 2px;
+  margin-bottom: 5px;
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.badge-1 {
+  background: #d4ce14;
+  border-color: #cad413;
+  color: #373a05;
+}
+
+.badge-2 {
+  background: #96d47f;
+  border-color: #7ed49b;
+  color: #333;
+}
+
+.badge-3 {
+  background: #d4540a;
+  border-color: #d4700c;
+  color: #fff;
+}
+
+.badge-4 {
+  background: #9d81d4;
+  border-color: #c681d4;
+  color: #fff;
+}
--- a/lib/Controller/JsController.php
+++ b/lib/Controller/JsController.php
@ -100,10 +100,12 @@ class JsController extends Controller
        $useAvatar = $this->config->getAppValueBool('use-avatar', '0');
        $isForced = $this->config->getAppValueBool('force', '0');
        $addLogoLink = $this->config->getAppValueBool('add-logo-link', '1');
+        $appsOrder = $this->config->getAppValueArray('apps-order', '[]');
        $avatar = null;
        $settings = null;

        if ($this->user) {
+            $userAppsOrder = $this->config->getUserValueArray($this->user, 'apps-order', '[]');
            $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
            $userTopSideMenuApps = $this->config->getUserValueArray($this->user, 'top-side-menu-apps', '[]');

@ -115,6 +117,10 @@ class JsController extends Controller
                $topSideMenuApps = $userTopSideMenuApps;
            }

+            if (!empty($userAppsOrder) && !$isForced) {
+                $appsOrder = $userAppsOrder;
+            }
+
            $userTargetBlankMode = $this->config->getUserValueInt($this->user, 'target-blank-mode', '1');
            $userTargetBlankApps = $this->config->getUserValueArray($this->user, 'target-blank-apps', '[]');

@ -162,7 +168,7 @@ class JsController extends Controller
            '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', '[]'),
-            'apps-order' => $this->config->getAppValueArray('apps-order', '[]'),
+            'apps-order' => $appsOrder,
            'avatar' => $avatar,
            'top-menu-apps' => $topMenuApps,
            'top-side-menu-apps' => $topSideMenuApps,
--- a/lib/Controller/NavController.php
+++ b/lib/Controller/NavController.php
@ -93,11 +93,13 @@ class NavController extends Controller
            ]);
        }

-        $apps = $this->appRepository->getOrderedApps();
+        $apps = $this->appRepository->getOrderedApps($user);
        $categoriesLabels = $this->categoryRepository->getOrderedCategories();
        $hiddenApps = $this->config->getAppValueArray('big-menu-hidden-apps', '[]');
        $isForced = $this->config->getAppValueBool('force', '0');
        $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
+        $topSideMenuApps = $this->config->getAppValueArray('top-side-menu-apps', '[]');
+        $userTopSideMenuApps = $this->config->getUserValueArray($user, 'top-side-menu-apps', '[]');
        $userTopMenuApps = $this->config->getUserValueArray($user, 'top-menu-apps', '[]');
        $appsCategories = [];
        $categoriesAppsCount = [];
@ -106,8 +108,12 @@ class NavController extends Controller
            $topMenuApps = $userTopMenuApps;
        }

+        if (!$isForced && !empty($userTopSideMenuApps)) {
+            $topSideMenuApps = $userTopSideMenuApps;
+        }
+
        foreach ($apps as $app) {
-            if (in_array($app['id'], $topMenuApps)) {
+            if (in_array($app['id'], $topMenuApps) && !in_array($app['id'], $userTopSideMenuApps)) {
                continue;
            }

--- a/lib/Controller/PersonalSettingController.php
+++ b/lib/Controller/PersonalSettingController.php
@ -97,7 +97,7 @@ class PersonalSettingController extends Controller
            }
        }

-        if (in_array($name, ['top-menu-apps', 'top-side-menu-apps'])) {
+        if (in_array($name, ['top-menu-apps', 'top-side-menu-apps', 'apps-order'])) {
            $doSave = true;
            $data = json_decode($value, true);

--- a/lib/Service/AppRepository.php
+++ b/lib/Service/AppRepository.php
@ -2,6 +2,7 @@

 namespace OCA\SideMenu\Service;

+use OC\User\User;
 use OCP\L10N\IFactory;

 /**
@ -110,11 +111,19 @@ class AppRepository
        );
    }

-    public function getOrderedApps()
+    public function getOrderedApps(?User $user = null)
    {
        $apps = $this->getVisibleApps();
        $orders = $this->config->getAppValueArray('apps-order', '[]');

+        if (null !== $user && !$this->config->getAppValueBool('force', '0')) {
+            $userOrders = $this->config->getUserValueArray($user, 'apps-order', '[]');
+
+            if (!empty($userOrders)) {
+                $orders = $userOrders;
+            }
+        }
+
        usort($apps, function ($a, $b) use ($orders) {
            $ak = array_keys($orders, $a['id'])[0] ?? null;
            $bk = array_keys($orders, $b['id'])[0] ?? null;
--- a/lib/Settings/Personal.php
+++ b/lib/Settings/Personal.php
@ -81,7 +81,9 @@ class Personal implements ISettings
            'top-side-menu-apps' => $this->config->getUserValueArray($user, 'top-side-menu-apps', '[]'),
            'target-blank-mode' => $this->config->getUserValue($user, 'target-blank-mode', '1'),
            'target-blank-apps' => $this->config->getUserValueArray($user, 'target-blank-apps', '[]'),
+            'apps-order' => $this->config->getUserValueArray($user, 'apps-order', '[]'),
            'apps' => $this->appRepository->getVisibleApps(),
+            'ordered-apps' => $this->appRepository->getOrderedApps($user),
        ];

        return new TemplateResponse(Application::APP_ID, 'settings/personal-form', $parameters, '');
--- a/screenshots/admin_settings.png
+++ b/screenshots/admin_settings.png
--- a/screenshots/personal_settings.png
+++ b/screenshots/personal_settings.png
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@ -33,6 +33,7 @@
        <a :href="app.href"
          :class="{ 'has-unread': app.unread > 0 }"
          :aria-label="appLabel(app)"
+          :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
          :aria-current="app.active ? 'page' : false">
          <img :src="app.icon" alt="">
          <div class="app-menu-entry--label">
@ -75,6 +76,7 @@ export default {
      apps: null,
      appLimit: 0,
      observer: null,
+      targetBlankApps: [],
    }
  },
  mounted() {
@ -93,6 +95,7 @@ export default {
      }
    })

+    this.targetBlankApps = window.targetBlankApps
    this.observer = new ResizeObserver(this.resize)
    this.observer.observe(this.$el)
    this.resize()
--- a/src/l10n/fixtures/cs.yaml
+++ b/src/l10n/fixtures/cs.yaml
@ -53,14 +53,10 @@
  \ obrazovky)"
 "Display the big menu": "Zobrazit velkou nabídku"
 "Display the logo": "Zobrazit logo"
-"This feature is not compatible with the <code>big menu</code> display.": "Tato funkce\
-  \ není kompatibilní se zobrazením <code>velké nabídky</code>."
 "Icons and texts": "Ikony a texty"
 "Loader enabled": "Načítání zapnuto"
 "Tips": "Tipy"
 "Always displayed": "Vždy zobrazeno"
-"The logo will be hidden when the menu is always displayed.": "Pokud je nabídka zobrazena\
-  \ trvale, logo bude skryto."
 "This is the automatic behavior when the menu is always displayed.": "Toto je automatické\
  \ chování, kdy je nabídka vždy zobrazena."
 "Not compatible with touch screens.": "Nekompatibilní s dotykovými obrazovkami."
@ -97,8 +93,6 @@
 "With categories": "S kategoriemi"
 "Custom categories": "Vlastní kategorie"
 "Customize application categories": "Přizpůsobte kategorie aplikací"
-"Apps only visible in the top menu": "Aplikace jsou viditelné pouze v horní nabídce"
-"Apps visible in the top and side menus": "Aplikace viditelné v horní a boční nabídce"
 "Reset to default": "Vrátit zpět na výchozí hodnoty"
 "Hidden icon": "Skrytá ikona"
 "Small icon": "Malá ikona"
@ -109,3 +103,6 @@
 "Normal text": "Normální text"
 "Big text": "Velký text"
 "Applications": "Applications"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
--- a/src/l10n/fixtures/de.yaml
+++ b/src/l10n/fixtures/de.yaml
@ -53,14 +53,10 @@
  \ deaktiviert)"
 "Display the big menu": "Großes Menü anzeigen"
 "Display the logo": "Logo anzeigen"
-"This feature is not compatible with the <code>big menu</code> display.": "Diese Funktion\
-  \ ist nicht mit dem <code>großen Menü</code> kompatibel."
 "Icons and texts": "Symbole und Texte"
 "Loader enabled": "Ladestandanzeige aktiviert"
 "Tips": "Tipps"
 "Always displayed": "Immer anzeigen"
-"The logo will be hidden when the menu is always displayed.": "Das Logo wird ausgeblendet,\
-  \ wenn das Menü immer angezeigt wird."
 "This is the automatic behavior when the menu is always displayed.": "Dies ist das\
  \ automatische Verhalten, wenn das Menü immer angezeigt wird."
 "Not compatible with touch screens.": "Nicht kompatibel mit Touchscreens."
@ -100,8 +96,6 @@
 "With categories": "Mit Kategorien"
 "Custom categories": "Benutzerdefinierte Kategorien"
 "Customize application categories": "Anwendungskategorien anpassen"
-"Apps only visible in the top menu": "Apps nur im oberen Menü sichtbar"
-"Apps visible in the top and side menus": "Apps im oberen und seitlichen Menü sichtbar"
 "Reset to default": "Auf Standard zurücksetzen"
 "Hidden icon": "Verstecktes Symbol"
 "Small icon": "Kleines Symbol"
@ -112,3 +106,6 @@
 "Normal text": "Normaler Text"
 "Big text": "Großer Text"
 "Applications": "Applications"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
--- a/src/l10n/fixtures/fr.yaml
+++ b/src/l10n/fixtures/fr.yaml
@ -61,14 +61,10 @@
  \ le menu au passage de la souris (automatiquement désactivé sur les écrans tactiles)"
 "Display the big menu": "Afficher le menu large"
 "Display the logo": "Afficher le logo"
-"This feature is not compatible with the <code>big menu</code> display.": "Cette fonctionnalité\
-  \ n'est pas compatible avec l'affichage <code>Menu large</code>."
 "Icons and texts": "Icônes et textes"
 "Loader enabled": "Activation de l'indicateur de chargement"
 "Tips": "Astuces"
 "Always displayed": "Toujours affiché"
-"The logo will be hidden when the menu is always displayed.": "Le logo sera masque\
-  \ si le menu est toujours affiché."
 "This is the automatic behavior when the menu is always displayed.": "C'est le comportement\
  \ automatique lorsque le menu est toujours affiché."
 "Not compatible with touch screens.": "Incompatible avec les écrans tactiles."
@ -108,9 +104,8 @@
 "With categories": "Avec les catégories"
 "Custom categories": "Catégories personnalisées"
 "Customize application categories": "Personnaliser les catégories des applications"
-"Apps only visible in the top menu": "Applications visibles uniquement dans le menu\
-  \ supérieur"
-"Apps visible in the top and side menus": "Applications visibles dans le menus supérieur\
-  \ et latéral"
 "Reset to default": "Restaurer les valeurs par défaut"
 "Applications": "Applications"
+"Applications kept in the top menu": "Applications conservées dans le menu supérieur"
+"Applications kept in the top menu but also shown in side menu": "Applications conservées dans le menu supérieur mais également affichées dans le menu latéral"
+"These applications must be selected in the previous option.": "Ces applications doivent également être sélectionnées dans l'option précédente"
--- a/src/l10n/fixtures/tpl/base.yaml
+++ b/src/l10n/fixtures/tpl/base.yaml
@ -52,12 +52,10 @@
 "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": ""
 "Display the big menu": ""
 "Display the logo": ""
-"This feature is not compatible with the <code>big menu</code> display.": ""
 "Icons and texts": ""
 "Loader enabled": ""
 "Tips": ""
 "Always displayed": ""
-"The logo will be hidden when the menu is always displayed.": ""
 "This is the automatic behavior when the menu is always displayed.": ""
 "Not compatible with touch screens.": ""
 "Big menu": ""
@ -89,7 +87,8 @@
 "With categories": ""
 "Custom categories": ""
 "Customize application categories": ""
-"Apps only visible in the top menu": ""
-"Apps visible in the top and side menus": ""
 "Reset to default": ""
 "Applications": ""
+"Applications kept in the top menu": ""
+"Applications kept in the top menu but also shown in side menu": ""
+"These applications must be selected in the previous option.": ""
--- a/src/l10n/fixtures/zh_CN.yaml
+++ b/src/l10n/fixtures/zh_CN.yaml
@ -41,12 +41,10 @@
 "Open the menu when the mouse is hover the opener (automatically disabled on touch screens)": "鼠标悬停时打开菜单 (触摸屏时将自动禁用)"
 "Display the big menu": "显示大型菜单"
 "Display the logo": "显示logo"
-"This feature is not compatible with the <code>big menu<\/code> display.": "此功能与显示<code>大型菜单<\/code>不兼容。"
 "Icons and texts": "图标与文字"
 "Loader enabled": "菜单指示器已激活"
 "Tips": "技巧"
 "Always displayed": "一直显示"
-"The logo will be hidden when the menu is always displayed.": "一直显示菜单时logo将被隐藏。"
 "This is the automatic behavior when the menu is always displayed.": "一直显示菜单时的自动动作。"
 "Not compatible with touch screens.": "与触屏不兼容。"
 "Big menu": "大型菜单"
@ -78,8 +76,6 @@
 "With categories": "有类别"
 "Custom categories": "自定义类别"
 "Customize application categories": "自定义应用程序类别"
-"Apps only visible in the top menu": "应用程序仅在顶部菜单中可见"
-"Apps visible in the top and side menus": "顶部和侧边菜单中可见的应用程序"
 "Reset to default": "重置为默认设置"
 "Hidden icon": "隐藏图标"
 "Small icon": "小图标"
@ -90,3 +86,6 @@
 "Normal text": "普通文本"
 "Big text": "大文本"
 "Applications": "Applications"
+"Applications kept in the top menu": "Applications kept in the top menu"
+"Applications kept in the top menu but also shown in side menu": "Applications kept in the top menu but also shown in side menu"
+"These applications must be selected in the previous option.": "These applications must be selected in the previous option."
--- a/templates/js/script.php
+++ b/templates/js/script.php
@ -22,10 +22,10 @@ if ($_['always-displayed']) {
  const nextcloud = document.querySelector('#nextcloud')

  const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
-  const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>

+  window.targetBlankApps = <?php echo json_encode($_['target-blank-apps']), "\n" ?>
  window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
-  window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps'])."\n"; ?>
+  window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']), "\n"; ?>
  window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>

  <?php if ($display === 'big-menu'): ?>
--- a/templates/settings/admin-form.php
+++ b/templates/settings/admin-form.php
@ -41,8 +41,104 @@ $choicesSizes = [

 $labelShowHideApps = 'Show and hide the list of applications';
 $labelReset = 'Reset to default';
+
 ?>
 <div id="side-menu-section">
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Panel')); ?>
+        </h2>
+
+        <?php
+            $displays = [
+                'default' => !$_['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'],
+            ];
+        ?>
+
+        <div>
+            <label>
+                <?php p($l->t('Default')); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="0"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t('Default')); ?>">
+        </p>
+
+        <div>
+            <label>
+                <?php p($l->t('With categories')); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="0"
+                data-sidewithcategories="1"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t('With categories')); ?>">
+        </p>
+
+        <div>
+            <label for="side-menu-opener">
+                <?php p($l->t('Big menu')); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="1"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t('Big menu')); ?>">
+        </p>
+
+        <div>
+            <label for="side-menu-opener">
+                <?php p($l->t('Always displayed')); ?>
+            </label>
+        </div>
+        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="1"
+                data-bigmenu="0"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t('Always displayed')); ?>">
+        </p>
+
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="always-displayed"
+            id="side-menu-always-displayed"
+            value="<?php echo (int) $_['always-displayed'] ?>"
+        >
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="big-menu"
+            id="side-menu-big-menu"
+            value="<?php echo (int) $_['big-menu'] ?>"
+        >
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="side-with-categories"
+            id="side-menu-side-with-categories"
+            value="<?php echo (int) $_['side-with-categories'] ?>"
+        >
+    </div>
+
    <div class="section">
        <h2>
            <?php p($l->t('Colors')); ?>
@ -50,6 +146,13 @@ $labelReset = 'Reset to default';
            <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
        </h2>

+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label side-menu-setting-label-short">
@ -234,6 +337,13 @@ $labelReset = 'Reset to default';
            <?php p($l->t('Dark mode colors')); ?>
        </h2>

+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
        <p>
            <?php echo $l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.'); ?>
        </p>
@ -422,6 +532,13 @@ $labelReset = 'Reset to default';
            <?php p($l->t('Opener')); ?>
        </h2>

+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <?php
@ -473,105 +590,7 @@ $labelReset = 'Reset to default';
                    </select>
                </div>
            </div>
-        </div>
-    </div>

-    <div class="section">
-        <h2>
-            <?php p($l->t('Panel')); ?>
-        </h2>
-
-        <?php
-            $displays = [
-                'default' => !$_['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'],
-            ];
-        ?>
-
-        <div>
-            <label>
-                <?php p($l->t('Default')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="0"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t('Default')); ?>">
-        </p>
-
-        <div>
-            <label>
-                <?php p($l->t('With categories')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="0"
-                data-sidewithcategories="1"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t('With categories')); ?>">
-        </p>
-
-        <div>
-            <label for="side-menu-opener">
-                <?php p($l->t('Big menu')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="1"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t('Big menu')); ?>">
-        </p>
-
-        <div>
-            <label for="side-menu-opener">
-                <?php p($l->t('Always displayed')); ?>
-            </label>
-        </div>
-        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="1"
-                data-bigmenu="0"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t('Always displayed')); ?>">
-        </p>
-
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="always-displayed"
-            id="side-menu-always-displayed"
-            value="<?php echo (int) $_['always-displayed'] ?>"
-        >
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="big-menu"
-            id="side-menu-big-menu"
-            value="<?php echo (int) $_['big-menu'] ?>"
-        >
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="side-with-categories"
-            id="side-menu-side-with-categories"
-            value="<?php echo (int) $_['side-with-categories'] ?>"
-        >
-        <br>
-
-
-        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('Open the menu when the mouse is hover the opener (automatically disabled on touch screens)')); ?>
@ -589,16 +608,18 @@ $labelReset = 'Reset to default';
                    </select>
                </div>
            </div>
+        </div>
+    </div>

+    <div class="section">
+        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('Display the logo')); ?>
-                    <br>
-                    <em>
-                        <?php echo $l->t('This feature is not compatible with the <code>big menu</code> display.'); ?>
-                        <br>
-                        <?php p($l->t('The logo will be hidden when the menu is always displayed.')); ?>
-                    </em>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+                    </div>
                </div>
                <div class="side-menu-setting-form">
                    <select id="side-menu-display-logo" name="display-logo" class="side-menu-setting">
@ -614,6 +635,10 @@ $labelReset = 'Reset to default';
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('Use the avatar instead of the logo')); ?>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+                    </div>
                </div>
                <div class="side-menu-setting-form">
                    <select id="side-menu-use-avatar" name="use-avatar" class="side-menu-setting">
@ -629,6 +654,10 @@ $labelReset = 'Reset to default';
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('The logo is a link to the default app')); ?>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+                    </div>
                </div>
                <div class="side-menu-setting-form">
                    <select id="side-menu-add-logo-link" name="add-logo-link" class="side-menu-setting">
@ -644,8 +673,11 @@ $labelReset = 'Reset to default';
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
                    <?php p($l->t('Apps that should not be displayed in the menu')); ?>
-                    <br>
-                    <em><?php echo $l->t('This feature is only compatible with the <code>big menu</code> display.'); ?></em>
+
+                    <div class="badges">
+                        <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+                        <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+                    </div>
                </div>
                <div class="side-menu-setting-form">
                    <a class="side-menu-toggler" data-target="#big-menu-hidden-apps" href="#_">
@ -765,10 +797,17 @@ $labelReset = 'Reset to default';
            <?php p($l->t('Top menu')); ?>
        </h2>

+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
-                    <?php p($l->t('Apps only visible in the top menu')); ?>
+                    <?php p($l->t('Applications kept in the top menu')); ?>
                </div>
                <div class="side-menu-setting-form">
                    <a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
@ -799,7 +838,9 @@ $labelReset = 'Reset to default';

            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
-                    <?php p($l->t('Apps visible in the top and side menus')); ?>
+                    <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
+                    <br>
+                    <em><?php p($l->t('These applications must be selected in the previous option.')); ?></em>
                </div>
                <div class="side-menu-setting-form">
                    <a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
@ -835,6 +876,13 @@ $labelReset = 'Reset to default';
            <?php p($l->t('Applications')); ?>
        </h2>

+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <div class="side-menu-setting-label">
@ -875,6 +923,11 @@ $labelReset = 'Reset to default';
            <?php p($l->t('Categories')); ?>
        </h2>

+        <div class="badges">
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+        </div>
+
        <div class="side-menu-setting-table">
            <div class="side-menu-setting-row">
                <?php
@ -985,6 +1038,13 @@ $labelReset = 'Reset to default';
            <?php p($l->t('Tips')); ?>
        </h2>

+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
        <p>
            <em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
        </p>
--- a/templates/settings/personal-form.php
+++ b/templates/settings/personal-form.php
@ -27,6 +27,7 @@ $choicesYesNo = [


 $labelShowHideApps = 'Show and hide the list of applications';
+$labelReset = 'Reset to default';
 ?>
 <div id="side-menu-section">
    <?php if ($_['force']): ?>
@ -41,10 +42,6 @@ $labelShowHideApps = 'Show and hide the list of applications';
        </div>
    <?php else: ?>
        <div class="section">
-            <h2>
-                <?php p($l->t('Menu')); ?>
-            </h2>
-
            <p>
                <em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
            </p>
@ -123,7 +120,7 @@ $labelShowHideApps = 'Show and hide the list of applications';
            <div class="side-menu-setting-table">
                <div class="side-menu-setting-row">
                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Apps only visible in the top menu')); ?>
+                        <?php p($l->t('Applications kept in the top menu')); ?>
                        <p>
                            <em>
                                <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
@ -163,9 +160,10 @@ $labelShowHideApps = 'Show and hide the list of applications';
            <div class="side-menu-setting-table">
                <div class="side-menu-setting-row">
                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Apps visible in the top and side menus')); ?>
+                        <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
                        <p>
                            <em>
+                                <?php p($l->t('These applications must be selected in the previous option.')); ?><br>
                                <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
                            </em>
                        </p>
@ -200,6 +198,44 @@ $labelShowHideApps = 'Show and hide the list of applications';
                </div>
            </div>
        </div>
+        <div class="section">
+            <h2>
+                <?php p($l->t('Applications')); ?>
+            </h2>
+
+            <div class="side-menu-setting-table">
+                <div class="side-menu-setting-row">
+                    <div class="side-menu-setting-label">
+                        <?php p($l->t('Customize sorting')); ?>
+                    </div>
+                    <div class="side-menu-setting-form">
+                        <a class="side-menu-toggler" data-target="#apps-order-list" href="#_">
+                            🖱️ <?php p($l->t($labelShowHideApps)); ?>
+                        </a>
+
+                        <div class="theme-undo icon icon-history btn-reset btn-reset--down" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                            'side-menu-apps-order' => '[]',
+                        ])) ?>"></div>
+
+                        <div id="apps-order-list" style="display: none">
+                            <ul class="side-menu-setting-list">
+                                <?php foreach ($_['ordered-apps'] as $key => $app): ?>
+                                    <li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
+                                        <span class="arrow">
+                                            ⇅
+                                        </span>
+
+                                        <?php echo p($l->t($app['name'])); ?>
+                                    </li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+
+                        <input type="hidden" value='<?php echo json_encode($_['apps-order']) ?>' name="apps-order" class="side-menu-setting" id="side-menu-apps-order" data-personal>
+                    </div>
+                </div>
+            </div>
+        </div>
    <?php endif ?>

    <div class="section">