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

layout changes for ADW

Browse Source
This commit is contained in:
Yasa-Nataliya
2022-12-02 14:37:51 +00:00
parent ef094ee963
commit 1fe2583a71
33 changed files with 368 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/app/content-plugin/components/header/header.component.html
View File

@@ -1,19 +0,0 @@
<adf-layout-header
[logo]="logo$ | async"
[redirectUrl]="landingPage"
[tooltip]="appName$ | async"
[color]="headerColor$ | async"
[title]="appName$ | async"
(clicked)="onToggleSidenav($event)"
[expandedSidenav]="isSidenavExpanded"
>
<div class="adf-toolbar--spacer adf-toolbar-divider"></div>
<aca-search-input *ngIf="isContentServiceEnabled()"></aca-search-input>
<adf-toolbar-divider></adf-toolbar-divider>
<ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="actionRef"> </aca-toolbar-action>
</ng-container>
</adf-layout-header>

17
app/src/app/content-plugin/components/header/header.component.scss
View File

@@ -1,17 +0,0 @@
.app-header {
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.02), 0px 6px 10px 0px rgba(0, 0, 0, 0.014), 0px 1px 18px 0px rgba(0, 0, 0, 0.012);
z-index: 2;
.mat-toolbar {
background-image: var(--header-background-image) !important;
background-repeat: no-repeat !important;
.aca-current-user {
color: var(--theme-foreground-text-color) !important;
}
.adf-toolbar-divider div {
background-color: var(--theme-foreground-text-color) !important;
}
}
}

122
app/src/app/content-plugin/components/header/header.component.spec.ts
View File

@@ -1,122 +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 { AppHeaderComponent } from './header.component';
import { AppState } from '@alfresco/aca-shared/store';
import { of } from 'rxjs';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { ContentActionRef } from '@alfresco/adf-extensions';
import { Store } from '@ngrx/store';
import { AppTestingModule } from '../../testing/app-testing.module';
import { AppExtensionService, SharedToolbarModule } from '@alfresco/aca-shared';
import { CoreModule } from '@alfresco/adf-core';
import { AppSearchInputModule } from '../search/search-input.module';
import { By } from '@angular/platform-browser';
describe('AppHeaderComponent', () => {
let component: AppHeaderComponent;
let fixture: ComponentFixture<AppHeaderComponent>;
const actions = [
{ id: 'action-1', type: 'button' },
{ id: 'action-2', type: 'button' }
] as Array<ContentActionRef>;
const store = {
select: jasmine.createSpy('select'),
dispatch: () => {}
} as any;
const appExtensionService = {
getHeaderActions: () => of(actions)
} as any;
const app = {
headerColor: 'some-color',
headerTextColor: 'text-color',
appName: 'name',
logoPath: 'some/path'
} as AppState;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppTestingModule, CoreModule.forChild(), AppSearchInputModule, SharedToolbarModule],
declarations: [AppHeaderComponent],
providers: [
{
provide: AppExtensionService,
useValue: appExtensionService
},
{
provide: Store,
useValue: store
}
]
});
store.select.and.callFake((memoizeFn) => of(memoizeFn({ app })));
fixture = TestBed.createComponent(AppHeaderComponent);
component = fixture.componentInstance;
});
it('should set header color, header text color, name and logo', fakeAsync(() => {
component.appName$.subscribe((val) => expect(val).toBe(app.appName));
component.logo$.subscribe((val) => expect(val).toBe(app.logoPath));
component.headerColor$.subscribe((val) => expect(val).toBe(app.headerColor));
component.headerTextColor$.subscribe((val) => expect(val).toBe(app.headerTextColor));
}));
it('should get header actions', fakeAsync(() => {
component.ngOnInit();
tick();
expect(component.actions).toEqual(actions);
}));
describe('Search input', () => {
beforeEach(() => {
localStorage.clear();
});
afterEach(() => {
localStorage.clear();
});
it('should search be present when contentService is enabled', () => {
fixture.detectChanges();
const searchInput = fixture.debugElement.query(By.css('.aca-search-input'));
expect(searchInput).not.toBeNull();
});
it('should search not be present when contentService is disabled', () => {
localStorage.setItem('contentService', 'false');
fixture.detectChanges();
const searchInput = fixture.debugElement.query(By.css('.aca-search-input'));
expect(searchInput).toBeNull();
});
});
});

