enh

src/bower.json

@@ -10,6 +10,7 @@
     "handlebars": "4.0.11",
     "sammy": "0.7.6",
     "js-cookie": "2.1.0",
+    "isotope-layout": "3.0.6",
     "source-sans-pro": "git://github.com/adobe-fonts/source-sans-pro.git#2.020R-ro/1.075R-it",
     "source-code-pro": "git://github.com/adobe-fonts/source-code-pro.git#2.010R-ro/1.030R-it"
   }

src/gulpfile.js

@@ -47,6 +47,7 @@ gulp.task('js', function() {
             'bower_components/sammy/lib/plugins/sammy.json.js',
             'bower_components/sammy/lib/plugins/sammy.storage.js',
             'bower_components/bootstrap/dist/js/bootstrap.js',
+            'bower_components/isotope-layout/dist/isotope.pkgd.js',
             'js/yunohost/y18n.js',
             'js/yunohost/main.js',
             'js/yunohost/helpers.js',

src/js/yunohost/controllers/apps.js

@@ -18,15 +18,41 @@
     });
 
     function levelToColor(level) {
-      if (level > 6) {
+        if (level > 6) {
-        return 'success';
+            return 'success';
-      }
+        }
-      else if (level > 2) {
+        else if (level > 2) {
-        return 'warning';
+            return 'warning';
-      }
+        }
-      else {
+        else if (isNaN(level)) {
-        return 'danger';
+            return 'default';
-      }
+        } else {
+            return 'danger'
+        }
+    }
+
+    function stateToColor(state) {
+        if (state === "working" || state === "validated") {
+            return 'success';
+        }
+        else if (state === "inprogress") {
+            return 'warning';
+        }
+        else {
+            return 'danger';
+        }
+    }
+
+    function combineColors(stateColor, levelColor, installable) {
+        if (stateColor === "dangers" || levelColor === "danger") {
+            return 'danger';
+        }
+        if (stateColor === "warnings" || levelColor === "warnings" || levelColor === "default") {
+            return 'warning';
+        }
+        else {
+            return 'success';
+        }
     }
 
 
@@ -51,15 +77,20 @@
             c.api('/apps?raw', function (dataraw) { // http://api.yunohost.org/#!/app/app_list_get_8
                 var apps = []
                 $.each(data['apps'], function(k, v) {
-                    // Keep only uninstalled apps, or multi-instance apps
+                    // Keep only on instance of each apps
-                    if ((!v['installed'] || dataraw[v['id']].manifest.multi_instance) && !v['id'].match(/__[0-9]{1,5}$/)) {
+                    if (!v['id'].match(/__[0-9]{1,5}$/)) {
                         // Check app source
+                        dataraw[v['id']]['installable'] = (!v['installed'] || dataraw[v['id']].manifest.multi_instance)
                         dataraw[v['id']]['official'] = (dataraw[v['id']]['repository'] === 'yunohost');
-                        dataraw[v['id']]['color'] = levelToColor(dataraw[v['id']]['level']);
+                        levelFormatted = parseInt(dataraw[v['id']]['level']);
+                        dataraw[v['id']]['levelFormatted'] = isNaN(levelFormatted) ? '?' : levelFormatted;
+                        dataraw[v['id']]['levelColor'] = levelToColor(levelFormatted);
+                        dataraw[v['id']]['stateColor'] = stateToColor(dataraw[v['id']]['state']);
+                        dataraw[v['id']]['installColor'] = combineColors(dataraw[v['id']]['stateColor'], dataraw[v['id']]['levelColor']);
                         dataraw[v['id']]['displayLicense'] = (dataraw[v['id']]['manifest']['license'] !== undefined
                                                               && dataraw[v['id']]['manifest']['license'] !== 'free');
                         dataraw[v['id']]['updateDate'] = timeConverter(dataraw[v['id']]['lastUpdate']);
-
+                        dataraw[v['id']]['isSafe'] = (dataraw[v['id']]['installColor'] === 'danger');
 
                         jQuery.extend(dataraw[v['id']], v);
                         apps.push(dataraw[v['id']]);

src/views/app/app_list_install.ms

@@ -21,9 +21,10 @@
         <div class="panel-body">
             <h3>{{name}}</h3>
             <div class="category">
-              <span class="label label-{{color}} label-as-badge">{{level}}</span>
+              <a href="https://yunohost.org/#/packaging_apps_levels_fr"><span class="label label-{{levelColor}} label-as-badge" title="{{t 'app_level'}}">{{levelFormatted}}</span></a>
               {{^official}}<span class="label label-info label-as-badge app-validated">{{t 'community'}}</span>{{/official}}
               {{#official}}<span class="label label-success label-as-badge app-validated">{{t 'official'}}</span>{{/official}}
+              <span class="label label-{{stateColor}} label-as-badge app-validated">{{state}}</span>
               {{#displayLicense}}<span class="label label-default">{{license}}</span>{{/displayLicense}}
             </div>
             <div class="app-card-desc">{{description}}</div>
@@ -38,10 +39,10 @@
                     <i class="fa-globe"></i> Code
                 </a>
                 <a href="{{git.url}}/blob/master/README.md" target="_BLANK" type="button" class="btn btn-default col-sm-4">
-                    <i class="fa-book"></i> Doc
+                    <i class="fa-book"></i> Readme
                 </a>
-                <a href="#/apps/install/{{id}}" type="button" class="btn btn-{{color}} col-sm-4 active">
+                <a href="#/apps/install/{{id}}" type="button" class="btn btn-{{installColor}} col-sm-4 active">
-                    <i class="fa-plus"></i> Install
+                    <i class="fa-plus"></i> Install {{#isSafe}}<i class="fa-warning"></i>{{/isSafe}}
                 </a>
             </div>
     </div>