Style Instance Groups tags to appear like Labels

This commit is contained in:
Marliana Lara 2017-06-15 16:02:54 -04:00
parent 8c756c49b2
commit 850df5c646
3 changed files with 20 additions and 5 deletions

View File

@ -4,7 +4,12 @@ export default ['$scope',
$scope.instanceGroupsTags = [];
$scope.$watch('instanceGroups', function() {
$scope.instanceGroupsTags = _.map($scope.instanceGroups, (item) => item.name);
$scope.instanceGroupsTags = $scope.instanceGroups;
}, true);
$scope.deleteTag = function(tag){
_.remove($scope.instanceGroups, {id: tag.id});
console.log($scope.instanceGroups);
}
}
];

View File

@ -0,0 +1,4 @@
#InstanceGroups {
display: flex;
padding: 0 12px;
}

View File

@ -4,9 +4,15 @@
<i class="fa fa-search"></i>
</button>
</span>
<span class="form-control Form-textInput Form-textInput--variableHeight input-medium lookup" style="padding: 4px 6px;">
<span class="LabelList-tag" ng-repeat="tag in instanceGroupsTags">
<span class="LabelList-name">{{ tag }}</span>
</span>
<span id="InstanceGroups" class="form-control Form-textInput Form-textInput--variableHeight input-medium lookup">
<div class="LabelList-tagContainer" ng-repeat="tag in instanceGroupsTags">
<div class="LabelList-deleteContainer"
ng-click="deleteTag(tag)">
<i class="fa fa-times LabelList-tagDelete"></i>
</div>
<div class="LabelList-tag LabelList-tag--deletable">
<span class="LabelList-name">{{ tag.name }}</span>
</div>
</div>
</span>
</div>