106
app/src/app/content-plugin/components/header/header.component.ts
View File

@@ -1,106 +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 { Component, ViewEncapsulation, Output, EventEmitter, OnInit, Input, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable, Subject } from 'rxjs';
import { ContentActionRef } from '@alfresco/adf-extensions';
import { AppStore, getHeaderColor, getAppName, getLogoPath, getHeaderImagePath, getHeaderTextColor } from '@alfresco/aca-shared/store';
import { AppExtensionService } from '@alfresco/aca-shared';
import { takeUntil } from 'rxjs/operators';
import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core';
import { isContentServiceEnabled } from '@alfresco/aca-shared/rules';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'app-header' }
})
export class AppHeaderComponent implements OnInit, OnDestroy {
private onDestroy$: Subject<boolean> = new Subject<boolean>();
@Output()
toggleClicked = new EventEmitter();
@Input() expandedSidenav = true;
@Input() data: { layout?: SidenavLayoutComponent; isMenuMinimized?: boolean } = {};
get isSidenavExpanded(): boolean {
return !this.data.isMenuMinimized ?? this.expandedSidenav;
}
appName$: Observable<string>;
headerColor$: Observable<any>;
headerTextColor$: Observable<string>;
logo$: Observable<string>;
landingPage: string;
actions: Array<ContentActionRef> = [];
constructor(public store: Store<AppStore>, private appExtensions: AppExtensionService, private appConfigService: AppConfigService) {
this.headerColor$ = store.select(getHeaderColor);
this.headerTextColor$ = store.select(getHeaderTextColor);
this.appName$ = store.select(getAppName);
this.logo$ = store.select(getLogoPath);
this.landingPage = this.appConfigService.get('landingPage', '/personal-files');
store.select(getHeaderImagePath).subscribe((path) => {
document.body.style.setProperty('--header-background-image', `url('${path}')`);
});
}
ngOnInit() {
this.appExtensions
.getHeaderActions()
.pipe(takeUntil(this.onDestroy$))
.subscribe((actions) => {
this.actions = actions;
});
this.headerTextColor$.subscribe((color) => {
document.documentElement.style.setProperty('--adf-header-text-color', color);
});
}
onToggleSidenav(_event: boolean): void {
this.data.layout.toggleMenu();
}
isContentServiceEnabled(): boolean {
return isContentServiceEnabled();
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
trackByActionId(_: number, action: ContentActionRef) {
return action.id;
}
}

38
app/src/app/content-plugin/components/header/header.module.ts
View File

@@ -1,38 +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 { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
import { AppHeaderComponent } from './header.component';
import { AppSearchInputModule } from '../search/search-input.module';
import { AppToolbarModule } from '../toolbar/toolbar.module';
@NgModule({
imports: [CommonModule, CoreModule.forChild(), AppSearchInputModule, AppToolbarModule],
declarations: [AppHeaderComponent],
exports: [AppHeaderComponent]
})
export class AppHeaderModule {}

10
app/src/app/content-plugin/components/layout/app-layout/app-layout.component.html
View File

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

2
app/src/app/content-plugin/components/layout/layout.module.ts
View File

@@ -31,7 +31,6 @@ import { ContentModule } from '@alfresco/adf-content-services';
import { RouterModule } from '@angular/router';
import { AppSidenavModule } from '../sidenav/sidenav.module';
import { AppCommonModule } from '../common/common.module';
import { AppHeaderModule } from '../header/header.module';
import { HttpClientModule } from '@angular/common/http';
import { PageLayoutModule } from '@alfresco/aca-shared';
@@ -43,7 +42,6 @@ import { PageLayoutModule } from '@alfresco/aca-shared';
ContentModule.forChild(),
AppCommonModule,
AppSidenavModule,
AppHeaderModule,
HttpClientModule,
PageLayoutModule
],

2
app/src/app/content-plugin/components/sidenav/components/expand-menu.component.html
View File

@@ -10,7 +10,6 @@
mat-button
class="action-button full-width"
>
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
<span class="action-button__label">{{ item.title | translate }}</span>
</button>
</div>
@@ -37,7 +36,6 @@
mat-button
class="action-button full-width"
>
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
<span class="action-button__label">{{ item.title | translate }}</span>
</button>
</div>

35
app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.html Normal file
View File

@@ -0,0 +1,35 @@
<button aria-label="profile-menu" class="app-user-details" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon svgIcon="aa"></mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<div mat-menu-item class="app-user-menu-details app-details" [routerLink]="['/profile']">
<button aria-label="profile-menu" class="app-user-details app-details">
<mat-icon svgIcon="avatar"></mat-icon>
</button>
<div class="app-user-name-mail">
<div class="app-user-menu-name">{{ userName }}</div>
<div class="app-user-menu-name">{{ userMail }}</div>
</div>
</div>
<mat-divider></mat-divider>
<button mat-menu-item data-automation-id="language-menu-button" [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
<span>{{ 'APP.LANGUAGE' | translate }}</span>
</button>
<mat-menu #langMenu="matMenu" class="adf-menu">
<adf-language-menu></adf-language-menu>
</mat-menu>
<button mat-menu-item data-automation-id="about" [routerLink]="['/about']">
<mat-icon>info</mat-icon>
{{ 'APP.ABOUT.TITLE' | translate }}
</button>
<button mat-menu-item data-automation-id="user-language-menu" [routerLink]="['/settings']">
<mat-icon>settings</mat-icon>
<span>{{ 'APP.SETTINGS.TITLE' | translate }}</span>
</button>
<mat-divider></mat-divider>
<button mat-menu-item data-automation-id="sign-out" adf-logout>
<mat-icon>exit_to_app</mat-icon>
{{ 'APP.SIGN_OUT' | translate }}
</button>
</mat-menu>

32
app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.scss Normal file
View File

@@ -0,0 +1,32 @@
.app-user-details {
border-radius: 90%;
height: 32px;
margin-right: 0;
min-width: 32px;
padding: 0;
font-weight: bolder;
line-height: 24px !important;
text-align: center;
vertical-align: middle;
background: var(--theme-studio-background);
border: none;
}
.app-user-details.app-details {
padding-top: 20px;
transform: scale(1.1);
}
.app-user-name-mail {
// margin-left: 15px;
line-height: 40px;
}
.app-user-menu-name {
height: 24px;
}
.app-details {
display: flex;
height: 66px;
}

31
app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.ts Normal file
View File

@@ -0,0 +1,31 @@
/*
* 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 { Component, OnInit } from '@angular/core';
import { ContentApiService } from '../../../../../../../projects/aca-shared/src/public-api';
@Component({
selector: 'app-header-menu',
templateUrl: './header-menu.component.html',
styleUrls: ['./header-menu.component.scss']
})
export class HeaderMenuComponent implements OnInit {
personDetails;
userName = '';
userMail = '';
constructor(private contentApi: ContentApiService) {}
ngOnInit() {
this.contentApi.getPerson('-me-').subscribe((person) => {
this.personDetails = person?.entry;
this.userName = this.personDetails.displayName;
this.userMail = this.personDetails.email;
});
}
}

26
app/src/app/content-plugin/components/sidenav/sidenav.component.html
View File

@@ -1,10 +1,20 @@
<div class="sidenav">
<div class="sidenav" *ngIf="!hideSidenav">
<ng-container [ngSwitch]="mode">
<div class="section action-menu" [ngClass]="'section--' + mode">
<app-main-action [expanded]="mode === 'expanded'"></app-main-action>
<app-create-menu [expanded]="mode === 'expanded'"></app-create-menu>
<div class="sidenav-header">
<div class="sidenav-header-title">
<div class="sidenav-header-title-logo" (click)="toggleClick()" (keyup)="toggleClick">
<mat-icon svgIcon="workspace"></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-header-menu></app-header-menu>
</div>
</div>
</div>
<div class="section-sub-actions">
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + mode">
<ng-container *ngSwitchCase="'expanded'">
@@ -14,7 +24,8 @@
</ng-container>
<ng-container *ngIf="item.component">
<adf-dynamic-component [data]="{ item: item, state: 'expanded' }" [id]="item.component"></adf-dynamic-component>
<adf-dynamic-component [data]="{ item: item, state: 'expanded' }" [id]="item.component">
</adf-dynamic-component>
</ng-container>
</mat-list-item>
</ng-container>
@@ -26,7 +37,8 @@
</ng-container>
<ng-container *ngIf="item.component">
<adf-dynamic-component [data]="{ item: item, state: 'collapsed' }" [id]="item.component"> </adf-dynamic-component>
<adf-dynamic-component [data]="{ item: item, state: 'collapsed' }" [id]="item.component">
</adf-dynamic-component>
</ng-container>
</div>
</ng-container>

66
app/src/app/content-plugin/components/sidenav/sidenav.component.scss
View File

@@ -21,11 +21,55 @@
}
.sidenav {
width: 289px !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--theme-sidenav-background-color) !important;
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
background-color: var(--theme-background-color);
&-header {
height: 32px;
padding: 32px 0;
&-title {
display: flex;
flex-direction: row;
align-items: center;
height: 32px;
padding: 0 24px;
&-logo {
position: absolute;
transform: scale(0.7);
cursor: pointer;
}
&-text {
color: var(--theme-selected-text-color);
margin-left: 32px;
letter-spacing: 0.25px;
font-style: normal;
font-weight: 400;
font-size: var(--theme-body-1-font-size);
cursor: pointer;
}
}
&-menu-icon {
transform: scale(1.2);
}
&-notification {
margin-left: 56px;
}
}
.section:last-child {
border-bottom: 0;
@@ -47,11 +91,6 @@
overflow-y: auto;
}
.section {
padding: 8px 6px;
border-bottom: 1px solid var(--theme-divider-color);
}
.section--collapsed {
display: flex;
flex-direction: column;
@@ -77,7 +116,8 @@
}
.action-button--active {
color: var(--theme-primary-color) !important;
color: var(--theme-selected-text-color) !important;
background: var(--theme-selected-background-color);
}
.action-button {
@@ -107,11 +147,11 @@
}
.item:hover .action-button__label {
color: var(--theme-primary-color);
color: var(--theme-selected-text-color);
}
.mat-expansion-panel-header {
padding: 0 8px 0 0 !important;
padding: 0 24px 0 0 !important;
display: flex;
align-items: center;
font-size: 14px !important;
@@ -148,3 +188,11 @@
padding: 0 0 0 8px !important;
}
}
mat-sidenav {
width: 0px !important;
}
.adf-container-full-width {
margin-left: 289px !important;
}

11
app/src/app/content-plugin/components/sidenav/sidenav.component.ts
View File

@@ -30,6 +30,7 @@ import { AppStore, getSideNavState } from '@alfresco/aca-shared/store';
import { Subject } from 'rxjs';
import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { AppExtensionService } from '@alfresco/aca-shared';
import { ContentServiceExtensionService } from '../../services/content-service-extension.service';
@Component({
selector: 'app-sidenav',
@@ -41,13 +42,16 @@ import { AppExtensionService } from '@alfresco/aca-shared';
export class SidenavComponent implements OnInit, OnDestroy {
@Input()
mode: 'collapsed' | 'expanded' = 'expanded';
actions = [];
hideSidenav: boolean;
groups: Array<NavBarGroupRef> = [];
private onDestroy$ = new Subject<boolean>();
constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
constructor(private store: Store<AppStore>, private extensions: AppExtensionService, private contentServices: ContentServiceExtensionService) {}
ngOnInit() {
this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
this.store
.select(getSideNavState)
.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.onDestroy$))
@@ -64,6 +68,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
return obj.id;
}
toggleClick() {
this.hideSidenav = !this.hideSidenav;
this.contentServices.push(this.hideSidenav);
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();

4
app/src/app/content-plugin/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 { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.component';
import { HeaderMenuComponent } from './header-menu/header-menu.component';
@NgModule({
imports: [
@@ -58,7 +59,8 @@ import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.compo
ExpandMenuComponent,
ButtonMenuComponent,
SidenavComponent,
SidenavWrapperComponent
SidenavWrapperComponent,
HeaderMenuComponent
],
exports: [
MenuPanelDirective,

3
app/src/app/content-plugin/components/view-profile/view-profile.component.html
View File

@@ -1,10 +1,9 @@
<div class="app-profile-container">
<div class="app-profile-container" [ngClass]="{'layoutStyle' : hideSidenav === true}">
<div class="app-profile-row">
<div class="app-profile-title">
<mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
<h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
</div>
<mat-divider class="app-mat-divider"></mat-divider>
</div>
<div class="app-profile-general-row" [formGroup]="profileForm">
<div class="app-profile-general">

26
app/src/app/content-plugin/components/view-profile/view-profile.component.scss
View File

@@ -2,7 +2,6 @@ app-view-profile {
letter-spacing: .5px;
.app-profile-container {
margin-top: 1rem;
overflow: scroll;
height:100%;
width: 100%;
@@ -10,15 +9,26 @@ app-view-profile {
.app-profile-row {
width: 100%;
height: 32px;
padding: 32px 0;
border-bottom: 1px solid var(--theme-grey-background-color);
}
.app-profile-title {
// display: flex;
// padding: 32px 0px;
// height: 32px;
display: flex;
margin-left: 2rem;
flex-direction: row;
align-items: center;
height: 32px;
padding: 0 24px;
}
.app-profile {
cursor: pointer;
margin-top: 1rem;
}
.app-profile-general-row {
@@ -30,7 +40,6 @@ app-view-profile {
.app-profile-icon {
margin-right: 1rem;
margin-top: 1rem;
cursor: pointer;
}
@@ -86,7 +95,7 @@ app-view-profile {
.app-profile-row {
width: 100%;
margin: 2rem 0 0 0;
}
.app-general-edit {
@@ -190,4 +199,13 @@ app-view-profile {
padding-top: 2rem;
padding-left: .5rem;
}
.layoutStyle {
position: fixed;
top: 0;
left: 0;
width: 100%;
bottom: 0;
right: 0;
height: 100%;
}
}

5
app/src/app/content-plugin/components/view-profile/view-profile.component.ts
View File

@@ -11,6 +11,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { throwError } from 'rxjs';
import { ContentServiceExtensionService } from '../../services/content-service-extension.service';
@Component({
selector: 'app-view-profile',
@@ -33,8 +34,9 @@ export class ViewProfileComponent implements OnInit {
contactSectionDropdown = false;
contactSectionButtonsToggle = true;
hideSidenav: boolean;
constructor(private router: Router, apiService: AlfrescoApiService) {
constructor(private router: Router, apiService: AlfrescoApiService, private contentServices: ContentServiceExtensionService) {
this.peopleApi = new PeopleApi(apiService.getInstance());
}
@@ -49,6 +51,7 @@ export class ViewProfileComponent implements OnInit {
.catch((error) => {
throwError(error);
});
this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
}
populateForm(userInfo: Person) {

4
app/src/app/content-plugin/content-services-extension.module.ts
View File

@@ -69,7 +69,6 @@ import { AppSearchInputModule } from './components/search/search-input.module';
import { DocumentListCustomComponentsModule } from './components/dl-custom-components/document-list-custom-components.module';
import { AppSearchResultsModule } from './components/search/search-results.module';
import { AppLoginModule } from './components/login/login.module';
import { AppHeaderModule } from './components/header/header.module';
import { AppNodeVersionModule } from './components/node-version/node-version.module';
import { FavoritesComponent } from './components/favorites/favorites.component';
import { RecentFilesComponent } from './components/recent-files/recent-files.component';
@@ -101,7 +100,6 @@ import { LocationLinkComponent } from './components/common/location-link/locatio
import { LogoutComponent } from './components/common/logout/logout.component';
import { ToggleSharedComponent } from './components/common/toggle-shared/toggle-shared.component';
import { CustomNameColumnComponent } from './components/dl-custom-components/name-column/name-column.component';
import { AppHeaderComponent } from './components/header/header.component';
import { CommentsTabComponent } from './components/info-drawer/comments-tab/comments-tab.component';
import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component';
import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component';
@@ -163,7 +161,6 @@ registerLocaleData(localeSv);
DocumentListCustomComponentsModule,
AppSearchInputModule,
AppSearchResultsModule,
AppHeaderModule,
AppNodeVersionModule,
HammerModule,
ViewProfileModule
@@ -201,7 +198,6 @@ export class ContentServiceExtensionModule {
});
extensions.setComponents({
'app.layout.header': AppHeaderComponent,
'app.layout.sidenav': SidenavWrapperComponent,
'app.shell.sibling': UploadFilesDialogComponent,
'app.components.tabs.metadata': MetadataTabComponent,

6
app/src/app/content-plugin/services/content-service-extension.service.ts
View File

@@ -9,14 +9,20 @@
import { Injectable } from '@angular/core';
import { AppConfigService } from '@alfresco/adf-core';
import { take } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ContentServiceExtensionService {
public hideSidenav = new BehaviorSubject<boolean>(false);
cast = this.hideSidenav.asObservable();
constructor(private appConfigService: AppConfigService) {
this.updateContentServiceAvailability();
}
push(str: boolean) {
this.hideSidenav.next(str);
}
updateContentServiceAvailability() {
this.appConfigService.onLoad.pipe(take(1)).subscribe((config) => {

27
app/src/app/content-plugin/services/icon.service.ts Normal file
View File

@@ -0,0 +1,27 @@
/*
* 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', 'aa', 'avatar'];
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`));
});
}
}

4
app/src/app/content-plugin/ui/variables/variables.scss
View File

@@ -41,6 +41,7 @@ $black-heading: #4e4c4c;
$grey-dropdown-background: #eee;
$grey-divider: rgba(0,0,0,.22);
$pagination-background-color: #ffffff;
$sidenav-background-color: #f8f8f8;
$defaults: (
--theme-primary-color: mat.get-color-from-palette($primary),
@@ -70,6 +71,9 @@ $defaults: (
--theme-dropdown-color: $grey-dropdown-background,
--theme-grey-divider-color: $grey-divider,
--theme-pagination-background-color: $pagination-background-color,
--theme-sidenav-background-color: $sidenav-background-color,
--theme-selected-text-color: #212121,
--theme-selected-background-color: rgba(31, 116, 219, 0.24),
);
// propagates SCSS variables into the CSS variables scope

4
app/src/app/extensions.module.ts
View File

@@ -29,13 +29,15 @@ import { AcaAboutModule } from '@alfresco/aca-about';
import { AcaSettingsModule } from '@alfresco/aca-settings';
import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
import { environment } from '../environments/environment';
import { CustomIconsModule } from './extensions/custom-icons.module';
@NgModule({
imports: [
AosExtensionModule,
...(environment.devTools ? [AcaSettingsModule] : []),
AcaAboutModule.forRoot(environment.production),
AcaFolderRulesModule
AcaFolderRulesModule,
CustomIconsModule
]
})
export class AppExtensionsModule {}

17
app/src/app/extensions/custom-icons.module.ts Normal file
View File

@@ -0,0 +1,17 @@
/*
* 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 '../content-plugin/services/icon.service';
@NgModule({})
export class CustomIconsModule {
constructor(iconService: IconService) {
iconService.registerIcons();
}
}

2
app/src/assets/i18n/en.json
View File

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

11
app/src/assets/svg/icons/aa.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#212121" fill-opacity="0.12"/>
<g clip-path="url(#clip0_1418_136226)">
<path d="M13.1399 21H10.8331L14.348 10.8182H17.1222L20.6321 21H18.3253L15.7749 13.1449H15.6953L13.1399 21ZM12.9957 16.9979H18.4446V18.6783H12.9957V16.9979Z" fill="#212121"/>
</g>
<defs>
<clipPath id="clip0_1418_136226">
<rect width="11" height="32" fill="white" transform="translate(10.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 523 B

4
app/src/assets/svg/icons/avatar.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#96DAEA"/>
<path d="M9.7745 16H7.79723L10.81 7.27273H13.1879L16.1964 16H14.2191L12.033 9.26705H11.9648L9.7745 16ZM9.65092 12.5696H14.3214V14.0099H9.65092V12.5696Z" fill="#212121"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

4
app/src/assets/svg/icons/workspace.svg Normal file
View File

@@ -0,0 +1,4 @@
<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

After

Width:  |  Height:  |  Size: 463 B

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

@@ -1,5 +1,4 @@
<aca-page-layout>
<aca-page-layout-content [scrollable]="true">
<aca-page-layout-content [scrollable]="true">
<adf-about>
<adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
<ng-template>
@@ -26,4 +25,4 @@
</adf-about-panel>
</adf-about>
</aca-page-layout-content>
</aca-page-layout>

14
projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
View File

@@ -1,3 +1,11 @@
<ng-content select="aca-page-layout-header"></ng-content>
<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
<div class="aca-content-container" [ngClass]="{'aca-page-layout-container' : hideSidenav}">
<div class="aca-content-header">
<div class="aca-menu-icon" [ngClass]="{'aca-display-menu' : !hideSidenav}" (click)="toggleClick()" (keyup)="toggleClick">
<mat-icon>menu</mat-icon>
</div>
<ng-content select="aca-page-layout-header">
</ng-content>
</div>
<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
</div>

45
projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
View File

@@ -3,14 +3,49 @@
.aca-page-layout {
@include flex-column;
.aca-content-container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
}
.aca-content-header {
border-left: none;
border-right: none;
background: var(--theme-pagination-background-color);
height: 96px;
padding: 0 24px;
display: flex;
align-items: center;
}
.aca-menu-icon {
padding-right: 24px;
cursor: pointer;
transform: scale(1.2);
}
.aca-page-layout-header {
display: flex;
align-items: center;
flex: 0 0 65px;
flex-basis: 48px;
background: var(--theme-background-color);
border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
padding: 0 24px;
flex: auto
}
.aca-display-menu {
display: none;
}
.aca-page-layout-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
bottom: 0;
right: 0;
height: 100%;
}
.aca-page-layout-content {

21
projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts
View File

@@ -23,7 +23,8 @@
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnInit } from '@angular/core';
import { ContentServiceExtensionService } from '../../../../../../app/src/app/content-plugin/services/content-service-extension.service';
@Component({
selector: 'aca-page-layout',
@@ -33,7 +34,23 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@a
host: { class: 'aca-page-layout' },
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PageLayoutComponent {
export class PageLayoutComponent implements OnInit {
@Input()
hasError = false;
hideSidenav: boolean;
constructor(private contentServices: ContentServiceExtensionService, private ref: ChangeDetectorRef) {
setInterval(() => {
this.ref.detectChanges();
});
}
ngOnInit() {
this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
}
toggleClick() {
this.hideSidenav = !this.hideSidenav;
this.contentServices.push(this.hideSidenav);
}
}

3
projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts
View File

@@ -29,9 +29,10 @@ import { PageLayoutErrorComponent } from './page-layout-error.component';
import { PageLayoutHeaderComponent } from './page-layout-header.component';
import { PageLayoutComponent } from './page-layout.component';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
@NgModule({
imports: [CommonModule],
imports: [CommonModule, CoreModule.forChild()],
declarations: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent],
exports: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent]
})