From eef82ec93d26a703578a0f78e7f3691b5a8e2d07 Mon Sep 17 00:00:00 2001
From: opi <opi@zeropi.net>
Date: Thu, 6 Apr 2017 15:49:57 +0200
Subject: [PATCH] [enh] Display help text from manifest during app
 installation. (#152)

---
 src/css/style.less                  | 13 ++++++-----
 src/js/yunohost/controllers/apps.js | 35 +++++++++++++++++++++--------
 src/views/app/app_install.ms        | 15 +++++++++----
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index 9e1a1300..740c7d87 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -356,14 +356,16 @@ div.br {
     background-position: center top;
 }
 
-.help-block {
-    text-align: right;
+.help-block--link {
+    float: right;
+    margin-left: 2em;
 }
 
-.example-help-block {
-    text-align: left;
-    float: left;
+.help-block--help {
+    margin: 0 0 5px 0;
 }
+.help-block--example {}
+
 .quota-help-block {
     text-align: left;
     line-height: 1.2;
@@ -514,6 +516,7 @@ input[type='radio'].nice-radio {
 /** App install form **/
 .form-app-install {
     .form-group {
+        margin-bottom: 25px;
         label {cursor: pointer;}
     }
     .form-control {
diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index 6f65fa9f..da642162 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -100,6 +100,23 @@
                 data.manifest.arguments.install[k].inputType = 'text';
                 data.manifest.arguments.install[k].required = (typeof v.optional !== 'undefined' && v.optional == "true") ? '' : 'required';
                 data.manifest.arguments.install[k].attributes = "";
+                data.manifest.arguments.install[k].helpText = "";
+                data.manifest.arguments.install[k].helpLink = "";
+
+
+                // Multilingual label
+                data.manifest.arguments.install[k].label = (typeof data.manifest.arguments.install[k].ask[y18n.locale] !== 'undefined') ?
+                                    data.manifest.arguments.install[k].ask[y18n.locale] :
+                                    data.manifest.arguments.install[k].ask['en']
+                                    ;
+
+                // Multilingual help text
+                if (typeof data.manifest.arguments.install[k].help !== 'undefined') {
+                    data.manifest.arguments.install[k].helpText = (typeof data.manifest.arguments.install[k].help[y18n.locale] !== 'undefined') ?
+                                        data.manifest.arguments.install[k].help[y18n.locale] :
+                                        data.manifest.arguments.install[k].help['en']
+                                        ;
+                }
 
                 // Input with choices becomes select list
                 if (typeof data.manifest.arguments.install[k].choices !== 'undefined') {
@@ -132,7 +149,9 @@
                             selected: false
                         });
                     });
-                    data.manifest.arguments.install[k].help = "<a href='#/domains'>"+y18n.t('manage_domains')+"</a>";
+
+                    // Custom help link
+                    data.manifest.arguments.install[k].helpLink += "<a href='#/domains'>"+y18n.t('manage_domains')+"</a>";
                 }
 
                 // Special case for admin / user input.
@@ -146,7 +165,9 @@
                             selected: false
                         });
                     });
-                    data.manifest.arguments.install[k].help = "<a href='#/users'>"+y18n.t('manage_users')+"</a>";
+
+                    // Custom help link
+                    data.manifest.arguments.install[k].helpLink += "<a href='#/users'>"+y18n.t('manage_users')+"</a>";
                 }
 
                 // 'app' type input display a list of available apps
@@ -159,7 +180,9 @@
                             selected: false
                         });
                     });
-                    data.manifest.arguments.install[k].help = "<a href='#/apps'>"+y18n.t('manage_apps')+"</a>";
+
+                    // Custom help link
+                    data.manifest.arguments.install[k].helpLink += "<a href='#/apps'>"+y18n.t('manage_apps')+"</a>";
                 }
 
                 // Boolean fields
@@ -194,12 +217,6 @@
                     data.manifest.arguments.install[k].inputType = 'password';
                 }
 
-
-                // Multilingual label
-                data.manifest.arguments.install[k].label = (typeof data.manifest.arguments.install[k].ask[y18n.locale] !== 'undefined') ?
-                                    data.manifest.arguments.install[k].ask[y18n.locale] :
-                                    data.manifest.arguments.install[k].ask['en']
-                                    ;
             });
         }
 
diff --git a/src/views/app/app_install.ms b/src/views/app/app_install.ms
index ffc0cad8..75ce0c39 100644
--- a/src/views/app/app_install.ms
+++ b/src/views/app/app_install.ms
@@ -40,6 +40,11 @@
         {{#manifest.arguments.install}}
         <div class="form-group">
             <label for="{{name}}" class="col-sm-12">{{label}}</label>
+
+            {{#if helpText}}
+            <span class="help-block help-block--help col-sm-12">{{{helpText}}}</span>
+            {{/if}}
+
             <div class="col-sm-12">
 
                 {{#if choices}}
@@ -50,12 +55,14 @@
                 <input type="{{inputType}}" id="{{name}}" name="{{name}}" class="form-control" value="{{default}}" placeholder="{{example}}" {{required}} {{{attributes}}}>
                 {{/if}}
 
+                {{#if helpLink}}
+                <span class="help-block help-block--link">{{{helpLink}}}</span>
+                {{/if}}
+
                 {{#if example}}
-                <span class="help-block example-help-block">{{t 'form_input_example' example}}</span>
-                {{/if}}
-                {{#if help}}
-                <span class="help-block">{{{help}}}</span>
+                <span class="help-block help-block--example">{{t 'form_input_example' example}}</span>
                 {{/if}}
+
             </div>
         </div>
         {{/manifest.arguments.install}}