mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[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
This commit is contained in:
Popovics András
committed by
Mario Romano
Mario Romano
parent
e199d0cb6d
commit
e852856a24
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
### 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>
|
||||
```
|
||||
Reference in New Issue
Block a user