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

TSK-740 Remove glyphy icon library due to deprecation in bootstrap 4

This commit is contained in:
Martin Rojas Miguel Angel 2018-11-12 10:40:55 +01:00 committed by Holger Hagen
parent 6ec72b16d3
commit 775c50b543
40 changed files with 663 additions and 2592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2592
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
web/package.json
View File

@ -32,11 +32,12 @@
"file-saver": "1.3.3",
"jquery": "3.3.1",
"magic-string": "0.22.4",
"material-design-icons": "3.0.1",
"ng2-charts": "1.6.0",
"ngx-bootstrap": "3.0.1",
"node-sass": "4.9.2",
"popper.js": "1.14.3",
"rxjs": "^6.2.2",
"rxjs": "6.2.2",
"zone.js": "0.8.26"
},
"devDependencies": {
@ -49,7 +50,7 @@
"hoek": "5.0.3",
"jasmine-core": "2.9.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.4",
"karma": "3.1.1",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.3",
@ -58,7 +59,7 @@
"karma-jasmine-html-reporter": "0.2.2",
"moment": "2.22.1",
"ng2-mock-component": "0.1.1",
"protractor": "^5.4.0",
"protractor": "5.4.0",
"ts-mockito": "2.3.0",
"ts-node": "4.1.0",
"tslint": "5.9.1",

9
web/src/app/administration/access-items-management/access-items-management.component.html
View File

@ -47,7 +47,7 @@
<th>
<button type="button" (click)="searchForAccessItemsWorkbaskets()" class="btn btn-default" data-toggle="tooltip"
title="Search">
<span class="glyphicon glyphicon-search blue" aria-hidden="true"></span>
<span class="material-icons md-20 blue">search</span>
</button>
</th>
<th></th>
@ -179,7 +179,8 @@
<ul *ngIf="belongingGroups !== undefined && belongingGroups.length > 0 " class="list-group">
<li *ngFor="let group of belongingGroups" class="list-group-item">{{group.name}}</li>
</ul>
<p *ngIf="belongingGroups === undefined || belongingGroups.length === 0">The user is not associated to any groups</p>
<p *ngIf="belongingGroups === undefined || belongingGroups.length === 0">The user is not associated to
any groups</p>
</div>
<div class="modal-footer">
@ -192,10 +193,10 @@
<div class="pull-right btn-group">
<button *ngIf="AccessItemsForm" type="button" class="btn btn-default" data-toggle="tooltip" title="Revoke access"
[disabled]=isGroup>
<span class="glyphicon glyphicon-remove red" aria-hidden="true"></span>
<span class="material-icons md-20 red">clear</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>

95
web/src/app/administration/classification/details/classification-details.component.html
View File

@ -1,23 +1,29 @@
<div class="container-scrollable">
<taskana-spinner [isRunning]="requestInProgress" class="floating" (spinnerIsRunning)="spinnerRunning($event)"></taskana-spinner>
<div id="classification-details" *ngIf="classification && !spinnerIsRunning">
<ul class="nav nav-tabs" role="tablist">
<li *ngIf="showDetail" class="visible-xs visible-sm hidden">
<a (click)="backClicked()">
<span class="material-icons md-20 blue">arrow_back_ios</span>
</a>
</li>
</ul>
<div id="classification" class="panel panel-default classification">
<div class="panel-heading">
<div *ngIf="showDetail" class="pull-left btn-group align-header">
<button (click)="backClicked()" class="btn btn-default no-style blue visible-xs visible-sm hidden">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Back
<span class="material-icons md-20 blue">arrow_back_ios</span>
</button>
</div>
<div class="pull-right btn-group">
<button type="button" (click)="onSubmit()" class="btn btn-default btn-primary" data-toggle="tooltip" title="Save">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
<span class="material-icons md-20">save</span>
</button>
<button type="button" (click)="onClear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
<span class="material-icons md-20 blue">undo</span>
</button>
<button type="button" (click)="removeClassification()" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<button type="button" (click)="removeClassification()" data-toggle="tooltip" title="Delete" class="btn btn-default">
<span class="material-icons md-20 red">delete</span>
</button>
</div>
<h4 class="panel-header">{{classification.name}}&nbsp; [{{classification.type}}]
@ -43,50 +49,45 @@
errorMessage="* Name is required">
</taskana-field-error-display>
</div>
<div class="row">
<div class="form-group">
<label for="classification-domain" class="control-label">Domain</label>
<input type="text" disabled #domain="ngModel" class="form-control" id="classification-domain" placeholder="Domain"
[(ngModel)]="classification.domain" name="classification.domain">
<div class="form-group col-xs-6 required">
<label for="classification-category" class="control-label">Category</label>
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default vertical-align" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
<span class="text-top ">
<svg-icon class="blue fa-fw" src="{{getCategoryIcon(classification.category).name}}"
data-toggle="tooltip" [title]="getCategoryIcon(classification.category).text"></svg-icon>
<a *ngIf="!masterDomainSelected()" (click)="validChanged()">
<label>
<b>Valid in Domain:</b>
<span class="material-icons md-20 blue ">{{classification.isValidInDomain ? 'check_box':
'check_box_outline_blank'}}</span>
</label>
</a>
</div>
<div class="form-group required btn-group">
<label for="classification-category" class="control-label">Category</label>
<div class="dropdown clearfix ">
<button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="text-top">
<svg-icon class="blue fa-fw" src="{{getCategoryIcon(classification.category).name}}" data-toggle="tooltip"
[title]="getCategoryIcon(classification.category).text"></svg-icon>
</span>
{{classification.category}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu">
<li>
<a *ngFor="let category of categories" (click)="selectCategory(category)">
<span class="text-top">
<svg-icon class="blue fa-fw" src="{{getCategoryIcon(category).name}}" data-toggle="tooltip"
[title]="getCategoryIcon(category).text"></svg-icon>
{{category}}
</span>
{{classification.category}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu " aria-labelledby="dropdownMenu">
<li>
<a *ngFor="let category of categories" (click)="selectCategory(category)">
<span class="text-top">
<svg-icon class="blue fa-fw" src="{{getCategoryIcon(category).name}}" data-toggle="tooltip"
[title]="getCategoryIcon(category).text"></svg-icon>
</span>
{{category}}
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group col-xs-6">
<label for="classification-domain" class="control-label">Domain</label>
<input type="text" disabled #domain="ngModel" class="form-control" id="classification-domain"
placeholder="Domain" [(ngModel)]="classification.domain" name="classification.domain">
<a *ngIf="!masterDomainSelected()" (click)="validChanged()">
<label>
<b>Valid in Domain:</b>
<span class="glyphicon {{classification.isValidInDomain ? 'glyphicon-check': 'glyphicon-unchecked'}} blue"
aria-hidden="true"></span>
</label>
</a>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="classification-priority" class="control-label">Priority</label>
<input type="text" class="form-control" id="classification-priority" placeholder="Priority" [(ngModel)]="classification.priority"
@ -129,6 +130,8 @@
<input type="text" class="form-control" id="classification-custom-4" placeholder="{{custom4Field.field}}"
[(ngModel)]="classification.custom4" name="classification.custom4">
</div>
</div>
<div class="col-md-6">
<div *ngIf="custom5Field.visible" class="form-group">
<label for="classification-custom-5" class="control-label">{{custom5Field.field}}</label>
<input type="text" class="form-control" id="classification-custom-5" placeholder="{{custom5Field.field}}"

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

@ -1,33 +1,36 @@
<div class="classification-list-full-height">
<li id="wb-action-toolbar" class="list-group-item tab-align">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6 btn-group">
<button type="button" (click)="addClassification()" data-toggle="tooltip" title="Add" class="btn btn-default">
<span class="glyphicon glyphicon-plus green-blue" aria-hidden="true"></span>
<span class="material-icons md-20 green-blue">add_circle_outline</span>
</button>
<taskana-import-export-component [currentSelection]="selectionToImport" (importSucessful)="refreshClassificationList()">
<taskana-import-export-component class ="btn-group" [currentSelection]="selectionToImport" (importSucessful)="refreshClassificationList()">
</taskana-import-export-component>
<taskana-classification-types-selector class="pull-right" [classificationTypes]="classificationsTypes" [(classificationTypeSelected)]="classificationTypeSelected"
(classificationTypeChanged)=selectClassificationType($event)></taskana-classification-types-selector>
</div>
<div class="col-xs-6">
<taskana-classification-types-selector class="pull-right" [classificationTypes]="classificationsTypes"
[(classificationTypeSelected)]="classificationTypeSelected" (classificationTypeChanged)=selectClassificationType($event)></taskana-classification-types-selector>
</div>
</div>
</li>
<div class="col-xs-2 category-filter">
<button class="btn btn-default" data-toggle="dropdown" type="button" id="dropdown-classification-filter" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<svg-icon *ngIf="selectedCategory else category_unselected" class="blue" [src]="getCategoryIcon(selectedCategory).name" data-toggle="tooltip"
[title]="getCategoryIcon(category).text"></svg-icon>
<svg-icon *ngIf="selectedCategory else category_unselected" class="blue" [src]="getCategoryIcon(selectedCategory).name"
data-toggle="tooltip" [title]="getCategoryIcon(category).text"></svg-icon>
<ng-template #category_unselected>
<svg-icon data-toggle="tooltip" title="All" class="blue vertical-align" src="./assets/icons/asterisk.svg"></svg-icon>
<svg-icon data-toggle="tooltip" title="All" class="blue " src="./assets/icons/asterisk.svg"></svg-icon>
</ng-template>
</button>
<ul class="dropdown-menu dropdown-menu-classification" role="menu">
<li>
<a type="button" (click)="selectCategory('');" data-toggle="tooltip" title="All">
<svg-icon class="blue vertical-align" src="./assets/icons/asterisk.svg"></svg-icon>
<svg-icon class="blue" src="./assets/icons/asterisk.svg"></svg-icon>
All
</a>
<a *ngFor="let category of categories" type="button" (click)="selectCategory(category);" data-toggle="tooltip" [title]="category">
<a *ngFor="let category of categories" type="button" (click)="selectCategory(category);" data-toggle="tooltip"
[title]="category">
<svg-icon class="blue" [src]="getCategoryIcon(category).name" data-toggle="tooltip" [title]="getCategoryIcon(category).text"></svg-icon>
{{category}}
</a>
@ -40,8 +43,9 @@
<div class="col-xs-12 horizontal-bottom-divider">
</div>
<taskana-spinner class="col-xs-12" [isRunning]="requestInProgress" positionClass="centered-spinner-whole-screen"></taskana-spinner>
<taskana-tree class="col-xs-12" *ngIf="(classifications && classifications.length) else empty_classifications" [treeNodes]="classifications"
[selectNodeId]="selectedId" [filterText]="inputValue" [filterIcon]="selectedCategory" (selectNodeIdChanged)="selectClassification($event)"></taskana-tree>
<taskana-tree class="col-xs-12" *ngIf="(classifications && classifications.length) else empty_classifications"
[treeNodes]="classifications" [selectNodeId]="selectedId" [filterText]="inputValue" [filterIcon]="selectedCategory"
(selectNodeIdChanged)="selectClassification($event)"></taskana-tree>
<ng-template #empty_classifications>
<div *ngIf="!requestInProgress" class="col-xs-12 container-no-items center-block">
<h3 class="grey">There are no classifications</h3>

17
web/src/app/administration/components/import-export/import-export.component.html
View File

@ -1,19 +1,20 @@
<input #selectedFile type="file" accept=".json" (change)="onSelectFile($event)" class="hide" />
<svg-icon class="btn btn-default green-blue" src="./assets/icons/import.svg" title="Import" (click)="selectedFile.click()"></svg-icon>
<div class="dropdown" style="display: inline">
<svg-icon class="btn btn-default red dropdown-toggle" title="Export" src="./assets/icons/export.svg" data-toggle="dropdown"
aria-expanded="true" (click)="updateDomains()"></svg-icon>
<ul class="dropdown-menu">
<button type="button" (click)="selectedFile.click()" data-toggle="tooltip" title="Import" class="btn btn-default">
<span class="material-icons md-20 green-blue">cloud_upload</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" (click)="export()">
<a href="javascript:void(0)" class="dropdown-item" (click)="export()">
<label>All Domains</label>
</a>
</li>
<div role="separator" class="divider"></div>
<li *ngFor="let domain of domains">
<a class="dropdown-item" (click)="export(domain)">
<a href="javascript:void(0)" class="dropdown-item" (click)="export(domain)">
<label>{{domain === '' ? 'Master' : domain}}</label>
</a>
</li>
</ul>
</div>
<button type="button" data-toggle="dropdown" title="Export" class="btn btn-default">
<span class="material-icons md-20 red">cloud_download</span>
</button>

9
web/src/app/administration/components/import-export/import-export.component.spec.ts
View File

@ -6,8 +6,6 @@ import { ClassificationDefinitionService } from 'app/administration/services/cla
import { WorkbasketDefinitionService } from '../../services/workbasket-definition/workbasket-definition.service';
import { AlertService } from 'app/services/alert/alert.service';
import { HttpClientModule } from '@angular/common/http';
import { DomainService } from 'app/services/domain/domain.service';
import { of } from 'rxjs';
import { ErrorModalService } from 'app/services/errorModal/error-modal.service';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { configureTests } from 'app/app.test.configuration';
@ -15,7 +13,6 @@ import { configureTests } from 'app/app.test.configuration';
describe('ImportExportComponent', () => {
let component: ImportExportComponent;
let fixture: ComponentFixture<ImportExportComponent>;
let domainService;
let debugElement;
beforeEach(done => {
@ -44,10 +41,4 @@ describe('ImportExportComponent', () => {
expect(component).toBeTruthy();
});
it('should update domains', () => {
domainService = TestBed.get(DomainService);
spyOn(domainService, 'getDomains').and.returnValue(of(['A', 'B']));
component.updateDomains();
expect(domainService.getDomains).toHaveBeenCalled();
});
});

3
web/src/app/administration/components/import-export/import-export.component.ts
View File

@ -25,9 +25,6 @@ export class ImportExportComponent implements OnInit {
}
ngOnInit() {
}
updateDomains() {
this.domainService.getDomains().subscribe(
data => this.domains = data
);

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

@ -1,3 +1,3 @@
<svg-icon class="{{selected? 'white': 'blue' }} small vertical-align" src="./assets/icons/{{getIconPath(type)}}" data-toggle="tooltip"
<svg-icon class="{{selected? 'white': 'blue' }} small" src="./assets/icons/{{getIconPath(type)}}" data-toggle="tooltip"
[title]="!type? 'All' : type"></svg-icon>
{{text}}

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 175 B

20
web/src/app/administration/workbasket/details/access-items/access-items.component.html
View File

@ -1,12 +1,11 @@
<div *ngIf="workbasket" id="wb-information" class="panel panel-default">
<div class="panel-heading">
<div class="pull-right btn-group">
<button type="button" (click)="onSubmit()" [disabled]="action === 'COPY'" class="btn btn-default btn-primary"
data-toggle="tooltip" title="Save">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
<button type="button" (click)="onSubmit()" [disabled]="action === 'COPY'" data-toggle="tooltip" title="Save" class="btn btn-default btn-primary">
<span class="material-icons md-20">save</span>
</button>
<button type="button" (click)="clear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
<button type="button" (click)="clear()" data-toggle="tooltip" title="Undo Changes" class="btn btn-default">
<span class="material-icons md-20 blue">undo</span>
</button>
</div>
<h4 class="panel-header">{{workbasket.name}}
@ -43,8 +42,8 @@
<tbody>
<tr *ngFor="let accessItem of accessItemsGroups.controls; let index = index;" [formGroupName]="index">
<td>
<button type="button" (click)="remove(index)" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<button type="button" (click)="remove(index)" data-toggle="tooltip" title="Remove" class="btn btn-default">
<span class="material-icons md-20 red">clear</span>
</button>
</td>
<td *ngIf="accessIdField.lookupField else accessIdInput" class="input-group text-align text-width taskana-type-ahead"
@ -140,10 +139,9 @@
</tbody>
</table>
</form>
<button id="button-add-access-item" type="button" (click)="addAccessItem()" class="btn btn-default" data-toggle="tooltip"
title="Add new access">
<span class="glyphicon glyphicon-plus green-blue" aria-hidden="true"></span>
Add new access
<button type="button" (click)="addAccessItem()" data-toggle="tooltip" title="Add new access" class="btn btn-default">
<span class="material-icons md-20 green-blue">add</span>
<span>Add new access</span>
</button>
<taskana-spinner [isRunning]="requestInProgress" [positionClass]=""></taskana-spinner>
</div>

4
web/src/app/administration/workbasket/details/access-items/access-items.component.spec.ts
View File

@ -84,10 +84,6 @@ describe('AccessItemsComponent', () => {
});
it('should show Add new access item button', () => {
expect(debugElement.querySelector('#button-add-access-item')).toBeTruthy();
});
it('should remove an access item if remove button is clicked', () => {
expect(debugElement.querySelectorAll('#table-access-items > tbody > tr').length).toBe(2);
debugElement.querySelectorAll('#table-access-items > tbody > tr')[0].querySelector('td > button').click();

37
web/src/app/administration/workbasket/details/distribution-targets/distribution-targets.component.html
View File

@ -1,12 +1,11 @@
<div *ngIf="workbasket" id="wb-information" class="panel panel-default">
<div class="panel-heading">
<div class="pull-right btn-group">
<button type="button" (click)="onSave()" [disabled]="action === 'COPY'" class="btn btn-default btn-primary" data-toggle="tooltip"
title="Save">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
<button type="button" (click)="onSave()" [disabled]="action === 'COPY'" data-toggle="tooltip" title="Save" class="btn btn-default btn-primary">
<span class="material-icons md-20">save</span>
</button>
<button type="button" (click)="onClear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
<button type="button" (click)="onClear()" data-toggle="tooltip" title="Undo Changes" class="btn btn-default">
<span class="material-icons md-20 blue">undo</span>
</button>
</div>
<h4 class="panel-header">{{workbasket.name}}
@ -18,27 +17,27 @@
[distributionTargetsSelected]="distributionTargetsSelected" (performDualListFilter)="performFilter($event)" [side]="side.LEFT"
[requestInProgress]="requestInProgressLeft" class="dual-list list-left col-xs-12 col-md-5-6 container"></taskana-dual-list>
<div class="hidden-xs hidden-sm col-md-1 list-arrows text-center button-margin-top">
<button (click)="moveDistributionTargets(side.LEFT)" [disabled]="requestInProgressLeft || requestInProgressRight" class="btn btn-default move-right"
data-toggle="tooltip" title="Move to selected distribution targets">
<span class="glyphicon glyphicon-chevron-right blue"></span>
<button (click)="moveDistributionTargets(side.LEFT)" [disabled]="requestInProgressLeft || requestInProgressRight"
class="btn btn-default move-right" data-toggle="tooltip" title="Move to selected distribution targets">
<span class="material-icons md-20 blue">chevron_right</span>
</button>
<button (click)="moveDistributionTargets(side.RIGHT)" [disabled]="requestInProgressLeft || requestInProgressRight" class="btn btn-default move-left"
data-toggle="tooltip" title="Move to available distribution targets">
<span class="glyphicon glyphicon-chevron-left blue"></span>
<button (click)="moveDistributionTargets(side.RIGHT)" [disabled]="requestInProgressLeft || requestInProgressRight"
class="btn btn-default move-left" data-toggle="tooltip" title="Move to available distribution targets">
<span class="material-icons md-20 blue">chevron_left</span>
</button>
</div>
<div class="hidden visible-xs visible-sm col-xs-12 list-arrows text-center">
<button (click)="moveDistributionTargets(side.LEFT)" [disabled]="requestInProgressLeft || requestInProgressRight" class="btn btn-default move-down"
data-toggle="tooltip" title="Move to selected distribution targets">
<span class="glyphicon glyphicon-chevron-down blue"></span>
<button (click)="moveDistributionTargets(side.LEFT)" [disabled]="requestInProgressLeft || requestInProgressRight"
class="btn btn-default move-down" data-toggle="tooltip" title="Move to selected distribution targets">
<span class="material-icons md-20 blue">expand_more</span>
</button>
<button (click)="moveDistributionTargets(side.RIGHT)" [disabled]="requestInProgressLeft || requestInProgressRight" class="btn btn-default move-up"
data-toggle="tooltip" title="Move to available distribution targets">
<span class="glyphicon glyphicon-chevron-up blue"></span>
<button (click)="moveDistributionTargets(side.RIGHT)" [disabled]="requestInProgressLeft || requestInProgressRight"
class="btn btn-default move-up" data-toggle="tooltip" title="Move to available distribution targets">
<span class="material-icons md-20 blue">expand_less</span>
</button>
</div>
<taskana-dual-list id="dual-list-right" header="Selected distribution targets" [(distributionTargets)]="distributionTargetsRight"
[distributionTargetsSelected]="distributionTargetsSelected" (performDualListFilter)="performFilter($event)" [requestInProgress]="requestInProgressRight"
[side]="side.RIGHT" class="dual-list list-right col-xs-12 col-md-5-6 container"></taskana-dual-list>
[distributionTargetsSelected]="distributionTargetsSelected" (performDualListFilter)="performFilter($event)"
[requestInProgress]="requestInProgressRight" [side]="side.RIGHT" class="dual-list list-right col-xs-12 col-md-5-6 container"></taskana-dual-list>
</div>
</div>

6
web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.html
View File

@ -2,7 +2,7 @@
<div class="row">
<div class="col-xs-2">
<button (click)="toggleDtl = !toggleDtl; selectAll(toggleDtl);" class="btn btn-default no-style" title="Toggle select all">
<span aria-hidden="true" class="glyphicon blue {{toggleDtl? 'glyphicon-check': 'glyphicon-unchecked'}}"></span>
<span class="material-icons md-20 blue ">{{toggleDtl ? 'check_box': 'check_box_outline_blank'}}</span>
</button>
</div>
<div class="col-xs-7">
@ -11,7 +11,7 @@
<div class="pull-right">
<button class="btn btn-default" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState"
data-toggle="tooltip" title="Filter">
<span class="glyphicon glyphicon-filter blue"></span>
<span class="material-icons md-20 blue ">{{!toolbarState? 'search' : 'expand_less'}}</span>
</button>
</div>
</div>
@ -25,7 +25,7 @@
[class.selected]="distributionTarget.selected" type="text" (click)="distributionTarget.selected = !distributionTarget.selected">
<div class="row">
<dl class="col-xs-1">
<taskana-icon-type class="vertical-align" [type]="distributionTarget.type"></taskana-icon-type>
<taskana-icon-type [type]="distributionTarget.type"></taskana-icon-type>
</dl>
<dl class="col-xs-10">
<dt>{{distributionTarget.name}},

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

@ -2,21 +2,21 @@
<div *ngIf="workbasket" id="wb-information" class="panel panel-default">
<div class="panel-heading">
<div class="pull-right btn-group">
<button type="button" (click)="onSubmit()" class="btn btn-default btn-primary" data-toggle="tooltip" title="Save">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
<button type="button" (click)="onSubmit()" data-toggle="tooltip" title="Save" class="btn btn-default btn-primary">
<span class="material-icons md-20">save</span>
</button>
<button type="button" (click)="onClear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
<button type="button" (click)="onClear()" data-toggle="tooltip" title="Undo Changes" class="btn btn-default">
<span class="material-icons md-20 blue">undo</span>
</button>
<button type="button" (click)="removeDistributionTargets()" data-toggle="tooltip" title="Remove workbasket as distribuition target"
class="btn btn-default remove">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
class="btn btn-default">
<span class="material-icons md-20 red">remove_circle_outline</span>
</button>
<button type="button" (click)="copyWorkbasket()" data-toggle="tooltip" title="Copy" class="btn btn-default">
<span class="glyphicon glyphicon-copy green-blue" aria-hidden="true"></span>
<span class="material-icons md-20 green-blue">file_copy</span>
</button>
<button type="button" (click)="removeWorkbasket()" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<button type="button" (click)="removeWorkbasket()" data-toggle="tooltip" title="Remove" class="btn btn-default">
<span class="material-icons md-20 red">delete</span>
</button>
</div>
<h4 class="panel-header">{{workbasket.name}}&nbsp;
@ -55,38 +55,36 @@
</taskana-field-error-display>
</ng-template>
</div>
<div class="form-group ">
<label for="wb-domain" class="control-label">Domain</label>
<input type="text" #domain="ngModel" class="form-control" disabled id="wb-domain" placeholder="Domain"
[(ngModel)]="workbasket.domain" name="workbasket.domain">
</div>
<div class="row">
<div class="form-group col-xs-6">
<div class="form-group col-xs-4">
<label for="wb-type" class="control-label">Type</label>
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="button" id="dropdownMenu24" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<taskana-icon-type class="vertical-align" [type]='workbasket.type'></taskana-icon-type>
{{allTypes.get(workbasket.type)}}
<span class="caret"></span>
</button>
<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' [text]="type.value"></taskana-icon-type>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default" type="button" id="dropdownMenu24" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<taskana-icon-type [type]='workbasket.type'></taskana-icon-type>
{{allTypes.get(workbasket.type)}}
<span class="caret"></span>
</button>
<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 [type]='type.key' [text]="type.value"></taskana-icon-type>
</a>
</li>
</ul>
</div>
</div>
<div class="form-group col-xs-6">
<label for="wb-domain" class="control-label">Domain</label>
<input type="text" #domain="ngModel" class="form-control" disabled id="wb-domain" placeholder="Domain"
[(ngModel)]="workbasket.domain" name="workbasket.domain">
<div class="form-group col-xs-8">
<label for="wb-description" class="control-label">Description</label>
<textarea class="form-control" rows="7" id="wb-description" placeholder="Description"
[(ngModel)]="workbasket.description" name="workbasket.description"></textarea>
</div>
</div>
<div class="form-group">
<label for="wb-description" class="control-label">Description</label>
<textarea class="form-control" rows="7" id="wb-description" placeholder="Description" [(ngModel)]="workbasket.description"
name="workbasket.description"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">

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

@ -4,7 +4,8 @@
<ul class="nav nav-tabs" role="tablist">
<li *ngIf="showDetail" class="visible-xs visible-sm hidden">
<a (click)="backClicked()">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Back</a>
<span class="material-icons md-20 blue" title="back">arrow_back_ios</span>
</a>
</li>
<li role="presentation" (click)="selectTab('information')" [ngClass]="{'active':tabSelected === 'information'}">
<a aria-controls="work baskets" role="tab" aria-expanded="true">
@ -35,4 +36,4 @@
</div>
</div>
</div>
</div>
</div>

13
web/src/app/administration/workbasket/master/list/workbasket-list-toolbar/workbasket-list-toolbar.component.html
View File

@ -1,19 +1,18 @@
<li id="wb-action-toolbar" class="list-group-item tab-align">
<div class="row">
<div class="col-xs-8">
<div class="col-xs-9 btn-group">
<button type="button" (click)="addWorkbasket()" data-toggle="tooltip" title="Add" class="btn btn-default">
<span class="glyphicon glyphicon-plus green-blue" aria-hidden="true"></span>
<span class="material-icons md-20 green-blue">add_circle_outline</span>
</button>
<taskana-import-export-component (importSucessful)="importEvent()" [currentSelection]="selectionToImport"></taskana-import-export-component>
<taskana-import-export-component class="btn-group" (importSucessful)="importEvent()" [currentSelection]="selectionToImport"></taskana-import-export-component>
</div>
<div class="margin-right pull-right ">
<div class="margin-right pull-right btn-group">
<taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group"></taskana-sort>
<button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState"
data-toggle="tooltip" title="Filter">
<span class="glyphicon glyphicon-filter blue"></span>
<span class="material-icons md-20 blue">{{!toolbarState? 'search' : 'expand_less'}}</span>
</button>
<taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group"></taskana-sort>
</div>
</div>
<div [@toggleDown]="toolbarState" class="row no-overflow">
<taskana-filter (performFilter)="filtering($event)"></taskana-filter>

3
web/src/app/administration/workbasket/master/list/workbasket-list.component.html
View File

@ -22,8 +22,7 @@
<dd data-toggle="tooltip" title="{{workbasket.owner}}">{{workbasket.owner}} &nbsp;</dd>
</dl>
<dl *ngIf="workbasket.markedForDeletion">
<span class="{{workbasket.workbasketId === selectedId ? 'white': 'red' }} glyphicon glyphicon-exclamation-sign"
aria-hidden="true" data-toggle="tooltip" title="Marked for deletion"></span>
<span title="Marked for deletion" data-toggle="tooltip" class="material-icons md-20 {{workbasket.workbasketId === selectedId ? 'white': 'red' }} ">error</span>
</dl>
</div>
</li>

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

@ -87,7 +87,7 @@ export class WorkbasketListComponent implements OnInit, OnDestroy {
refreshWorkbasketList() {
const toolbarSize = this.toolbarElement.nativeElement.offsetHeight;
const cardHeight = 75;
const cardHeight = 72;
const unusedHeight = 145;
const totalHeight = window.innerHeight;
const cards = Math.round((totalHeight - (unusedHeight + toolbarSize)) / cardHeight);

24
web/src/app/components/nav-bar/nav-bar.component.html
View File

@ -3,7 +3,7 @@
<div class="pull-left col-sm-3 col-md-4">
<button type="button" *ngIf="!showNavbar" class="btn btn-default navbar-toggle show pull-left" (click)="toogleNavBar();"
aria-expanded="true" aria-controls="navbar" data-toggle="tooltip" title="Menu">
<span class="glyphicon glyphicon glyphicon-th-list white"></span>
<span class="material-icons md-24 white">menu</span>
</button>
<span>&nbsp;</span>
</div>
@ -30,32 +30,34 @@
</div>
</div>
</div>
<div [@toggleRight]="showNavbar" *ngIf="showNavbar" class="navbar-inverse sidenav full-height col-xs-9 col-sm-3" data-html="false"
aria-expanded="true">
<div [@toggleRight]="showNavbar" *ngIf="showNavbar" class="navbar-inverse sidenav full-height col-xs-9 col-sm-3"
data-html="false" aria-expanded="true">
<div class="row">
<ul class="nav">
<svg-icon class="logo white visible-xs" src="./assets/icons/logo.svg"></svg-icon>
<h2 class="navbar-brand no-margin logo visible-xs"> {{title}}</h2>
<button type="button" class="btn btn-default logout navbar-toggle show pull-right" data-toggle="tooltip" title="Logout" (click)="logout()" aria-expanded="true"
aria-controls="logout">
<span class="glyphicon glyphicon-share white"></span>
<button type="button" class="btn btn-default logout navbar-toggle show pull-right" data-toggle="tooltip" title="Logout"
(click)="logout()" aria-expanded="true" aria-controls="logout">
<span class="material-icons md-20 white ">exit_to_app</span>
</button>
</ul>
</div>
<div class="nav-content">
<taskana-user-information></taskana-user-information>
<div *ngIf="administrationAccess" class="row menu">
<span (click)="toogleNavBar()" routerLink="administration/workbaskets" aria-controls="administration" routerLinkActive="active">Administration</span>
<span (click)="toogleNavBar()" routerLink="administration/workbaskets" aria-controls="administration"
routerLinkActive="active">Administration</span>
<div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('workbaskets') !== -1 }">
<span (click)="toogleNavBar()" class="col-xs-6" routerLink="administration/workbaskets" aria-controls="Workbaskets" routerLinkActive="active">Workbaskets</span>
<span (click)="toogleNavBar()" class="col-xs-6" routerLink="administration/workbaskets" aria-controls="Workbaskets"
routerLinkActive="active">Workbaskets</span>
</div>
<div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('classifications') !== -1}">
<span (click)="toogleNavBar()" class="col-xs-6" routerLink="administration/classifications" aria-controls="Classifications"
routerLinkActive="active">Classifications</span>
</div>
<div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('access-items-management') !== -1}">
<span (click)="toogleNavBar()" class="col-xs-6" routerLink="administration/access-items-management" aria-controls="Access items"
routerLinkActive="active">Access items</span>
<span (click)="toogleNavBar()" class="col-xs-6" routerLink="administration/access-items-management"
aria-controls="Access items" routerLinkActive="active">Access items</span>
</div>
</div>
<div *ngIf="monitorAccess" class="row menu" [ngClass]="{'selected': selectedRoute.indexOf('monitor') !== -1}">
@ -66,7 +68,7 @@
</div>
</div>
<div class="nav-version">
<p id="taskana-version"> Taskana version: {{version}} </p>
<p id="taskana-version"> Taskana version: {{version}} </p>
</div>
</div>
<div *ngIf="showNavbar" class="navbar-backdrop" (click)="toogleNavBar()"></div>

5
web/src/app/shared/alert/alert.component.html
View File

@ -1,7 +1,8 @@
<div *ngIf="alert" [@toggleTop]="alert" class="alert alert-{{alert.type}} {{alert.autoClosing? '':'alert-dismissible'}} footer"
role="alert">
<span class="glyphicon {{alert.type === 'success'? 'glyphicon-thumbs-up': 'glyphicon-exclamation-sign' }}" aria-hidden="true"></span>
{{alert.text}}
<span id="alert-icon" title="{{alert.type}}" data-toggle="tooltip" class="material-icons md-20">{{alert.type ===
'success'? 'done': (alert.type === 'danger'? 'error' :alert.type)}}</span>
<span id="alert-text">{{alert.text}}</span>
<button *ngIf="!alert.autoClosing" type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

17
web/src/app/shared/alert/alert.component.spec.ts
View File

@ -37,20 +37,21 @@ describe('AlertComponent', () => {
});
it('should show alert message', () => {
alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, 'some custom text', ));
alertService.triggerAlert(new AlertModel(AlertType.SUCCESS, 'some custom text'));
fixture.detectChanges();
expect(debugElement.querySelector('.alert.alert-success')).toBeDefined();
expect(debugElement.querySelector('.alert.alert-success').innerText).toBe('some custom text');
expect(debugElement.querySelector('#alert-icon').innerText).toBe('done');
expect(debugElement.querySelector('#alert-text').innerText).toBe('some custom text');
});
it('should have differents alert types', () => {
alertService.triggerAlert(new AlertModel(AlertType.DANGER, 'some custom text', ));
alertService.triggerAlert(new AlertModel(AlertType.DANGER, 'some custom text'));
fixture.detectChanges();
expect(debugElement.querySelector('.alert.alert-danger')).toBeDefined();
expect(debugElement.querySelector('#alert-icon').innerText).toBe('error');
alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'some custom text', ));
alertService.triggerAlert(new AlertModel(AlertType.WARNING, 'some custom text'));
fixture.detectChanges();
expect(debugElement.querySelector('.alert.alert-warning')).toBeDefined();
expect(debugElement.querySelector('#alert-icon').innerText).toBe('warning');
expect(debugElement.querySelector('#alert-text').innerText).toBe('some custom text');
});
it('should define a closing timeout if alert has autoclosing property', (done) => {
@ -67,7 +68,7 @@ describe('AlertComponent', () => {
it('should have defined a closing button if alert has no autoclosing property', () => {
alertService.triggerAlert(new AlertModel(AlertType.DANGER, 'some custom text', false));
fixture.detectChanges();
expect(debugElement.querySelector('.alert.alert-danger > button')).toBeDefined();
expect(debugElement.querySelector('.alert > button')).toBeDefined();
});
});

10
web/src/app/shared/classification-types-selector/classification-types-selector.component.html
View File

@ -1,7 +1,7 @@
<div class="dropdown clearfix btn-group">
<button type="button" class="btn btn-default"> {{classificationTypeSelected}}</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@ -9,9 +9,9 @@
<li *ngFor="let classificationType of classificationTypes">
<a (click)="select(classificationType)">
<label>
<span class="glyphicon {{classificationTypeSelected === classificationType? 'glyphicon-check': 'glyphicon-unchecked'}} blue"
aria-hidden="true"></span>
{{classificationType}}
<span data-toggle="tooltip" class="material-icons md-20 blue">{{classificationTypeSelected === classificationType?
'check_box': 'check_box_outline_blank'}}</span>
<span>{{classificationType}}</span>
</label>
</a>
</li>

26
web/src/app/shared/filter/filter.component.html
View File

@ -4,13 +4,13 @@
<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">
<taskana-icon-type [type]="filter.filterParams?.type" class="vertical-align"></taskana-icon-type>
<taskana-icon-type [type]="filter.filterParams?.type"></taskana-icon-type>
</button>
<ul class="dropdown-menu dropdown-menu-users" role="menu">
<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' [text]="type.value"></taskana-icon-type>
<taskana-icon-type [type]='type.key' [text]="type.value"></taskana-icon-type>
</a>
</li>
</ul>
@ -23,8 +23,9 @@
<input type="text" [(ngModel)]="filter.filterParams.key" (keyup.enter)="search()" class="form-control" id="display-key-filter"
placeholder="Filter key">
</div>
<button (click)="clear(); search()" type="button" class="btn btn-default glyphicon glyphicon-ban-circle blue pull-right margin-right"
<button (click)="clear(); search()" type="button" class="btn btn-default pull-right margin-right"
data-toggle="tooltip" title="Clear">
<span class="material-icons md-20 blue">clear</span>
</button>
</div>
<div class="row">
@ -38,15 +39,17 @@
<input type="text" [(ngModel)]="filter.filterParams.owner" (keyup.enter)="search()" class="form-control" id="display-name-owner"
placeholder="Filter owner">
</div>
<button (click)="search()" type="button" class="btn btn-default glyphicon glyphicon-search blue pull-right margin-right"
data-toggle="tooltip" title="Search">
<button (click)="search()" type="button" class="btn btn-default pull-right margin-right" data-toggle="tooltip"
title="Search">
<span class="material-icons md-20 blue ">search</span>
</button>
</div>
</div>
<ng-template #tasktype>
<div class="row">
<div class="col-xs-2">
<input type="text" [(ngModel)]="filter.filterParams.priority" (keyup.enter)="search()" data-toggle="tooltip" title="priority" class="form-control" id="display-priority-filter">
<input type="text" [(ngModel)]="filter.filterParams.priority" (keyup.enter)="search()" data-toggle="tooltip"
title="priority" class="form-control" id="display-priority-filter">
</div>
<div class="col-xs-4">
<input type="text" [(ngModel)]="filter.filterParams.name" (keyup.enter)="search()" class="form-control" id="display-name-filter"
@ -56,8 +59,9 @@
<input type="text" [(ngModel)]="filter.filterParams.owner" (keyup.enter)="search()" class="form-control" id="display-owner-filter"
placeholder="Filter owner">
</div>
<button (click)="clear(); search()" type="button" class="btn btn-default glyphicon glyphicon-ban-circle blue pull-right margin-right"
data-toggle="tooltip" title="Clear">
<button (click)="clear(); search()" class="btn btn-default pull-right margin-right" type="button" data-toggle="tooltip"
title="Clear">
<span class="material-icons md-20 blue">clear</span>
</button>
</div>
<div class="row">
@ -65,10 +69,10 @@
<input type="text" [(ngModel)]="filter.filterParams.state" (keyup.enter)="search()" class="form-control" id="display-owner-state"
placeholder="Filter status">
</div>
<button (click)="search()" type="button" class="btn btn-default glyphicon glyphicon-search blue pull-right margin-right"
data-toggle="tooltip" title="Search">
<button (click)="search()" type="button" class="btn btn-default pull-right margin-right" data-toggle="tooltip"
title="Search">
<span class="material-icons md-20 blue ">search</span>
</button>
</div>
</ng-template>
</div>

2
web/src/app/shared/general-message-modal/general-message-modal.component.html
View File

@ -6,7 +6,7 @@
</div>
<div *ngIf="error" class="modal-body">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span data-toggle="tooltip" class="material-icons md-20">error</span>
<span class="sr-only">Error:</span>
{{message}}
</div>

2
web/src/app/shared/master-and-detail/master-and-detail.component.html
View File

@ -17,7 +17,7 @@
</div>
<div *ngIf="currentRoute === 'tasks'" class="center-block no-detail">
<h3 class="grey">Select a Task</h3>
<span class="glyphicon glyphicon-object-align-bottom empty-icon"></span>
<span class="material-icons empty-icon md-20">done_all</span>
</div>
</div>
</div>

6
web/src/app/shared/remove-confirmation/remove-confirmation.component.html
View File

@ -6,17 +6,17 @@
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span data-toggle="tooltip" class="material-icons md-20 red">error</span>
<span class="sr-only">Error:</span>
{{message}}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-danger" data-dismiss="modal" data-toggle="tooltip" title="Cancel">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span data-toggle="tooltip" class="material-icons md-20 red">delete</span>
</button>
<button type="button" class="btn btn-default btn-primary" data-dismiss="modal" data-toggle="tooltip" title="Confirm" (click)="confirmAction()">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span data-toggle="tooltip" class="material-icons md-20 white">done</span>
</button>
</div>
</div>

31
web/src/app/shared/sort/sort.component.html
View File

@ -1,30 +1,35 @@
<div class="dropdown dropdown-fix">
<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon {{sort.sortDirection === 'asc'? 'glyphicon-sort-by-attributes-alt' : 'glyphicon-sort-by-attributes' }} blue"
data-toggle="tooltip" title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}"></span>
<span class="material-icons md-20 blue {{sort.sortDirection === 'asc'? '' : 'flip' }}" data-toggle="tooltip"
title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}">sort</span>
</button>
<div class="dropdown-menu dropdown-menu-{{menuPosition}} sortby-dropdown popup" aria-labelledby="sortingDropdown">
<div>
<div class="col-xs-6">
<h5>Sort By</h5>
</div>
<button id="sort-by-direction-asc" type="button" (click)="changeOrder('asc')" data-toggle="tooltip" title="A-Z" class="btn btn-default {{sort.sortDirection === 'asc'? 'selected' : '' }}">
<span class="glyphicon glyphicon-sort-by-attributes-alt blue" aria-hidden="true"></span>
</button>
<button id="sort-by-direction-desc" type="button" (click)="changeOrder('desc')" data-toggle="tooltip" title="Z-A" class="btn btn-default {{sort.sortDirection === 'desc'? 'selected' : '' }}">
<span class="glyphicon glyphicon-sort-by-attributes blue" aria-hidden="true"></span>
</button>
<div class="btn-group">
<button id="sort-by-direction-asc" type="button" (click)="changeOrder('asc')" data-toggle="tooltip"
title="A-Z" class="btn btn-default {{sort.sortDirection === 'asc'? 'selected' : '' }}">
<span class="material-icons md-20 blue ">sort</span>
</button>
<button id="sort-by-direction-desc" type="button" (click)="changeOrder('desc')" data-toggle="tooltip"
title="Z-A" class="btn btn-default {{sort.sortDirection === 'desc'? 'selected' : '' }}">
<span class="material-icons md-20 blue flip">sort</span>
</button>
</div>
</div>
<div role="separator" class="divider"></div>
<ul>
<li id="sort-by-{{sortingField.key}}" (click)="changeSortBy(sortingField.key)" *ngFor="let sortingField of sortingFields | mapValues">
<a>
<label>
<span class="glyphicon {{sort.sortBy === sortingField.key? 'glyphicon-check': 'glyphicon-unchecked'}} blue" aria-hidden="true"></span>
{{sortingField.value}}
<label>
<span class="material-icons md-20 blue ">{{sort.sortBy === sortingField.key?
'check_box': 'check_box_outline_blank'}} </span>
<span> {{sortingField.value}} </span>
</label>
</a>
</li>
</ul>
</div>
</div>
</div>

5
web/src/app/shared/sort/sort.component.scss
View File

@ -1,7 +1,4 @@
.dropdown-fix {
display: inline-block;
vertical-align: center;
}
.sortby-dropdown {
min-width: 200px;

2
web/src/app/shared/type-ahead/type-ahead.component.html
View File

@ -38,7 +38,7 @@
[typeaheadWaitMs]="typeaheadWaitMs" (typeaheadLoading)="changeTypeaheadLoading($event)" placeholder="{{displayError? placeHolderMessage: ''}}"
[@validation]="validationValue">
<button *ngIf="!typeaheadLoading" type="button" title="search" class="btn rounded blue">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="material-icons md-20 blue">search</span>
</button>
<div *ngIf="typeaheadLoading" class="loading">
<taskana-spinner [isRunning]="typeaheadLoading" positionClass="type-ahead-spinner"></taskana-spinner>

24
web/src/app/workplace/task/task.component.html
View File

@ -1,17 +1,18 @@
<taskana-spinner [isRunning]="requestInProgress"></taskana-spinner>
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-left btn-group align-header">
<button (click)="navigateBack()" class="btn btn-default no-style blue " title="Cancel and return to task detail">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Back
</button>
</div>
<div class="pull-right">
<div class="dropdown" style="display: inline">
<button type="button" data-toggle="dropdown" aria-expanded="true" class="btn btn-default dropdown-toggle">
<span title="Transfer task to another workbasket" class="glyphicon glyphicon-transfer text-muted"></span>
<div class="dropdown btn-group">
<button type="button" (click)="navigateBack()" class="btn btn-default">
<span title="Cancel and return to task detail" class="material-icons md-20 blue">arrow_back_ios</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<button type="button" (click)="completeTask()" class="btn btn-default">
<span title="Complete task and return to task list" class="material-icons md-20 blue">check</span>
</button>
<button type="button" data-toggle="dropdown" aria-expanded="true" class="btn btn-default dropdown-toggle">
<span title="Transfer task to another workbasket" class="material-icons md-20 blue">transfer_within_a_station</span>
</button>
<ul class="dropdown-menu">
<li *ngFor="let workbasket of workbaskets">
<a class="dropdown-item" (click)="transferTask(workbasket)">
<label>{{workbasket.name}}</label>
@ -19,15 +20,11 @@
</li>
</ul>
</div>
<button type="button" (click)="completeTask()" class="btn btn-default"><span title="Complete task and return to task list"
class="glyphicon glyphicon-ok blue text-success"></span>
</button>
</div>
<div class="panel-header">
<h4><b>{{task?.name}}</b></h4>
</div>
</div>
<div class="panel-body" *ngIf="task">
<div class="row">
<form #TaskForm="ngForm">
@ -55,6 +52,5 @@
<div class="row">
<iframe class="col-xs-12" [src]="link"></iframe>
</div>
</div>
</div>

49
web/src/app/workplace/taskdetails/attribute/attribute.component.html
View File

@ -1,35 +1,30 @@
<ng-container>
<table class="table table-striped table-center">
<thead>
<tr>
<th class="table__remove-col"></th>
<th>Attribute</th>
<th>Property</th>
</tr>
<tr>
<th class="table__remove-col"></th>
<th>Attribute</th>
<th>Property</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let entry of attributes; let i = index;">
<td>
<button type="button" (click)="removeAttribute(i)" data-toggle="tooltip" title="Remove"
class="btn btn-default remove">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
<td>
<input type="text" class="form-control" [(ngModel)]="entry.key"
name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}"/>
</td>
<td>
<input type="text" class="form-control" [(ngModel)]="entry.value"
name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}-val"/>
</td>
</tr>
<tr *ngFor="let entry of attributes; let i = index;">
<td>
<button type="button" (click)="removeAttribute(i)" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
<span class="material-icons md-20 red">clear</span>
</button>
</td>
<td>
<input type="text" class="form-control" [(ngModel)]="entry.key" name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}" />
</td>
<td>
<input type="text" class="form-control" [(ngModel)]="entry.value" name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}-val" />
</td>
</tr>
</tbody>
</table>
<button type="button" (click)="addAttribute()" class="btn btn-default"
data-toggle="tooltip"
title="Add new access">
<span class="glyphicon glyphicon-plus green-blue" aria-hidden="true"></span>
Add new {{ callbackInfo ? 'callback information' : 'custom attribute'}}
<button type="button" (click)="addAttribute()" class="btn btn-default" data-toggle="tooltip" title="Add new access">
<span class="material-icons md-20 green-blue">add</span>
<span>Add new {{ callbackInfo ? 'callback information' : 'custom attribute'}}</span>
</button>
</ng-container>
</ng-container>

