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

This commit is contained in:
Jenkins 2015-07-30 21:23:29 +00:00 committed by Gerrit Code Review
commit 97c5fd246b
8 changed files with 33 additions and 31 deletions

View File

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

View File

@ -41,6 +41,7 @@
* */
.directive('typedField', typedField)
.directive('editableTitle', editableTitle)
.directive('labeled', labeled);
function labeled() {
@ -49,12 +50,27 @@
templateUrl: '/static/merlin/templates/labeled.html',
transclude: true,
scope: {
label: '@',
label: '=',
for: '@'
}
};
}
function editableTitle() {
return {
restrict: 'E',
templateUrl: '/static/merlin/templates/title.html',
scope: {
ngModel: '='
},
link: function(scope) {
if (angular.isFunction(scope.ngModel)) {
scope.editable = true;
}
}
};
}
function editable() {
return {
restrict: 'E',
@ -136,12 +152,7 @@
panel: '=content'
},
link: function(scope) {
if (angular.isDefined(scope.panel)) {
scope.isCollapsed = false;
if (angular.isFunction(scope.panel.title)) {
scope.editable = true;
}
}
scope.isCollapsed = false;
}
};
}
@ -152,16 +163,12 @@
templateUrl: '/static/merlin/templates/collapsible-group.html',
transclude: true,
scope: {
group: '=content',
title: '=',
onAdd: '&',
onRemove: '&'
},
link: function(scope, element, attrs) {
scope.isCollapsed = false;
if (angular.isFunction(scope.title)) {
scope.editable = true;
}
if ( attrs.onAdd && attrs.additive !== 'false' ) {
scope.additive = true;
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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