From 8fba7e10dd9ee224a6fc184bbbee9113a7825261 Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Mon, 27 Jul 2020 17:29:57 +0200
Subject: [PATCH] M #~: Fix memory input size (#119)

(cherry picked from commit 111d20ae0a0e85d48834e4d67baa8759d33f8dee)
---
 .../wizard-tabs/general/capacity-inputs.js    |  6 ++--
 .../form-panels/instantiate/templateRow.hbs   |  6 ++--
 .../public/app/utils/range-slider/html.hbs    |  4 +--
 src/sunstone/public/app/utils/user-inputs.js  | 30 +++++++++++--------
 src/sunstone/public/scss/app.scss             | 14 +++++++++
 5 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
index 6bd308a6d4..62b9feaaea 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
@@ -223,9 +223,9 @@ define(function(require) {
     if (attr.type != "range"){
       $("div.memory_input_wrapper", context).addClass("large-6").addClass("medium-8");
     }
-
-    attr.visor = true;
-    UserInputs.insertAttributeInputMB(attr, $("div.memory_input", context));
+    
+    attr.visor = attr.type === "number";
+    UserInputs.insertAttributeInputMB(attr, $("div.memory_input", context), false);
 
     if (Config.isFeatureEnabled("instantiate_hide_cpu")){
       $(".vcpu_input input", context).prop("required", true);
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/templateRow.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/templateRow.hbs
index 8a0d6d5d4e..21e1a0f00b 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/templateRow.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/templateRow.hbs
@@ -24,12 +24,12 @@
 </h6>
 <div class="template-row" element-id="{{element.ID}}">
   <div class="row">
-    <div class="medium-2 small-12 columns">
+    <div class="large-2 small-12 columns">
       <span>
         <img src="{{element.TEMPLATE.LOGO}}">
       </span>
     </div>
-    <div class="medium-5 small-12 columns capacityContext{{element.ID}}" style="padding-top: 15px; padding-left: 35px">
+    <div class="large-5 medium-6 small-12 columns capacityContext{{element.ID}}" style="padding-top: 15px; padding-left: 35px">
       <fieldset>
         <legend>
           <i class="fas fa-laptop"></i> {{tr "Capacity"}}
@@ -43,7 +43,7 @@
         </div>
       </fieldset>
     </div>
-    <div class="medium-5 small-12 columns disksContext{{element.ID}}" style="padding-top: 15px"></div>
+    <div class="large-5 medium-6 small-12 columns disksContext{{element.ID}}" style="padding-top: 15px"></div>
   </div>
   <div class="row">
     <div class="medium-5 small-12 columns template_user_inputs{{element.ID}}"></div>
diff --git a/src/sunstone/public/app/utils/range-slider/html.hbs b/src/sunstone/public/app/utils/range-slider/html.hbs
index 8973fe2481..a7eea6e077 100644
--- a/src/sunstone/public/app/utils/range-slider/html.hbs
+++ b/src/sunstone/public/app/utils/range-slider/html.hbs
@@ -21,7 +21,7 @@
     <label for="input-{{sliderId}}">{{label}}</label>
   </div>
   {{/if}}
-  <div class="large-8 small-6 columns">
+  <div class="medium-6 small-7 columns">
     <input id="input-{{sliderId}}" type="range" class="uinput-slider"
       min="{{min}}" max="{{max}}" step="{{step}}"
       value="{{initial}}"
@@ -33,7 +33,7 @@
     {{/each}}
     </datalist>
   </div>
-  <div class="large-4 small-6 columns">
+  <div class="medium-6 small-5 columns">
     <input type="number" class="uinput-slider-val hide"
       min="{{min}}" max="{{max_value}}"
       value="{{initial}}"
diff --git a/src/sunstone/public/app/utils/user-inputs.js b/src/sunstone/public/app/utils/user-inputs.js
index ed65241d25..2feb6592b3 100644
--- a/src/sunstone/public/app/utils/user-inputs.js
+++ b/src/sunstone/public/app/utils/user-inputs.js
@@ -712,28 +712,32 @@ define(function(require) {
    * @param  {object} attr structure as returned by parse
    * @param  {jQuery} div jQuery selector for the div to attach the html to
    */
-  function _insertAttributeInputMB(attr, div) {
+  function _insertAttributeInputMB(attr, div, inputUnit = true) {
     // Modified input for GB
     var attr_gb = $.extend({}, attr);
     if (attr.type == "range"){
       attr.tick_size = 1024;
     }
+
+    var selectInput = inputUnit
+      ? "<div class=\"input-group-button\">"+
+        "<select class=\"mb_input_unit\">" +
+          "<option value=\"MB\">"+Locale.tr("MB")+"</option>" +
+          "<option value=\"GB\">"+Locale.tr("GB")+"</option>" +
+          "<option value=\"TB\">"+Locale.tr("TB")+"</option>" +
+        "</select>" +
+      "</div>" : "<span style='margin-left:0.5rem'>MB</span>";
+
     div.html(
-      "<div class=\"input-group mb_input_wrapper\">"+
+      "<div class=\"input-group mb_input_wrapper\"" +
+        (!inputUnit && " style='display:flex;align-items:center;'") + ">"+
         "<div class=\"mb_input input-group-field\">" +
           _attributeInput(attr) +
-        "</div><div class=\"input-group-button\">"+
-          "<select class=\"mb_input_unit\">" +
-            "<option value=\"MB\">"+Locale.tr("MB")+"</option>" +
-            "<option value=\"GB\">"+Locale.tr("GB")+"</option>" +
-            "<option value=\"TB\">"+Locale.tr("TB")+"</option>" +
-          "</select>" +
-        "</div>"+
-      "</div>");
-    _setupAttributeInputMB(div);
+        "</div>" + selectInput + "</div>");
+    _setupAttributeInputMB(div, inputUnit);
   }
 
-  function _setupAttributeInputMB(context) {
+  function _setupAttributeInputMB(context, inputUnit) {
     var base = 1024;
     var baseCal = 1;
     var unit = "MB";
@@ -765,7 +769,7 @@ define(function(require) {
         $("input, select", contextElement).val(valueInMB);
         valueInUnit = valueInMB / baseCal;
       }
-      $("input.visor", contextElement).val(valueInUnit);
+      $("input.visor", contextElement).val(inputUnit ? valueInUnit : valueInMB);
       var contextUnit = contextElement.siblings(".input-group-button");
       $(".mb_input_unit", contextUnit).val(unit).trigger("change");
     }
diff --git a/src/sunstone/public/scss/app.scss b/src/sunstone/public/scss/app.scss
index fd37a3c44e..7c45b94b09 100644
--- a/src/sunstone/public/scss/app.scss
+++ b/src/sunstone/public/scss/app.scss
@@ -234,10 +234,24 @@ meter {
   color: $alert-color;
 }
 
+.memory_input .mb_input_wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.mb_input {
+  width: 100%;
+}
+
 .mb_input_unit {
   width: 4em;
 }
 
+span.mb_input_unit {
+  width: auto;
+  margin-left: 0.5em;
+}
+
 .superHide{
   display: none !important;
 }