nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-542 Add description for filtering type icons

This commit is contained in:
Martin Rojas Miguel Angel 2018-06-18 13:03:23 +02:00 committed by Holger Hagen
parent 6b55fd5dff
commit 73d1f33e9f
12 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/app/administration/classification/master/list/classification-list.component.html
View File

@ -17,11 +17,11 @@
<taskana-icon-type [type]="selectedCategory" class="vertical-align"></taskana-icon-type>
</button>
<ul class="dropdown-menu dropdown-menu-classification" role="menu">
<li *ngFor="let categories of allCategories | mapValues">
<button type="button" (click)="selectCategory(categories.key);" class="btn btn-default btn-classification-list" data-toggle="tooltip"
<li>
<a *ngFor="let categories of allCategories | mapValues" type="button" (click)="selectCategory(categories.key);" data-toggle="tooltip"
[title]="categories.value">
<taskana-icon-type class="vertical-align" [type]='categories.key'></taskana-icon-type>
</button>
<taskana-icon-type class="vertical-align" [type]='categories.key' [text]="categories.value"></taskana-icon-type>
</a>
</li>
</ul>
</div>
@ -35,7 +35,7 @@
[selectNodeId]="selectedId" [filterText]="inputValue" [filterIcon]="selectedCategory" (selectNodeIdChanged)="selectClassification($event)"></taskana-tree>
<ng-template #empty_classifications>
<div class="col-xs-12 container-no-items center-block">
<h3 class="grey">There are no classifications</h3>
<h3 class="grey">There are no classifications</h3>
<svg-icon class="img-responsive empty-icon" src="./assets/icons/classification-empty.svg"></svg-icon>
</div>
</ng-template>

4
web/src/app/administration/classification/master/list/classification-list.component.scss
View File

@ -31,7 +31,3 @@ input.filter-input {
margin-left: 15px;
min-width: 0px;
}
.btn-classification-list {
border: 0px solid transparent;
}

2
web/src/app/administration/classification/master/list/classification-list.component.ts
View File

