Add tab support to forms, example at #/forms/test

hawtio · Apr 4, 2013 · 79c26cc · 79c26cc
1 parent 29c24e1
commit 79c26cc
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 7 deletions.
diff --git a/hawtio-web/src/main/webapp/app/forms/js/simpleFormDirective.ts b/hawtio-web/src/main/webapp/app/forms/js/simpleFormDirective.ts
@@ -27,7 +27,7 @@ module Forms {
     public properties = [];
     public action = '';
 
-    public formclass = 'form-horizontal no-bottom-margin';
+    public formclass = 'hawtio-form form-horizontal no-bottom-margin';
     public controlgroupclass = 'control-group';
     public controlclass = 'controls';
     public labelclass = 'control-label';
@@ -97,6 +97,33 @@ module Forms {
 
       var schema = config.data;
 
+      var tabs = {
+        elements: {},
+        locations: {},
+        use: false
+      };
+
+      if (angular.isDefined(schema.tabs)) {
+        tabs.use = true;
+        tabs['div'] = $('<div class="tabbable hawtio-form-tabs"></div>');
+
+        angular.forEach(schema.tabs, function(value, key) {
+          tabs.elements[key] = $('<div class="tab-pane" title="' + key + '"></div>');
+          tabs['div'].append(tabs.elements[key]);
+          value.forEach(function(val) {
+            tabs.locations[val] = key;
+          });
+        });
+
+        if (!tabs.locations['*']) {
+          tabs.locations['*'] = Object.extended(schema.tabs).keys()[0];
+        }
+      }
+
+      if (!tabs.use) {
+        fieldset.append('<div class="spacer"></div>');
+      }
+
       function addProperty(id, property) {
         // TODO should also support getting inputs from the template cache, maybe
         // for type="template"
@@ -134,14 +161,26 @@ module Forms {
             input.attr('data', configScopeName);
           }
 
-          fieldset.append(input);
+          if (tabs.use) {
+            if (tabs.locations[id]) {
+              tabs.elements[tabs.locations[id]].append(input);
+            } else {
+              tabs.elements[tabs.locations['*']].append(input);
+            }
+          } else {
+            fieldset.append(input);
+          }
         }
       }
 
       angular.forEach(schema.properties, (property, id) => {
         addProperty(id, property);
       });
 
+      if (tabs.use) {
+        fieldset.append(tabs['div']);
+      }
+
       var findFunction = function(scope, func) {
         if (angular.isDefined(scope[func]) && angular.isFunction(scope[func])) {
           return scope;
@@ -179,10 +218,7 @@ module Forms {
 
       fieldset.append('<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;">');
 
-      $(element).append(form);
-
-      // compile the template
-      this.$compile(form)(scope);
+      $(element).append(this.$compile(form)(scope));
     }
 
     private createForm(config) {

diff --git a/hawtio-web/src/main/webapp/app/forms/js/test.ts b/hawtio-web/src/main/webapp/app/forms/js/test.ts
@@ -46,7 +46,12 @@ module Forms {
         // TODO - add more types, above is what I remember from jolokia
       },
       description: 'Show some stuff in a form',
-      type: 'java.lang.String'
+      type: 'java.lang.String',
+      tabs: {
+        'Tab One': ['key', 'value'],
+        'Tab Two': ['*'],
+        'Tab Three': ['booleanArg']
+      }
     };
 
     $scope.config = {

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -981,3 +981,62 @@ input[type="checkbox"].hawtio-checkbox {
   margin-right: auto;
 }
 
+div.hawtio-form-tabs div.tab-content {
+  border: 1px solid #D4D4D4;
+  border-radius: 4px;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  padding-top: 15px;
+  padding: 10px;
+
+}
+
+.hawtio-form fieldset legend {
+  margin-bottom: 0px;
+  border-bottom: none;
+}
+
+.spacer {
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+div.hawtio-form-tabs ul.nav-tabs {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: inherit;
+  background-color: inherit !important;
+  background-image: inherit !important;
+  border-top: none !important;
+  /* border-bottom: 1px solid #D4D4D4 !important; */
+  margin-bottom: 0px !important;
+}
+
+div.hawtio-form-tabs ul.nav-tabs li {
+  border: 1px solid #D4D4D4 !important;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  margin-right: -1px;
+  background-color: inherit;
+  margin-bottom: -1px !important;
+  box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.08) !important;
+}
+
+div.hawtio-form-tabs ul.nav-tabs li.active:first-child {
+  margin-left: 0px;
+}
+
+div.hawtio-form-tabs ul.nav-tabs li.active {
+  margin-right: 1px;
+  margin-left: 2px;
+  border-bottom: 1px solid white !important;
+  background-color: white;
+  box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.1) !important;
+}
+
+div.hawtio-form-tabs ul.nav-tabs li.active a {
+  box-shadow: none !important;
+  text-shadow: none !important;
+  background-color: inherit !important;
+}
+