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

Layout changes for workspace sidemenu

Browse Source
This commit is contained in:
Yasa-Nataliya
2023-02-07 20:37:03 +00:00
committed by Sheena Malhotra
parent cfdae7efdb
commit ed9e647a71
22 changed files with 400 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
projects/aca-content/src/lib/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>

1
projects/aca-content/src/lib/components/header/header.component.spec.ts
View File

@@ -132,3 +132,4 @@ describe('AppHeaderComponent', () => {
});
});
});

18
projects/aca-content/src/lib/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>
@@ -18,28 +17,23 @@
<ng-container *ngIf="item.children && item.children.length">
<mat-expansion-panel
[expanded]="acaExpansionPanel.hasActiveLinks()"
[expanded]="acaExpansionPanel.isItemExpanded()"
[acaExpansionPanel]="item"
#acaExpansionPanel="acaExpansionPanel"
[@.disabled]="true"
>
<mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" role="group">
<mat-expansion-panel-header expandedHeight="32x" collapsedHeight="32px" role="group">
<mat-panel-title>
<div class="item">
<button
[ngClass]="{
'action-button--active': acaExpansionPanel.hasActiveLinks()
}"
<div
[attr.aria-label]="item.title | translate"
[id]="item.id"
[attr.title]="item.description | translate"
[attr.data-automation-id]="item.id"
mat-button
class="action-button full-width"
class="action-panel-header"
>
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
<span class="action-button__label">{{ item.title | translate }}</span>
</button>
<span class="action-panel-header__label">{{ item.title | translate }}</span>
</div>
</div>
</mat-panel-title>
</mat-expansion-panel-header>

20
projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts
View File

@@ -64,6 +64,26 @@ export class ExpansionPanelDirective implements OnInit, OnDestroy {
return false;
}
isRouteAbout(): boolean {
return this.router.url.includes('/about');
}
isRouteProfile(): boolean {
return this.router.url.includes('/profile');
}
isRouteSearch(): boolean {
return this.router.url.includes('/search');
}
isItemExpanded() {
if (this.isRouteAbout() || this.isRouteProfile() || this.isRouteSearch()) {
return !this.hasActiveLinks();
} else {
return this.hasActiveLinks();
}
}
ngOnInit() {
this.hasActiveChildren = this.hasActiveLinks();

35
projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html Normal file
View File

@@ -0,0 +1,35 @@
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu" class="app-menu-button">
<mat-icon svgIcon="menu" title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}"></mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<div mat-menu-item class="app-menu-user-details" [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
<button class="app-menu-user-details-button" aria-label="matMenu">
<mat-icon svgIcon="avatar"></mat-icon>
</button>
<div class="app-menu-user-details-name-mail">
<div class="app-menu-user-details-name">{{ userName }}</div>
<div class="app-menu-user-details-name">{{ userEmail }}</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.BROWSE.ABOUT.TITLE' | translate }}
</button>
<button mat-menu-item data-automation-id="user-language-menu" [routerLink]="['/settings']">
<mat-icon svgIcon="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
projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss Normal file
View File

@@ -0,0 +1,32 @@
app-navigation-menu {
.app-menu-button {
height: 32px;
background: none;
line-height: 24px;
}
}
.mat-menu-panel {
.app-menu-user-details {
display: flex;
height: 66px;
&-button {
height: 32px;
padding: 0;
line-height: 24px;
background: none;
border: none;
margin-top: 14px;
transform: scale(1.2);
}
&-name-mail {
line-height: 40px;
}
&-name {
height: 24px;
}
}
}

