add ability to resize frame (#67)

eksrha · web-flow · commit 5f036c7689ed · 2023-12-18T11:11:54.000+01:00
diff --git a/projects/lib-workspace/src/app/app.component.html b/projects/lib-workspace/src/app/app.component.html
@@ -1,4 +1,4 @@
-<fs-nav-frame [navFrameConfig]="navFrameConfig" [navRoutes]="navRoutes">
+<fs-nav-frame [navFrameConfig]="navFrameConfig" [sizing]="sizing">
   <fs-nav-frame-toolbar>
     <fs-nav-frame-toolbar-start>Current App Title</fs-nav-frame-toolbar-start>
 
diff --git a/projects/lib-workspace/src/app/app.component.ts b/projects/lib-workspace/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import localeDeExtra from '@angular/common/locales/extra/de';
 import { Component, OnInit } from '@angular/core';
-import { NavFrameConfig, NavRoutes } from 'projects/ng-mat-components/src/public-api';
+import { NavFrameConfig, NavFrameSizing, NavRoutes } from 'projects/ng-mat-components/src/public-api';
 
 @Component({
   selector: 'app-root',
@@ -11,6 +11,18 @@ import { NavFrameConfig, NavRoutes } from 'projects/ng-mat-components/src/public
 })
 export class AppComponent implements OnInit {
   title = 'FS DevOps`s ng mat components';
+
+  navFrameConfig: NavFrameConfig = {
+    appName: 'Demo App',
+    appVersion: '0.0.0',
+    // logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
+  };
+  sizing: NavFrameSizing = {
+    toolbarHeight: 3,
+    sidebarWidthClosed: 4,
+    sidebarWidthOpened: 18,
+  };
+
   navRoutes: NavRoutes = [
     {
       title: 'Home',
@@ -67,12 +79,6 @@ export class AppComponent implements OnInit {
     },
   ];
 
-  navFrameConfig: NavFrameConfig = {
-    appName: 'Demo App',
-    appVersion: '0.0.0',
-    // logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
-  };
-
   constructor() {}
 
   ngOnInit() {
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_variables.scss b/projects/ng-mat-components/src/fs-nav-frame/_variables.scss
diff --git a/projects/ng-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component.scss b/projects/ng-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component.scss
@@ -1,12 +1,13 @@
 fs-nav-frame-sidebar-item {
-  height: 4rem;
+  height: var(--sidebar-width-closed);
   display: block;
 }
 
 fs-nav-frame-sidebar-item button {
-  width: 100%;
-  height: 4rem !important;
   display: inline-block !important;
+  width: 100%;
+  height: var(--sidebar-width-closed) !important;
+  min-width: var(--sidebar-width-closed) !important;
 
   .mdc-button__label {
     display: inline-flex;
@@ -15,10 +16,10 @@ fs-nav-frame-sidebar-item button {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 4rem !important;
+    height: var(--sidebar-width-closed) !important;
 
     > i {
-      margin-left: 12px;
+      width: calc(var(--sidebar-width-closed) - 16px);
     }
 
     > span {
@@ -29,9 +30,13 @@ fs-nav-frame-sidebar-item button {
   }
 }
 
-.sidebar.opened > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label > span {
-  display: block;
+.sidebar.opened > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label {
+  > span {
+    display: block;
+  }
 }
-.sidebar:not(.opened) > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label > span {
-  display: none;
+.sidebar:not(.opened) > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label {
+  > span {
+    display: none;
+  }
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
@@ -1,20 +1,18 @@
-@use './_variables' as *;
-
 // logo
 .fs-nav-frame-logo {
   position: fixed;
   z-index: 2;
   top: 0;
   left: 0;
-  width: $sidebar-width-closed;
-  height: $toolbar-height;
+  width: var(--sidebar-width-closed);
+  height: var(--toolbar-height);
   transition: all 0.3s ease-in-out;
   display: grid;
-  grid-template-columns: $sidebar-width-closed 1fr;
+  grid-template-columns: var(--sidebar-width-closed) 1fr;
 
   .logo-wrapper {
-    width: $sidebar-width-closed;
-    height: $toolbar-height;
+    width: var(--sidebar-width-closed);
+    height: var(--toolbar-height);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,7 +28,7 @@
 
   .app-info-wrapper {
     position: relative;
-    height: $toolbar-height;
+    height: var(--toolbar-height);
     display: none;
     align-items: center;
     justify-content: space-between;
@@ -56,34 +54,33 @@
   position: fixed;
   z-index: 2;
   top: 0;
-  left: $sidebar-width-closed;
+  left: var(--sidebar-width-closed);
   transition: all 0.3s ease-in-out;
   right: 0;
-  height: $toolbar-height;
+  height: var(--toolbar-height);
 }
 
 ::ng-deep .fs-nav-frame-content.opened,
 ::ng-deep .fs-nav-frame-toolbar.opened {
-  left: $sidebar-width-opened;
+  left: var(--sidebar-width-opened);
 }
 
 .sidebar.opened,
 .fs-nav-frame-logo.opened {
-  width: $sidebar-width-opened;
+  width: var(--sidebar-width-opened);
 }
 
 .sidebar {
   position: fixed;
   z-index: 2;
-  top: $toolbar-height;
+  top: var(--toolbar-height);
   left: 0;
   bottom: 0;
-  width: $sidebar-width-closed;
+  width: var(--sidebar-width-closed);
   transition: all 0.3s ease-in-out;
 
   display: grid;
-  // grid-template-rows: 3rem 1fr 4rem;
-  grid-template-rows: 1fr 4rem;
+  grid-template-rows: 1fr var(--sidebar-width-closed);
 }
 
 ul {
@@ -92,61 +89,10 @@ ul {
   text-decoration: none;
 }
 
-.sidebar .nav-links {
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin: 0;
-  padding: 0;
-
-  > li {
-    position: relative;
-    display: inline-grid;
-    grid-template-columns: 1fr 3rem;
-    align-items: center;
-    width: 100%;
-
-    > button:nth-child(1) {
-      width: 100%;
-      height: $sidebar-width-closed;
-      display: inline-flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      ::ng-deep span:nth-child(1) {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .link-name {
-        margin-left: 1rem;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-
-    button:nth-child(2) {
-      height: 3rem;
-      width: 3rem;
-    }
-
-    .nav-links-l2 {
-      li {
-        button {
-          width: 100%;
-          display: inline-flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
-      }
-    }
-  }
-}
-
 ::ng-deep .fs-nav-frame-content {
   position: fixed;
-  top: $toolbar-height;
-  left: $sidebar-width-closed;
+  top: var(--toolbar-height);
+  left: var(--sidebar-width-closed);
   right: 0;
   bottom: 0;
   padding: 1rem;
@@ -157,8 +103,8 @@ ul {
 
 .glassplane.opened {
   position: absolute;
-  top: $toolbar-height;
-  left: $sidebar-width-closed;
+  top: var(--toolbar-height);
+  left: var(--sidebar-width-closed);
   transition: all 0.3s ease-in-out;
   right: 0;
   bottom: 0;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
@@ -1,8 +1,8 @@
-import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Component, ContentChild, ElementRef, HostBinding, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, map } from 'rxjs';
-import { NavFrameConfig, NavRoutes } from './fs-nav-frame.modules';
+import { NavFrameConfig, NavFrameSizing } from './fs-nav-frame.modules';
 import { FsNavFrameService, MenuState } from './services/fs-nav-frame.service';
 
 @Component({
@@ -14,19 +14,27 @@ import { FsNavFrameService, MenuState } from './services/fs-nav-frame.service';
   },
 })
 export class FsNavFrameComponent implements OnInit, OnDestroy {
-  @Input() navRoutes: NavRoutes = [];
   @Input() navFrameConfig: NavFrameConfig = {
-    appName: 'Demo App',
+    appName: '',
+  };
+  @Input() sizing: NavFrameSizing = {
+    toolbarHeight: 3,
+    sidebarWidthClosed: 4,
+    sidebarWidthOpened: 18,
   };
-
   @ContentChild('navLinks') navLinks: TemplateRef<any> | undefined;
 
+  body = document.querySelector('body');
   profileContentElement!: HTMLElement | null;
   isClosed: boolean = true;
 
   constructor(private elementRef: ElementRef, private frameService: FsNavFrameService, private titleService: Title) {}
 
   ngOnInit(): void {
+    this.body!.style.setProperty('--toolbar-height', `${this.sizing.toolbarHeight!}rem`);
+    this.body!.style.setProperty('--sidebar-width-closed', `${this.sizing.sidebarWidthClosed!}rem`);
+    this.body!.style.setProperty('--sidebar-width-opened', `${this.sizing.sidebarWidthOpened!}rem`);
+
     this.frameService.menuStateEvent.subscribe((state: MenuState) => {
       if (state == MenuState.OPENED) {
         this.frameService.menuState = MenuState.OPENED;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts
@@ -6,9 +6,16 @@
  *  @logoSrc             {string}     (optional) link to logo, can be relative or full URL
  */
 export interface NavFrameConfig {
-  appName: string;
+  appName?: string;
   appVersion?: string;
   logoSrc?: string;
+  sizing?: NavFrameSizing;
+}
+
+export interface NavFrameSizing {
+  toolbarHeight?: number; // in rem
+  sidebarWidthClosed?: number; // in rem
+  sidebarWidthOpened?: number; // in rem
 }
 
 export interface NavItem {
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss
@@ -1,21 +1,22 @@
 fs-nav-user-profile {
     position: relative;
-    height: 4rem;
+    height: var(--sidebar-width-closed);
     display: grid;
-    grid-template-columns: 4rem 1fr;
+    grid-template-columns: var(--sidebar-width-closed) 1fr;
 }
 
 .profile-pic-button-wrapper {
-    width: 4rem;
-    height: 4rem;
+    width: var(--sidebar-width-closed);
+    height: var(--sidebar-width-closed);
     display: flex;
     justify-content: center;
     align-items: center;
 
     button {
-        width: 3rem !important;
-        height: 3rem !important;
-        font-size: 3rem;
+        width: var(--sidebar-width-closed) !important;
+        height: var(--sidebar-width-closed) !important;
+        font-size: calc(var(--sidebar-width-closed)*0.8);
+        min-width: var(--sidebar-width-closed) !important;
 
         .mdc-button__label {
             display: inline-flex;
@@ -27,8 +28,8 @@ fs-nav-user-profile {
         }
 
         .pic {
-            height: 3rem;
-            width: 3rem;
+            height: calc(var(--sidebar-width-closed)*0.8);
+            width: calc(var(--sidebar-width-closed)*0.8);
             margin-left: auto;
             margin-right: auto;
             background-size: cover;
@@ -38,16 +39,16 @@ fs-nav-user-profile {
         }
 
         .default-profile-pic {
-            width: 3rem;
-            height: 3rem;
-            font-size: 3rem;
+            width: calc(var(--sidebar-width-closed)*0.8);
+            height: calc(var(--sidebar-width-closed)*0.8);
+            font-size: calc(var(--sidebar-width-closed)*0.8);
         }
     }
 }
 
 .profile-content-wrapper {
     position: relative;
-    height: 4rem;
+    height: var(--sidebar-width-closed);
     display: none;
     align-items: center;
     justify-content: space-between;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss
@@ -1,18 +1,16 @@
-@use '../_variables' as *;
-
 .fs-nav-frame-toolbar {
   position: fixed;
   z-index: 2;
   top: 0;
-  left: $sidebar-width-closed;
+  left: var(--sidebar-width-closed);
   transition: all 0.3s ease-in-out;
   right: 0;
-  height: $toolbar-height;
+  height: var(--toolbar-height);
   padding: 0 1rem;
 }
 
 .fs-nav-frame-toolbar.opened {
-  left: $sidebar-width-opened;
+  left: var(--sidebar-width-opened);
 }
 
 .fs-nav-frame-toolbar-wrapper {
diff --git a/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts b/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
diff --git a/projects/ng-mat-components/styles/fs-nav-frame/_theming.scss b/projects/ng-mat-components/styles/fs-nav-frame/_theming.scss

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<fs-nav-frame [navFrameConfig]="navFrameConfig" [navRoutes]="navRoutes">`
	`1`	`+<fs-nav-frame [navFrameConfig]="navFrameConfig" [sizing]="sizing">`
`2`	`2`	`<fs-nav-frame-toolbar>`
`3`	`3`	`<fs-nav-frame-toolbar-start>Current App Title</fs-nav-frame-toolbar-start>`
`4`	`4`