[ADF-3177] added general header component (#3537)

* [ADF-3177] added general header component * [ADF-3177] added documentation and removed user info mobile behaviour * [ADF-3177] eddited doc file * [ADF-3177] renamed folder and style changes * [ADF-3177] style changes * [ADF-3177] fix tests * [ADF-3177] fix lint errors and tests * [APM-3177] css changes * [ADF-3177] fix pr * [ADF-3177] updated documentation * [ADF-3177] expose module with old name * [ADF-3177] expose module with old name
2025-07-24 17:32:15 +00:00 · 2018-07-03 14:35:38 +03:00
parent 87d7a6a27f
commit c4d3bf231a
29 changed files with 302 additions and 29 deletions
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html
@@ -0,0 +1,16 @@
+<div class="adf-sidebar-action-menu">
+    <button *ngIf="isExpanded()" mat-raised-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
+        <span *ngIf="title" class="adf-sidebar-action-menu-text">{{ title }}</span>
+        <ng-content select="[sidebar-menu-title-icon]"></ng-content>
+    </button>
+
+    <div *ngIf="!isExpanded()" class="adf-sidebar-action-menu-icon" [matMenuTriggerFor]="adfSidebarMenu">
+        <ng-content select="[sidebar-menu-expand-icon]"></ng-content>
+    </div>
+
+    <mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
+        <div class="adf-sidebar-action-menu-options" [style.width.px]="width">
+            <ng-content select="[sidebar-menu-options]"></ng-content>
+        </div>
+    </mat-menu>
+</div>
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
@@ -0,0 +1,65 @@
+@mixin  adf-sidebar-action-menu-theme($theme) {
+
+    $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+
+    $adf-sidebar-action-menu-button-height: 37.5px;
+    $adf-sidebar-action-menu-button-border-radius: 4px;
+    $adf-sidebar-action-menu-opacity: 0.54;
+    $adf-sidebar-action-menu-item-opacity: 0.87;
+    $adf-sidebar-action-menu-item-line-spacing: -0.4px;
+    $adf-sidebar-action-menu-item-font-size: 14px;
+
+    .adf {
+        &-sidebar-action-menu {
+            & .mat-raised-button {
+                width: 100%;
+                display: block;
+                box-shadow: none !important;
+                height: $adf-sidebar-action-menu-button-height;
+                font-weight: bold;
+                background-color: mat-color($primary);
+                color: mat-color($primary, default-contrast) !important;
+                border-radius: $adf-sidebar-action-menu-button-border-radius;
+                & mat-icon {
+                    width: 24px;
+                    height: 25px;
+                    color: mat-color($primary, default-contrast) !important;
+                }
+            }
+            &-text {
+                width: 100%;
+                height: 20px;
+                text-align: left;
+            }
+        }
+        &-sidebar-action-menu-icon {
+            margin: 18px 0px 0px 20px;
+            color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
+            cursor: pointer;
+            &:hover {
+                color: mat-color($primary);
+            }
+        }
+        &-sidebar-action-menu-options {
+            text-align: left;
+            letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
+            .mat-menu-item {
+                font-size: $adf-sidebar-action-menu-item-font-size;
+                color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
+                text-align: left;
+                line-height: 1.5;
+                letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
+            }
+            .mat-menu-item:hover {
+                color: mat-color($primary);
+                opacity: inherit;
+            }
+        }
+        &-sidebar-action-menu-panel {
+            margin-top: 7.5px;
+            border-radius: 2px;
+            box-shadow: #{map-get($_umbra-elevation-map, 2)}, #{map-get($_penumbra-elevation-map, 2)},#{map-get($_ambient-elevation-map, 2)};
+        }
+    }
+}
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
@@ -0,0 +1,148 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialModule } from '../../../material.module';
+import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
+import { setupTestBed } from '../../../testing/setupTestBed';
+import { CoreTestingModule } from '../../../testing/core.testing.module';
+
+describe('SidebarActionMenuComponent', () => {
+    let element: HTMLElement;
+    let component: SidebarActionMenuComponent;
+    let fixture: ComponentFixture<SidebarActionMenuComponent>;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SidebarActionMenuComponent);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should create instance of SidebarActionMenuComponent', () => {
+        expect(fixture.componentInstance instanceof SidebarActionMenuComponent).toBe(true, 'should create SidebarActionMenuComponent');
+    });
+
+    it('should display title', () => {
+        component.title = 'Fake-Title';
+        component.expanded = true;
+        fixture.detectChanges();
+        const title = element.querySelector('.adf-sidebar-action-menu-text');
+        fixture.detectChanges();
+        expect(title.textContent).toBe('Fake-Title');
+    });
+});
+
+@Component({
+    template: `
+    <adf-sidebar-action-menu [expanded]="expanded" [title]="title">
+    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+    <div sidebar-menu-expand-icon>
+        <mat-icon>queue</mat-icon>
+    </div>
+    <div sidebar-menu-options>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Option1</span>
+        </button>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Option2</span>
+        </button>
+    </div>
+</adf-sidebar-action-menu>
+       `
+})
+class CustomSidebarActionMenuComponent {
+    title: string = 'Fake title';
+    expanded: boolean = true;
+}
+
+describe('Custom SidebarActionMenuComponent', () => {
+    let fixture: ComponentFixture<CustomSidebarActionMenuComponent>;
+    let component: CustomSidebarActionMenuComponent;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                SidebarActionMenuComponent,
+                CustomSidebarActionMenuComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomSidebarActionMenuComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+    });
+
+    it('should create instance of CustomSidebarActionMenuComponent', () => {
+        expect(component instanceof CustomSidebarActionMenuComponent).toBe(true, 'should create CustomSidebarActionMenuComponent');
+    });
+
+    it('should defined adf-sidebar-action-menu', () => {
+        fixture.detectChanges();
+        element = fixture.nativeElement.querySelector('adf-sidebar-action-menu');
+        expect(element).toBeDefined();
+    });
+
+    it('should display the title', () => {
+        component.title = 'FakeTitle';
+        fixture.detectChanges();
+        const title = element.querySelector('.adf-sidebar-action-menu-text');
+        fixture.detectChanges();
+        expect(title.textContent).toBe('FakeTitle');
+    });
+
+    it('should render the sidebar-menu-options', () => {
+        fixture.detectChanges();
+        const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button');
+        const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options');
+        actionButton.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(actionButton).not.toBeNull();
+            expect(actionButton).toBeDefined();
+            expect(options).toBeDefined();
+            expect(actionButton.innerText.trim()).toBe('Fake title arrow_drop_down');
+        });
+    });
+
+    it('should show icon on icon menu', () => {
+        component.title = 'FakeTitle';
+        component.expanded = false;
+        fixture.detectChanges();
+        const actionIcon = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-icon');
+        expect(actionIcon).not.toBeNull();
+        expect(actionIcon).toBeDefined();
+        expect(actionIcon.innerText.trim()).toBe('queue');
+    });
+});
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts
@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-sidebar-action-menu',
+    templateUrl: './sidebar-action-menu.component.html',
+    styleUrls: ['./sidebar-action-menu.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-sidebar-action-menu' }
+})
+
+export class SidebarActionMenuComponent {
+
+    /** The title of the sidebar action. */
+    @Input()
+    title: string;
+
+    /** Toggle the sidebar action menu on expand. */
+    @Input()
+    expanded: boolean;
+
+    @Input()
+    width: number = 272;
+
+    isExpanded(): boolean {
+        return this.expanded;
+    }
+}
+
+@Directive({ selector: '[sidebar-menu-options]' }) export class SidebarMenuDirective {}
+@Directive({ selector: '[sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
+@Directive({ selector: '[sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }