diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html index 5a80321f53..51b7e7a427 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.html +++ b/demo-shell/src/app/components/process-service/process-service.component.html @@ -4,10 +4,14 @@
- + + arrow_drop_down +
+ +
+
- + + arrow_drop_down +
+ +
+
+ arrow_drop_down +
+ queue +
+
+ +
+ +``` + +### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| title | string | null | The title of the Sidebar action | +| expanded | boolean | false | Toggle the sidebar action menu on expand. +## Details + +As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example: + +- sidebar-menu-title-icon +- sidebar-menu-options +- sidebar-menu-expand-icon + diff --git a/lib/core/core.module.ts b/lib/core/core.module.ts index f55d0e1796..012c43d73c 100644 --- a/lib/core/core.module.ts +++ b/lib/core/core.module.ts @@ -41,6 +41,7 @@ import { ToolbarModule } from './toolbar/toolbar.module'; import { UserInfoModule } from './userinfo/userinfo.module'; import { ViewerModule } from './viewer/viewer.module'; import { FormModule } from './form/form.module'; +import { SideBarActionModule } from './sidebar/sidebar-action.module'; import { DirectiveModule } from './directives/directive.module'; import { PipeModule } from './pipes/pipe.module'; @@ -55,6 +56,7 @@ export function createTranslateLoader(http: HttpClient, logService: LogService) @NgModule({ imports: [ ViewerModule, + SideBarActionModule, PipeModule, CommonModule, DirectiveModule, @@ -113,6 +115,7 @@ export function createTranslateLoader(http: HttpClient, logService: LogService) HostSettingsModule, ServiceModule, ViewerModule, + SideBarActionModule, PipeModule, DirectiveModule, FormModule, diff --git a/lib/core/index.ts b/lib/core/index.ts index 574b4cff70..6347462be1 100644 --- a/lib/core/index.ts +++ b/lib/core/index.ts @@ -45,6 +45,7 @@ export * from './pagination'; export * from './login'; export * from './language-menu'; export * from './info-drawer'; +export * from './sidebar'; export * from './data-column'; export * from './datatable'; export * from './context-menu'; diff --git a/lib/core/sidebar/index.ts b/lib/core/sidebar/index.ts new file mode 100644 index 0000000000..4c6ac1d58f --- /dev/null +++ b/lib/core/sidebar/index.ts @@ -0,0 +1,18 @@ +/*! + * @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. + */ + +export * from './public-api'; diff --git a/lib/core/sidebar/public-api.ts b/lib/core/sidebar/public-api.ts new file mode 100644 index 0000000000..40f4feee03 --- /dev/null +++ b/lib/core/sidebar/public-api.ts @@ -0,0 +1,18 @@ +/*! + * @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. + */ + +export * from './sidebar-action-menu.component'; diff --git a/lib/core/sidebar/sidebar-action-menu.component.html b/lib/core/sidebar/sidebar-action-menu.component.html new file mode 100644 index 0000000000..b650267be1 --- /dev/null +++ b/lib/core/sidebar/sidebar-action-menu.component.html @@ -0,0 +1,16 @@ +
+ + +
+ +
+ + +
+ +
+ +
\ No newline at end of file diff --git a/lib/core/sidebar/sidebar-action-menu.component.scss b/lib/core/sidebar/sidebar-action-menu.component.scss new file mode 100644 index 0000000000..33fdd0337d --- /dev/null +++ b/lib/core/sidebar/sidebar-action-menu.component.scss @@ -0,0 +1,71 @@ +@mixin adf-sidebar-action-menu-theme($theme) { + + $primary: map-get($theme, primary); + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + $adf-sidebar-action-menu-button-option-width: 205px; + $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 { + & .mat-raised-button { + width: 100%; + height: 37.5px; + 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; + opacity: $adf-sidebar-action-menu-opacity; + cursor: pointer; + &:hover { + color: mat-color($primary); + opacity: inherit; + } + } + &-sidebar-action-menu-options { + width: $adf-sidebar-action-menu-button-option-width; + opacity: 0.87; + text-align: left; + letter-spacing: -0.4px; + color: #000000; + .mat-menu-item { + width: $adf-sidebar-action-menu-button-option-width; + opacity: $adf-sidebar-action-menu-item-opacity; + text-align: left; + line-height: 1.5; + letter-spacing: $adf-sidebar-action-menu-item-line-spacing; + color: #000000; + } + .mat-menu-item:hover { + color: mat-color($primary); + opacity: inherit; + } + } +} + +.mat-menu-panel { + margin-top: 7.5px; + border-radius: 2px; + background-color: mat-color($primary, default-contrast) !important; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.26), 0 0 8px 0 rgba(0, 0, 0, 0.12); +} +} \ No newline at end of file diff --git a/lib/core/sidebar/sidebar-action-menu.component.spec.ts b/lib/core/sidebar/sidebar-action-menu.component.spec.ts new file mode 100644 index 0000000000..da75d50d74 --- /dev/null +++ b/lib/core/sidebar/sidebar-action-menu.component.spec.ts @@ -0,0 +1,149 @@ +/*! + * @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'; + +describe('SidebarActionMenuComponent', () => { + let element: HTMLElement; + let component: SidebarActionMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + SidebarActionMenuComponent + ], + imports: [ + MaterialModule + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarActionMenuComponent); + element = fixture.nativeElement; + component = fixture.componentInstance; + }); + + 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: ` + + arrow_drop_down +
+ queue +
+
+ + +
+ + ` +}) +class CustomSidebarActionMenuComponent { + title: string = 'Fake title'; + expanded: boolean = true; +} + +describe('Custom SidebarActionMenuComponent', () => { + let fixture: ComponentFixture; + 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'); + }); +}); diff --git a/lib/core/sidebar/sidebar-action-menu.component.ts b/lib/core/sidebar/sidebar-action-menu.component.ts new file mode 100644 index 0000000000..b082d56904 --- /dev/null +++ b/lib/core/sidebar/sidebar-action-menu.component.ts @@ -0,0 +1,44 @@ +/*! + * @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 { + + @Input() + title: string; + + @Input() + expanded: boolean; + + 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 { } diff --git a/lib/core/sidebar/sidebar-action.module.ts b/lib/core/sidebar/sidebar-action.module.ts new file mode 100644 index 0000000000..7750d0ac66 --- /dev/null +++ b/lib/core/sidebar/sidebar-action.module.ts @@ -0,0 +1,38 @@ +/*! + * @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 { CommonModule } from '@angular/common'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { NgModule } from '@angular/core'; +import { MaterialModule } from '../material.module'; + +import { SidebarActionMenuComponent } from './sidebar-action-menu.component'; + +@NgModule({ + imports: [ + CommonModule, + MaterialModule, + FlexLayoutModule + ], + declarations: [ + SidebarActionMenuComponent + ], + exports: [ + SidebarActionMenuComponent + ] +}) +export class SideBarActionModule {} diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss index 4aa223fae4..86ce2fa968 100644 --- a/lib/core/styles/_index.scss +++ b/lib/core/styles/_index.scss @@ -18,6 +18,7 @@ @import '../userinfo/components/user-info.component'; @import '../viewer/components/viewer.component'; @import '../form/components/form.component'; +@import '../sidebar/sidebar-action-menu.component'; @mixin adf-core-theme($theme) { @include adf-colors-theme($theme); @@ -37,7 +38,8 @@ @include adf-toolbar-theme($theme); @include adf-userinfo-theme($theme); @include adf-viewer-theme($theme); - @include adf-form-component-theme($theme) + @include adf-form-component-theme($theme); + @include adf-sidebar-action-menu-theme($theme); } diff --git a/lib/process-services/i18n/de.json b/lib/process-services/i18n/de.json index ecac7c02db..59ea19d41e 100644 --- a/lib/process-services/i18n/de.json +++ b/lib/process-services/i18n/de.json @@ -294,5 +294,12 @@ "CREATED-ON": "Erstellt am" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Erstellen", + "NEW_TASK": "Neue Aufgabe", + "NEW_PROCESS": "Neuer Prozess" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/en.json b/lib/process-services/i18n/en.json index 746b13af4b..1a4266b833 100644 --- a/lib/process-services/i18n/en.json +++ b/lib/process-services/i18n/en.json @@ -295,5 +295,12 @@ "CREATED-ON": "Created on" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "CREATE", + "NEW_TASK": "New Task", + "NEW_PROCESS": "New Process" + } } } diff --git a/lib/process-services/i18n/es.json b/lib/process-services/i18n/es.json index f4749aee9b..f2483158f3 100644 --- a/lib/process-services/i18n/es.json +++ b/lib/process-services/i18n/es.json @@ -294,5 +294,12 @@ "CREATED-ON": "Creado" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Crear", + "NEW_TASK": "Nueva tarea", + "NEW_PROCESS": "Nuevo proceso" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/fr.json b/lib/process-services/i18n/fr.json index 82ef672db6..37f141d60f 100644 --- a/lib/process-services/i18n/fr.json +++ b/lib/process-services/i18n/fr.json @@ -294,5 +294,12 @@ "CREATED-ON": "Créé le" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Créer", + "NEW_TASK": "Nouvelle tâche", + "NEW_PROCESS": "Nouveau processus" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/it.json b/lib/process-services/i18n/it.json index 524e7ef081..d63f1bded0 100644 --- a/lib/process-services/i18n/it.json +++ b/lib/process-services/i18n/it.json @@ -294,5 +294,12 @@ "CREATED-ON": "Creato il" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Crea", + "NEW_TASK": "Nuovo compito", + "NEW_PROCESS": "Nuovo processo" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/ja.json b/lib/process-services/i18n/ja.json index 76dcc7bee0..29d55cb39d 100644 --- a/lib/process-services/i18n/ja.json +++ b/lib/process-services/i18n/ja.json @@ -294,5 +294,12 @@ "CREATED-ON": "作成日" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "作成", + "NEW_TASK": "新しいタスク", + "NEW_PROCESS": "新しいプロセス" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/nb.json b/lib/process-services/i18n/nb.json index 14177f7008..a4fece6d23 100644 --- a/lib/process-services/i18n/nb.json +++ b/lib/process-services/i18n/nb.json @@ -294,5 +294,12 @@ "CREATED-ON": "Opprettet" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Opprett", + "NEW_TASK": "Ny oppgave", + "NEW_PROCESS": "Ny prosess" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/nl.json b/lib/process-services/i18n/nl.json index a3de4aa854..e16271935f 100644 --- a/lib/process-services/i18n/nl.json +++ b/lib/process-services/i18n/nl.json @@ -294,5 +294,12 @@ "CREATED-ON": "Gemaakt op" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Maken", + "NEW_TASK": "Nieuwe taak", + "NEW_PROCESS": "Nieuw proces" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/pt-BR.json b/lib/process-services/i18n/pt-BR.json index 167af3bb4d..be27374908 100644 --- a/lib/process-services/i18n/pt-BR.json +++ b/lib/process-services/i18n/pt-BR.json @@ -294,5 +294,12 @@ "CREATED-ON": "Criado em" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Criar", + "NEW_TASK": "Nova tarefa", + "NEW_PROCESS": "Novo processo" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/ru.json b/lib/process-services/i18n/ru.json index 8af5b810ce..029f44ccf2 100644 --- a/lib/process-services/i18n/ru.json +++ b/lib/process-services/i18n/ru.json @@ -294,5 +294,12 @@ "CREATED-ON": "Дата создания" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "Создать", + "NEW_TASK": "Новая задача", + "NEW_PROCESS": "Нов. процесс" + } } } \ No newline at end of file diff --git a/lib/process-services/i18n/zh-CN.json b/lib/process-services/i18n/zh-CN.json index dd335d5982..b4652dd1f1 100644 --- a/lib/process-services/i18n/zh-CN.json +++ b/lib/process-services/i18n/zh-CN.json @@ -294,5 +294,12 @@ "CREATED-ON": "创建日期" } } + }, + "ADF_SIDEBAR_ACTION_MENU": { + "BUTTON": { + "CREATE": "创建", + "NEW_TASK": "新任务", + "NEW_PROCESS": "新流程" + } } } \ No newline at end of file