37
web/src/app/workplace/taskdetails/taskdetails.component.html
View File

@ -3,24 +3,24 @@
<div class="panel-heading">
<div *ngIf="showDetail" class="pull-left btn-group align-header">
<button (click)="backClicked()" class="btn btn-default no-style blue visible-xs visible-sm hidden">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Back
<span class="material-icons md-20 blue">arrow_back_ios</span>
</button>
</div>
<div class="pull-right btn-group">
<button type="button" (click)="toggleFormValidation = !toggleFormValidation" class="btn btn-default btn-primary"
data-toggle="tooltip" title="Save">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
<span class="material-icons md-20 white">save</span>
</button>
<ng-container *ngIf="currentId != 'new-task'">
<button type="button" title="Open task to work on it" class="btn btn-default" aria-label="Left Align"
[disabled]="workOnTaskDisabled()" (click)="openTask()">
<span class="glyphicon glyphicon-new-window blue" aria-hidden="true"></span>
<span class="material-icons md-20 blue">open_in_new</span>
</button>
<button type="button" (click)="resetTask()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
<span class="material-icons md-20 blue">undo</span>
</button>
<button type="button" title="Delete Task" class="btn btn-default remove" (click)="deleteTask()">
<span class="glyphicon glyphicon-remove"></span>
<span class="material-icons md-20 red">delete</span>
</button>
</ng-container>
</div>
@ -30,48 +30,43 @@
</div>
<div class="panel-body">
<accordion *ngIf="task && !requestInProgress">
<accordion-group panelClass="customClass" isOpen="true" (isOpenChange)="accordion1State = $event" >
<accordion-group panelClass="customClass" isOpen="true" (isOpenChange)="accordion1State = $event">
<button class="btn btn-block clearfix" accordion-heading>
<div class="pull-left float-left">1 - Information</div>
<span class="float-right pull-right glyphicon blue" [ngClass]="{
'glyphicon-chevron-up': !accordion1State,
'glyphicon-chevron-down': accordion1State}"></span>
<span class="float-right pull-right material-icons md-20 blue">{{accordion1State?
'expand_more':'expand_less'}}</span>
</button>
<taskana-task-details-general-fields [task]="task" [saveToggleTriggered]="toggleFormValidation" (formValid)="onSubmit()"></taskana-task-details-general-fields>
</accordion-group>
<accordion-group panelClass="customClass" (isOpenChange)="accordion2State = $event">
<button class="btn btn-block clearfix" accordion-heading>
<div class="pull-left float-left">2 - Status details</div>
<span class="float-right pull-right glyphicon blue" [ngClass]="{
'glyphicon-chevron-up': !accordion2State,
'glyphicon-chevron-down': accordion2State}"></span>
<span class="float-right pull-right material-icons md-20 blue">{{accordion2State?
'expand_more':'expand_less'}}</span>
</button>
<taskana-general-fields-extension [task]="task"></taskana-general-fields-extension>
</accordion-group>
<accordion-group panelClass="customClass" (isOpenChange)="accordion3State = $event">
<button class="btn btn-block clearfix" accordion-heading>
<div class="pull-left float-left">3 - Custom fields</div>
<span class="float-right pull-right glyphicon blue" [ngClass]="{
'glyphicon-chevron-up': !accordion3State,
'glyphicon-chevron-down': accordion3State}"></span>
<span class="float-right pull-right material-icons md-20 blue">{{accordion3State?
'expand_more':'expand_less'}}</span>
</button>
<taskana-task-details-custom-fields [task]="task"></taskana-task-details-custom-fields>
</accordion-group>
<accordion-group panelClass="customClass" (isOpenChange)="accordion4State = $event">
<button class="btn btn-block clearfix" accordion-heading>
<div class="pull-left float-left">4 - Custom attributes</div>
<span class="float-right pull-right glyphicon blue" [ngClass]="{
'glyphicon-chevron-up': !accordion4State,
'glyphicon-chevron-down': accordion4State}"></span>
<span class="float-right pull-right material-icons md-20 blue">{{accordion4State?
'expand_more':'expand_less'}}</span>
</button>
<taskana-task-details-attributes [attributes]="task.customAttributes"></taskana-task-details-attributes>
</accordion-group>
<accordion-group panelClass="customClass" (isOpenChange)="accordion5State = $event">
<button class="btn btn-block clearfix" accordion-heading>
<div class="pull-left float-left">5 - Callback information</div>
<span class="float-right pull-right glyphicon blue" [ngClass]="{
'glyphicon-chevron-up': !accordion5State,
'glyphicon-chevron-down': accordion5State}"></span>
<span class="float-right pull-right material-icons md-20 blue">{{accordion5State?
'expand_more':'expand_less'}}</span>
</button>
<taskana-task-details-attributes [attributes]="task.callbackInfo" [callbackInfo]="true"></taskana-task-details-attributes>
</accordion-group>

