Bug fixes

- Add: ability to hide edit/remove buttons in basic view;
- Add: hide advanced configurations in a collapsable menu - easier than
toggle Advanced View;
- Fix: Load edited Overview when toggle Views;
- Fix: Variable select box doesn’t have the same textPath width;
- Fix: limit the height of Categories dropdown menu to 200px.
- Fix: dropdownchecklist CSS for white theme

plugins/dynamix.docker.manager/include/CreateDocker.php

@@ -701,6 +701,9 @@ $showAdditionalInfo = '';
   .label-warning{background-color:#f89406;}
   .label-success{background-color:#468847;}
   .label-important{background-color:#b94a48;}
+  .selectVariable{
+    width: 320px;
+  }
 </style>
 <script src="/webGui/javascript/jquery.switchbutton.js"></script>
 <script src="/webGui/javascript/jquery.filetree.js"></script>
@@ -724,9 +727,10 @@ $showAdditionalInfo = '';
     $('.advanced-switch').switchButton({ labels_placement: "left", on_label: 'Advanced View', off_label: 'Basic View'});
     $('.advanced-switch').change(function () {
       var status = $(this).is(':checked');
-      toggleRows('advanced,.hidden', status, 'basic');
-    $("#catSelect").dropdownchecklist("destroy");
-    $("#catSelect").dropdownchecklist({emptyText:'Select categories...', maxDropHeight:150, width:300, explicitClose:'...close'});
+      toggleRows('advanced', status, 'basic');
+      load_contOverview();
+      $("#catSelect").dropdownchecklist("destroy");
+      $("#catSelect").dropdownchecklist({emptyText:'Select categories...', maxDropHeight:200, width:300, explicitClose:'...close'});
     });
   });
 
@@ -766,7 +770,7 @@ $showAdditionalInfo = '';
                                  opts.Buttons,
                                  (opts.Required == "true") ? "required" : ""
                                  );
-    newConfig = "<div id='ConfigNum"+opts.Number+"' class='"+opts.Display+"'>"+newConfig+"</div>";
+    newConfig = "<div id='ConfigNum"+opts.Number+"' class='config_"+Opts.Display+"'' >"+newConfig+"</div>";
     newConfig = $($.parseHTML(newConfig));
     value     = newConfig.find("input[name='confValue[]']");
     if (opts.Type == "Path") {
@@ -775,7 +779,7 @@ $showAdditionalInfo = '';
       value.attr("onclick", "openFileBrowser(this,$(this).val(),'',false,true);")
     } else if (opts.Type == "Variable" && opts.Default.split("|").length > 1) {
       var valueOpts = opts.Default.split("|");
-      var newValue = "<select name='confValue[]' class='textPath' default='"+valueOpts[0]+"'>";
+      var newValue = "<select name='confValue[]' class='selectVariable' default='"+valueOpts[0]+"'>";
       for (var i = 0; i < valueOpts.length; i++) {
         newValue += "<option value='"+valueOpts[i]+"' "+(opts.Value == valueOpts[i] ? "selected" : "")+">"+valueOpts[i]+"</option>";
       }
@@ -902,17 +906,26 @@ $showAdditionalInfo = '';
             Opts[e] = getVal(Element, e);
           });
           Opts.Description = (Opts.Description.length) ? Opts.Description : "Container "+Opts.Type+": "+Opts.Target;
-          if (Opts.Required == "true") {
+          if (Opts.Display == "always-hide" || Opts.Display == "advanced-hide") {
             Opts.Buttons     = "<span class='advanced'><button type='button' onclick='editConfigPopup("+num+")'> Edit</button> ";
             Opts.Buttons    += "<button type='button' onclick='removeConfig("+num+");'> Remove</button></span>";
           } else {
             Opts.Buttons     = "<button type='button' onclick='editConfigPopup("+num+")'> Edit</button> ";
             Opts.Buttons    += "<button type='button' onclick='removeConfig("+num+");'> Remove</button>";
           }
-          Opts.Number      = confNum;
+          Opts.Number      = num;
           newConf = makeConfig(Opts);
-          config.removeClass("always advanced hidden").addClass(Opts.Display);
-          $("#ConfigNum" + num).html(newConf);
+          if (config.hasClass("config_"+Opts.Display)) {
+            config.html(newConf);
+            config.removeClass("config_always config_always-hide config_advanced config_advanced-hide").addClass("config_"+Opts.Display);
+          } else {
+            config.remove();
+            if (Opts.Display == 'advanced' || Opts.Display == 'advanced-hide') {
+              $("#configLocationAdvanced").append(newConf);
+            } else {
+              $("#configLocation").append(newConf);
+            }            
+          }
           reloadTriggers();
         },
         Cancel: function() {
@@ -1282,6 +1295,13 @@ $showAdditionalInfo = '';
       </tr>
     </table>
     <div id="configLocation"></div>
+    <table>
+      <tr>
+        <td>&nbsp;</td>
+        <td id="readmore_toggle" class="readmore_collapsed"><a onclick="toggleReadmore();" style="font-size: 1.2em;cursor: pointer;"><i class="fa fa-chevron-down"></i> Show advanced settings ...</a></td>
+      </tr>
+    </table>
+    <div id="configLocationAdvanced" style="display:none"></div>
     <table>
       <tr>
         <td>&nbsp;</td>
@@ -1346,8 +1366,9 @@ $showAdditionalInfo = '';
       <dd>
         <select name="Display" class="narrow">
           <option value="always" selected>Always</option>
+          <option value="always-hide">Always - Hide Edit Buttons</option>
           <option value="advanced">Advanced</option>
-          <option value="hidden">Hidden</option>
+          <option value="advanced-hide">Advanced - Hide Edit Buttons</option>
         </select>
       </dd>
       <dt>Required:</dt>
@@ -1409,9 +1430,25 @@ $showAdditionalInfo = '';
   function reloadTriggers() {
     $(".basic").toggle(!$(".advanced-switch:first").is(":checked"));
     $(".advanced").toggle($(".advanced-switch:first").is(":checked"));
-    $(".hidden").toggle($(".advanced-switch:first").is(":checked"));
     $(".numbersOnly").keypress(function(e){if(e.which != 45 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)){return false;}});
   }
