diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.css b/demo-shell-ng2/app/components/activiti/activiti-demo.component.css index 686bd4fadb..9cfc4f8ef6 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.css +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.css @@ -34,3 +34,73 @@ background: #fff; text-align: left; } + +.activiti-demo-grid { + display: flex; +} + +.activiti-demo-grid-item { + margin: 8px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); + background-color: #f5f5f5; + padding: 10px 10px 10px 10px; +} + +.activiti-demo-list-buttons { + margin-bottom: 24px; +} + +.activiti-demo-list-buttons-start { + width: 100%; +} + +.activiti-demo-tasks-menu { + min-width: 170px; +} + +.activiti-demo-tasks-list { + min-width: 300px; + padding: 0; +} + +.activiti-demo-tasks-details, +.activiti-demo-tasks-start { + flex-grow: 1; + min-width: 730px; +} + +.activiti-demo-tasks-menu >>> .mat-list .mat-list-item .mat-list-item-content { + height: 32px; + cursor: pointer; + padding: 0 16px 0 24px; +} + +.activiti-demo-tasks-menu >>> .adf-panel-heading { + margin-bottom: 10px; +} + +.activiti-demo-tasks-list >>> .adf-data-table { + border: none; +} + +.activiti-demo-tasks-list >>> .adf-data-table tr, +.activiti-demo-tasks-list >>> .adf-data-table td { + height: 36px; + font-size: 14px; +} + +.activiti-demo-tasks-list >>> .adf-data-table td { + padding-top: 0; + padding-bottom: 0; + border-bottom: none; +} + +.activiti-demo-tasks-list >>> .adf-data-table th { + padding-top: 0; + padding-bottom: 0; + height: 40px; + color: rgb(0,0,0); + vertical-align: middle; + font-size: 14px; + background-color: rgba(0,0,0,.05); +} \ No newline at end of file diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index 6a1f146f69..5c4ce21ffc 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -1,10 +1,10 @@
-
-
-
- @@ -23,7 +23,7 @@
-
-
-
+
>> .assignment-top-container{ - background-color: #fff; -} - -.assignment-container { - background: #fff; - border: 1px solid #e1e1e1; - padding: 10px 20px; -} - -adf-task-header.assign-edit-view >>> adf-card-view >>> .adf-property[data-automation-id="header-assignee"] { - display: none; -} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html index 427abdf2f8..417d377bd7 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html @@ -6,68 +6,105 @@ {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
-
-
+
+ +

- expand_more - expand_less {{taskDetails.name || 'No name'}}

-
- - {{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }} - {{ 'PEOPLE.ADD_ASSIGNEE' | translate }} - +
+ web + web_asset
- - -
-
- + +
+
+
+ - + [showTitle]="showFormTitle" + [showRefreshButton]="showFormRefreshButton" + [showCompleteButton]="showFormCompleteButton" + [disableCompleteButton]="!isAssignedToMe()" + [showSaveButton]="showFormSaveButton" + [readOnly]="readOnlyForm" + [fieldValidators]="fieldValidators" + (formSaved)='onFormSaved($event)' + (formCompleted)='onFormCompleted($event)' + (formContentClicked)='onFormContentClick($event)' + (formLoaded)='onFormLoaded($event)' + (onError)='onFormError($event)' + (executeOutcome)='onFormExecuteOutcome($event)'> +

Please select a Task

+ +
+
+ {{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }} +
+ +
+
+ + +
+ clear +
+ + +
+ + {{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }} + {{ 'PEOPLE.ADD_ASSIGNEE' | translate }} + +
+ + + + + + + + + + + + + + + + + +
+
+ + +
-
- -

Please select a Task

- - -
-
- {{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }} -
-

{{'TASK_DETAILS.ERROR.TITLE'|translate}}

@@ -75,20 +112,4 @@
-

- - -
- - - - - -
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss new file mode 100644 index 0000000000..b4fcf75f79 --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss @@ -0,0 +1,134 @@ +:host { + width: 100%; +} + +.error-dialog h3 { + margin: 16px 0; +} + +.activiti-task-details__header { + align-self: flex-end; + display: flex; + font-size: 24px; + font-weight: 300; + line-height: normal; + overflow: hidden; + margin: 8px 0 16px 0; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.activiti-task-details__action-button { + text-transform: uppercase; +} + +adf-people >>> .assignment-top-container{ + background-color: #fff; +} + +.assignment-container { + background: #fff; + border: 1px solid #e1e1e1; + padding: 10px 20px; + width: auto; +} + +adf-task-header.assign-edit-view /deep/ adf-card-view /deep/ .adf-property[data-automation-id="header-assignee"] { + display: none; +} + +.adf-task-details { + &-header { + display: flex; + justify-content: space-between; + + &-toggle { + position: relative; + top: 10px; + margin-right: 2px; + height: 23px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + } + } + + &-core { + display: flex; + justify-content: space-between; + + &-sidebar { + &-drawer { + margin-left: 10px; + } + + &-checklist { + margin-top: 30px; + padding-left: 20px; + padding-right: 20px; + + & /deep/ #checklist-none-message { + margin-top: 10px; + color: rgba(0, 0, 0, .5); + } + + & /deep/ .activiti-label.mdl-badge[data-badge]:after { + margin-top: 9px; + right: -29px; + } + + & /deep/ .activiti-label.mdl-badge[data-badge] + div.icon { + float: right; + } + + & /deep/ .menu-container li.mdl-list { + padding: 0; + } + + & /deep/ .menu-container li.mdl-list__item { + padding: 0; + min-height: auto; + + .mdl-chip { + width: 100%; + + button { + float: right; + position: relative; + top: 4px; + } + } + } + } + } + + &-form { + flex-grow: 1; + + & /deep/ .adf-form-debug-container { + padding: 20px 0 0 0; + + .mat-slide-toggle { + float: right; + + & + div { + background-color: black; + padding: 20px; + clear: both; + margin-top: 30px; + color: white; + } + } + } + + & /deep/ .mat-tab-label { + flex-grow: 1; + } + } + } +} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.ts index 97552add72..279b9d5aeb 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.ts @@ -40,7 +40,7 @@ declare var require: any; @Component({ selector: 'adf-task-details, activiti-task-details', templateUrl: './task-details.component.html', - styleUrls: ['./task-details.component.css'], + styleUrls: ['./task-details.component.scss'], providers: [ CardViewUpdateService ] diff --git a/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png b/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png new file mode 100644 index 0000000000..3b04068256 Binary files /dev/null and b/ng2-components/ng2-alfresco-core/docs/assets/activities-infodrawer.png differ diff --git a/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png b/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png new file mode 100644 index 0000000000..735462a94c Binary files /dev/null and b/ng2-components/ng2-alfresco-core/docs/assets/infodrawerlayout.png differ diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts index eb0e94d42a..22bee76be9 100644 --- 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, diff --git 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 new file mode 100644 index 0000000000..2472b81100 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.html @@ -0,0 +1,11 @@ +
+
+ +
+
+ +
+
+
+ +
\ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..34d5aba472 --- /dev/null +++ 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; + } + } + } +} \ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..6bed74f219 --- /dev/null +++ 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 {} diff --git 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 new file mode 100644 index 0000000000..46edfcafce --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.html @@ -0,0 +1,22 @@ + +
Activities
+ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..6d2a00dbe7 --- /dev/null +++ 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; + } + } + } + } + } +} \ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..3df1090a8f --- /dev/null +++ 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: '' +}) +export class InfoDrawerTabComponent { + @Input('label') label: string = 'Main tab'; + @ViewChild(TemplateRef) content: TemplateRef; +} + +@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; + + showTabLayout(): boolean { + return this.contentBlocks.length > 0; + } +} diff --git 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 new file mode 100644 index 0000000000..97d5366ad2 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.md @@ -0,0 +1,83 @@ +# Info Drawer component(s) + + + + + +- [InfoDrawerLayoutComponent](#infodrawerlayoutcomponent) + * [Example](#example) +- [InfoDrawerComponent](#infodrawercomponent) + * [Properties](#properties) + * [Example](#example-1) + + + + + +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 + +
File info
+ +
+ clear +
+ +
+ + Lorem ipsum dolor sit amet... + +
+ +``` + +## 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 + +
+ clear +
+ + + + + + + + + + + +``` \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-core/src/material.module.ts b/ng2-components/ng2-alfresco-core/src/material.module.ts index 17600b6f60..f4bc67a41c 100644 --- 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 ]; }