Skip to content

Commit

Permalink
#1670 Review the UX of the taxonomy tags selection dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@nadouani
nadouani committed Feb 25, 2021
1 parent 066625c commit cadc641
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 44 deletions.
33 changes: 25 additions & 8 deletions frontend/app/scripts/controllers/misc/TaxonomySelectionModalCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,43 @@
var self = this;

this.taxonomies = angular.copy(taxonomies);
this.selectedTags = [];

this.formData = {
selectedTaxonomy: null,
selectedTags: null
selectedTags: []
};

this.addSelectedTags = function() {
if (!self.formData.selectedTaxonomy) {
return;
this.selectTaxonomy = function(taxonomy) {
self.formData.selectedTaxonomy = taxonomy;
}

this.selectTag = function(tag) {
tag.selected = !!!tag.selected;

if(tag.selected === true) {
// Add to selection
self.formData.selectedTags.push(tag);
} else {
// Remove from selection
self.formData.selectedTags = _.without(self.formData.selectedTags, tag);
}
}

var selection = _.filter(self.formData.selectedTaxonomy.tags, function(tag) {
return tag.selected;
this.clearSelection = function() {
_.each(self.formData.selectedTags, function(tag) {
tag.selected = false;
});

if (selection.length === 0) {
self.formData.selectedTags = [];
}

this.addSelectedTags = function() {
if (!self.formData.selectedTaxonomy || self.formData.selectedTags.length === 0) {
return;
}

$uibModalInstance.close(selection);
$uibModalInstance.close(self.formData.selectedTags);
};

this.cancel = function() {
Expand Down
4 changes: 4 additions & 0 deletions frontend/app/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,10 @@ pre.clearpre {
font-weight: normal !important;
}

.list-group-item .label.label-lg {
font-size: 12px !important;
}

.progress.progress-bar-sm {
height: 10px;
}
Expand Down
91 changes: 55 additions & 36 deletions frontend/app/views/partials/misc/taxonomy-selection.modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,70 @@
<h3 class="modal-title">Select tags from library</h3>
</div>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error' : tagsForm.taxonomy.$invalid && !tagsForm.taxonomy.$pristine }">
<label>
Taxonomy
<i class="fa fa-asterisk text-danger"></i>
</label>
<select class="form-control" name="taxonomy" ng-model="$modal.formData.selectedTaxonomy"
ng-options="taxonomy as taxonomy.namespace for taxonomy in $modal.taxonomies" required>
<option value="" disabled selected>-- Select Taxonomy --</option>
</select>
<p class="help-block" ng-show="$modal.formData.selectedTaxonomy">{{$modal.formData.selectedTaxonomy.description}}</p>
<p class="help-block" ng-show="tagsForm.taxonomy.$invalid && !tagsForm.taxonomy.$pristine">This field is required.</p>

<div class="mb-xs">
<div class="clearfix">
<label>
Selected tags ({{$modal.formData.selectedTags.length}})
</label>
<a class="pull-right" href ng-click="$modal.clearSelection()">Clear selection</a>
</div>

<div class="empty-message" ng-if="$modal.formData.selectedTags.length === 0">No tags selected</div>

<div ng-if="$modal.formData.selectedTags.length > 0">
<div class="empty-message">
<div class="tags-list flexwrap">
<tag-item ng-repeat="tag in $modal.formData.selectedTags track by $index"
value="tag" class="clickable" ng-click="$modal.selectTag(tag)"></tag-item>
</div>
</div>
<p class="help-block">Click on a tag to unselect it</p>
</div>
</div>

<div class="form-group" ng-class="{ 'has-error' : tagsForm.tags.$invalid && !tagsForm.tags.$pristine }" ng-if="$modal.formData.selectedTaxonomy">
<div class="mv-xxs" ng-if="!$modal.formData.selectedTaxonomy">
<label>
Tags
<i class="fa fa-asterisk text-danger"></i>
Choose taxonomy
</label>
<div class="list-group">
<a href class="list-group-item" ng-repeat="taxonomy in $modal.taxonomies"
ng-click="$modal.selectTaxonomy(taxonomy)" class="clearfix">
<span class="badge" uib-tooltip="{{taxonomy.description}}" tooltip-placement="left" tooltip-append-to-body="true"><i class="fa fa-question"></i></span>
<span>{{taxonomy.namespace}} </span>
<small class="pull-right mr-m"><em class="text-muted">({{taxonomy.tags.length || 0}} tags)</em></small>
</a>
</div>
</div>

<div class="form-group" ng-if="$modal.formData.selectedTaxonomy">
<div class="clearfix">
<label>
Choose tags from taxonomy: {{$modal.formData.selectedTaxonomy.namespace}}
</label>
<a class="pull-right" href ng-click="$modal.formData.selectedTaxonomy = undefined">Show all taxonomies</a>
</div>

<div>
<table class="table table-striped">
<tbody>
<tr ng-repeat="tag in $modal.formData.selectedTaxonomy.tags">
<td>
<div class="checkbox mv-0">
<label class="center-block">
<input type="checkbox" ng-model="tag.selected">
<span class="label">
<tag value="tag"></tag>
</span>
</label>
</div>
</td>
<td width="10">
<span ng-if="::tag.description" uib-tooltip="{{::tag.description}}" tooltip-placement="left">
<i class="fa fa-question-circle"></i>
</span>
</td>
</tr>
</tbody>
</table>
<div class="list-group">
<a href class="list-group-item" ng-repeat="tag in $modal.formData.selectedTaxonomy.tags | orderBy:'predicate' | orderBy:'value'"
ng-click="$modal.selectTag(tag)">
<span class="mr-xs" ng-class="{'text-primary': !!tag.selected, 'text-disabled': !!!tag.selected}">
<i class="fa fa-check"></i>
</span>

<span class="badge" ng-if="::tag.description" uib-tooltip="{{::tag.description}}" tooltip-placement="left" tooltip-append-to-body="true">
<i class="fa fa-question"></i>
</span>

<tag value="tag"></tag>
</a>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default pull-left" type="button" ng-click="$modal.cancel()">Cancel</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="tagsForm.$invalid">Add Selected tags</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="$modal.formData.selectedTags === 0">Add Selected tags</button>
</div>
</form>

0 comments on commit cadc641

Please sign in to comment.