inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-09-17 14:21:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

proper sidebar header implementation

Browse Source
This commit is contained in:
Denys Vuika
2023-02-11 14:45:37 -05:00
committed by Sheena Malhotra
parent b915f3e750
commit 111f71279c
13 changed files with 97 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/app.config.json.tpl
View File

@@ -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,

0
app/src/assets/svg/icons/workspace.svg → app/src/assets/images/app-logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 463 B

After

Width:  |  Height:  |  Size: 463 B

6
projects/aca-about/src/lib/about.component.html
View File

@@ -1,3 +1,8 @@
<aca-page-layout>
<aca-page-layout-header>
<h1>{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}</h1>
</aca-page-layout-header>
<aca-page-layout-content [scrollable]="true">
<adf-about>
<adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
@@ -25,3 +30,4 @@
</adf-about-panel>
</adf-about>
</aca-page-layout-content>
</aca-page-layout>

9
projects/aca-about/src/lib/about.component.ts
View File

@@ -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;

1
projects/aca-content/assets/i18n/en.json
View File

@@ -1,7 +1,6 @@
{
"APP": {
"COPYRIGHT": "© 2017 - 2020 Alfresco Software, Inc. All rights reserved.",
"TITLE": "Workspace",
"ABOUT": {
"VERSION": "Version:",
"PLUGINS": {

4
projects/aca-content/assets/svg/icons/workspace.svg
View File

@@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18H18V9Z" fill="#2A7DE2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9984 16.6856V9.05664C17.9984 5.06228 15.3963 1.67568 11.7948 0.499512C9.56758 3.98205 9.97569 8.66281 13.0191 11.7062L17.9984 16.6856Z" fill="#0055B9"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 463 B

15
projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html
View File

@@ -1,26 +1,13 @@
<adf-upload-drag-area [rootFolderId]="currentFolderId" [disabled]="!canUpload">
<adf-sidenav-layout
#layout
[sidenavMin]="70"
[sidenavMin]="0"
[sidenavMax]="320"
[stepOver]="600"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
(expanded)="onExpanded($event)"
>
<adf-sidenav-layout-header>
<ng-template let-isMenuMinimized="isMenuMinimized">
<app-header
*ngIf="!hideSidenav"
role="heading"
aria-level="1"
(toggleClicked)="layout.toggleMenu()"
[data]="{ layout }"
[expandedSidenav]="!isMenuMinimized()">
</app-header>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<app-sidenav

24
projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="sidenav-header">
<div class="sidenav-header-title">
<div class="sidenav-header-title-logo"
(click)="toggleNavBar.emit()"
(keypress)="toggleNavBar.emit()">
<img
src="{{ logo$ | async }}"
title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"
alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}" />
</div>
<div class="sidenav-header-title-text" [routerLink]="landingPage">
{{ appName$ | async | translate }}
</div>
<div class="sidenav-header-notification">
<adf-notification-history></adf-notification-history>
</div>
<div class="sidenav-header-menu-icon">
<app-navigation-menu></app-navigation-menu>
</div>
</div>
</div>

51
projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.ts Normal file
View File

@@ -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 <http://www.gnu.org/licenses/>.
*/
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<string>;
logo$: Observable<string>;
landingPage: string;
@Output()
toggleNavBar = new EventEmitter();
constructor(public store: Store<AppStore>, private appConfigService: AppConfigService) {
this.appName$ = store.select(getAppName);
this.logo$ = store.select(getLogoPath);
this.landingPage = this.appConfigService.get('landingPage', '/personal-files');
}
}

17
projects/aca-content/src/lib/components/sidenav/sidenav.component.html
View File

@@ -1,21 +1,6 @@
<div class="sidenav">
<ng-container [ngSwitch]="data.mode">
<div class="sidenav-header">
<div class="sidenav-header-title">
<div class="sidenav-header-title-logo" (click)="toggleClick()" (keypress)="toggleClick()">
<mat-icon svgIcon="workspace"
title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"></mat-icon>
</div>
<div class="sidenav-header-title-text" [routerLink]="['/']">{{ 'APP.TITLE' | translate }}
</div>
<div class="sidenav-header-notification">
<adf-notification-history></adf-notification-history>
</div>
<div class="sidenav-header-menu-icon">
<app-navigation-menu></app-navigation-menu>
</div>
</div>
</div>
<app-sidenav-header (toggleNavBar)="toggleClick()"></app-sidenav-header>
<div class="section-sub-actions">
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + data.mode">

4
projects/aca-content/src/lib/components/sidenav/sidenav.module.ts
View File

@@ -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,

17
projects/aca-content/src/lib/extensions/custom-icons.module.ts
View File

@@ -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();
}
}

30
projects/aca-content/src/lib/services/icon.service.ts
View File

@@ -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`));
});
}
}