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

Added expand and collapse functionality

Browse Source
This commit is contained in:
Yasa-Nataliya
2023-02-09 17:40:52 +00:00
committed by Denys Vuika
parent 689e00e8c4
commit 225d0ea748
14 changed files with 122 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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()">
<mat-icon title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">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>

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

@@ -3,20 +3,48 @@
.aca-page-layout {
@include flex-column;
.aca-content-header {
border-left: none;
border-right: none;
background: var(--theme-page-layout-header-background-color);
height: 96px;
padding: 0 24px;
display: flex;
align-items: center;
}
.aca-menu-icon {
cursor: pointer;
transform: scale(1.1);
padding: 32px 12px 32px 0;
margin-top: 2px;
}
.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-header {
display: flex;
align-items: center;
flex: 0 0 65px;
flex-basis: 96px;
background: var(--theme-page-layout-header-background-color);
border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
padding: 0 24px;
.adf-breadcrumb-item {
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: 0.15px !important;
}
flex: auto;
width: 100%;
.adf-breadcrumb-item {
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: 0.15px !important;
}
}
.aca-page-layout-content {

19
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 } from '@angular/core';
import { ContentServiceExtensionService } from '../../../../../aca-content/src/lib/services/content-service-extension.service';
@Component({
selector: 'aca-page-layout',
@@ -36,4 +37,20 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@a
export class PageLayoutComponent {
@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]
})