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

TSK-1553: Rework master-and-details with Angular Material

This commit is contained in:
Sofie Hofmann 2021-02-09 15:16:20 +01:00
parent a22f36f0cd
commit a73b43b81d
2 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,22 @@
<div class="master-detail row row-no-gutters">
<div class="{{showDetail? 'col-md-4 hidden-xs hidden-sm':'col-xs-12 col-md-4'}} vertical-right-divider">
<router-outlet name="master"></router-outlet>
</div>
<div class="{{showDetail? 'col-xs-12 col-md-8': 'hidden'}}">
<router-outlet name="detail">
</router-outlet>
</div>
<div class="{{showDetail? 'hidden': 'hidden-xs hidden-sm col-md-8 container-no-items'}}">
<div *ngIf="currentRoute === 'workbaskets'" class="center-block no-detail">
<h3 class="grey">Select a workbasket</h3>
<svg-icon class="img-responsive empty-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
</div>
<div *ngIf="currentRoute === 'classifications'" class="center-block no-detail">
<h3 class="grey">Select a classification</h3>
<svg-icon class="img-responsive empty-icon" src="./assets/icons/classification-empty.svg"></svg-icon>
</div>
<div *ngIf="currentRoute === 'tasks'" class="center-block no-detail">
<h3 class="grey">Select a Task</h3>
<span class="material-icons empty-icon md-20">done_all</span>
</div>
</div>
<div class="workplace-overview">
<!-- TASK TOOLBAR AND TASK LIST-->
<div class="workplace-overview__task-list">
<router-outlet name="master"> </router-outlet>
</div>
<div class="vertical-right-divider"></div>
<!-- TASK DETAILS-->
<div *ngIf="showDetail" class="workplace-overview__task-details">
<router-outlet name="detail"> </router-outlet>
</div>
<!-- TASK DETAILS WITHOUT SELECTED -->
<div *ngIf="!showDetail && currentRoute === 'tasks'" class="workplace-overview__empty-page">
<h2> Select a Task </h2>
<br>
<div style="transform: scale(4)"> <mat-icon>done_all</mat-icon> </div>
</div>
</div>

27
web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
View File

@ -1,6 +1,23 @@
.master-detail {
min-width: 100vw;
}
.center-block.no-detail {
text-align: center;
@import 'src/theme/_colors.scss';
.workplace-overview {
display: flex;
&__task-list {
width: 500px;
}
&__task-details {
flex-grow: 1;
}
&__empty-page {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $grey;
}
}