Using chips for adding/viewing contact categories

This commit is contained in:
Ludovic Marcotte
2015-06-12 11:47:50 -04:00
committed by Francis Lachapelle
parent 8557b2a161
commit a166d1b4cf
5 changed files with 40 additions and 37 deletions
@@ -6,9 +6,7 @@
<div class="editor md-padding">
<hgroup class="header">
<h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-display-2-subheader">{{card.$description()}}
<span ng-repeat="category in card.categories">{{category.value}}</span>
</h6>
<h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
</hgroup>
<!-- contact editor -->
@@ -120,29 +118,20 @@
</md-input-container>
<!-- categories -->
<div class="attr" ng-repeat="category in card.categories">
<div layout="row" layout-align="center end">
<md-input-container>
<label class="pseudo-input-label">
<var:string label:value="Category"/>
</label>
<input type="text" ng-model="category.value"
sg-focus-on="category_{{$index}}"/>
<!--typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
</md-input-container>
<md-button class="iconButton" ng-click="card.$delete('categories', $index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
</md-button>
</div>
</div>
<!-- New category button-group -->
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="addCategory()">
<i class="md-icon-add"><!-- new --></i>
</md-button>
<label class="button-label">
<var:string label:value="New Category"/>
</label>
<div class="pseudo-input-container">
<md-chips ng-model="card.categories">
<md-chip-template>
{{$chip.value}}
</md-chip-template>
<md-autocomplete
md-selected-item="categories.selected"
md-selected-item-change="card.$addCategory(category)"
md-search-text="categories.searchText"
md-items="category in card.constructor.filterCategories(categories.searchText)"
label:placeholder="Add a category">
<span md-highlight-text="categories.searchText">{{category}}</span>
</md-autocomplete>
</md-chips>
</div>
<!-- phones -->
@@ -287,7 +276,6 @@
<textarea ng-model="card.note"><!-- note --></textarea>
</md-input-container>
<div class="fieldset md-layout-margin" layout="row" layout-align="end center">
<md-button type="button" ng-click="cancel()">
<var:string label:value="Cancel"/>
@@ -17,9 +17,13 @@
</div>
<div class="msg-header-content">
<h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-display-2-subheader">{{card.$description()}}
<span class="label radius" ng-repeat="category in card.categories">{{category.value}}</span>
</h6>
<h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
<md-chips ng-model="card.categories"
readonly="true">
<md-chip-template>
{{$chip.value}}
</md-chip-template>
</md-chips>
</div>
<div class="sg-icon-bar--vertical">
<md-button class="iconButton" aria-label="Edit" ng-show="currentFolder.isEditable" ui-sref="app.addressbook.card.editor({addressbookId: currentFolder.id, cardId: card.id})">