refactor(manager): adjust header and sidebar

move actions header into manager. taking sidebar out of column.
ElonH · May 27, 2020 · f0ea2d5 · f0ea2d5
1 parent aefbb8a
commit f0ea2d5
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 47 deletions.
diff --git a/src/app/pages/manager/breadcrumb/breadcrumb.component.ts b/src/app/pages/manager/breadcrumb/breadcrumb.component.ts
@@ -4,7 +4,7 @@ import { NavigationService } from '../navigation.service';
 @Component({
 	selector: 'manager-breadcrumb',
 	template: `
-		<nav>
+		<!-- <nav> -->
 			<ol class="breadcrumb">
 				<li class="breadcrumb-item">
 					<a [routerLink]="['.']" routerLinkActive="router-link-active">
@@ -35,7 +35,7 @@ import { NavigationService } from '../navigation.service';
 				<a class="option"><nb-icon [icon]="listView ? 'list' : 'grid'"></nb-icon></a>
 				<a class="option"><nb-icon icon="info"></nb-icon></a>
 			</ol>
-		</nav>
+		<!-- </nav> -->
 	`,
 	styles: [
 		`

diff --git a/src/app/pages/manager/manager.component.ts b/src/app/pages/manager/manager.component.ts
@@ -4,35 +4,53 @@ import { NavigationService } from './navigation.service';
 @Component({
 	selector: 'app-manager',
 	template: `
-		<nb-card>
-			<nb-card-body>
-				<manager-breadcrumb> </manager-breadcrumb>
-				<div class="row">
-					<div class="view col-md-9 col-sm-8">
-						<manager-homeMode *ngIf="homeMode"> </manager-homeMode>
-						<manager-fileMode *ngIf="fileMode"> </manager-fileMode>
-					</div>
-					<div class="sidebar col-md-3 col-sm-4">123</div>
-				</div>
-			</nb-card-body>
-		</nb-card>
+		<nb-layout-header fixed style="width: calc(100% - 16rem); left: inherit;">
+			<manager-breadcrumb> </manager-breadcrumb>
+		</nb-layout-header>
+		<div class="subcolumn container">
+			<nb-card>
+				<nb-card-body>
+					<manager-homeMode *ngIf="homeMode"> </manager-homeMode>
+					<manager-fileMode *ngIf="fileMode"> </manager-fileMode>
+				</nb-card-body>
+			</nb-card>
+		</div>
+		<nb-layout-header subheader>
+			<nb-actions>
+				<nb-action icon="copy"></nb-action>
+				<nb-action icon="move"></nb-action>
+				<nb-action icon="trash-2"></nb-action>
+				<nb-action icon="clipboard"></nb-action>
+			</nb-actions>
+			<nb-actions class="pushToRight">
+				<nb-action icon="inbox"></nb-action>
+			</nb-actions>
+		</nb-layout-header>
+		<!-- <nb-sidebar fixed right>
+			<div>123</div>
+		</nb-sidebar> -->
 	`,
 	styles: [
 		`
-			.view {
-				padding-top: 1rem;
-				padding-bottom: 1rem;
+			nb-layout-header ::ng-deep nav.fixed {
+				box-shadow: none;
 			}
-			.sidebar {
-				border-left: solid;
-				border-color: #e9ecef;
-				border-left-width: 0.25rem;
-				width: 16rem;
-				overflow-y: auto;
-				overflow-x: hidden;
+			manager-breadcrumb {
+				width: 100%;
 			}
-			nb-card-body {
-				padding-bottom: 0;
+			.subcolumn {
+				height: calc(100vh - 2 * 4.75rem);
+				padding: 2.25rem 2.25rem 0.75rem;
+			}
+			/* nb-sidebar.right ::ng-deep .scrollable {
+				padding-top: 5rem;
+			} */
+			.pushToRight {
+				margin-left: auto;
+				/* margin-right: 16rem; */
+			}
+			nb-card {
+				/* margin-top: 1.25rem; */
 			}
 		`,
 	],

diff --git a/src/app/pages/manager/manager.module.ts b/src/app/pages/manager/manager.module.ts
@@ -3,7 +3,14 @@ import { CommonModule } from '@angular/common';
 
 import { ManagerRoutingModule } from './manager-routing.module';
 import { ManagerComponent } from './manager.component';
-import { NbActionsModule, NbCardModule, NbIconModule, NbProgressBarModule } from '@nebular/theme';
+import {
+	NbActionsModule,
+	NbCardModule,
+	NbIconModule,
+	NbProgressBarModule,
+	NbLayoutModule,
+	NbSidebarModule,
+} from '@nebular/theme';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { HomeModeComponent } from './homeMode/homeMode.component';
 import { RemoteComponent } from './homeMode/remote.component';
@@ -28,6 +35,8 @@ import { ListViewComponent } from './fileMode/listView/listView.component';
 		NbIconModule,
 		NbProgressBarModule,
 		TableModule,
+		NbLayoutModule,
+		NbSidebarModule,
 	],
 })
 export class ManagerModule {}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
@@ -6,40 +6,24 @@ import { CurrentUserService } from './current-user.service';
 @Component({
 	selector: 'rng-pages',
 	template: `
-		<nb-layout windowMode>
+		<nb-layout [withScroll]="false">
 			<nb-layout-header fixed>
 				<nb-actions>
 					<nb-action icon="menu-outline" (click)="toggleNav()"></nb-action>
 				</nb-actions>
 			</nb-layout-header>
 
-			<nb-sidebar tag="nav"><nb-menu [items]="menu"> </nb-menu></nb-sidebar>
+			<nb-sidebar class="main-sidebar" tag="nav"><nb-menu [items]="menu"> </nb-menu></nb-sidebar>
 
 			<nb-layout-column class="colored-column-basic basic-contant" style="padding: 0;">
 				<router-outlet></router-outlet>
 			</nb-layout-column>
-
-			<nb-layout-footer>
-				<nb-actions>
-					<nb-action icon="copy"></nb-action>
-					<nb-action icon="move"></nb-action>
-					<nb-action icon="trash-2"></nb-action>
-					<nb-action icon="clipboard"></nb-action>
-				</nb-actions>
-				<nb-actions class="pushToRight">
-					<nb-action icon="inbox"></nb-action>
-				</nb-actions>
-			</nb-layout-footer>
 		</nb-layout>
 	`,
 	styles: [
 		`
-			.pushToRight {
-				margin-left: auto;
-			}
-			nb-layout-footer {
-				bottom: 0;
-				position: sticky;
+			.main-sidebar {
+				z-index: 1536;
 			}
 		`,
 	],