mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 12:05:08 +00:00
(dashboards/project) Light header on light themes, small adjustments in the project selector
This commit is contained in:
parent
966e2db743
commit
a2ff55d4c1
|
@ -1,7 +1,7 @@
|
||||||
<div class="flex flex-col flex-auto min-w-0">
|
<div class="flex flex-col flex-auto min-w-0">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="dark bg-card dark:border-b">
|
<div class="bg-card">
|
||||||
<div class="flex flex-col w-full max-w-screen-xl mx-auto px-6 sm:px-8">
|
<div class="flex flex-col w-full max-w-screen-xl mx-auto px-6 sm:px-8">
|
||||||
<div class="flex flex-col sm:flex-row flex-auto sm:items-center min-w-0 my-8 sm:my-12">
|
<div class="flex flex-col sm:flex-row flex-auto sm:items-center min-w-0 my-8 sm:my-12">
|
||||||
<!-- Avatar and name -->
|
<!-- Avatar and name -->
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="flex items-center mt-6 sm:mt-0 sm:ml-2 space-x-3">
|
<div class="flex items-center mt-6 sm:mt-0 sm:ml-2 space-x-3">
|
||||||
<button
|
<button
|
||||||
class="fuse-mat-button-rounded bg-accent-600"
|
class="fuse-mat-button-rounded bg-accent-700"
|
||||||
mat-flat-button
|
mat-flat-button
|
||||||
[color]="'accent'">
|
[color]="'accent'">
|
||||||
<mat-icon
|
<mat-icon
|
||||||
|
@ -46,17 +46,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Project selector -->
|
<!-- Project selector -->
|
||||||
|
<div
|
||||||
|
class="relative flex self-start pt-2 pb-1 pl-5 pr-4 cursor-pointer overflow-hidden rounded-t-xl bg-default hover:bg-hover"
|
||||||
|
matRipple
|
||||||
|
[matMenuTriggerFor]="projectsMenu">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="px-4 py-2 rounded-tl-xl overflow-hidden bg-hover">
|
<div class="overflow-hidden">
|
||||||
<div class="sm:text-lg leading-6 truncate">{{selectedProject}}</div>
|
<div class="font-medium leading-6 truncate">{{selectedProject}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-px rounded-tr-xl bg-hover">
|
<div class="flex items-center justify-center pl-2">
|
||||||
<button
|
<mat-icon
|
||||||
[matMenuTriggerFor]="projectsMenu"
|
class="icon-size-5"
|
||||||
mat-icon-button>
|
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:dots-horizontal'"></mat-icon>
|
</div>
|
||||||
</button>
|
</div>
|
||||||
<mat-menu #projectsMenu="matMenu">
|
<mat-menu
|
||||||
|
#projectsMenu="matMenu"
|
||||||
|
[xPosition]="'before'">
|
||||||
<button
|
<button
|
||||||
mat-menu-item
|
mat-menu-item
|
||||||
(click)="selectedProject='ACME Corp. Backend App'">ACME Corp. Backend App
|
(click)="selectedProject='ACME Corp. Backend App'">ACME Corp. Backend App
|
||||||
|
@ -77,10 +83,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main -->
|
<!-- Main -->
|
||||||
<div class="flex-auto mt-4 sm:mt-6">
|
<div class="flex-auto pt-4 sm:pt-6">
|
||||||
<div class="w-full max-w-screen-xl mx-auto">
|
<div class="w-full max-w-screen-xl mx-auto">
|
||||||
|
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatMenuModule } from '@angular/material/menu';
|
import { MatMenuModule } from '@angular/material/menu';
|
||||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||||
|
import { MatRippleModule } from '@angular/material/core';
|
||||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||||
import { MatSortModule } from '@angular/material/sort';
|
import { MatSortModule } from '@angular/material/sort';
|
||||||
import { MatTableModule } from '@angular/material/table';
|
import { MatTableModule } from '@angular/material/table';
|
||||||
|
@ -20,7 +21,7 @@ import { projectRoutes } from 'app/modules/admin/dashboards/project/project.rout
|
||||||
declarations: [
|
declarations: [
|
||||||
ProjectComponent
|
ProjectComponent
|
||||||
],
|
],
|
||||||
imports : [
|
imports: [
|
||||||
RouterModule.forChild(projectRoutes),
|
RouterModule.forChild(projectRoutes),
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatButtonToggleModule,
|
MatButtonToggleModule,
|
||||||
|
@ -34,7 +35,8 @@ import { projectRoutes } from 'app/modules/admin/dashboards/project/project.rout
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
NgApexchartsModule,
|
NgApexchartsModule,
|
||||||
TranslocoModule,
|
TranslocoModule,
|
||||||
SharedModule
|
SharedModule,
|
||||||
|
MatRippleModule
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class ProjectModule
|
export class ProjectModule
|
||||||
|
|
Loading…
Reference in New Issue
Block a user