From 111f71279c714104d44ecda8daedd19cb8ab16a4 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Sat, 11 Feb 2023 14:45:37 -0500 Subject: [PATCH] proper sidebar header implementation --- app/src/app.config.json.tpl | 6 +-- .../workspace.svg => images/app-logo.svg} | 0 .../aca-about/src/lib/about.component.html | 6 +++ projects/aca-about/src/lib/about.component.ts | 9 +++- projects/aca-content/assets/i18n/en.json | 1 - .../assets/svg/icons/workspace.svg | 4 -- .../app-layout/app-layout.component.html | 15 +----- .../components/sidenav-header.component.html | 24 +++++++++ .../components/sidenav-header.component.ts | 51 +++++++++++++++++++ .../components/sidenav/sidenav.component.html | 17 +------ .../lib/components/sidenav/sidenav.module.ts | 4 +- .../src/lib/extensions/custom-icons.module.ts | 17 ------- .../src/lib/services/icon.service.ts | 30 ----------- 13 files changed, 97 insertions(+), 87 deletions(-) rename app/src/assets/{svg/icons/workspace.svg => images/app-logo.svg} (100%) delete mode 100644 projects/aca-content/assets/svg/icons/workspace.svg create mode 100644 projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.html create mode 100644 projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts delete mode 100644 projects/aca-content/src/lib/extensions/custom-icons.module.ts delete mode 100644 projects/aca-content/src/lib/services/icon.service.ts diff --git a/app/src/app.config.json.tpl b/app/src/app.config.json.tpl index 982fcbfac..3e913596e 100644 --- a/app/src/app.config.json.tpl +++ b/app/src/app.config.json.tpl @@ -32,9 +32,9 @@ }, "locale": "en", "application": { - "name": "Alfresco Content Application", - "version": "4.0.0-A.3", - "logo": "assets/images/alfresco-logo-flower.svg", + "name": "Workspace", + "version": "4.0.0-A.2", + "logo": "assets/images/app-logo.svg", "copyright": "APP.COPYRIGHT" }, "viewer.maxRetries": 1, diff --git a/app/src/assets/svg/icons/workspace.svg b/app/src/assets/images/app-logo.svg similarity index 100% rename from app/src/assets/svg/icons/workspace.svg rename to app/src/assets/images/app-logo.svg diff --git a/projects/aca-about/src/lib/about.component.html b/projects/aca-about/src/lib/about.component.html index e61e0ae7e..42c338d1a 100644 --- a/projects/aca-about/src/lib/about.component.html +++ b/projects/aca-about/src/lib/about.component.html @@ -1,3 +1,8 @@ + + +

{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}

