From 1fe2583a712239628fecb3692e445ef81a06e673 Mon Sep 17 00:00:00 2001 From: Yasa-Nataliya Date: Fri, 2 Dec 2022 14:37:51 +0000 Subject: [PATCH] layout changes for ADW --- .../components/header/header.component.html | 19 --- .../components/header/header.component.scss | 17 --- .../header/header.component.spec.ts | 122 ------------------ .../components/header/header.component.ts | 106 --------------- .../components/header/header.module.ts | 38 ------ .../app-layout/app-layout.component.html | 10 +- .../components/layout/layout.module.ts | 2 - .../components/expand-menu.component.html | 2 - .../header-menu/header-menu.component.html | 35 +++++ .../header-menu/header-menu.component.scss | 32 +++++ .../header-menu/header-menu.component.ts | 31 +++++ .../components/sidenav/sidenav.component.html | 26 +++- .../components/sidenav/sidenav.component.scss | 66 ++++++++-- .../components/sidenav/sidenav.component.ts | 11 +- .../components/sidenav/sidenav.module.ts | 4 +- .../view-profile/view-profile.component.html | 3 +- .../view-profile/view-profile.component.scss | 26 +++- .../view-profile/view-profile.component.ts | 5 +- .../content-services-extension.module.ts | 4 - .../content-service-extension.service.ts | 6 + .../content-plugin/services/icon.service.ts | 27 ++++ .../ui/variables/variables.scss | 4 + app/src/app/extensions.module.ts | 4 +- app/src/app/extensions/custom-icons.module.ts | 17 +++ app/src/assets/i18n/en.json | 2 + app/src/assets/svg/icons/aa.svg | 11 ++ app/src/assets/svg/icons/avatar.svg | 4 + app/src/assets/svg/icons/workspace.svg | 4 + .../aca-about/src/lib/about.component.html | 5 +- .../page-layout/page-layout.component.html | 14 +- .../page-layout/page-layout.component.scss | 45 ++++++- .../page-layout/page-layout.component.ts | 21 ++- .../page-layout/page-layout.module.ts | 3 +- 33 files changed, 368 insertions(+), 358 deletions(-) delete mode 100644 app/src/app/content-plugin/components/header/header.component.html delete mode 100644 app/src/app/content-plugin/components/header/header.component.scss delete mode 100644 app/src/app/content-plugin/components/header/header.component.spec.ts delete mode 100644 app/src/app/content-plugin/components/header/header.component.ts delete mode 100644 app/src/app/content-plugin/components/header/header.module.ts create mode 100644 app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.html create mode 100644 app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.scss create mode 100644 app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.ts create mode 100644 app/src/app/content-plugin/services/icon.service.ts create mode 100644 app/src/app/extensions/custom-icons.module.ts create mode 100644 app/src/assets/svg/icons/aa.svg create mode 100644 app/src/assets/svg/icons/avatar.svg create mode 100644 app/src/assets/svg/icons/workspace.svg diff --git a/app/src/app/content-plugin/components/header/header.component.html b/app/src/app/content-plugin/components/header/header.component.html deleted file mode 100644 index 6db2b8bf7..000000000 --- a/app/src/app/content-plugin/components/header/header.component.html +++ /dev/null @@ -1,19 +0,0 @@ - -
- - - - - - - - - diff --git a/app/src/app/content-plugin/components/header/header.component.scss b/app/src/app/content-plugin/components/header/header.component.scss deleted file mode 100644 index 9f7036af8..000000000 --- a/app/src/app/content-plugin/components/header/header.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/app/src/app/content-plugin/components/header/header.component.spec.ts b/app/src/app/content-plugin/components/header/header.component.spec.ts deleted file mode 100644 index 9a4c8ddf7..000000000 --- a/app/src/app/content-plugin/components/header/header.component.spec.ts +++ /dev/null @@ -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 . - */ - -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; - - const actions = [ - { id: 'action-1', type: 'button' }, - { id: 'action-2', type: 'button' } - ] as Array; - - 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(); - }); - }); -}); diff --git a/app/src/app/content-plugin/components/header/header.component.ts b/app/src/app/content-plugin/components/header/header.component.ts deleted file mode 100644 index 8656c2884..000000000 --- a/app/src/app/content-plugin/components/header/header.component.ts +++ /dev/null @@ -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 . - */ - -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 = new Subject(); - - @Output() - toggleClicked = new EventEmitter(); - - @Input() expandedSidenav = true; - - @Input() data: { layout?: SidenavLayoutComponent; isMenuMinimized?: boolean } = {}; - - get isSidenavExpanded(): boolean { - return !this.data.isMenuMinimized ?? this.expandedSidenav; - } - - appName$: Observable; - headerColor$: Observable; - headerTextColor$: Observable; - logo$: Observable; - landingPage: string; - - actions: Array = []; - - constructor(public store: Store, 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; - } -} diff --git a/app/src/app/content-plugin/components/header/header.module.ts b/app/src/app/content-plugin/components/header/header.module.ts deleted file mode 100644 index 21381e4ff..000000000 --- a/app/src/app/content-plugin/components/header/header.module.ts +++ /dev/null @@ -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 . - */ - -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 {} diff --git a/app/src/app/content-plugin/components/layout/app-layout/app-layout.component.html b/app/src/app/content-plugin/components/layout/app-layout/app-layout.component.html index 9cab121c1..62b2676a8 100644 --- a/app/src/app/content-plugin/components/layout/app-layout/app-layout.component.html +++ b/app/src/app/content-plugin/components/layout/app-layout/app-layout.component.html @@ -1,19 +1,13 @@ - - - - - - diff --git a/app/src/app/content-plugin/components/layout/layout.module.ts b/app/src/app/content-plugin/components/layout/layout.module.ts index 5bb1275a5..75175d9ba 100644 --- a/app/src/app/content-plugin/components/layout/layout.module.ts +++ b/app/src/app/content-plugin/components/layout/layout.module.ts @@ -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 ], diff --git a/app/src/app/content-plugin/components/sidenav/components/expand-menu.component.html b/app/src/app/content-plugin/components/sidenav/components/expand-menu.component.html index ed51d164f..f730d9fcb 100644 --- a/app/src/app/content-plugin/components/sidenav/components/expand-menu.component.html +++ b/app/src/app/content-plugin/components/sidenav/components/expand-menu.component.html @@ -10,7 +10,6 @@ mat-button class="action-button full-width" > - {{ item.title | translate }} @@ -37,7 +36,6 @@ mat-button class="action-button full-width" > - {{ item.title | translate }} diff --git a/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.html b/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.html new file mode 100644 index 000000000..bd80d088c --- /dev/null +++ b/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.html @@ -0,0 +1,35 @@ + + +
+ +
+
{{ userName }}
+
{{ userMail }}
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.scss b/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.scss new file mode 100644 index 000000000..ed540a1bf --- /dev/null +++ b/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.scss @@ -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; +} diff --git a/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.ts b/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.ts new file mode 100644 index 000000000..a0822e188 --- /dev/null +++ b/app/src/app/content-plugin/components/sidenav/header-menu/header-menu.component.ts @@ -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; + }); + } +} diff --git a/app/src/app/content-plugin/components/sidenav/sidenav.component.html b/app/src/app/content-plugin/components/sidenav/sidenav.component.html index 2c91866da..e9dc3ab12 100644 --- a/app/src/app/content-plugin/components/sidenav/sidenav.component.html +++ b/app/src/app/content-plugin/components/sidenav/sidenav.component.html @@ -1,10 +1,20 @@ -
+
-
- - +
+
+ +
{{ 'APP.TITLE' | translate }} +
+
+ +
+
+ +
+
-
@@ -14,7 +24,8 @@ - + + @@ -26,7 +37,8 @@ - + +
diff --git a/app/src/app/content-plugin/components/sidenav/sidenav.component.scss b/app/src/app/content-plugin/components/sidenav/sidenav.component.scss index 03cd9fa71..d4755a990 100644 --- a/app/src/app/content-plugin/components/sidenav/sidenav.component.scss +++ b/app/src/app/content-plugin/components/sidenav/sidenav.component.scss @@ -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; +} diff --git a/app/src/app/content-plugin/components/sidenav/sidenav.component.ts b/app/src/app/content-plugin/components/sidenav/sidenav.component.ts index 9daaea7f2..829f88c44 100755 --- a/app/src/app/content-plugin/components/sidenav/sidenav.component.ts +++ b/app/src/app/content-plugin/components/sidenav/sidenav.component.ts @@ -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 = []; private onDestroy$ = new Subject(); - constructor(private store: Store, private extensions: AppExtensionService) {} + constructor(private store: Store, 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(); diff --git a/app/src/app/content-plugin/components/sidenav/sidenav.module.ts b/app/src/app/content-plugin/components/sidenav/sidenav.module.ts index 9141060c3..700838a99 100644 --- a/app/src/app/content-plugin/components/sidenav/sidenav.module.ts +++ b/app/src/app/content-plugin/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 { 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, diff --git a/app/src/app/content-plugin/components/view-profile/view-profile.component.html b/app/src/app/content-plugin/components/view-profile/view-profile.component.html index 442a4b83e..959100354 100644 --- a/app/src/app/content-plugin/components/view-profile/view-profile.component.html +++ b/app/src/app/content-plugin/components/view-profile/view-profile.component.html @@ -1,10 +1,9 @@ -
+
arrow_back

{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}

-
diff --git a/app/src/app/content-plugin/components/view-profile/view-profile.component.scss b/app/src/app/content-plugin/components/view-profile/view-profile.component.scss index 5b40d3808..a41795e06 100644 --- a/app/src/app/content-plugin/components/view-profile/view-profile.component.scss +++ b/app/src/app/content-plugin/components/view-profile/view-profile.component.scss @@ -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%; + } } diff --git a/app/src/app/content-plugin/components/view-profile/view-profile.component.ts b/app/src/app/content-plugin/components/view-profile/view-profile.component.ts index a316057c7..6f1ea6f96 100644 --- a/app/src/app/content-plugin/components/view-profile/view-profile.component.ts +++ b/app/src/app/content-plugin/components/view-profile/view-profile.component.ts @@ -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) { diff --git a/app/src/app/content-plugin/content-services-extension.module.ts b/app/src/app/content-plugin/content-services-extension.module.ts index d1d18f631..424b06f7d 100644 --- a/app/src/app/content-plugin/content-services-extension.module.ts +++ b/app/src/app/content-plugin/content-services-extension.module.ts @@ -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, diff --git a/app/src/app/content-plugin/services/content-service-extension.service.ts b/app/src/app/content-plugin/services/content-service-extension.service.ts index e25c95783..61d5ec3b4 100644 --- a/app/src/app/content-plugin/services/content-service-extension.service.ts +++ b/app/src/app/content-plugin/services/content-service-extension.service.ts @@ -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(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) => { diff --git a/app/src/app/content-plugin/services/icon.service.ts b/app/src/app/content-plugin/services/icon.service.ts new file mode 100644 index 000000000..f15b6468c --- /dev/null +++ b/app/src/app/content-plugin/services/icon.service.ts @@ -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`)); + }); + } +} diff --git a/app/src/app/content-plugin/ui/variables/variables.scss b/app/src/app/content-plugin/ui/variables/variables.scss index 72da2f6a4..491a6bcc6 100644 --- a/app/src/app/content-plugin/ui/variables/variables.scss +++ b/app/src/app/content-plugin/ui/variables/variables.scss @@ -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 diff --git a/app/src/app/extensions.module.ts b/app/src/app/extensions.module.ts index 96418e8fa..f7e931a96 100644 --- a/app/src/app/extensions.module.ts +++ b/app/src/app/extensions.module.ts @@ -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 {} diff --git a/app/src/app/extensions/custom-icons.module.ts b/app/src/app/extensions/custom-icons.module.ts new file mode 100644 index 000000000..547cb2aba --- /dev/null +++ b/app/src/app/extensions/custom-icons.module.ts @@ -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(); + } +} diff --git a/app/src/assets/i18n/en.json b/app/src/assets/i18n/en.json index 6fd65726e..27884d1ff 100644 --- a/app/src/assets/i18n/en.json +++ b/app/src/assets/i18n/en.json @@ -1,7 +1,9 @@ { "APP": { "COPYRIGHT": "© 2017 - 2020 Alfresco Software, Inc. All rights reserved.", + "TITLE": "Workspace", "ABOUT": { + "TITLE": "About", "VERSION": "Version:", "PLUGINS": { "TITLE": "Extensions", diff --git a/app/src/assets/svg/icons/aa.svg b/app/src/assets/svg/icons/aa.svg new file mode 100644 index 000000000..f09df24f2 --- /dev/null +++ b/app/src/assets/svg/icons/aa.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/src/assets/svg/icons/avatar.svg b/app/src/assets/svg/icons/avatar.svg new file mode 100644 index 000000000..96f0cb29d --- /dev/null +++ b/app/src/assets/svg/icons/avatar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/src/assets/svg/icons/workspace.svg b/app/src/assets/svg/icons/workspace.svg new file mode 100644 index 000000000..5c63fd78e --- /dev/null +++ b/app/src/assets/svg/icons/workspace.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/aca-about/src/lib/about.component.html b/projects/aca-about/src/lib/about.component.html index 306181370..572906932 100644 --- a/projects/aca-about/src/lib/about.component.html +++ b/projects/aca-about/src/lib/about.component.html @@ -1,5 +1,4 @@ - - + @@ -26,4 +25,4 @@ - + \ No newline at end of file diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html index 966402c25..66ccc04e4 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html @@ -1,3 +1,11 @@ - - - +
+
+
+ menu +
+ + +
+ + +
diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss index 2d0dddb59..36a1fedec 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss @@ -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 { diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts index f2f7c28b6..cfc97093e 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts @@ -23,7 +23,8 @@ * along with Alfresco. If not, see . */ -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); + } } diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts b/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts index 7ee0ae329..5fa705ee3 100644 --- a/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts +++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts @@ -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] })