@ -24,7 +24,7 @@ export class ClassificationListComponent implements OnInit, OnDestroy {
initialized = false;
inputValue: string;
allCategories: Map<string, string> = new Map([['', 'None'], ['EXTERNAL', 'External'],
allCategories: Map<string, string> = new Map([['ALL', 'All'], ['EXTERNAL', 'External'],
['AUTOMATIC', 'Automatic'], ['MANUAL', 'manual'], ['CLOSED', 'closed']]);
classifications: Array<Classification> = [];

12
web/src/app/administration/components/filter/filter.component.html
View File

@ -1,17 +1,17 @@
<div id="{{target}}" class="list-group-search">
<div class="row">
<div class="dropdown col-xs-2">
<button class="btn btn-default" data-toggle="dropdown" type="button" id="dropdownMenufilter" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<button class="btn btn-default" data-toggle="dropdown" type="button" id="dropdownMenufilter" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
<taskana-icon-type [type]="filter.type" class="vertical-align"></taskana-icon-type>
</button>
<ul class="dropdown-menu dropdown-menu-users" role="menu">
<li *ngFor="let type of allTypes | mapValues">
<button type="button" (click)="selectType(type.key); search()" class="btn btn-default btn-users-list" data-toggle="tooltip"
<li>
<a *ngFor="let type of allTypes | mapValues" type="button" (click)="selectType(type.key); search()" data-toggle="tooltip"
[title]="type.value">
<taskana-icon-type class="vertical-align" [type]='type.key'></taskana-icon-type>
</button>
<taskana-icon-type class="vertical-align" [type]='type.key' [text]="type.value"></taskana-icon-type>
</a>
</li>
</ul>
</div>

4
web/src/app/administration/components/filter/filter.component.scss
View File

@ -5,10 +5,6 @@
margin-left: 15px;
}
.btn-users-list {
border: 0px solid transparent;
}
.list-group-search {
padding: 0px 15px;
border-top: 1px solid #ddd;

3
web/src/app/administration/components/filter/filter.component.ts
View File

@ -23,7 +23,8 @@ export class FilterComponent {
toggleDropDown = false;
constructor() {
this.allTypes = IconTypeComponent.allTypes;
this.allTypes = new Map([['ALL', 'All'], ['PERSONAL', 'Personal'], ['GROUP', 'Group'],
['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']]);
}
selectType(type: ICONTYPES) {

6
web/src/app/administration/components/type-icon/icon-type.component.html
View File

@ -1,4 +1,2 @@
<div *ngIf="type === ''; else customIcon" class = "glyphicon glyphicon-asterisk blue"></div>
<ng-template #customIcon>
<svg-icon class="{{selected? 'white': 'blue' }} small" src="./assets/icons/{{getIconPath(type)}}"></svg-icon>
</ng-template>
<svg-icon class="{{selected? 'white': 'blue' }} small" src="./assets/icons/{{getIconPath(type)}}"></svg-icon>
{{text}}
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 252 B

After

Width:  |  Height:  |  Size: 118 B

9
web/src/app/administration/components/type-icon/icon-type.component.ts
View File

@ -10,7 +10,7 @@ export class IconTypeComponent implements OnInit {
@Input()
type: ICONTYPES = ICONTYPES.PERSONAL;
type: ICONTYPES = ICONTYPES.ALL;
@Input()
selected = false;
@ -18,8 +18,11 @@ export class IconTypeComponent implements OnInit {
@Input()
tooltip = false;
@Input()
text = '';
public static get allTypes(): Map<string, string> {
return new Map([['', 'None'], ['PERSONAL', 'Personal'], ['GROUP', 'Group'], ['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']])
return new Map([ ['PERSONAL', 'Personal'], ['GROUP', 'Group'], ['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']])
};
constructor() { }
@ -36,7 +39,7 @@ export class IconTypeComponent implements OnInit {
type === 'EXTERNAL' ? 'external.svg' :
type === 'AUTOMATIC' ? 'automatic.svg' :
type === 'MANUAL' ? 'manual.svg' :
type === 'CLOSED' ? 'closed.svg' : '';
type === 'CLOSED' ? 'closed.svg' : 'asterisk.svg';
}
}

3
web/src/app/administration/workbasket/details/information/workbasket-information.component.html
View File

@ -65,8 +65,7 @@
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu">
<li>
<a *ngFor="let type of allTypes | mapValues | removeEmptyType" (click)="selectType(type.key)">
<taskana-icon-type class="vertical-align" [type]='type.key'></taskana-icon-type>
{{type.value}}
<taskana-icon-type class="vertical-align" [type]='type.key' [text]="type.value"></taskana-icon-type>
</a>
</li>
</ul>

4
web/src/app/administration/workbasket/details/information/workbasket-information.component.ts
View File

@ -54,7 +54,9 @@ export class WorkbasketInformationComponent implements OnInit, OnChanges, OnDest
private savingWorkbasket: SavingWorkbasketService,
private requestInProgressService: RequestInProgressService,
private customFieldsService: CustomFieldsService) {
this.allTypes = IconTypeComponent.allTypes;
this.allTypes = new Map([['PERSONAL', 'Personal'], ['GROUP', 'Group'],
['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']])
}
ngOnInit(): void {

2
web/src/app/models/type.ts
View File

@ -1,7 +1,7 @@
export enum ICONTYPES {
NONE = '',
ALL = 'ALL',
PERSONAL = 'PERSONAL',
GROUP = 'GROUP',
CLEARANCE = 'CLEARANCE',

1
web/src/assets/icons/asterisk.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M7.128 14.813a1.157 1.157 0 0 1-.28-.05c-.357-.106-.673-.392-.792-.716-.056-.153-.052-.03-.055-1.596-.002-.987-.005-1.42-.012-1.42-.005 0-.591.303-1.303.674-.713.371-1.308.681-1.324.688a1.475 1.475 0 0 1-.398.106 1.44 1.44 0 0 1-.656-.093 1.13 1.13 0 0 1-.494-.37 34.214 34.214 0 0 1-.735-1.154c-.1-.203-.13-.43-.086-.653.03-.146.106-.318.197-.442.06-.08.209-.214.304-.27.042-.026.653-.35 1.358-.718l1.287-.677c.004-.003-.578-.312-1.293-.688-.715-.375-1.33-.7-1.365-.722-.248-.154-.42-.4-.485-.694a1.202 1.202 0 0 1-.004-.42c.021-.09.067-.213.105-.282.048-.085.673-1.059.723-1.125.14-.184.352-.325.599-.398.154-.046.249-.06.415-.06.275.002.412.044.807.252l.487.255 1.09.567c.42.22.769.4.773.4.005 0 .008-.561.008-1.39 0-1.507-.002-1.443.047-1.6.086-.273.349-.551.647-.684.256-.114.315-.12 1.235-.115.734.004.74.004.913.057.195.059.344.147.508.302.169.16.26.313.32.538.014.055.016.146.02 1.478l.004 1.419 1.264-.66c.694-.362 1.301-.677 1.348-.698.216-.1.448-.14.679-.117.379.038.689.199.885.46.054.072.655 1.005.71 1.103.174.307.178.668.012.997-.078.155-.232.32-.388.416-.043.026-.656.35-1.362.721-.707.37-1.288.677-1.292.68-.004.003.555.3 1.242.661.686.36 1.283.674 1.326.698.314.17.502.415.572.747a.989.989 0 0 1-.11.716c-.05.088-.669 1.05-.72 1.118a1.264 1.264 0 0 1-.126.133c-.171.156-.39.257-.66.302a1.687 1.687 0 0 1-.43 0c-.194-.035-.27-.066-.708-.296l-1.642-.857-.6-.312-.004 1.42c-.004 1.326-.006 1.423-.02 1.478a1.14 1.14 0 0 1-.216.43c-.03.037-.097.104-.15.15a1.232 1.232 0 0 1-.618.297c-.082.015-.124.016-.78.018-.382.001-.732 0-.777-.004z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB