Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-08-02 20:42:24 +00:00
Code Issues Projects Releases Wiki Activity

feat(reDesign): add project setting buttons

Browse source
This commit is contained in:
Johannes Millan 2019-09-22 16:26:02 +02:00
parent 1ea698ad64
commit 655794032f
2 changed files with 73 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/app/core-ui/side-nav/side-nav.component.html
View file

@ -1,24 +1,28 @@
<section class="main">
<button mat-menu-item
<button class="route-link"
mat-menu-item
routerLink="work-view"
routerLinkActive="isActiveRoute">
<mat-icon>wb_sunny</mat-icon>
{{T.MH.TASKS|translate}}
</button>
<button mat-menu-item
<button class="route-link"
mat-menu-item
routerLink="schedule"
routerLinkActive="isActiveRoute">
<mat-icon>access_alarms</mat-icon>
{{T.MH.SCHEDULED|translate}}
</button>
<button mat-menu-item
<button class="route-link"
mat-menu-item
routerLink="worklog"
routerLinkActive="isActiveRoute">
<mat-icon>date_range</mat-icon>
<span class="text">{{T.MH.WORKLOG|translate}}</span>
</button>
<button mat-menu-item
<button class="route-link"
mat-menu-item
routerLink="metrics"
routerLinkActive="isActiveRoute">
<mat-icon>donut_large</mat-icon>
@ -27,16 +31,23 @@
</section>
<section class="projects">
<button (click)="switchProject(project.id)"
[class.isCurrentProject]="project.id===(projectService.currentId$|async)"
*ngFor="let project of (projectService.list$|async); trackBy: trackById;"
mat-menu-item>
<div *ngFor="let project of (projectService.list$|async); trackBy: trackById;"
[class.isCurrentProject]="project.id===(projectService.currentId$|async)"
class="project">
<div [ngStyle]="getThemeColor(project.theme?.primary || project.themeColor)"
class="project-color"></div>
<mat-icon>list</mat-icon>
{{project.title}}
</button>
<button (click)="switchProject(project.id)"
mat-menu-item>
<mat-icon>list</mat-icon>
{{project.title}}
</button>
<button
class="project-settings-btn"
mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
</div>
<button (click)="addProject()"
mat-menu-item>
<mat-icon>add</mat-icon>
@ -46,7 +57,8 @@
<section class="app">
<button mat-menu-item
<button class="route-link"
mat-menu-item
routerLink="projects"
routerLinkActive="isActiveRoute">
<mat-icon>list</mat-icon>
@ -54,7 +66,8 @@
</button>
<button mat-menu-item
<button class="route-link"
mat-menu-item
routerLink="config"
routerLinkActive="isActiveRoute">
<mat-icon>settings_applications</mat-icon>

55
src/app/core-ui/side-nav/side-nav.component.scss
View file

@ -14,17 +14,56 @@ section {
}
button {
&.isCurrentProject,
&.isActiveRoute {
//position: sticky;
//top: 0;
font-weight: bold;
@include darkTheme {
background: rgba(255, 255, 255, 0.04);
.project {
display: flex;
position: relative;
align-items: stretch;
justify-content: stretch;
button:first-of-type {
flex-grow: 1;
}
button:last-of-type {
border-radius: 0;
align-self: stretch;
display: block;
height: auto;
min-width: 48px;
@include mq(xs) {
opacity: 0;
display: none;
}
}
&:hover {
button:last-of-type {
opacity: 1;
display: block;
}
}
}
.project-settings-btn:hover,
.project.isCurrentProject,
.project button:first-of-type:hover,
.route-link.isActiveRoute,
.route-link:hover {
//position: sticky;
//top: 0;
font-weight: bold;
@include lightTheme {
background: rgba(var(--palette-background-hover), var(--palette-background-hover-alpha, 1));
}
@include darkTheme {
background: rgba(255, 255, 255, 0.04);
}
}
.project,
.route-link {
.project-color,
&.isActiveRoute:before {
content: '';