mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-10-08 14:51:14 +00:00
remove old app layout and use ADF one
This commit is contained in:
committed by
Sheena Malhotra
parent
03cdbddfdf
commit
50292f5a7e
@@ -23,7 +23,6 @@
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
|
||||
import { FilesComponent } from './components/files/files.component';
|
||||
import { LibrariesComponent } from './components/libraries/libraries.component';
|
||||
import { FavoriteLibrariesComponent } from './components/favorite-libraries/favorite-libraries.component';
|
||||
@@ -41,6 +40,7 @@ import { ViewProfileRuleGuard } from './components/view-profile/view-profile.gua
|
||||
import { Route } from '@angular/router';
|
||||
import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
|
||||
import { TrashcanComponent } from './components/trashcan/trashcan.component';
|
||||
import { ShellLayoutComponent } from '@alfresco/adf-core/shell';
|
||||
|
||||
export const CONTENT_ROUTES: ExtensionRoute[] = [
|
||||
{
|
||||
@@ -57,7 +57,7 @@ export const CONTENT_ROUTES: ExtensionRoute[] = [
|
||||
},
|
||||
{
|
||||
path: 'view',
|
||||
component: AppLayoutComponent,
|
||||
component: ShellLayoutComponent,
|
||||
children: [
|
||||
{
|
||||
path: ':nodeId',
|
||||
|
@@ -1,32 +0,0 @@
|
||||
<adf-upload-drag-area [rootFolderId]="currentFolderId" [disabled]="!canUpload">
|
||||
<adf-sidenav-layout
|
||||
#layout
|
||||
[sidenavMin]="0"
|
||||
[sidenavMax]="320"
|
||||
[stepOver]="600"
|
||||
[hideSidenav]="hideSidenav"
|
||||
[expandedSidenav]="expandedSidenav"
|
||||
(expanded)="onExpanded($event)"
|
||||
>
|
||||
<adf-sidenav-layout-navigation>
|
||||
<ng-template let-isMenuMinimized="isMenuMinimized">
|
||||
<app-sidenav
|
||||
[data]="{ layout, mode: layout.isMenuMinimized ? 'collapsed' : 'expanded'}"
|
||||
[attr.data-automation-id]="isMenuMinimized() ? 'collapsed' : 'expanded'"
|
||||
(swipeleft)="hideMenu($event)"
|
||||
>
|
||||
</app-sidenav>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-navigation>
|
||||
|
||||
<adf-sidenav-layout-content>
|
||||
<ng-template>
|
||||
<router-outlet></router-outlet>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-content>
|
||||
</adf-sidenav-layout>
|
||||
|
||||
<adf-file-uploading-dialog *ngIf="showFileUploadingDialog" position="left"></adf-file-uploading-dialog>
|
||||
</adf-upload-drag-area>
|
||||
|
||||
<router-outlet name="viewer"></router-outlet>
|
@@ -1,34 +0,0 @@
|
||||
.app-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
|
||||
router-outlet[name='viewer'] + * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
adf-file-uploading-dialog {
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.adf-app-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 719px) {
|
||||
.adf-app-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
@@ -1,177 +0,0 @@
|
||||
/*!
|
||||
* @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 { AppConfigService, SidenavLayoutComponent, UserPreferencesService } from '@alfresco/adf-core';
|
||||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router, NavigationStart } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Subject, Observable } from 'rxjs';
|
||||
import { filter, takeUntil, map, withLatestFrom, delay } from 'rxjs/operators';
|
||||
import { NodePermissionService } from '@alfresco/aca-shared';
|
||||
import { BreakpointObserver } from '@angular/cdk/layout';
|
||||
import { AppStore, getCurrentFolder, getFileUploadingDialog, ResetSelectionAction } from '@alfresco/aca-shared/store';
|
||||
import { Directionality } from '@angular/cdk/bidi';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
templateUrl: './app-layout.component.html',
|
||||
styleUrls: ['./app-layout.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'app-layout' }
|
||||
})
|
||||
export class AppLayoutComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('layout', { static: true })
|
||||
layout: SidenavLayoutComponent;
|
||||
|
||||
onDestroy$: Subject<boolean> = new Subject<boolean>();
|
||||
isSmallScreen$: Observable<boolean>;
|
||||
|
||||
expandedSidenav: boolean;
|
||||
currentFolderId: string;
|
||||
canUpload = false;
|
||||
|
||||
minimizeSidenav = false;
|
||||
hideSidenav = false;
|
||||
direction: Directionality;
|
||||
|
||||
showFileUploadingDialog: boolean;
|
||||
|
||||
private minimizeConditions: string[] = ['search'];
|
||||
private hideConditions: string[] = ['/preview/'];
|
||||
|
||||
constructor(
|
||||
protected store: Store<AppStore>,
|
||||
private permission: NodePermissionService,
|
||||
private router: Router,
|
||||
private userPreferenceService: UserPreferencesService,
|
||||
private appConfigService: AppConfigService,
|
||||
private breakpointObserver: BreakpointObserver
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));
|
||||
|
||||
this.hideSidenav = this.hideConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
|
||||
|
||||
this.minimizeSidenav = this.minimizeConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
|
||||
|
||||
if (!this.minimizeSidenav) {
|
||||
this.expandedSidenav = this.getSidenavState();
|
||||
} else {
|
||||
this.expandedSidenav = false;
|
||||
}
|
||||
|
||||
this.store
|
||||
.select(getCurrentFolder)
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((node) => {
|
||||
this.currentFolderId = node ? node.id : null;
|
||||
this.canUpload = node && this.permission.check(node, ['create']);
|
||||
});
|
||||
|
||||
this.router.events
|
||||
.pipe(
|
||||
withLatestFrom(this.isSmallScreen$),
|
||||
filter(([event, isSmallScreen]) => isSmallScreen && event instanceof NavigationEnd),
|
||||
takeUntil(this.onDestroy$)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.layout.container.sidenav.close();
|
||||
});
|
||||
|
||||
this.router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this.onDestroy$)
|
||||
)
|
||||
.subscribe((event: NavigationEnd) => {
|
||||
this.minimizeSidenav = this.minimizeConditions.some((el) => event.urlAfterRedirects.includes(el));
|
||||
this.hideSidenav = this.hideConditions.some((el) => event.urlAfterRedirects.includes(el));
|
||||
|
||||
this.updateState();
|
||||
});
|
||||
|
||||
this.router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationStart),
|
||||
takeUntil(this.onDestroy$)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.store.dispatch(new ResetSelectionAction());
|
||||
});
|
||||
|
||||
this.store
|
||||
.select(getFileUploadingDialog)
|
||||
.pipe(delay(0), takeUntil(this.onDestroy$))
|
||||
.subscribe((fileUploadingDialog: boolean) => {
|
||||
this.showFileUploadingDialog = fileUploadingDialog;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.onDestroy$.next(true);
|
||||
this.onDestroy$.complete();
|
||||
}
|
||||
|
||||
hideMenu(event: Event) {
|
||||
if (this.layout.container.isMobileScreenSize) {
|
||||
event.preventDefault();
|
||||
this.layout.container.toggleMenu();
|
||||
}
|
||||
}
|
||||
|
||||
private updateState() {
|
||||
if (this.minimizeSidenav && !this.layout.isMenuMinimized) {
|
||||
this.layout.isMenuMinimized = true;
|
||||
if (!this.layout.container.isMobileScreenSize) {
|
||||
this.layout.container.toggleMenu();
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.minimizeSidenav) {
|
||||
if (this.getSidenavState() && this.layout.isMenuMinimized) {
|
||||
this.layout.isMenuMinimized = false;
|
||||
this.layout.container.toggleMenu();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onExpanded(state: boolean) {
|
||||
if (!this.minimizeSidenav && this.appConfigService.get('sideNav.preserveState')) {
|
||||
this.userPreferenceService.set('expandedSidenav', state);
|
||||
}
|
||||
}
|
||||
|
||||
private getSidenavState(): boolean {
|
||||
const expand = this.appConfigService.get<boolean>('sideNav.expandedSidenav', true);
|
||||
const preserveState = this.appConfigService.get<boolean>('sideNav.preserveState', true);
|
||||
|
||||
if (preserveState) {
|
||||
return this.userPreferenceService.get('expandedSidenav', expand.toString()) === 'true';
|
||||
}
|
||||
|
||||
return expand;
|
||||
}
|
||||
}
|
@@ -27,7 +27,6 @@ import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
import { SHELL_NAVBAR_MIN_WIDTH } from '@alfresco/adf-core/shell';
|
||||
import { AppLayoutComponent } from './app-layout/app-layout.component';
|
||||
import { ContentModule } from '@alfresco/adf-content-services';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { AppSidenavModule } from '../sidenav/sidenav.module';
|
||||
@@ -48,8 +47,7 @@ import { PageLayoutModule } from '@alfresco/aca-shared';
|
||||
HttpClientModule,
|
||||
PageLayoutModule
|
||||
],
|
||||
declarations: [AppLayoutComponent],
|
||||
exports: [AppLayoutComponent, PageLayoutModule],
|
||||
exports: [PageLayoutModule],
|
||||
providers: [{ provide: SHELL_NAVBAR_MIN_WIDTH, useValue: 0 }]
|
||||
})
|
||||
export class AppLayoutModule {}
|
||||
|
Reference in New Issue
Block a user