feat: link task list and project settings from main menu bar at the top

This commit is contained in:
Johannes Millan 2019-09-26 22:57:32 +02:00
parent 6bcb176888
commit d65fbf643b
2 changed files with 70 additions and 33 deletions

View file

@ -7,37 +7,46 @@
<mat-icon>menu</mat-icon>
</button>
<div class="current-project-title">{{(projectService.currentProject$|async).title}}</div>
<!-- <button [matMenuTriggerFor]="projectMenu"-->
<!-- [style.pointer-events]="isProjectMenuDisabled ? 'none' : 'all'"-->
<!-- (menuOpened)="isProjectMenuDisabled = true"-->
<!-- (menuClosed)="isProjectMenuDisabled = false"-->
<!-- class="project-btn"-->
<!-- mat-button-->
<!-- [title]="T.MH.PROJECT_MENU|translate">-->
<!-- <span class="current-project-title">{{(projectService.currentProject$|async).title}}</span>-->
<!-- <mat-icon aria-hidden="true">arrow_drop_down</mat-icon>-->
<!-- </button>-->
<!-- <mat-menu #projectMenu="matMenu">-->
<!-- <button (click)="switchProject(project.id)"-->
<!-- *ngFor="let project of (projectService.list$|async); trackBy:trackById;"-->
<!-- mat-menu-item>-->
<!-- <mat-icon *ngIf="project.id===(projectService.currentId$|async)">radio_button_checked</mat-icon>-->
<!-- <mat-icon *ngIf="project.id!==(projectService.currentId$|async)">radio_button_unchecked</mat-icon>-->
<!-- {{project.title}}-->
<!-- </button>-->
<!-- <button mat-menu-item-->
<!-- routerLink="projects">-->
<!-- <mat-icon>list</mat-icon>-->
<!-- {{T.MH.MANAGE_PROJECTS|translate}}-->
<!-- </button>-->
<!-- <button (click)="addProject()"-->
<!-- mat-menu-item>-->
<!-- <mat-icon>add</mat-icon>-->
<!-- {{T.MH.CREATE_PROJECT|translate}}-->
<!-- </button>-->
<!-- </mat-menu>-->
<div class="current-project-title"
mat-ripple
routerLink="work-view">{{(projectService.currentProject$|async).title}}</div>
<button mat-icon-button
class="project-settings-btn"
routerLink="project-settings">
<mat-icon>more_vert</mat-icon>
</button>
<!-- <button [matMenuTriggerFor]="projectMenu"-->
<!-- [style.pointer-events]="isProjectMenuDisabled ? 'none' : 'all'"-->
<!-- (menuOpened)="isProjectMenuDisabled = true"-->
<!-- (menuClosed)="isProjectMenuDisabled = false"-->
<!-- class="project-btn"-->
<!-- mat-button-->
<!-- [title]="T.MH.PROJECT_MENU|translate">-->
<!-- <span class="current-project-title">{{(projectService.currentProject$|async).title}}</span>-->
<!-- <mat-icon aria-hidden="true">arrow_drop_down</mat-icon>-->
<!-- </button>-->
<!-- <mat-menu #projectMenu="matMenu">-->
<!-- <button (click)="switchProject(project.id)"-->
<!-- *ngFor="let project of (projectService.list$|async); trackBy:trackById;"-->
<!-- mat-menu-item>-->
<!-- <mat-icon *ngIf="project.id===(projectService.currentId$|async)">radio_button_checked</mat-icon>-->
<!-- <mat-icon *ngIf="project.id!==(projectService.currentId$|async)">radio_button_unchecked</mat-icon>-->
<!-- {{project.title}}-->
<!-- </button>-->
<!-- <button mat-menu-item-->
<!-- routerLink="projects">-->
<!-- <mat-icon>list</mat-icon>-->
<!-- {{T.MH.MANAGE_PROJECTS|translate}}-->
<!-- </button>-->
<!-- <button (click)="addProject()"-->
<!-- mat-menu-item>-->
<!-- <mat-icon>add</mat-icon>-->
<!-- {{T.MH.CREATE_PROJECT|translate}}-->
<!-- </button>-->
<!-- </mat-menu>-->
<nav class="action-nav">

View file

@ -50,15 +50,43 @@ $macExtraPadding: (-8px+$mac-title-bar-padding);
.current-project-title {
//font-weight: bold;
font-size: 18px;
margin-left: $s;
margin-right: 2*$s;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
//flex-grow: 1;
white-space: nowrap;
max-width: 220px;
cursor: pointer;
border-radius: $card-border-radius;
padding: $s 2*$s $s $s;
@include mq(xs) {
padding-right: $s;
}
&:focus {
outline: none
}
}
.project-settings-btn {
display: none;
@include mq(xs) {
display: block;
transition: $transition-standard;
opacity: 0;
margin-right: 2*$s;
margin-left: -$s;
position: relative;
z-index: 1;
}
&:hover,
.current-project-title:hover + & {
opacity: 1;
}
}
a,
button {
cursor: pointer;