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">
<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>
<!-- GENERAL -->
@ -199,7 +199,7 @@
<!-- 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>
<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 {
font-size: 1.5rem;
padding: 0.5rem;
max-width: calc(100% - 350px);
overflow: hidden;
text-overflow: ellipsis;
}
&__badge-message {
@ -62,8 +65,10 @@
&__subheading {
font-weight: bold;
line-height: 1.5;
padding-left: 15px;
margin-bottom: 0;
margin-top: 24px;
}
&__horizontal-line {
@ -82,7 +87,7 @@
&__general-right-column {
display: flex;
flex-direction: column;
width: 30%;
flex-grow: 1;
}
&__spacer {
@ -94,7 +99,7 @@
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 70%;
width: 50%;
}
&__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">
<!-- 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()">
Add
<mat-icon class="md-20">add</mat-icon>
@ -22,24 +22,24 @@
<!-- 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">
<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"
*ngIf="selectedCategory != ''">
</svg-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="selectCategory('')" class="category-filter__all-button">
<svg-icon class="category-filter__categories" src="./assets/icons/asterisk.svg"
<button class="classification-list__all-button" mat-menu-item (click)="selectCategory('')">
<svg-icon class="classification-list__categories" src="./assets/icons/asterisk.svg"
[title]="(getCategoryIcon('all') | async)?.text"></svg-icon>
<span>All</span>
</button>
<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>
<span> {{category}} </span>
</button>
@ -47,8 +47,8 @@
</div>
<!-- FILTER INPUT FIELD -->
<div class="filter__input">
<mat-form-field appearance="legacy" floatLabel="auto" class="filter__input-field">
<div class="classification-list__input">
<mat-form-field class="classification-list__input-field" appearance="legacy" floatLabel="auto">
<mat-label>Filter classification</mat-label>
<input matInput [ngModel]="inputValue" (ngModelChange)="inputValue = $event" matTooltip="Type to filter classifications">
</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';
.classification-list {
height: calc(100vh - 55px);
}
.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;
}
height: 100%;
.action-toolbar__add-button {
background-color: $aquamarine;
color: white;
}
&__no-items {
text-align: center;
padding-top: 150px;
}
.classification-list__import-export {
display: flex;
}
.classification-list__filter {
display: flex;
padding: 7px 4px 0;
}
.classification-list__category-filter {
padding-top: 7px;
}
&__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);
}
.category-filter__icons {
height: 33px;
width: 16px;
fill: #555;
}
.category-filter__categories {
fill: #555;
margin: 0;
top: -2px;
}
.category-filter__filter-button {
color: #555;
top: 3px;
margin-right: 12px;
}
&__action-buttons {
display: flex;
border: none;
margin-bottom: 0;
padding: 0 4px;
}
.filter__input {
width: 100%;
margin-right: 12px;
}
.filter__input-field {
width: 100% !important;
}
.classification-list__no-items {
text-align: center;
padding-top: 150px;
&__add-button {
background-color: $aquamarine;
color: white;
}
&__import-export {
display: flex;
}
&__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 */
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();
let actionDispatched = false;
actions$.pipe(ofActionDispatched(CreateClassification)).subscribe(() => (actionDispatched = true));
@ -153,33 +153,33 @@ describe('ClassificationListComponent', () => {
/* HTML: FILTER */
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.textContent).toBe('Filter classification');
});
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.textContent).toBe('filter_list');
});
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();
fixture.detectChanges();
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();
allButton.nativeElement.click();
expect(component.selectedCategory).toBe('');
});
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();
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);
});

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

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

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

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