summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJenkins <jenkins@review.openstack.org>2015-07-30 21:23:29 +0000
committerGerrit Code Review <review@openstack.org>2015-07-30 21:23:29 +0000
commit97c5fd246bb7aba67510147be487afea42f1d49b (patch)
tree6f91924e773243126cfd10566bdc7b54860e5dd4
parentec9b892de46180be56e87f3ead91813925f398f4 (diff)
parent7021718ab206883c2ac507a7c47d937834b13dce (diff)
Merge "Rewrite <labeled> directive to render editable labels"
-rw-r--r--extensions/mistral/templates/mistral/create.html2
-rw-r--r--merlin/static/merlin/js/merlin.directives.js29
-rw-r--r--merlin/static/merlin/templates/collapsible-group.html4
-rw-r--r--merlin/static/merlin/templates/collapsible-panel.html4
-rw-r--r--merlin/static/merlin/templates/fields/dictionary.html11
-rw-r--r--merlin/static/merlin/templates/fields/frozendict.html7
-rw-r--r--merlin/static/merlin/templates/labeled.html4
-rw-r--r--merlin/static/merlin/templates/title.html3
8 files changed, 33 insertions, 31 deletions
diff --git a/extensions/mistral/templates/mistral/create.html b/extensions/mistral/templates/mistral/create.html
index 4ee0011..931f969 100644
--- a/extensions/mistral/templates/mistral/create.html
+++ b/extensions/mistral/templates/mistral/create.html
@@ -73,7 +73,7 @@
73 <div ng-repeat="row in panel | extractFields | chunks:2 track by $index"> 73 <div ng-repeat="row in panel | extractFields | chunks:2 track by $index">
74 <div ng-repeat="(label, field) in row track by field.uid()"> 74 <div ng-repeat="(label, field) in row track by field.uid()">
75 <div ng-if="field.isAtomic()" class="col-xs-6"> 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 <typed-field value="field" type="{$ field.getType() $}"></typed-field> 77 <typed-field value="field" type="{$ field.getType() $}"></typed-field>
78 </labeled> 78 </labeled>
79 </div> 79 </div>
diff --git a/merlin/static/merlin/js/merlin.directives.js b/merlin/static/merlin/js/merlin.directives.js
index ace9c56..fa0e69d 100644
--- a/merlin/static/merlin/js/merlin.directives.js
+++ b/merlin/static/merlin/js/merlin.directives.js
@@ -41,6 +41,7 @@
41 * */ 41 * */
42 .directive('typedField', typedField) 42 .directive('typedField', typedField)
43 43
44 .directive('editableTitle', editableTitle)
44 .directive('labeled', labeled); 45 .directive('labeled', labeled);
45 46
46 function labeled() { 47 function labeled() {
@@ -49,12 +50,27 @@
49 templateUrl: '/static/merlin/templates/labeled.html', 50 templateUrl: '/static/merlin/templates/labeled.html',
50 transclude: true, 51 transclude: true,
51 scope: { 52 scope: {
52 label: '@', 53 label: '=',
53 for: '@' 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 function editable() { 74 function editable() {
59 return { 75 return {
60 restrict: 'E', 76 restrict: 'E',
@@ -136,12 +152,7 @@
136 panel: '=content' 152 panel: '=content'
137 }, 153 },
138 link: function(scope) { 154 link: function(scope) {
139 if (angular.isDefined(scope.panel)) { 155 scope.isCollapsed = false;
140 scope.isCollapsed = false;
141 if (angular.isFunction(scope.panel.title)) {
142 scope.editable = true;
143 }
144 }
145 } 156 }
146 }; 157 };
147 } 158 }
@@ -152,16 +163,12 @@
152 templateUrl: '/static/merlin/templates/collapsible-group.html', 163 templateUrl: '/static/merlin/templates/collapsible-group.html',
153 transclude: true, 164 transclude: true,
154 scope: { 165 scope: {
155 group: '=content',
156 title: '=', 166 title: '=',
157 onAdd: '&', 167 onAdd: '&',
158 onRemove: '&' 168 onRemove: '&'
159 }, 169 },
160 link: function(scope, element, attrs) { 170 link: function(scope, element, attrs) {
161 scope.isCollapsed = false; 171 scope.isCollapsed = false;
162 if (angular.isFunction(scope.title)) {
163 scope.editable = true;
164 }
165 if ( attrs.onAdd && attrs.additive !== 'false' ) { 172 if ( attrs.onAdd && attrs.additive !== 'false' ) {
166 scope.additive = true; 173 scope.additive = true;
167 } 174 }
diff --git a/merlin/static/merlin/templates/collapsible-group.html b/merlin/static/merlin/templates/collapsible-group.html
index b549d9b..a29f3c4 100644
--- a/merlin/static/merlin/templates/collapsible-group.html
+++ b/merlin/static/merlin/templates/collapsible-group.html
@@ -3,9 +3,7 @@
3 <div class="col-xs-10"> 3 <div class="col-xs-10">
4 <h5><a ng-click="isCollapsed = !isCollapsed" class="collapse-entries" href=""> 4 <h5><a ng-click="isCollapsed = !isCollapsed" class="collapse-entries" href="">
5 <i class="fa" ng-class="isCollapsed ? 'fa-plus-square-o' : 'fa-minus-square-o'"></i></a> 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" 6 <editable-title ng-model="title"></editable-title>
7 ng-model-options="{getterSetter: true}"></editable>
8 <span ng-if="!editable">{$ ::title $}</span>
9 </h5> 7 </h5>
10 </div> 8 </div>
11 <div ng-if="additive" class="add-btn col-xs add-entry"> 9 <div ng-if="additive" class="add-btn col-xs add-entry">
diff --git a/merlin/static/merlin/templates/collapsible-panel.html b/merlin/static/merlin/templates/collapsible-panel.html
index e321d6f..b38798e 100644
--- a/merlin/static/merlin/templates/collapsible-panel.html
+++ b/merlin/static/merlin/templates/collapsible-panel.html
@@ -3,9 +3,7 @@
3 <h4 class="panel-title"> 3 <h4 class="panel-title">
4 <a ng-click="isCollapsed = !isCollapsed" href=""> 4 <a ng-click="isCollapsed = !isCollapsed" href="">
5 <i class="fa fa-lg" ng-class="isCollapsed ? 'fa-caret-right' : 'fa-caret-down'"></i></a> 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" 6 <editable-title ng-model="panel.title"></editable-title>
7 ng-model-options="{getterSetter: true}"></editable>
8 <span ng-if="!editable">{$ ::panel.title $}</span>
9 <a href="" ng-show="panel.removable" ng-click="panel.remove()"> 7 <a href="" ng-show="panel.removable" ng-click="panel.remove()">
10 <i class="fa fa-times-circle pull-right"></i></a> 8 <i class="fa fa-times-circle pull-right"></i></a>
11 </h4> 9 </h4>
diff --git a/merlin/static/merlin/templates/fields/dictionary.html b/merlin/static/merlin/templates/fields/dictionary.html
index 33017ac..858d4dc 100644
--- a/merlin/static/merlin/templates/fields/dictionary.html
+++ b/merlin/static/merlin/templates/fields/dictionary.html
@@ -1,10 +1,7 @@
1<div class="row bottom-xs dictionary"> 1<div class="row bottom-xs dictionary">
2 <div ng-class="value.inline ? 'col-xs-10' : 'col-xs-12'"> 2 <div ng-class="value.inline ? 'col-xs-10' : 'col-xs-12'">
3 <div ng-repeat="(key, field) in value | extractFields track by field.uid()"> 3 <div ng-repeat="(key, field) in value | extractFields track by field.uid()">
4 <div ng-if="field.isAtomic()" class="form-group"> 4 <labeled ng-if="field.isAtomic()" label="field.keyValue" for="{$ field.uid() $}">
5 <label for="{$ field.uid() $}">
6 <editable ng-model="field.keyValue" ng-model-options="{getterSetter: true}"></editable>
7 </label>
8 <div class="input-group"> 5 <div class="input-group">
9 <typed-field id="{$ field.uid() $}" value="field" type="{$ field.getType() $}"></typed-field> 6 <typed-field id="{$ field.uid() $}" value="field" type="{$ field.getType() $}"></typed-field>
10 <span class="input-group-btn"> 7 <span class="input-group-btn">
@@ -13,11 +10,9 @@
13 </button> 10 </button>
14 </span> 11 </span>
15 </div> 12 </div>
16 </div> 13 </labeled>
17 <div ng-if="!field.isAtomic()"> 14 <div ng-if="!field.isAtomic()">
18 <collapsible-group ng-if="!field.inline" content="field" 15 <collapsible-group ng-if="!field.inline" class="col-xs-12" title="field.keyValue"
19 class="col-xs-12"
20 title="field.keyValue"
21 on-remove="value.removeItem(field.keyValue())" 16 on-remove="value.removeItem(field.keyValue())"
22 additive="{$ field.isAdditive() $}" on-add="field.add()"> 17 additive="{$ field.isAdditive() $}" on-add="field.add()">
23 <typed-field value="field" type="{$ field.getType() $}"></typed-field> 18 <typed-field value="field" type="{$ field.getType() $}"></typed-field>
diff --git a/merlin/static/merlin/templates/fields/frozendict.html b/merlin/static/merlin/templates/fields/frozendict.html
index 97b4c0f..f4c5264 100644
--- a/merlin/static/merlin/templates/fields/frozendict.html
+++ b/merlin/static/merlin/templates/fields/frozendict.html
@@ -2,20 +2,19 @@
2 <div ng-repeat="row in value | extractFields | chunks:2 track by $index"> 2 <div ng-repeat="row in value | extractFields | chunks:2 track by $index">
3 <div ng-repeat="(key, field) in row track by field.uid()"> 3 <div ng-repeat="(key, field) in row track by field.uid()">
4 <div ng-if="field.isAtomic()" class="col-xs-6"> 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 <typed-field value="field" type="{$ field.getType() $}"></typed-field> 6 <typed-field value="field" type="{$ field.getType() $}"></typed-field>
7 </labeled> 7 </labeled>
8 </div> 8 </div>
9 <div ng-if="!field.isAtomic()"> 9 <div ng-if="!field.isAtomic()">
10 <collapsible-group ng-if="!field.inline" class="col-xs-12" 10 <collapsible-group ng-if="!field.inline" class="col-xs-12" title="key"
11 content="field" title="key"
12 additive="{$ field.isAdditive() $}" on-add="field.add()"> 11 additive="{$ field.isAdditive() $}" on-add="field.add()">
13 <div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'"> 12 <div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'">
14 <typed-field value="field" type="{$ field.getType() $}"></typed-field> 13 <typed-field value="field" type="{$ field.getType() $}"></typed-field>
15 </div> 14 </div>
16 </collapsible-group> 15 </collapsible-group>
17 <labeled ng-if="field.inline" class="col-xs-6" 16 <labeled ng-if="field.inline" class="col-xs-6"
18 label="{$ key $}" for="{$ field.uid() $}"> 17 label="key" for="{$ field.uid() $}">
19 <typed-field value="field" type="{$ field.getType() $}"></typed-field> 18 <typed-field value="field" type="{$ field.getType() $}"></typed-field>
20 </labeled> 19 </labeled>
21 </div> 20 </div>
diff --git a/merlin/static/merlin/templates/labeled.html b/merlin/static/merlin/templates/labeled.html
index f011b06..1920581 100644
--- a/merlin/static/merlin/templates/labeled.html
+++ b/merlin/static/merlin/templates/labeled.html
@@ -1,4 +1,6 @@
1<div class="form-group"> 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 <div ng-transclude></div> 5 <div ng-transclude></div>
4</div> 6</div>
diff --git a/merlin/static/merlin/templates/title.html b/merlin/static/merlin/templates/title.html
new file mode 100644
index 0000000..b5740aa
--- /dev/null
+++ b/merlin/static/merlin/templates/title.html
@@ -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>