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

TSK-1625: Adapt Workbasket list items for potential long content

This commit is contained in:
Sofie Hofmann 2021-04-26 12:41:34 +02:00
parent dcad9930a6
commit e65093ca89
2 changed files with 64 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/app/administration/components/workbasket-list/workbasket-list.component.html
View File

@ -7,29 +7,35 @@
</section> </section>
<!-- WORKBASKET LIST --> <!-- WORKBASKET LIST -->
<div class="workbasket-list__workbaskets" *ngIf="((workbasketsSummary$ | async) && (workbasketsSummary$ | async)?.length > 0) else empty_workbaskets"> <div class="workbasket-list__list-items" *ngIf="((workbasketsSummary$ | async) && (workbasketsSummary$ | async)?.length > 0) else empty_workbaskets">
<mat-selection-list #workbasket [multiple]="false"> <mat-selection-list #workbasket [multiple]="false">
<mat-list-option class="workbasket-list__workbaskets-item" <mat-list-option class="workbasket-list__list-item"
*ngFor="let workbasket of (workbasketsSummary$ | async)" *ngFor="let workbasket of (workbasketsSummary$ | async);"
(click)="selectWorkbasket(workbasket.workbasketId)" (click)="selectWorkbasket(workbasket.workbasketId)"
[selected]="workbasket.workbasketId == selectedId" [selected]="workbasket.workbasketId == selectedId"
[value]="workbasket.workbasketId"> [value]="workbasket.workbasketId">
<div class="workbaskets-item__wrapper">
<div class="workbaskets-item__icon" *ngIf="expanded"> <!-- WORKBASKET LIST ITEM -->
<div class="workbasket-list__list-item--wrapper">
<!-- ICON -->
<div class="workbasket-list__list-item--icon" *ngIf="expanded">
<taskana-administration-icon-type [type]="workbasket.type" size="large" tooltip="true" [selected]="workbasket.workbasketId === selectedId"></taskana-administration-icon-type> <taskana-administration-icon-type [type]="workbasket.type" size="large" tooltip="true" [selected]="workbasket.workbasketId === selectedId"></taskana-administration-icon-type>
</div> </div>
<div class="workbaskets-item__info"> <!-- INFORMATION -->
<p> <div class="workbasket-list__list-item--info">
<b>{{workbasket.name}}</b>, <i>{{workbasket.key}} </i>
</p> <div class="workbasket-list__list-item--wrap">
<p style="max-height: 20px; overflow: hidden; text-overflow: ellipsis">{{workbasket.description}} &nbsp;</p> <b>{{workbasket.name}}</b>, <i>{{workbasket.key}}</i>
<p>{{workbasket.owner}} &nbsp;</p> </div>
<p class="workbasket-list__list-item--no-wrap">{{workbasket.description}}</p>
<p class="workbasket-list__list-item--no-wrap">{{workbasket.owner}}</p>
<div class="workbasket-list__list-item--marked" *ngIf="workbasket.markedForDeletion">
<span title="Marked for deletion" data-toggle="tooltip" class="material-icons md-20 {{workbasket.workbasketId === selectedId ? 'white': 'red' }} ">error</span>
</div> </div>
<div class="workbaskets-item__marked" *ngIf="workbasket.markedForDeletion">
<span title="Marked for deletion" data-toggle="tooltip" class="material-icons md-20 {{workbasket.workbasketId === selectedId ? 'white': 'red' }} ">error</span>
</div> </div>
</div> </div>

64
web/src/app/administration/components/workbasket-list/workbasket-list.component.scss
View File

@ -3,36 +3,58 @@
.workbasket-list { .workbasket-list {
height: calc(100vh - 156px); height: calc(100vh - 156px);
overflow-y: hidden; overflow-y: hidden;
}
.workbasket-list__workbaskets { &__list-items {
overflow-y: hidden; overflow-y: hidden;
}
&__list-item--wrapper {
display: flex;
}
&__list-item--icon {
padding: 32px 32px 32px 16px;
}
&__list-item--info {
display: block;
overflow: hidden;
padding: 8px 0;
line-height: 1.3em;
}
&__list-item--wrap {
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
&__list-item--no-wrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__no-items {
text-align: center;
padding-top: 150px;
}
} }
.workbasket-list__workbaskets-item { p {
margin: 0;
max-height: 20px;
} }
.mat-list-item { .mat-list-item {
height: 90px !important; height: 90px !important;
overflow: hidden; overflow: hidden;
} }
.mat-list-single-selected-option { .mat-list-single-selected-option {
background-color: $green !important; background-color: $green !important;
color: white; color: white;
} }
.workbaskets-item__wrapper {
display: flex;
}
.workbaskets-item__icon {
padding: 32px 32px 32px 16px;
}
.workbaskets-item__info {
display: block;
overflow: hidden;
padding: 8px 0;
}
p {
margin: 0;
}
.workbasket-list__no-items {
text-align: center;
padding-top: 150px;
}