Browse Source

Merge "Rewrite <labeled> directive to render editable labels"

Jenkins 3 years ago
parent
commit
97c5fd246b

+ 1
- 1
extensions/mistral/templates/mistral/create.html View File

@@ -73,7 +73,7 @@
73 73
             <div ng-repeat="row in panel | extractFields | chunks:2 track by $index">
74 74
               <div ng-repeat="(label, field) in row track by field.uid()">
75 75
                 <div ng-if="field.isAtomic()" class="col-xs-6">
76
-                  <labeled label="{$ label $}" for="{$ field.uid() $}">
76
+                  <labeled label="label" for="{$ field.uid() $}">
77 77
                     <typed-field value="field" type="{$ field.getType() $}"></typed-field>
78 78
                   </labeled>
79 79
                 </div>

+ 18
- 11
merlin/static/merlin/js/merlin.directives.js View File

@@ -41,6 +41,7 @@
41 41
      * */
42 42
     .directive('typedField', typedField)
43 43
 
44
+    .directive('editableTitle', editableTitle)
44 45
     .directive('labeled', labeled);
45 46
 
46 47
   function labeled() {
@@ -49,12 +50,27 @@
49 50
       templateUrl: '/static/merlin/templates/labeled.html',
50 51
       transclude: true,
51 52
       scope: {
52
-        label: '@',
53
+        label: '=',
53 54
         for: '@'
54 55
       }
55 56
     };
56 57
   }
57 58
 
59
+  function editableTitle() {
60
+    return {
61
+      restrict: 'E',
62
+      templateUrl: '/static/merlin/templates/title.html',
63
+      scope: {
64
+        ngModel: '='
65
+      },
66
+      link: function(scope) {
67
+        if (angular.isFunction(scope.ngModel)) {
68
+          scope.editable = true;
69
+        }
70
+      }
71
+    };
72
+  }
73
+
58 74
   function editable() {
59 75
     return {
60 76
       restrict: 'E',
@@ -136,12 +152,7 @@
136 152
         panel: '=content'
137 153
       },
138 154
       link: function(scope) {
139
-        if (angular.isDefined(scope.panel)) {
140
-          scope.isCollapsed = false;
141
-          if (angular.isFunction(scope.panel.title)) {
142
-            scope.editable = true;
143
-          }
144
-        }
155
+        scope.isCollapsed = false;
145 156
       }
146 157
     };
147 158
   }
@@ -152,16 +163,12 @@
152 163
       templateUrl: '/static/merlin/templates/collapsible-group.html',
153 164
       transclude: true,
154 165
       scope: {
155
-        group: '=content',
156 166
         title: '=',
157 167
         onAdd: '&',
158 168
         onRemove: '&'
159 169
       },