+ + @@ -25,3 +30,4 @@ + diff --git a/projects/aca-about/src/lib/about.component.ts b/projects/aca-about/src/lib/about.component.ts index 30a12f2f5..82a9cd9b0 100644 --- a/projects/aca-about/src/lib/about.component.ts +++ b/projects/aca-about/src/lib/about.component.ts @@ -33,7 +33,14 @@ import { PACKAGE_JSON } from './package-json.token'; @Component({ selector: 'app-about-page', - templateUrl: './about.component.html' + templateUrl: './about.component.html', + styles: [ + ` + adf-about { + width: 100%; + } + ` + ] }) export class AboutComponent implements OnInit { pkg: any; diff --git a/projects/aca-content/assets/i18n/en.json b/projects/aca-content/assets/i18n/en.json index 14e51352e..da761c140 100644 --- a/projects/aca-content/assets/i18n/en.json +++ b/projects/aca-content/assets/i18n/en.json @@ -1,7 +1,6 @@ { "APP": { "COPYRIGHT": "© 2017 - 2020 Alfresco Software, Inc. All rights reserved.", - "TITLE": "Workspace", "ABOUT": { "VERSION": "Version:", "PLUGINS": { diff --git a/projects/aca-content/assets/svg/icons/workspace.svg b/projects/aca-content/assets/svg/icons/workspace.svg deleted file mode 100644 index 5c63fd78e..000000000 --- a/projects/aca-content/assets/svg/icons/workspace.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html b/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html index bcb9cc199..663393ce6 100644 --- a/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html +++ b/projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html @@ -1,26 +1,13 @@ - - - - - - - +
+ + +
+ {{ appName$ | async | translate }} +
+ +
+ +
+ +
+ +
+
+ diff --git a/projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts b/projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts new file mode 100644 index 000000000..615bac805 --- /dev/null +++ b/projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts @@ -0,0 +1,51 @@ +/*! + * @license + * Alfresco Example Content Application + * + * Copyright (C) 2005 - 2020 Alfresco Software Limited + * + * This file is part of the Alfresco Example Content Application. + * If the software was purchased under a paid Alfresco license, the terms of + * the paid license agreement will prevail. Otherwise, the software is + * provided under the following open source license terms: + * + * The Alfresco Example Content Application is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * The Alfresco Example Content Application is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with Alfresco. If not, see . + */ + +import { Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { Observable } from 'rxjs'; +import { AppStore, getAppName, getLogoPath } from '@alfresco/aca-shared/store'; +import { AppConfigService } from '@alfresco/adf-core'; + +@Component({ + selector: 'app-sidenav-header', + templateUrl: `./sidenav-header.component.html`, + encapsulation: ViewEncapsulation.None, + host: { class: 'app-sidenav-header' } +}) +export class SidenavHeaderComponent { + appName$: Observable; + logo$: Observable; + landingPage: string; + + @Output() + toggleNavBar = new EventEmitter(); + + constructor(public store: Store, private appConfigService: AppConfigService) { + this.appName$ = store.select(getAppName); + this.logo$ = store.select(getLogoPath); + this.landingPage = this.appConfigService.get('landingPage', '/personal-files'); + } +} diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html index 09a195cfb..0d0c786e3 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html @@ -1,21 +1,6 @@
-
-
- -
{{ 'APP.TITLE' | translate }} -
-
- -
-
- -
-
-
+
diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts index e7ebc9f4f..b2309abb4 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts @@ -39,6 +39,7 @@ import { ButtonMenuComponent } from './components/button-menu.component'; import { ActionDirective } from './directives/action.directive'; import { MainActionModule } from '../main-action/main-action.module'; import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component'; +import { SidenavHeaderComponent } from './components/sidenav-header.component'; @NgModule({ imports: [ @@ -58,7 +59,8 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo ExpandMenuComponent, ButtonMenuComponent, SidenavComponent, - NavigationMenuComponent + NavigationMenuComponent, + SidenavHeaderComponent ], exports: [ MenuPanelDirective, diff --git a/projects/aca-content/src/lib/extensions/custom-icons.module.ts b/projects/aca-content/src/lib/extensions/custom-icons.module.ts deleted file mode 100644 index bf78629ea..000000000 --- a/projects/aca-content/src/lib/extensions/custom-icons.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved. - * - * License rights for this program may be obtained from Alfresco Software, Ltd. - * pursuant to a written agreement and any use of this program without such an - * agreement is prohibited. - */ - -import { NgModule } from '@angular/core'; -import { IconService } from '../services/icon.service'; - -@NgModule({}) -export class CustomIconsModule { - constructor(iconService: IconService) { - iconService.registerIcons(); - } -} diff --git a/projects/aca-content/src/lib/services/icon.service.ts b/projects/aca-content/src/lib/services/icon.service.ts deleted file mode 100644 index 65f61f0f6..000000000 --- a/projects/aca-content/src/lib/services/icon.service.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved. - * - * License rights for this program may be obtained from Alfresco Software, Ltd. - * pursuant to a written agreement and any use of this program without such an - * agreement is prohibited. - */ - -import { Injectable } from '@angular/core'; -import { MatIconRegistry } from '@angular/material/icon'; -import { DomSanitizer } from '@angular/platform-browser'; - -@Injectable({ - providedIn: 'root' -}) -export class IconService { - contentIcons: string[] = ['workspace']; - - constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {} - - public registerIcons(): void { - this.loadIcons(this.contentIcons, './assets/svg/icons'); - } - - private loadIcons(iconKeys: string[], iconUrl: string): void { - iconKeys.forEach((key) => { - this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(`${iconUrl}/${key}.svg`)); - }); - } -}