Merge pull request #242 from eneufeld/feat_layout

Clean-up of layouts and their respective templates.
eclipsesource · Apr 29, 2016 · e3978d5 · e3978d5
2 parents 24c426e + 338b56f
commit e3978d5
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 46 deletions.
diff --git a/src/components/form/form.html b/src/components/form/form.html
@@ -1,8 +1,4 @@
 <div>
     <form role='form' class='jsf-form rounded'>
-<!--
-        <jsonforms-dynamic-widget ng-repeat='child in vm.elements' element='child'>
-        </jsonforms-dynamic-widget>
-    -->
     </form>
 </div>
diff --git a/src/components/renderers/controls/abstract-control.ts b/src/components/renderers/controls/abstract-control.ts
@@ -62,10 +62,6 @@ export abstract class AbstractControl implements IRuleServiceCallBack{
         return stringBuilder;
     }
 
-    protected get size() {
-        return 100;
-    }
-
     protected modelChanged(){
         this.scope.$root.$broadcast('modelChanged');
         //this.scope.$emit('modelChanged');

diff --git a/src/components/renderers/controls/control.html b/src/components/renderers/controls/control.html
@@ -1,10 +1,10 @@
-<div class="col-sm-{{vm.size}} jsf-control form-group top-buffer" ng-hide="vm.hide">
-    <div class="row">
+<div class="jsf-control form-group top-buffer" ng-hide="vm.hide">
+    <div>
         <label ng-if="vm.showLabel" for="{{vm.id}}">{{vm.label}}</label>
     </div>
-    <div class="row" ng-transclude>
+    <div ng-transclude>
     </div>
-    <div class="row">
+    <div>
         <alert ng-repeat="alert in vm.alerts" type="{{alert.type}}" >{{alert.msg}}</alert>
     </div>
 </div>
diff --git a/src/components/renderers/layouts/categories/categorization-directive.ts b/src/components/renderers/layouts/categories/categorization-directive.ts
@@ -7,15 +7,17 @@ class CategorizationDirective implements ng.IDirective {
     //replace= true;
     template = `
     <jsonforms-layout>
-        <tabset>
-            <tab heading="{{category.label}}" ng-repeat="category in vm.uiSchema.elements">
-                <jsonforms-layout>
-                    <fieldset>
-                        <jsonforms-inner ng-repeat="child in category.elements" ui-schema="child"></jsonforms-inner>
-                    </fieldset>
-                </jsonforms-layout>
-            </tab>
-        </tabset>
+        <div class="row">
+            <div class="col-sm-100">
+                <tabset>
+                    <tab heading="{{category.label}}" ng-repeat="category in vm.uiSchema.elements">
+                        <fieldset>
+                            <jsonforms-inner ng-repeat="child in category.elements" ui-schema="child" ></jsonforms-inner>
+                        </fieldset>
+                    </tab>
+                </tabset>
+            </div>
+        </div>
     </jsonforms-layout>`;
     controller = CategorizationController;
     controllerAs = 'vm';
@@ -27,9 +29,6 @@ class CategorizationController  extends AbstractLayout{
     constructor(scope: CategorizationControllerScope) {
         super(scope);
     }
-    private get size(){
-        return 100;
-    }
 }
 var CategorizationLayoutRendererTester: RendererTester = function (element:IUISchemaElement, dataSchema:any, dataObject:any,pathResolver:IPathResolver ){
     if(element.type!='Categorization')

diff --git a/src/components/renderers/layouts/group/group-directive.ts b/src/components/renderers/layouts/group/group-directive.ts
@@ -8,9 +8,9 @@ class GroupDirective implements ng.IDirective {
     //replace= true;
     template = `
     <jsonforms-layout class="jsf-group">
-        <fieldset>
+        <fieldset class="row">
             <legend ng-if="vm.label">{{vm.label}}</legend>
-            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" ui-schema="child"></jsonforms-inner>
+            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" ui-schema="child" class="col-sm-100"></jsonforms-inner>
         </fieldset>
     </jsonforms-layout>`;
     controller = GroupController;
@@ -23,9 +23,6 @@ class GroupController  extends AbstractLayout{
     constructor(scope: GroupControllerScope) {
         super(scope);
     }
-    private get size(){
-        return 100;
-    }
     private get label(){
         return this.uiSchema.label ? this.uiSchema.label : "";
     }

diff --git a/src/components/renderers/layouts/horizontal/horizontal-directive.ts b/src/components/renderers/layouts/horizontal/horizontal-directive.ts
@@ -8,13 +8,11 @@ class HorizontalDirective implements ng.IDirective {
     //replace= true;
     template = `
     <jsonforms-layout class="jsf-horizontal-layout">
-      <fieldset>
-        <div class="row">
+        <fieldset class="row">
             <div ng-repeat="child in vm.uiSchema.elements" class="col-sm-{{vm.childSize}}">
                 <jsonforms-inner ui-schema="child"></jsonforms-inner>
             </div>
-        </div>
-      </fieldset>
+        </fieldset>
     </jsonforms-layout>
     `;
     controller = HorizontalController;

diff --git a/src/components/renderers/layouts/layout.html b/src/components/renderers/layouts/layout.html
@@ -1,2 +1,2 @@
-<div class="col-sm-{{vm.size}}" ng-hide="vm.hide" ng-transclude>
+<div ng-hide="vm.hide" ng-show='vm.uiSchema.elements.length' ng-transclude>
 </div>
diff --git a/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts b/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts
@@ -8,7 +8,7 @@ class MasterDetailDirective implements ng.IDirective {
     restrict = "E";
     //replace= true;
     template = `
-    <div class="row col-sm-100">
+    <div class="row">
         <!-- Master -->
         <div class="col-sm-30 jsf-masterdetail">
             <jsonforms-masterdetail-collection properties="vm.subSchema.properties" instance="vm.data" select="vm.select(child,childSchema)"></jsonforms-masterdetail-collection>

diff --git a/src/components/renderers/layouts/vertical/vertical-directive.ts b/src/components/renderers/layouts/vertical/vertical-directive.ts
@@ -6,11 +6,12 @@ class VerticalDirective implements ng.IDirective {
     restrict = "E";
     //replace= true;
     template = `
-    <div ng-show='vm.uiSchema.elements.length'>
-        <jsonforms-layout class="jsf-vertical-layout">
-            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" ui-schema="child"></jsonforms-inner>
-        </jsonforms-layout>
-    </div>`;
+    <jsonforms-layout class="jsf-vertical-layout">
+        <fieldset class="row">
+            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" ui-schema="child" class="col-sm-100"></jsonforms-inner>
+        </fieldset>
+    </jsonforms-layout>
+    `;
     controller = VerticalController;
     controllerAs = 'vm';
 }
@@ -21,9 +22,6 @@ class VerticalController extends AbstractLayout {
     constructor(scope: VerticalControllerScope) {
         super(scope);
     }
-    private get size(){
-        return 100;
-    }
 }
 var VerticalLayoutRendererTester: RendererTester = function (element:IUISchemaElement, dataSchema:any, dataObject:any,pathResolver:IPathResolver ){
     if(element.type!='VerticalLayout')

diff --git a/src/components/renderers/layouts/vertical/vertical.spec.ts b/src/components/renderers/layouts/vertical/vertical.spec.ts
@@ -30,8 +30,7 @@ describe('VerticalLayout', () => {
         scope.data = { "name": "John Doe "};
         let el = $compile('<jsonforms schema="schema" ui-schema="uiSchema" data="data"/>')(scope);
         scope.$digest();
-        let div = el.find('div');
-        let layout = angular.element(div.children()[0]);
+        let layout = el.find('div');
         expect(layout.hasClass('jsf-vertical-layout')).toBeTruthy();
     }));
-});
+});