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

TSK-1479: fixed classification tree not displaying all items (#1373) 

* TSK-1479: fixed classification tree not displaying all items

also change headline in classification details to have a max length to not bump the buttons to overflow when headline's length is too long

* TSK-1479: improve UI as requested in #1373

* TSK-1479: fixed jest tests
This commit is contained in:
Chi Nguyen 2020-12-14 14:20:12 +01:00 committed by GitHub
parent 164a7dffe7
commit 3221fd102b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 85 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,7 @@
<ng-form #ClassificationForm="ngForm"> <ng-form #ClassificationForm="ngForm">
<div class="detailed-fields"> <div class="detailed-fields">
<h6 class="detailed-fields__subheading" style="margin-top: 65px;"> General </h6> <h6 class="detailed-fields__subheading"> General </h6>
<mat-divider class="detailed-fields__horizontal-line"> </mat-divider> <mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
<!-- GENERAL --> <!-- GENERAL -->
@ -199,7 +199,7 @@
<!-- CUSTOM FIELDS --> <!-- CUSTOM FIELDS -->
<h6 class="detailed-fields__subheading" style="padding-top: 50px"> Custom Fields </h6> <h6 class="detailed-fields__subheading"> Custom Fields </h6>
<mat-divider class="detailed-fields__horizontal-line"> </mat-divider> <mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
<div class="detailed-fields__custom-fields"> <div class="detailed-fields__custom-fields">

9
web/src/app/administration/components/classification-details/classification-details.component.scss
View File

@ -22,6 +22,9 @@
&__headline { &__headline {
font-size: 1.5rem; font-size: 1.5rem;
padding: 0.5rem; padding: 0.5rem;
max-width: calc(100% - 350px);
overflow: hidden;
text-overflow: ellipsis;
} }
&__badge-message { &__badge-message {
@ -62,8 +65,10 @@
&__subheading { &__subheading {
font-weight: bold; font-weight: bold;
line-height: 1.5;
padding-left: 15px; padding-left: 15px;
margin-bottom: 0; margin-bottom: 0;
margin-top: 24px;
} }
&__horizontal-line { &__horizontal-line {
@ -82,7 +87,7 @@
&__general-right-column { &__general-right-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 30%; flex-grow: 1;
} }
&__spacer { &__spacer {
@ -94,7 +99,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
width: 70%; width: 50%;
} }
&__domain-checkbox { &__domain-checkbox {

16
web/src/app/administration/components/classification-list/classification-list.component.html
View File

@ -5,7 +5,7 @@
<div class="classification-list__action-buttons"> <div class="classification-list__action-buttons">
<!-- ADD BUTTON --> <!-- ADD BUTTON -->
<button mat-flat-button class="action-toolbar__add-button mr-1" matTooltip="Create new classification" <button mat-flat-button class="classification-list__add-button mr-1" matTooltip="Create new classification"
(click)="addClassification()"> (click)="addClassification()">
Add Add
<mat-icon class="md-20">add</mat-icon> <mat-icon class="md-20">add</mat-icon>
@ -22,24 +22,24 @@
<!-- CATEGORY FILTER --> <!-- CATEGORY FILTER -->
<div class="classification-list__category-filter"> <div class="classification-list__category-filter">
<button mat-stroked-button class="category-filter__filter-button" [matMenuTriggerFor]="menu" <button mat-stroked-button class="classification-list__filter-button" [matMenuTriggerFor]="menu"
matTooltip="Filter Category"> matTooltip="Filter Category">
<mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon> <mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon>
<svg-icon class="category-filter__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.name" <svg-icon class="classification-list__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.name"
[title]="(getCategoryIcon(selectedCategory) | async)?.text" [title]="(getCategoryIcon(selectedCategory) | async)?.text"
*ngIf="selectedCategory != ''"> *ngIf="selectedCategory != ''">
</svg-icon> </svg-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="selectCategory('')" class="category-filter__all-button"> <button class="classification-list__all-button" mat-menu-item (click)="selectCategory('')">
<svg-icon class="category-filter__categories" src="./assets/icons/asterisk.svg" <svg-icon class="classification-list__categories" src="./assets/icons/asterisk.svg"
[title]="(getCategoryIcon('all') | async)?.text"></svg-icon> [title]="(getCategoryIcon('all') | async)?.text"></svg-icon>
<span>All</span> <span>All</span>
</button> </button>
<button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)"> <button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)">
<svg-icon class="category-filter__categories" [src]="(getCategoryIcon(category) | async)?.name" <svg-icon class="classification-list__categories" [src]="(getCategoryIcon(category) | async)?.name"
[title]="(getCategoryIcon(category) | async)?.text"></svg-icon> [title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
<span> {{category}} </span> <span> {{category}} </span>
</button> </button>
@ -47,8 +47,8 @@
</div> </div>
<!-- FILTER INPUT FIELD --> <!-- FILTER INPUT FIELD -->
<div class="filter__input"> <div class="classification-list__input">
<mat-form-field appearance="legacy" floatLabel="auto" class="filter__input-field"> <mat-form-field class="classification-list__input-field" appearance="legacy" floatLabel="auto">
<mat-label>Filter classification</mat-label> <mat-label>Filter classification</mat-label>
<input matInput [ngModel]="inputValue" (ngModelChange)="inputValue = $event" matTooltip="Type to filter classifications"> <input matInput [ngModel]="inputValue" (ngModelChange)="inputValue = $event" matTooltip="Type to filter classifications">
</mat-form-field> </mat-form-field>

110
web/src/app/administration/components/classification-list/classification-list.component.scss
View File

@ -1,59 +1,67 @@
@import 'src/theme/_colors.scss'; @import 'src/theme/_colors.scss';
.classification-list { .classification-list {
height: calc(100vh - 55px); height: 100%;
}
.classification-list__action-toolbar {
padding: 16px 16px 0;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.classification-list__action-buttons {
display: flex;
border: none;
margin-bottom: 0;
padding: 0 4px;
}
.action-toolbar__add-button { &__no-items {
background-color: $aquamarine; text-align: center;
color: white; padding-top: 150px;
} }
.classification-list__import-export { &__action-toolbar {
display: flex; padding: 16px 16px 0;
} box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.classification-list__filter { }
display: flex;
padding: 7px 4px 0;
}
.classification-list__category-filter {
padding-top: 7px;
}
.category-filter__icons { &__action-buttons {
height: 33px; display: flex;
width: 16px; border: none;
fill: #555; margin-bottom: 0;
} padding: 0 4px;
.category-filter__categories { }
fill: #555;
margin: 0;
top: -2px;
}
.category-filter__filter-button {
color: #555;
top: 3px;
margin-right: 12px;
}
.filter__input { &__add-button {
width: 100%; background-color: $aquamarine;
margin-right: 12px; color: white;
} }
.filter__input-field {
width: 100% !important; &__import-export {
} display: flex;
.classification-list__no-items { }
text-align: center;
padding-top: 150px; &__filter {
display: flex;
padding: 7px 4px 0;
}
&__category-filter {
padding-top: 7px;
}
&__icons {
height: 33px;
width: 16px;
fill: #555;
}
&__categories {
fill: #555;
margin: 0;
top: -2px;
}
&__filter-button {
color: #555;
top: 3px;
margin-right: 12px;
}
&__input {
width: 100%;
margin-right: 12px;
}
&__input-field {
width: 100% !important;
}
} }

14
web/src/app/administration/components/classification-list/classification-list.component.spec.ts
View File

@ -132,7 +132,7 @@ describe('ClassificationListComponent', () => {
/* HTML: ACTION TOOLBAR */ /* HTML: ACTION TOOLBAR */
it('should call CreateClassification when add-classification button is clicked', async () => { it('should call CreateClassification when add-classification button is clicked', async () => {
const button = debugElement.nativeElement.querySelector('.action-toolbar__add-button'); const button = debugElement.nativeElement.querySelector('.classification-list__add-button');
expect(button).toBeTruthy(); expect(button).toBeTruthy();
let actionDispatched = false; let actionDispatched = false;
actions$.pipe(ofActionDispatched(CreateClassification)).subscribe(() => (actionDispatched = true)); actions$.pipe(ofActionDispatched(CreateClassification)).subscribe(() => (actionDispatched = true));
@ -153,33 +153,33 @@ describe('ClassificationListComponent', () => {
/* HTML: FILTER */ /* HTML: FILTER */
it('should display filter input field', () => { it('should display filter input field', () => {
const button = debugElement.nativeElement.querySelector('.filter__input-field'); const button = debugElement.nativeElement.querySelector('.classification-list__input-field');
expect(button).toBeTruthy(); expect(button).toBeTruthy();
expect(button.textContent).toBe('Filter classification'); expect(button.textContent).toBe('Filter classification');
}); });
it('should display filter button', () => { it('should display filter button', () => {
const button = debugElement.nativeElement.querySelector('.category-filter__filter-button'); const button = debugElement.nativeElement.querySelector('.classification-list__filter-button');
expect(button).toBeTruthy(); expect(button).toBeTruthy();
expect(button.textContent).toBe('filter_list'); expect(button.textContent).toBe('filter_list');
}); });
it('should change selectedCategory property when button is clicked', () => { it('should change selectedCategory property when button is clicked', () => {
const filterButton = debugElement.nativeElement.querySelector('.category-filter__filter-button'); const filterButton = debugElement.nativeElement.querySelector('.classification-list__filter-button');
filterButton.click(); filterButton.click();
fixture.detectChanges(); fixture.detectChanges();
component.selectedCategory = 'EXTERNAL'; component.selectedCategory = 'EXTERNAL';
const allButton = debugElement.query(By.css('.category-filter__all-button')); const allButton = debugElement.query(By.css('.classification-list__all-button'));
expect(allButton).toBeTruthy(); expect(allButton).toBeTruthy();
allButton.nativeElement.click(); allButton.nativeElement.click();
expect(component.selectedCategory).toBe(''); expect(component.selectedCategory).toBe('');
}); });
it('should display list of categories which can be selected', () => { it('should display list of categories which can be selected', () => {
const filterButton = debugElement.nativeElement.querySelector('.category-filter__filter-button'); const filterButton = debugElement.nativeElement.querySelector('.classification-list__filter-button');
filterButton.click(); filterButton.click();
fixture.detectChanges(); fixture.detectChanges();
const matMenu = debugElement.queryAll(By.css('.category-filter__categories')); const matMenu = debugElement.queryAll(By.css('.classification-list__categories'));
expect(matMenu.length).toBe(4); expect(matMenu.length).toBe(4);
}); });

1
web/src/app/administration/components/classification-overview/classification-overview.component.scss
View File

@ -7,6 +7,7 @@
} }
taskana-administration-classification-list { taskana-administration-classification-list {
min-width: 500px; min-width: 500px;
height: 100%;
} }
taskana-administration-classification-details { taskana-administration-classification-details {
flex-grow: 1; flex-grow: 1;

2
web/src/theme/_tree.scss
View File

@ -1,5 +1,5 @@
tree-viewport { tree-viewport {
height: calc(100vh - 165px); height: calc(100vh - 225px);
& > div { & > div {
display: inline-block; display: inline-block;
} }