[enh] Sort apps alphabeticaly + set app color regarding its name

helpers.lua

@@ -28,6 +28,14 @@ function is_in_table (t, v)
 end
 
 
+-- Get the index of a value in a table
+function index_of(t,val)
+    for k,v in ipairs(t) do 
+        if v == val then return k end
+    end
+end
+
+
 -- Test whether a string starts with another
 function string.starts (String, Start)
    return string.sub(String, 1, string.len(Start)) == Start
@@ -475,6 +483,8 @@ function get_data_for(view)
             app = {}
         }
 
+        local sorted_apps = {}
+
         -- Add user's accessible URLs using the ACLs.
         -- It is typically used to build the app list.
         for url, name in pairs(conf["users"][user]) do
@@ -482,7 +492,9 @@ function get_data_for(view)
             if ngx.var.host == conf["local_portal_domain"] then
                 url = string.gsub(url, conf["original_portal_domain"], conf["local_portal_domain"])
             end
-            table.insert(data["app"], { url = url, name = name })
+            table.insert(sorted_apps, name)
+            table.sort(sorted_apps)
+            table.insert(data["app"], index_of(sorted_apps, name), { url = url, name = name })
         end
     end
 

portal/assets/css/ynh-style.css

@@ -797,7 +797,6 @@ input.btn {
    6 = Colors
    ========================================================================== */
 
-.listing-apps li:nth-child(1) a,
 .bluebg {
     background: #3498DB!important;
 }
@@ -808,7 +807,6 @@ input.btn {
     background: #16527A!important;
 }
 
-.listing-apps li:nth-child(2) a,
 .purplebg {
     background: #9B59B6!important;
 }
@@ -819,7 +817,6 @@ input.btn {
     background: #532C64!important;
 }
 
-.listing-apps li:nth-child(3) a,
 .redbg {
     background: #E74C3C!important;
 }
@@ -830,7 +827,6 @@ input.btn {
     background: #921E12!important;
 }
 
-.listing-apps li:nth-child(4) a,
 .orangebg {
     background: #F39C12!important;
 }
@@ -841,7 +837,6 @@ input.btn {
     background: #7F5006!important;
 }
 
-.listing-apps li:nth-child(5) a,
 .greenbg {
     background: #2ECC71!important;
 }
@@ -852,7 +847,6 @@ input.btn {
     background: #176437!important;
 }
 
-.listing-apps li:nth-child(6) a,
 .darkbluebg {
     background: #34495E!important;
 }
@@ -863,7 +857,6 @@ input.btn {
     background: #07090C!important;
 }
 
-.listing-apps li:nth-child(7) a,
 .lightbluebg {
     background: #6A93D4!important;
 }
@@ -874,7 +867,6 @@ input.btn {
     background: #2B5394!important;
 }
 
-.listing-apps li:nth-child(8) a,
 .yellowbg {
     background: #F1C40F!important;
 }
@@ -886,7 +878,6 @@ input.btn {
 }
 
 
-.listing-apps li:nth-child(9) a,
 .lightpinkbg {
     background: #F76F87!important;
 }

portal/assets/js/global.js

@@ -2,14 +2,17 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Variables
   var liMenu = document.querySelectorAll('#apps a')
-    , colors = ['bluebg','purplebg','redbg','orangebg','greenbg','darkbluebg','lightbluebg','yellowbg','lightpinkbg']
+    , colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg']
     , addMailAlias = document.getElementById('add-mailalias')
     , addMaildrop = document.getElementById('add-maildrop')
   ;
 
   liMenu && [].forEach.call(liMenu, function(el, i) {
+    // Select a color value from the App label
+    randomColorNumber = parseInt(el.textContent, 36) % colors.length;
+    //randomColorNumber = i%colors.length; // Old value
     // Add color class.
-    el.classList.add(colors[i%colors.length]);
+    el.classList.add(colors[randomColorNumber]);
     // Set first-letter data attribute.
     el.querySelector('.first-letter').setAttribute('data-first-letter',el.textContent.substring(0, 2));
   });
@@ -32,4 +35,4 @@ document.addEventListener('DOMContentLoaded', function() {
     addMaildrop.parentNode.insertBefore(inputDropClone, addMaildrop);
   });
 
-});
+});

portal/assets/js/ynhpanel.js

@@ -219,7 +219,7 @@ domReady(function(){
   document.body.insertBefore(overlay, null);
 
   //Color Application
-  var colors = ['bluebg','purplebg','redbg','orangebg','greenbg','darkbluebg','lightbluebg','yellowbg','lightpinkbg'];
+  var colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
 
   // Get user's app
   var r = new XMLHttpRequest();
@@ -245,7 +245,8 @@ domReady(function(){
     // Add application links
     var links = [];
     Array.prototype.forEach.call(response.app, function(app, n){
-      links.push('<li><a class="'+colors[n%colors.length]+' disableAjax" href="//'+app.url+'"><span class="first-letter" data-first-letter="'+ app.name.substr(0,2) +'"></span><span class="name">'+app.name+'</span></a></li>');
+      randomColorNumber = parseInt(app.name, 36) % colors.length;
+      links.push('<li><a class="'+colors[randomColorNumber]+' disableAjax" href="//'+app.url+'"><span class="first-letter" data-first-letter="'+ app.name.substr(0,2) +'"></span><span class="name">'+app.name+'</span></a></li>');
     });
     overlay.innerHTML += '<div id="yuno-apps" class="wrapper apps"><ul class="listing-apps">'+ links.join("\n") +'</ul></div>';