add custom apps sorting (fix SideMenu and admin ui)

css/admin.css

@@ -18,6 +18,8 @@
 #side-menu-section input[type="color"] {
   width: 100px;
   margin: 10px 0 10px 0;
+  padding: 0;
+  border-radius: 0;
 }
 
 #-dropside-menu-section input[type="checkbox"] {
@@ -119,9 +121,19 @@
   margin-bottom: 10px;
 }
 
+.side-menu-setting-row code {
+  margin-left: 2px;
+  margin-bottom: 1px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  display: inline-block;
+  right: 2px;
+  border: 1px solid var(--color-border-dark);
+}
+
 .side-menu-setting-label {
   display: table-cell;
-  width: 400px;
+  width: 430px;
   padding-right: 20px;
 }
 

src/AppMenu.vue

@@ -86,7 +86,6 @@ export default {
       orders[app] = order + 1
     })
 
-
     Array.from(window.topMenuApps).forEach((id) => {
       if (ncApps.hasOwnProperty(id)) {
         this.apps[id] = ncApps[id]

src/SideMenu.vue

@@ -82,7 +82,34 @@ export default {
   },
   methods: {
     retrieveApps() {
-      this.apps = loadState('core', 'apps', {})
+      const ncApps = loadState('core', 'apps', {})
+      let orders = {}
+      let finalApps = []
+
+      Array.from(window.topMenuAppsOrder).forEach((app, order) => {
+        orders[app] = order + 1
+      })
+
+      for (let id in ncApps) {
+        if (window.topMenuApps.includes(id) && !window.topSideMenuApps.includes(id)) {
+          continue;
+        }
+
+        let app = ncApps[id]
+        app.order = orders[id] || null
+
+        finalApps.push(app)
+      }
+
+      finalApps.sort((a, b) => {
+        if (a.order === null || b.order === null) {
+          return a.name < b.name ? -1 : 1;
+        }
+
+        return a.order < b.order ? -1 : 1;
+      })
+
+      this.apps = finalApps
 
       document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
         detail: {apps: this.apps},

src/l10n/fixtures/fr.yaml

@@ -49,7 +49,7 @@
 "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"
 "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 du menu large."
+"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"
@@ -89,3 +89,5 @@
 "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"
+"This feature is not compatible with <code>big menu</code> and <code>with categories</code> displays.": "Cette fonctionnalité n'est pas compatible avec les affichages <code>Menu large</code> et <code>Avec les catégories</code>"

templates/settings/admin-form.php

@@ -796,9 +796,7 @@ $labelReset = 'Reset to default';
                     </div>
                 </div>
             </div>
-        </div>
 
-        <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')); ?>
@@ -829,10 +827,22 @@ $labelReset = 'Reset to default';
                     </div>
                 </div>
             </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')); ?>
+                    <br>
+                    <em>
+                        <?php echo $l->t('This feature is not compatible with <code>big menu</code> and <code>with categories</code> displays.'); ?>
+                    </em>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#top-menu-apps-order-list" href="#_">