add toggle for advanced settings

domain-server/resources/describe-settings.json

@@ -16,8 +16,8 @@
     ]
   },
   {
-    "name": "basic",
-    "label": "Basic",
+    "name": "security",
+    "label": "Security",
     "settings": [
       {
         "name": "http-username",

domain-server/resources/web/css/style.css

@@ -52,12 +52,16 @@ span.port {
   color: red;
 }
 
+.advanced-setting {
+  display: none;
+}
+
 #setup-sidebar.affix {
   position: fixed;
   top: 15px;
 }
 
-#save-button {
+#setup-sidebar button {
   width: 100%;
   margin-top: 10px;
 }

domain-server/resources/web/js/settings.js

@@ -1,10 +1,12 @@
-var Settings = {};
+var Settings = {
+  showAdvanced: false
+};
 
 var viewHelpers = {
-  getFormGroup: function(groupName, setting, values){
+  getFormGroup: function(groupName, setting, values, isAdvanced) {
     setting_id = groupName + "_" + setting.name
     
-    form_group = "<div class='form-group'>"
+    form_group = "<div class='form-group" + (isAdvanced ? " advanced-setting" : "") + "'>"
     
     if (_.has(values, groupName) && _.has(values[groupName], setting.name)) {
       setting_value = values[groupName][setting.name] 
@@ -63,18 +65,31 @@ $(document).ready(function(){
     $(this).attr('data-changed', true)
     
     badgeSidebarForDifferences($(this))
-  });
+  })
   
+  $('#advanced-toggle-button').click(function(){
+    Settings.showAdvanced = !Settings.showAdvanced
+    var advancedSelector = $('.advanced-setting') 
+    
+    if (Settings.showAdvanced) {
+      advancedSelector.show()
+      $(this).html("Hide advanced")
+    } else {
+      advancedSelector.hide()
+      $(this).html("Show advanced")
+    }
+  })
+
   var panelsSource = $('#panels-template').html()
   Settings.panelsTemplate = _.template(panelsSource)
   
   var sidebarTemplate = $('#list-group-template').html()
   Settings.sidebarTemplate = _.template(sidebarTemplate)
   
-  $('body').scrollspy({ target: '#setup-sidebar', offset: 60 })
+  $('body').scrollspy({ target: '#setup-sidebar', offset: 75 })
   
   reloadSettings()
-});
+})
 
 function reloadSettings() {
   $.getJSON('/settings.json', function(data){

domain-server/resources/web/settings/index.shtml

@@ -21,6 +21,7 @@
       <ul class="nav nav-pills nav-stacked">
       </ul>
       
+      <button id="advanced-toggle-button" class="btn btn-info">Show advanced</button>
       <button id="save-button" class="btn btn-success">Save and restart</button>
     </div>
   </div>
@@ -37,10 +38,10 @@
             <div class="panel-body">
               <% split_settings = _.partition(group.settings, function(value, index) { return !value.advanced }) %>
               <% _.each(split_settings[0], function(setting) { %>
-                <%= getFormGroup(group.name, setting, values) %>
+                <%= getFormGroup(group.name, setting, values, false) %>
               <% }); %>
               <% _.each(split_settings[1], function(setting) { %>
-                <%= getFormGroup(group.name, setting, values) %>
+                <%= getFormGroup(group.name, setting, values, true) %>
               <% }); %>
             </div>
           </div>