31
projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-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, ViewEncapsulation } from '@angular/core';
import { ContentApiService } from '@alfresco/aca-shared';
@Component({
selector: 'app-navigation-menu',
templateUrl: './navigation-menu.component.html',
styleUrls: ['./navigation-menu.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class NavigationMenuComponent implements OnInit {
userName = '';
userEmail = '';
constructor(private contentApi: ContentApiService) {}
ngOnInit() {
this.contentApi.getPerson('-me-').subscribe((person) => {
const personDetails = person?.entry;
this.userName = personDetails.displayName;
this.userEmail = personDetails.email;
});
}
}

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

@@ -1,10 +1,21 @@
<div class="sidenav">
<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">
<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>
<div class="section-sub-actions">
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + mode">
<ng-container *ngSwitchCase="'expanded'">
@@ -12,9 +23,9 @@
<ng-container *ngIf="!item.component">
<app-expand-menu [item]="item"></app-expand-menu>
</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>
@@ -22,11 +33,12 @@
<ng-container *ngSwitchCase="'collapsed'">
<div class="list-item" *ngFor="let item of group.items; trackBy: trackByLinkId">
<ng-container *ngIf="!item.component">
<app-button-menu [item]="item"></app-button-menu>
<app-expand-menu [item]="item"></app-expand-menu>
</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>

220
projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
View File

@@ -1,151 +1,129 @@
.app-sidenav {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
overflow-y: hidden;
}
.sidenav {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
background-color: var(--theme-background-color);
overflow-y: hidden;
background: var(--theme-sidenav-background-color);
.action-menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
&-header {
padding: 32px 0;
.section.action-menu {
padding: 8px 14px;
position: sticky;
}
&-title {
display: flex;
flex-direction: row;
align-items: center;
height: 32px;
padding: 0 24px;
.section-sub-actions {
overflow-y: auto;
}
&-logo {
img {
cursor: pointer;
height: 28px;
vertical-align: middle;
}
}
.section {
padding: 8px 6px;
border-bottom: 1px solid var(--theme-divider-color);
&-text {
flex: 1;
color: var(--theme-selected-text-color);
padding-left: 32px;
letter-spacing: 0.25px;
font-style: normal;
font-weight: 400;
font-size: var(--theme-body-1-font-size);
cursor: pointer;
}
}
}
.section:last-child {
border-bottom: 0;
}
.section--collapsed {
display: flex;
flex-direction: column;
align-items: center;
}
.section-sub-actions {
overflow-y: auto;
.list-item {
padding: 12px 0;
display: flex;
align-items: center;
height: 24px;
}
.mat-expansion-panel {
width: 100%;
background-color: unset;
box-shadow: none;
border-radius: 0;
.menu {
display: flex;
flex: 1;
flex-direction: row;
}
&-header {
height: 32px;
padding: 0 32px 0 0;
display: flex;
align-items: center;
border: none;
}
&-header:hover {
background: var(--theme-hover-background-color);
}
.full-width {
display: flex;
width: 100%;
}
&-header-title {
display: flex;
flex-direction: row;
align-items: center;
}
.action-button--active {
color: var(--theme-primary-color) !important;
}
&-body {
padding: 0 0 16px;
font-size: var(--theme-body-1-font-size);
.action-button {
color: var(--theme-text-color);
}
.mat-button {
line-height: 32px;
}
}
.action-button .action-button__label {
margin: 0 8px !important;
}
.mat-expansion-indicator {
display: flex;
align-content: center;
}
.item {
padding: 12px 0;
flex-direction: row;
display: flex;
align-items: center;
text-decoration: none;
height: 24px;
width: 100%;
user-select: none;
}
.mat-expansion-indicator::after {
transform: rotate(226deg);
}
}
.app-item,
.app-item .item {
display: flex;
flex: 1;
flex-direction: row;
}
.item {
flex-direction: row;
display: flex;
align-items: center;
text-decoration: none;
width: 100%;
user-select: none;
.item:hover .action-button__label {
color: var(--theme-primary-color);
}
&:hover .action-button__label {
color: var(--theme-selected-text-color);
}
}
.mat-expansion-panel-header {
padding: 0 8px 0 0 !important;
display: flex;
align-items: center;
font-size: 14px !important;
}
.action-button {
color: var(--theme-action-button-text-color);
height: 32px;
padding: 0 24px;
border-radius: 0;
}
.mat-expansion-panel {
width: 100%;
background-color: unset;
box-shadow: none !important;
}
.full-width {
display: flex;
width: 100%;
}
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
background: none !important;
}
.action-button--active {
color: var(--theme-selected-text-color) !important;
background: var(--theme-selected-background-color);
}
.mat-expansion-indicator {
display: flex;
align-content: center;
}
.mat-expansion-panel-body {
padding-bottom: 0;
}
.mat-expansion-panel-header-title {
display: flex;
flex-direction: row;
align-items: center;
}
}
.aca-menu-panel {
.action-button--active {
color: var(--theme-accent-color) !important;
}
.action-button {
color: var(--theme-primary-color);
}
.action-button:hover {
color: var(--theme-accent-color);
}
}
[dir='rtl'] .sidenav {
/* stylelint-disable-next-line no-descending-specificity */
.mat-expansion-panel-header {
padding: 0 0 0 8px !important;
.action-panel-header {
color: var(--theme-action-button-text-color);
padding: 0 24px;
&__label {
font-size: var(--theme-caption-font-size);
}
}
}
}

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

1
projects/aca-content/src/lib/components/view-profile/view-profile.component.html
View File

@@ -4,7 +4,6 @@
<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">

22
projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
View File

@@ -2,24 +2,31 @@ app-view-profile {
letter-spacing: .5px;
.app-profile-container {
margin-top: 1rem;
overflow: scroll;
height:100%;
height: 100%;
width: 100%;
}
.app-profile-row {
width: 100%;
margin: 2rem 0 0;
height: 32px;
padding: 32px 0;
border-bottom: 1px solid var(--theme-header-border-color);
}
.app-profile-title {
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 {
@@ -31,7 +38,6 @@ app-view-profile {
.app-profile-icon {
margin-right: 1rem;
margin-top: 1rem;
cursor: pointer;
}
@@ -49,7 +55,7 @@ app-view-profile {
}
.app-profile-general-bottom-radius {
border-bottom-left-radius:0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -67,7 +73,7 @@ app-view-profile {
}
.app-general-edit-btn {
width:60%;
width: 60%;
text-align: end;
}
@@ -81,7 +87,7 @@ app-view-profile {
.app-selected:focus {
border: 2px solid var(--theme-blue-button-color) !important;
border-radius: 6px;
outline : none !important;
outline: none !important;
box-shadow: 0 0 2px (--theme-blue-button-color);
}
@@ -161,7 +167,7 @@ app-view-profile {
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color) ;
background-color: var(--theme-dropdown-color);
}
.app-profile-login-dropdown-heading-forgot {