From 76364a3f1e762749f033031a0cec1e24fb773fbe Mon Sep 17 00:00:00 2001 From: Lauest Date: Thu, 6 Mar 2025 11:08:06 +0100 Subject: [PATCH 1/4] now able to hide menu --- src/app/app.component.html | 4 +- src/app/app.component.scss | 8 ++- src/app/app.component.ts | 6 +++ src/app/navbar/navbar.component.html | 11 ++++ src/app/navbar/navbar.component.scss | 50 +++++++++++++++++ src/app/navbar/navbar.component.ts | 54 ++++++++++++++++++- src/app/navbar/navbar.module.ts | 2 + .../shared-variable.service.ts | 7 ++- src/assets/images/arrows-up-to-line.svg | 5 ++ src/assets/scss/setup/_variables.scss | 2 +- 10 files changed, 141 insertions(+), 8 deletions(-) create mode 100644 src/assets/images/arrows-up-to-line.svg diff --git a/src/app/app.component.html b/src/app/app.component.html index c5fe3929..11334b16 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@
- +
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d562a219..d2feba62 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -2,7 +2,13 @@ @import "src/assets/scss/setup/variables"; #content { + transition: margin-left 0.3s ease; + @media (min-width: $screen-md-min) { - padding-left: $navWidth; + padding-left: 0; + + &.nav-visible { + padding-left: $navWidth; + } } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e00da019..c7397031 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -10,6 +10,12 @@ export class AppComponent { title = "OS2IoT-frontend"; isLoggedIn = true; + isNavVisible = false; + + onNavToggle(isVisible: boolean) { + this.isNavVisible = isVisible; + } + constructor(private loggedInService: LoggedInService) { loggedInService.changeEmitted?.subscribe(change => { this.isLoggedIn = change; diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 297ff5d6..5b289ffc 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -1,6 +1,8 @@
+
+ +
+ +@if(!isVisible){ +
+ +
+} diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss index 9d5e015a..6b1ec34f 100644 --- a/src/app/navbar/navbar.component.scss +++ b/src/app/navbar/navbar.component.scss @@ -115,3 +115,53 @@ button:focus, } } } + +.hide-button { + right: 0px; + padding-left: 2px; + border-radius: 5px 0 0 5px; +} + +.show-button { + border-radius: 0 5px 5px 0; + padding-right: 2px; +} + +.toggle-button { + top: 50%; + position: absolute; + width: 18px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background-color: $color-neutral-200; + + &:hover { + background-color: $color-link-active-bg; + } + + &:hover .icon-arrow-nav { + color: $white; + } +} + +.rotate { + transform: rotate(180deg); +} + +.icon-arrow-nav { + color: $default-color; + height: 40px; + width: 10px; +} + +@media (max-width: 768px) { + .icon-arrow-nav, + .toggle-button, + .show-button, + .hide-button, + .rotate { + display: none; + } +} diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts index 34887179..fb773a6b 100644 --- a/src/app/navbar/navbar.component.ts +++ b/src/app/navbar/navbar.component.ts @@ -1,4 +1,7 @@ -import { Component, OnInit } from "@angular/core"; +import { animate, state, style, transition, trigger } from "@angular/animations"; +import { Component, EventEmitter, OnInit, Output } from "@angular/core"; +import { MatIconRegistry } from "@angular/material/icon"; +import { DomSanitizer } from "@angular/platform-browser"; import { Router } from "@angular/router"; import { Organisation } from "@app/admin/organisation/organisation.model"; import { PermissionType } from "@app/admin/permission/permission.model"; @@ -17,6 +20,35 @@ import { UserResponse } from "./../admin/users/user.model"; selector: "app-navbar", templateUrl: "./navbar.component.html", styleUrls: ["./navbar.component.scss"], + animations: [ + trigger("navAnimation", [ + state( + "void", + style({ + transform: "translateX(-100%)", + opacity: 0, + }) + ), + transition(":enter", [ + animate( + "0.3s ease-out", + style({ + transform: "translateX(0)", + opacity: 1, + }) + ), + ]), + transition(":leave", [ + animate( + "0.3s ease-in", + style({ + transform: "translateX(-100%)", + opacity: 0, + }) + ), + ]), + ]), + ], }) export class NavbarComponent implements OnInit { public organisations: Organisation[]; @@ -30,6 +62,8 @@ export class NavbarComponent implements OnInit { isLoginMode = true; user: User; + isVisible = true; + userInfo: CurrentUserInfoResponse; faSignInAlt = faSignInAlt; imagePath = "../../assets/images/os2iot.png "; @@ -41,11 +75,21 @@ export class NavbarComponent implements OnInit { private sharedVariableService: SharedVariableService, private loggedInService: LoggedInService, private meService: MeService, - private route: Router + private route: Router, + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer ) { + this.matIconRegistry.addSvgIcon( + "nav-arrow", + this.domSanitizer.bypassSecurityTrustResourceUrl("assets/images/arrows-up-to-line.svg"), + {} + ); + translate.use("da"); } + @Output() navToggle = new EventEmitter(); + onLogout() { this.authService.logout(); this.router.navigateByUrl("auth"); @@ -90,6 +134,7 @@ export class NavbarComponent implements OnInit { this.getAllowedOrganizations(); this.organisations.sort((a, b) => a.name.localeCompare(b.name, "en", { numeric: true })); this.selected = this.sharedVariableService.getSelectedOrganisationId(); + this.navToggle.emit(this.isVisible); } getAllowedOrganizations() { @@ -132,6 +177,11 @@ export class NavbarComponent implements OnInit { } } + public toggleNavbar() { + this.isVisible = !this.isVisible; + this.navToggle.emit(this.isVisible); + } + setSelectedOrganisation(value: number) { this.sharedVariableService.setSelectedOrganisationId(value); } diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts index 616dea85..904a8d13 100644 --- a/src/app/navbar/navbar.module.ts +++ b/src/app/navbar/navbar.module.ts @@ -8,6 +8,7 @@ import { NavbarComponent } from "./navbar.component"; import { SharedModule } from "../shared/shared.module"; // Services +import { MatIconModule } from "@angular/material/icon"; import { RouterModule } from "@angular/router"; import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; import { TranslateModule } from "@ngx-translate/core"; @@ -27,6 +28,7 @@ import { GlobalAdminComponent } from "./global-admin/global-admin.component"; NGMaterialModule, InlineSVGModule, NgOptimizedImage, + MatIconModule, ], exports: [NavbarComponent], providers: [RestService, NavbarComponent], diff --git a/src/app/shared/shared-variable/shared-variable.service.ts b/src/app/shared/shared-variable/shared-variable.service.ts index 230c4552..b5808f78 100644 --- a/src/app/shared/shared-variable/shared-variable.service.ts +++ b/src/app/shared/shared-variable/shared-variable.service.ts @@ -1,8 +1,7 @@ import { Injectable } from "@angular/core"; import { Organisation, OrganisationGetMinimalResponse } from "@app/admin/organisation/organisation.model"; import { OrganisationService } from "@app/admin/organisation/organisation.service"; -import { PermissionType } from "@app/admin/permission/permission.model"; -import { UserMinimal, UserMinimalResponse } from "@app/admin/users/user-minimal.model"; +import { UserMinimal } from "@app/admin/users/user-minimal.model"; import { UserMinimalService } from "@app/admin/users/user-minimal.service"; import { AuthService, CurrentUserInfoResponse } from "@auth/auth.service"; import { BehaviorSubject, Observable } from "rxjs"; @@ -68,6 +67,10 @@ export class SharedVariableService { return this.organizationInfo; } + getCurrentOrgRole(): string { + return "ss"; + } + getUsername(): string { return this.getUserInfo()?.user?.name; } diff --git a/src/assets/images/arrows-up-to-line.svg b/src/assets/images/arrows-up-to-line.svg new file mode 100644 index 00000000..ad877b9a --- /dev/null +++ b/src/assets/images/arrows-up-to-line.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/scss/setup/_variables.scss b/src/assets/scss/setup/_variables.scss index 146d6ba1..b1997e62 100644 --- a/src/assets/scss/setup/_variables.scss +++ b/src/assets/scss/setup/_variables.scss @@ -391,5 +391,5 @@ $warning-color: #fde047; $default-color: #525252; $default-neutral-color: #d4d4d4; $default-icon-color: #404040; - +$color-neutral-200: #e5e5e5; $selector-font-color: #737373; From 59deb81280becaba41012caabebae6f444748645 Mon Sep 17 00:00:00 2001 From: Lauest Date: Thu, 6 Mar 2025 11:36:49 +0100 Subject: [PATCH 2/4] cleaned up --- src/app/app.component.scss | 4 +-- src/app/app.component.ts | 3 +- src/app/navbar/navbar.component.html | 12 ++------ src/app/navbar/navbar.component.scss | 41 +++++++++++++++++----------- src/app/navbar/navbar.component.ts | 30 -------------------- 5 files changed, 30 insertions(+), 60 deletions(-) diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d2feba62..4df1dee4 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -2,11 +2,9 @@ @import "src/assets/scss/setup/variables"; #content { - transition: margin-left 0.3s ease; - @media (min-width: $screen-md-min) { padding-left: 0; - + transition: padding-left 0.3s ease-in-out; &.nav-visible { padding-left: $navWidth; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c7397031..06672b9e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,8 +9,7 @@ import { LoggedInService } from "@shared/services/loggedin.service"; export class AppComponent { title = "OS2IoT-frontend"; isLoggedIn = true; - - isNavVisible = false; + isNavVisible = true; onNavToggle(isVisible: boolean) { this.isNavVisible = isVisible; diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 5b289ffc..c4302668 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -1,8 +1,7 @@
-
- -
-@if(!isVisible){ -
+
-} diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss index 6b1ec34f..d561e63c 100644 --- a/src/app/navbar/navbar.component.scss +++ b/src/app/navbar/navbar.component.scss @@ -116,26 +116,19 @@ button:focus, } } -.hide-button { - right: 0px; - padding-left: 2px; - border-radius: 5px 0 0 5px; -} - -.show-button { - border-radius: 0 5px 5px 0; - padding-right: 2px; -} - .toggle-button { top: 50%; position: absolute; width: 18px; height: 40px; + left: 0px; display: flex; align-items: center; justify-content: center; background-color: $color-neutral-200; + padding: 0 2px 0 0; + border-radius: 0 5px 5px 0; + transition: left 0.3s ease-in-out, border-radius 0.3s ease-in-out; &:hover { background-color: $color-link-active-bg; @@ -144,24 +137,40 @@ button:focus, &:hover .icon-arrow-nav { color: $white; } -} -.rotate { - transform: rotate(180deg); + &.nav-visible-button { + border-radius: 5px 0 0 5px; + left: 248px; + padding: 0 0 0 2px; + .icon-arrow-nav { + transform: rotate(0deg); + } + } } .icon-arrow-nav { color: $default-color; height: 40px; width: 10px; + transform: rotate(180deg); } @media (max-width: 768px) { .icon-arrow-nav, .toggle-button, .show-button, - .hide-button, - .rotate { + .hide-button { display: none; } } + +.navbar-container { + transform: translateX(-100%); + opacity: 0; + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; + + &.nav-visible { + transform: translateX(0); + opacity: 1; + } +} diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts index fb773a6b..63ff8e97 100644 --- a/src/app/navbar/navbar.component.ts +++ b/src/app/navbar/navbar.component.ts @@ -1,4 +1,3 @@ -import { animate, state, style, transition, trigger } from "@angular/animations"; import { Component, EventEmitter, OnInit, Output } from "@angular/core"; import { MatIconRegistry } from "@angular/material/icon"; import { DomSanitizer } from "@angular/platform-browser"; @@ -20,35 +19,6 @@ import { UserResponse } from "./../admin/users/user.model"; selector: "app-navbar", templateUrl: "./navbar.component.html", styleUrls: ["./navbar.component.scss"], - animations: [ - trigger("navAnimation", [ - state( - "void", - style({ - transform: "translateX(-100%)", - opacity: 0, - }) - ), - transition(":enter", [ - animate( - "0.3s ease-out", - style({ - transform: "translateX(0)", - opacity: 1, - }) - ), - ]), - transition(":leave", [ - animate( - "0.3s ease-in", - style({ - transform: "translateX(-100%)", - opacity: 0, - }) - ), - ]), - ]), - ], }) export class NavbarComponent implements OnInit { public organisations: Organisation[]; From 178cff15b792d07e3a32951020986dee8e82aa45 Mon Sep 17 00:00:00 2001 From: Lauest Date: Thu, 6 Mar 2025 12:21:23 +0100 Subject: [PATCH 3/4] clean up --- src/app/navbar/navbar.component.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss index d561e63c..d2e77a86 100644 --- a/src/app/navbar/navbar.component.scss +++ b/src/app/navbar/navbar.component.scss @@ -166,11 +166,9 @@ button:focus, .navbar-container { transform: translateX(-100%); - opacity: 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; &.nav-visible { transform: translateX(0); - opacity: 1; } } From 5f1b01a9430280e6c16cac11a1ada525fc82867a Mon Sep 17 00:00:00 2001 From: Frederik Christ Vestergaard Date: Mon, 24 Mar 2025 07:56:47 +0100 Subject: [PATCH 4/4] Delete unused code --- .../shared-variable/shared-variable.service.ts | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/app/shared/shared-variable/shared-variable.service.ts b/src/app/shared/shared-variable/shared-variable.service.ts index b5808f78..90e245e8 100644 --- a/src/app/shared/shared-variable/shared-variable.service.ts +++ b/src/app/shared/shared-variable/shared-variable.service.ts @@ -1,8 +1,6 @@ import { Injectable } from "@angular/core"; import { Organisation, OrganisationGetMinimalResponse } from "@app/admin/organisation/organisation.model"; import { OrganisationService } from "@app/admin/organisation/organisation.service"; -import { UserMinimal } from "@app/admin/users/user-minimal.model"; -import { UserMinimalService } from "@app/admin/users/user-minimal.service"; import { AuthService, CurrentUserInfoResponse } from "@auth/auth.service"; import { BehaviorSubject, Observable } from "rxjs"; import { tap } from "rxjs/operators"; @@ -11,17 +9,13 @@ import { tap } from "rxjs/operators"; providedIn: "root", }) export class SharedVariableService { - constructor( - private authService: AuthService, - private organisationService: OrganisationService, - private userMinimalService: UserMinimalService - ) { - this.routerInfo = new BehaviorSubject(0); - } private selectedOrganisationId: number; private routerInfo: BehaviorSubject; private organizationInfo: Organisation[]; - private userMinimalList: UserMinimal[]; + + constructor(private authService: AuthService, private organisationService: OrganisationService) { + this.routerInfo = new BehaviorSubject(0); + } getValue(): Observable { return this.routerInfo.asObservable(); @@ -67,10 +61,6 @@ export class SharedVariableService { return this.organizationInfo; } - getCurrentOrgRole(): string { - return "ss"; - } - getUsername(): string { return this.getUserInfo()?.user?.name; }