160 170
       link: function(scope, element, attrs) {
161 171
         scope.isCollapsed = false;
162
-        if (angular.isFunction(scope.title)) {
163
-          scope.editable = true;
164
-        }
165 172
         if ( attrs.onAdd && attrs.additive !== 'false' ) {
166 173
           scope.additive = true;
167 174
         }

+ 1
- 3
merlin/static/merlin/templates/collapsible-group.html View File

@@ -3,9 +3,7 @@
3 3
     <div class="col-xs-10">
4 4
       <h5><a ng-click="isCollapsed = !isCollapsed" class="collapse-entries" href="">
5 5
         <i class="fa" ng-class="isCollapsed ? 'fa-plus-square-o' : 'fa-minus-square-o'"></i></a>
6
-        <editable ng-if="editable" ng-model="title"
7
-                  ng-model-options="{getterSetter: true}"></editable>
8
-        <span ng-if="!editable">{$ ::title $}</span>
6
+        <editable-title ng-model="title"></editable-title>
9 7
       </h5>
10 8
     </div>
11 9
     <div ng-if="additive" class="add-btn col-xs add-entry">

+ 1
- 3
merlin/static/merlin/templates/collapsible-panel.html View File

@@ -3,9 +3,7 @@
3 3
     <h4 class="panel-title">
4 4
       <a ng-click="isCollapsed = !isCollapsed" href="">
5 5
         <i class="fa fa-lg" ng-class="isCollapsed ? 'fa-caret-right' : 'fa-caret-down'"></i></a>
6
-      <editable ng-if="editable" ng-model="panel.title"
7
-                ng-model-options="{getterSetter: true}"></editable>
8
-      <span ng-if="!editable">{$ ::panel.title $}</span>
6
+      <editable-title ng-model="panel.title"></editable-title>
9 7
       <a href="" ng-show="panel.removable" ng-click="panel.remove()">
10 8
         <i class="fa fa-times-circle pull-right"></i></a>
11 9
     </h4>

+ 3
- 8
merlin/static/merlin/templates/fields/dictionary.html View File

@@ -1,10 +1,7 @@
1 1
 <div class="row bottom-xs dictionary">
2 2
   <div ng-class="value.inline ? 'col-xs-10' : 'col-xs-12'">
3 3
     <div ng-repeat="(key, field) in value | extractFields track by field.uid()">
4
-      <div ng-if="field.isAtomic()" class="form-group">
5
-        <label for="{$ field.uid() $}">
6
-          <editable ng-model="field.keyValue" ng-model-options="{getterSetter: true}"></editable>
7
-        </label>
4
+      <labeled ng-if="field.isAtomic()" label="field.keyValue" for="{$ field.uid() $}">
8 5
         <div class="input-group">
9 6
           <typed-field id="{$ field.uid() $}" value="field" type="{$ field.getType() $}"></typed-field>
10 7
         <span class="input-group-btn">
@@ -13,11 +10,9 @@
13 10
           </button>
14 11
         </span>
15 12
         </div>
16
-      </div>
13
+      </labeled>
17 14
       <div ng-if="!field.isAtomic()">
18
-        <collapsible-group ng-if="!field.inline" content="field"
19
-                           class="col-xs-12"
20
-                           title="field.keyValue"
15
+        <collapsible-group ng-if="!field.inline" class="col-xs-12" title="field.keyValue"
21 16
                            on-remove="value.removeItem(field.keyValue())"
22 17
                            additive="{$ field.isAdditive() $}" on-add="field.add()">
23 18
           <typed-field value="field" type="{$ field.getType() $}"></typed-field>

+ 3
- 4
merlin/static/merlin/templates/fields/frozendict.html View File

@@ -2,20 +2,19 @@
2 2
   <div ng-repeat="row in value | extractFields | chunks:2 track by $index">
3 3
     <div ng-repeat="(key, field) in row track by field.uid()">
4 4
       <div ng-if="field.isAtomic()" class="col-xs-6">
5
-        <labeled label="{$ key $}" for="{$ field.uid() $}">
5
+        <labeled label="key" for="{$ field.uid() $}">
6 6
           <typed-field value="field" type="{$ field.getType() $}"></typed-field>
7 7
         </labeled>
8 8
       </div>
9 9
       <div ng-if="!field.isAtomic()">
10
-        <collapsible-group ng-if="!field.inline" class="col-xs-12"
11
-                           content="field" title="key"
10
+        <collapsible-group ng-if="!field.inline" class="col-xs-12" title="key"
12 11
                            additive="{$ field.isAdditive() $}" on-add="field.add()">
13 12
           <div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'">
14 13
             <typed-field value="field" type="{$ field.getType() $}"></typed-field>
15 14
           </div>
16 15
         </collapsible-group>
17 16
         <labeled ng-if="field.inline" class="col-xs-6"
18
-                 label="{$ key $}" for="{$ field.uid() $}">
17
+                 label="key" for="{$ field.uid() $}">
19 18
           <typed-field value="field" type="{$ field.getType() $}"></typed-field>
20 19
         </labeled>
21 20
       </div>

+ 3
- 1
merlin/static/merlin/templates/labeled.html View File

@@ -1,4 +1,6 @@
1 1
 <div class="form-group">
2
-  <label for="{$ for $}">{$ label $}</label>
2
+  <label for="{$ for $}">
3
+    <editable-title ng-model="label"></editable-title>
4
+  </label>
3 5
   <div ng-transclude></div>
4 6
 </div>

+ 3
- 0
merlin/static/merlin/templates/title.html View File

@@ -0,0 +1,3 @@
1
+<editable ng-if="editable" ng-model="ngModel"
2
+          ng-model-options="{getterSetter: true}"></editable>
3
+<span ng-if="!editable">{$ ::ngModel $}</span>

Loading…
Cancel
Save