10
web/src/app/workplace/tasklist/tasklist-toolbar/tasklist-toolbar.component.html
View File

@ -2,18 +2,18 @@
<div class="row">
<div *ngIf="currentBasket" class="col-xs-2">
<button (click)="createTask()" type="button" class="btn btn-default pull-left green-blue" title="Add Task to current Workbasket">
<span class="glyphicon glyphicon-plus"></span>
<span class="material-icons md-20 green-blue">add_circle_outline</span>
</button>
</div>
<div class="col-xs-6">
<input [(ngModel)]="resultName" [typeahead]="workbasketNames" class="form-control" (typeaheadOnSelect)="searchBasket()"
(typeaheadNoResults)="workbasketSelected = false" placeholder="Search for Workbasket ..." />
</div>
<div *ngIf="currentBasket" class="pull-right margin-right">
<div *ngIf="currentBasket" class="pull-right margin-right btn-group">
<taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group"></taskana-sort>
<button class="btn btn-default collapsed" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState">
<span class="glyphicon glyphicon-filter blue"></span>
</button>
<taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" class="btn-group"></taskana-sort>
<span class="material-icons md-20 blue">{{!toolbarState? 'search' : 'expand_less'}}</span>
</button>
</div>
</div>
<div [@toggleDown]="toolbarState" class="row no-overflow">

