[ADF-1435] Info drawer (#2249)

* First version of adf-info-drawer with design make-ups for task details page * Moving tabbing functionality into adf-info-drawer * Update documentation
2025-07-24 17:32:15 +00:00 · 2017-08-25 16:28:41 +01:00
parent e199d0cb6d
commit e852856a24
18 changed files with 605 additions and 122 deletions
--- a/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png
+++ b/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png
--- a/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png
+++ b/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png
--- a/ng2-components/ng2-alfresco-core/index.ts
+++ b/ng2-components/ng2-alfresco-core/index.ts
@@ -111,6 +111,13 @@ export { DiscoveryApiService } from './src/services/discovery-api.service';

 import { DataColumnListComponent } from './src/components/data-column/data-column-list.component';
 import { DataColumnComponent } from './src/components/data-column/data-column.component';
+import {
+    InfoDrawerButtonsDirective,
+    InfoDrawerContentDirective,
+    InfoDrawerLayoutComponent,
+    InfoDrawerTitleDirective
+} from './src/components/info-drawer/info-drawer-layout.component';
+import { InfoDrawerComponent, InfoDrawerTabComponent } from './src/components/info-drawer/info-drawer.component';
 import { NodePermissionDirective } from './src/directives/node-permission.directive';
 import { UploadDirective } from './src/directives/upload.directive';

@@ -131,6 +138,7 @@ export { EXTENDIBLE_COMPONENT } from './src/interface/injection.tokens';

 export * from './src/components/data-column/data-column.component';
 export * from './src/components/data-column/data-column-list.component';
+export * from './src/components/info-drawer/info-drawer.component';
 export * from './src/directives/upload.directive';
 export * from './src/directives/highlight.directive';
 export * from './src/directives/node-permission.directive';
@@ -237,6 +245,12 @@ export function createTranslateLoader(http: Http, logService: LogService) {
        HighlightDirective,
        DataColumnComponent,
        DataColumnListComponent,
+        InfoDrawerComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerLayoutComponent,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective,
        FileSizePipe,
        HighlightPipe,
        TimeAgoPipe,
@@ -279,7 +293,13 @@ export function createTranslateLoader(http: Http, logService: LogService) {
        HighlightPipe,
        TimeAgoPipe,
        CreateFolderDialogComponent,
-        DownloadZipDialogComponent
+        DownloadZipDialogComponent,
+        InfoDrawerComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerLayoutComponent,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective
    ],
    entryComponents: [
        CreateFolderDialogComponent,
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.html
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.html
@@ -0,0 +1,11 @@
+<div class="adf-info-drawer-layout-header">
+    <div class="adf-info-drawer-layout-header-title">
+        <ng-content select="[info-drawer-title]"></ng-content>
+    </div>
+    <div class="adf-info-drawer-layout-header-buttons">
+        <ng-content select="[info-drawer-buttons]"></ng-content>
+    </div>
+</div>
+<div class="adf-info-drawer-layout-content">
+    <ng-content select="[info-drawer-content]"></ng-content>
+</div>
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
@@ -0,0 +1,35 @@
+.adf {
+    &-info-drawer-layout {
+        width: 350px;
+        display: block;
+        padding: 8px 0;
+        background-color: #FAFAFA;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+
+        &-header {
+            padding: 8px 24px 24px 24px;
+            display: flex;
+            justify-content: space-between;
+            font-size: 20px;
+
+            &-buttons {
+                md-icon {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        &-content {
+            padding: 10px;
+
+            > * {
+                margin-bottom: 20px;
+                display: block;
+            }
+
+            > *:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts
@@ -0,0 +1,31 @@
+/*!
+ * @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, Directive, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-info-drawer-layout',
+    templateUrl: './info-drawer-layout.component.html',
+    styleUrls: ['./info-drawer-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-info-drawer-layout' }
+})
+export class InfoDrawerLayoutComponent {}
+
+@Directive({ selector: '[info-drawer-title]' }) export class InfoDrawerTitleDirective {}
+@Directive({ selector: '[info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
+@Directive({ selector: '[info-drawer-content]' }) export class InfoDrawerContentDirective {}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html
@@ -0,0 +1,22 @@
+<adf-info-drawer-layout>
+    <div *ngIf="title" info-drawer-title>Activities</div>
+    <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
+
+    <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>
+
+    <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
+
+    <ng-template #tabLayout>
+        <md-tab-group class="adf-info-drawer-tabs">
+            <ng-container *ngFor="let contentBlock of contentBlocks">
+                <md-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
+                    <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
+                </md-tab>
+            </ng-container>
+        </md-tab-group>
+    </ng-template>
+
+    <ng-template #singleLayout>
+        <ng-content select="[info-drawer-content]"></ng-content>
+    </ng-template>
+</adf-info-drawer-layout>
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.scss
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.scss
@@ -0,0 +1,48 @@
+.adf {
+    &-info-drawer {
+        display: block;
+
+        & &-layout {
+
+            &-content {
+                padding: 0;
+
+                & > :not(.adf-info-drawer-tabs) {
+                    padding: 10px;
+
+                    > * {
+                        margin-bottom: 20px;
+                        display: block;
+                    }
+                }
+
+                .adf-info-drawer-tabs {
+                    & .mat-tab-body-content > * {
+                        margin-bottom: 20px;
+                        display: block;
+                    }
+
+                    & .mat-tab-body-content > *:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    .mat-tab-label {
+                        flex-grow: 1;
+                    }
+
+                    .mat-ink-bar {
+                        height: 4px;
+                    }
+
+                    .mat-tab-body {
+                        padding: 10px;
+                    }
+
+                    .mat-tab-body-content {
+                        overflow: initial;
+                    }
+                }
+            }
+        }
+    }
+}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts
@@ -0,0 +1,45 @@
+/*!
+ * @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, ContentChildren, Input, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+@Component({
+    selector: 'adf-info-drawer-tab',
+    template: '<ng-template><ng-content></ng-content></ng-template>'
+})
+export class InfoDrawerTabComponent {
+    @Input('label') label: string = 'Main tab';
+    @ViewChild(TemplateRef) content: TemplateRef<any>;
+}
+
+@Component({
+    selector: 'adf-info-drawer',
+    templateUrl: './info-drawer.component.html',
+    styleUrls: ['./info-drawer.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-info-drawer' }
+})
+export class InfoDrawerComponent {
+    @Input()
+    title: string|null = null;
+
+    @ContentChildren(InfoDrawerTabComponent)
+    contentBlocks: QueryList<InfoDrawerTabComponent>;
+
+    showTabLayout(): boolean {
+        return this.contentBlocks.length > 0;
+    }
+}
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md
@@ -0,0 +1,83 @@
+# Info Drawer component(s)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [InfoDrawerLayoutComponent](#infodrawerlayoutcomponent)
+  * [Example](#example)
+- [InfoDrawerComponent](#infodrawercomponent)
+  * [Properties](#properties)
+  * [Example](#example-1)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+The **Info Drawer components** helps you manage your layout when you want a *(tabbable)* sidebar-like design, what you can see below.
+
+![adf-custom-view](../../../docs/assets/activities-infodrawer.png)
+
+There are 2 different kind of components what you can choose from:
+
+- InfoDrawerLayoutComponent
+- InfoDrawerComponent
+
+## InfoDrawerLayoutComponent
+
+The InfoDrawerLayoutComponent (as the name says) is basically just a layout with css applied on it. In this layout you have 3 regions you can transclude content into:
+
+- info-drawer-title
+- info-drawer-buttons
+- info-drawer-content
+
+![adf-custom-view](../../../docs/assets/infodrawerlayout.png)
+
+### Example
+
+```html
+<adf-info-drawer-layout>
+        <div info-drawer-title>File info</div>
+
+        <div info-drawer-buttons>
+            <md-icon>clear</md-icon>
+        </div>
+
+        <div info-drawer-content>
+            <md-card>
+                Lorem ipsum dolor sit amet...
+            </md-card>
+        </div>
+</adf-info-drawer-layout>
+```
+
+## InfoDrawerComponent
+
+The InfoDrawerComponent is on top of the InfoDrawerLayoutComponent. This version of the info drawer is supposed to be used if you need tabbing behaviour. Additionally you can set a title (if it only contains a string) with the **title** input property.
+This component has the same 3 regions as described above, but if you want to leverage the tabbing functionality, you have to use the **adf-info-drawer-tab** component to organize your content. The only input paramter of the adf-info-drawer-tab component is the **"label"**, with you can specify the tab label with.
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | string | null | The title of the info drawer component|
+
+### Example
+
+```html
+<adf-info-drawer title="Activities">
+    <div info-drawer-buttons>
+        <md-icon (click)="close()">clear</md-icon>
+    </div>
+
+    <adf-info-drawer-tab label="Activity">
+        <mycomponent1></mycomponent1>
+        <mycomponent2></mycomponent2>
+    </adf-info-drawer-tab>
+
+    <adf-info-drawer-tab label="Details">
+        <mycomponent3></mycomponent3>
+    </adf-info-drawer-tab>
+
+</adf-info-drawer>
+```
--- a/ng2-components/ng2-alfresco-core/src/material.module.ts
+++ b/ng2-components/ng2-alfresco-core/src/material.module.ts
@@ -22,6 +22,7 @@ import {
    MdInputModule,
    MdProgressBarModule,
    MdSnackBarModule,
+    MdTabsModule,
    MdToolbarModule
 } from '@angular/material';

@@ -32,7 +33,8 @@ export function modules() {
        MdInputModule,
        MdProgressBarModule,
        MdSnackBarModule,
-        MdToolbarModule
+        MdToolbarModule,
+        MdTabsModule
    ];
 }