+  function toggleReadmore() {
+    var readm = $('#readmore_toggle');
+    if ( readm.hasClass('readmore_collapsed') ) {
+      readm.removeClass('readmore_collapsed').addClass('readmore_expanded');
+      $('#configLocationAdvanced').slideDown('fast');
+      readm.find('a').html('<i class="fa fa-chevron-up"></i> Hide advanced settings ...');
+    } else {
+      $('#configLocationAdvanced').slideUp('fast');
+      readm.removeClass('readmore_expanded').addClass('readmore_collapsed');
+      readm.find('a').html('<i class="fa fa-chevron-down"></i> Show advanced settings ...');
+    }
+  }
+  function load_contOverview() {
+    var new_overview = $("textarea[name='contOverview']").val();
+    new_overview = new_overview.replaceAll("[","<").replaceAll("]",">");
+    $("div[name='contDescription']").html(new_overview);
+  }
   $(function() {
     // Load container info on page load
     if (typeof Settings != 'undefined') {
@@ -1447,7 +1484,7 @@ $showAdditionalInfo = '';
         confNum += 1;
         Opts             = Settings.Config[i];
         Opts.Description = (Opts.Description.length) ? Opts.Description : "Container "+Opts.Type+": "+Opts.Target;
-        if (Opts.Required == "true") {
+        if (Opts.Display == "always-hide" || Opts.Display == "advanced-hide") {
           Opts.Buttons     = "<span class='advanced'><button type='button' onclick='editConfigPopup("+confNum+")'> Edit</button> ";
           Opts.Buttons    += "<button type='button' onclick='removeConfig("+confNum+");'> Remove</button></span>";
         } else {
@@ -1456,8 +1493,11 @@ $showAdditionalInfo = '';
         }
         Opts.Number      = confNum;
         newConf = makeConfig(Opts);
-        $("#configLocation").append(newConf);
-        reloadTriggers();
+        if (Opts.Display == 'advanced' || Opts.Display == 'advanced-hide') {
+          $("#configLocationAdvanced").append(newConf);
+        } else {
+          $("#configLocation").append(newConf);
+        }
       }
     } else {
       $('#canvas').find('#Overview:first').hide();

plugins/dynamix.docker.manager/styles/style-white.css

@@ -0,0 +1,50 @@
+.ui-dropdownchecklist .ui-state-default {
+  background:-webkit-radial-gradient(#F4F4F4,#FCFCFC);
+  background:linear-gradient(#F4F4F4,#FCFCFC);
+  border:none;
+  box-shadow:0 2px 0 #E0E0E0,inset 0 -1px #FFFFFF;
+  border-radius:4px;
+  outline:none;
+  cursor:pointer;
+  height:22px;
+  line-height:22px;
+}
+.ui-dropdownchecklist-group {
+  font-weight:normal;
+  font-style:italic;
+  padding:1px 9px 1px 8px;
+}
+.ui-dropdownchecklist-selector {
+  border:1px solid #E0E0E0;
+  display:inline-block;
+  cursor:pointer;
+  padding:1px 9px 1px 8px;
+}
+.ui-dropdownchecklist-selector-wrapper {
+  vertical-align:middle;
+  font-size:0;
+}
+.ui-state-active {
+  background:linear-gradient(#E8E8E8,#F8F8F8);
+  background:-webkit-radial-gradient(#E8E8E8,#F8F8F8);
+}
+.ui-dropdownchecklist-dropcontainer {
+  background:#FFFFFF;
+  border:1px solid #E0E0E0;
+}
+.ui-state-disabled {
+  background:linear-gradient(#F0F0F0,#F8F8F8);
+  background:-webkit-radial-gradient(#F0F0F0,#F8F8F8);
+}
+.ui-dropdownchecklist-indent {
+  padding-left:7px;
+}
+.ui-dropdownchecklist-text {
+  color:#303030;
+  font-size:11px;
+}
+.ui-dropdownchecklist .ui-widget-content .ui-state-default {
+  background:#FFFFFF;
+  border:0px;
+}
+