2
web/src/app/workplace/tasklist/tasklist.component.ts
View File

@ -123,7 +123,7 @@ export class TasklistComponent implements OnInit, OnDestroy {
if (this.toolbarElement && this.currentBasket) {
const toolbarSize = this.toolbarElement.nativeElement.offsetHeight;
const cardHeight = 53;
const unusedHeight = 140;
const unusedHeight = 145;
const totalHeight = window.innerHeight;
const cards = Math.round((totalHeight - (unusedHeight + toolbarSize)) / cardHeight);
cards > 0 ? TaskanaQueryParameters.pageSize = cards : TaskanaQueryParameters.pageSize = 1;

7
web/src/assets/_buttons.scss Normal file
View File

@ -0,0 +1,7 @@
.btn-group > .dropdown > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group ul + .btn, {
margin-left: -1px;
}

2
web/src/assets/_main.scss
View File

@ -1,11 +1,13 @@
@import 'variables';
@import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
@import '../../node_modules/angular-tree-component/dist/angular-tree-component.css';
@import 'material-icons';
@import 'site';
@import 'forms';
@import 'tree';
@import 'type-ahead';
@import 'checkboxes';
@import 'buttons';
@import 'tabs';
@import 'bootstrap-3-backward-compatibility';
@import 'mixin/colors';

40
web/src/assets/_material-icons.scss Normal file
View File

@ -0,0 +1,40 @@
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: middle;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
/* Rules for sizing the icon. */
.material-icons.md-15 { font-size: 15px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

19
web/src/assets/_site.scss
View File

@ -215,10 +215,6 @@ body{
text-align: left;
}
.btn.remove {
color: crimson;
}
.dropdown-menu-users >li {
margin-bottom: 5px;
}
@ -242,10 +238,23 @@ body{
-o-transition: opacity 300ms ease, visibility 300ms ease;
transition: opacity 300ms ease, visibility 300ms ease;
}
/* buttons and icons vertical align */
.vertical-align{
vertical-align: top;
}
.btn > svg-icon > svg{
vertical-align: middle;
}
a > svg-icon > svg{
vertical-align: text-top;
}
/*end buttons and icons vertical align */
.btn > span.flip {
transform: rotateX(180deg);
}
.panel-heading{
padding: 8px 15px 4px 15px;
}
@ -337,7 +346,7 @@ li.list-group-item:hover {
border-bottom: 1px solid #ccc;
}
.empty-icon {
.center-block>span.empty-icon, .empty-icon {
display: block;
width: 150px;
height: 150px;

13
web/src/assets/_tree.scss
View File

@ -8,9 +8,11 @@ tree-viewport {
tree-node-expander {
& .toggle-children {
&:before {
@extend .material-icons;
content: 'add';
}
top: 2px;
@extend .glyphicon;
@extend .glyphicon-plus;
@extend .blue;
background: white;
background-image: none;
@ -25,7 +27,10 @@ tree-node-expander {
tree-node-expander .toggle-children-wrapper-expanded {
& .toggle-children {
@extend .glyphicon-minus ;
&:before {
@extend .material-icons;
content: 'remove';
}
transform: none;
}
}
@ -33,7 +38,7 @@ tree-node-expander .toggle-children-wrapper-expanded {
.node-content-wrapper {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0px 10px;
margin: 0px 14px;
}
.node-wrapper {

2
web/src/index.html
View File

@ -7,8 +7,10 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/icons/taskana.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<taskana-root></taskana-root>
</body>
</html>