inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-754] toolbar component (#1938)

Browse Source 
* toolbar component

- simple toolbar component (core lib)
- readme updates (core lib)
- update demo shell with toolbar component demo (document list)

* update unit tests
This commit is contained in:
Denys Vuika
2017-06-07 11:39:57 +01:00
committed by Eugenio Romano
parent 6258aa3dd0
commit 6aa6a155e2
14 changed files with 260 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@@ -11,5 +11,5 @@
"**/coverage": true
},
"editor.renderIndentGuides": true,
"tslint.configFile": "ng2-components/config/assets/tslint.json"
"tslint.configFile": "ng2-components/tslint.json"
}

16
demo-shell-ng2/app/app.module.ts
View File

@@ -17,7 +17,6 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdSlideToggleModule, MdInputModule, MdSelectModule } from '@angular/material';
import { CoreModule } from 'ng2-alfresco-core';
import { SearchModule } from 'ng2-alfresco-search';
@@ -35,11 +34,14 @@ import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
import { AnalyticsModule } from 'ng2-activiti-analytics';
import { DiagramsModule } from 'ng2-activiti-diagrams';
import { MaterialModule } from './material.module';
import { AppComponent } from './app.component';
import { routing } from './app.routes';
import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
import { Editor3DModule } from 'ng2-3d-editor';
import { ChartsModule } from 'ng2-charts';
import { CreateFolderDialog } from './dialogs/create-folder.dialog';
import {
HomeComponent,
@@ -64,10 +66,8 @@ import {
imports: [
BrowserModule,
routing,
MdInputModule,
MdSlideToggleModule,
MdSelectModule,
CoreModule.forRoot(),
MaterialModule,
LoginModule.forRoot(),
SearchModule.forRoot(),
DataTableModule.forRoot(),
@@ -104,9 +104,13 @@ import {
AboutComponent,
FilesComponent,
FormNodeViewer,
SettingComponent
SettingComponent,
CreateFolderDialog
],
providers: [],
bootstrap: [ AppComponent ]
bootstrap: [ AppComponent ],
entryComponents: [
CreateFolderDialog
]
})
export class AppModule { }

32
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -12,8 +12,36 @@
</button>
<span class="error-message--text">{{errorMessage}}</span>
</div>
<ng-container *ngIf="useCustomToolbar">
<adf-toolbar title="Toolbar">
<button md-icon-button (click)="onCreateFolderClicked($event)">
<md-icon>create_new_folder</md-icon>
</button>
<button md-icon-button>
<md-icon>delete</md-icon>
</button>
<button md-icon-button [mdMenuTriggerFor]="menu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>dialpad</md-icon>
<span>Redial</span>
</button>
<button md-menu-item disabled>
<md-icon>voicemail</md-icon>
<span>Check voicemail</span>
</button>
<button md-menu-item>
<md-icon>notifications_off</md-icon>
<span>Disable alerts</span>
</button>
</md-menu>
</adf-toolbar>
</ng-container>
<alfresco-document-list
#documentList
[creationMenuActions]="!useCustomToolbar"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
@@ -127,6 +155,10 @@
<context-menu-holder></context-menu-holder>
<div class="container">
<section>
<md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
</section>

22
demo-shell-ng2/app/components/files/files.component.ts
View File

@@ -17,11 +17,14 @@
import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { MdDialog } from '@angular/material';
import { AlfrescoAuthenticationService, AlfrescoContentService, FolderCreatedEvent, LogService, NotificationService } from 'ng2-alfresco-core';
import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
import { FormService } from 'ng2-activiti-form';
import { UploadService, UploadButtonComponent, UploadDragAreaComponent } from 'ng2-alfresco-upload';
import { CreateFolderDialog } from '../../dialogs/create-folder.dialog';
@Component({
selector: 'files-component',
templateUrl: './files.component.html',
@@ -35,6 +38,8 @@ export class FilesComponent implements OnInit, AfterViewInit {
fileNodeId: any;
fileShowed: boolean = false;
useCustomToolbar = false;
@Input()
multipleFileUpload: boolean = false;
@@ -74,6 +79,7 @@ export class FilesComponent implements OnInit, AfterViewInit {
private notificationService: NotificationService,
private uploadService: UploadService,
private contentService: AlfrescoContentService,
private dialog: MdDialog,
@Optional() private route: ActivatedRoute) {
documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
}
@@ -197,4 +203,20 @@ export class FilesComponent implements OnInit, AfterViewInit {
}
}
}
onCreateFolderClicked(event: Event) {
let dialogRef = this.dialog.open(CreateFolderDialog);
dialogRef.afterClosed().subscribe(folderName => {
if (folderName) {
this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
node => {
console.log(node);
},
err => {
console.log(err);
}
);
}
});
}
}

44
demo-shell-ng2/app/dialogs/create-folder.dialog.ts Normal file
View File

@@ -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 { Component } from '@angular/core';
@Component({
selector: 'adf-create-folder-dialog',
template: `
<h1 md-dialog-title>Create a new folder</h1>
<div md-dialog-content>
<md-input-container class="create-folder--name">
<input mdInput placeholder="Folder name" [(ngModel)]="value">
</md-input-container>
</div>
<div md-dialog-actions>
<button md-button md-dialog-close>Cancel</button>
<button md-button [md-dialog-close]="value">Create</button>
</div>
`,
styles: [
`
.create-folder--name {
width: 100%;
}
`
]
})
export class CreateFolderDialog {
value: string = '';
}

32
demo-shell-ng2/app/material.module.ts Normal file
View File

@@ -0,0 +1,32 @@
/*!
* @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 { NgModule } from '@angular/core';
import { MdSlideToggleModule, MdInputModule, MdSelectModule, MdDialogModule } from '@angular/material';
const MATERIAL_MODULES = [
MdSlideToggleModule,
MdInputModule,
MdSelectModule,
MdDialogModule
];
@NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES
})
export class MaterialModule {}

8
ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts
View File

@@ -116,9 +116,11 @@ describe('ActivitiProcessInstanceHeader', () => {
it('should render the button show diagram disabled', () => {
component.processInstance = new ProcessInstance(processEnded);
fixture.detectChanges();
let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
expect(showButton).toBeDefined();
expect(showButton.disabled).toBeTruthy();
fixture.whenStable().then(() => {
let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
expect(showButton).toBeDefined();
expect(showButton.disabled).toBeTruthy();
});
});
it('should NOT render the button show diagram is the property showDiagram is false', () => {

38
ng2-components/ng2-alfresco-core/README.md
View File

@@ -1,4 +1,4 @@
# Alfresco Angular 2 Components core
# Alfresco Angular Components Core
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
@@ -46,19 +46,41 @@ npm install --save ng2-alfresco-core
## Library content
- Components
- Context Menu directive
- [Toolbar](#toolbar-component)
- [Accordion](#accordion-component)
- Directives
- UploadDirective
- [Upload](#upload-directive)
- [Context Menu](#context-menu-directive)
- Services
- **LogService**, log service implementation
- **NotificationService**, Notification service implementation
- **AlfrescoApiService**, provides access to Alfresco JS API instance
- **AlfrescoAuthenticationService**, main authentication APIs
- **AlfrescoTranslationService**, various i18n-related APIs
- [NotificationService](#notification-service), Notification service implementation
- [AlfrescoApiService](#alfresco-api-service), provides access to Alfresco JS API instance
- [AlfrescoAuthenticationService](#authentication-service), main authentication APIs
- [AlfrescoTranslationService](#alfrescotranslationservice), various i18n-related APIs
- **ContextMenuService**, global context menu APIs
- [Renditions Service](#renditions-service)
## Toolbar Component
## UploadDirective
```html
<adf-toolbar title="Toolbar">
<button md-icon-button>
<md-icon>create_new_folder</md-icon>
</button>
<button md-icon-button>
<md-icon>delete</md-icon>
</button>
</adf-toolbar>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string | | Toolbar title |
| color | string | | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. |
## Upload Directive
Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
Used by attaching to an element or component.

13
ng2-components/ng2-alfresco-core/index.ts
View File

@@ -16,12 +16,13 @@
*/
import { NgModule, ModuleWithProviders } from '@angular/core';
import { MdSnackBarModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule, Http } from '@angular/http';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule, TranslateLoader } from 'ng2-translate/ng2-translate';
import { MaterialModule } from './src/material.module';
import { AdfToolbarComponent } from './src/components/toolbar/toolbar.component';
import {
AlfrescoAuthenticationService,
@@ -95,7 +96,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
useFactory: (createTranslateLoader),
deps: [Http, LogService]
}),
MdSnackBarModule
MaterialModule
],
declarations: [
...MATERIAL_DESIGN_DIRECTIVES,
@@ -104,7 +105,8 @@ export function createTranslateLoader(http: Http, logService: LogService) {
UploadDirective,
DataColumnComponent,
DataColumnListComponent,
FileSizePipe
FileSizePipe,
AdfToolbarComponent
],
providers: [
...ALFRESCO_CORE_PROVIDERS
@@ -116,14 +118,15 @@ export function createTranslateLoader(http: Http, logService: LogService) {
ReactiveFormsModule,
HttpModule,
TranslateModule,
MaterialModule,
...MATERIAL_DESIGN_DIRECTIVES,
...CONTEXT_MENU_DIRECTIVES,
...COLLAPSABLE_DIRECTIVES,
UploadDirective,
DataColumnComponent,
DataColumnListComponent,
MdSnackBarModule,
FileSizePipe
FileSizePipe,
AdfToolbarComponent
]
})
export class CoreModule {

3
ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.css Normal file
View File

@@ -0,0 +1,3 @@
.adf-toolbar--spacer {
flex: 1 1 auto;
}

5
ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.html Normal file
View File

@@ -0,0 +1,5 @@
<md-toolbar [color]="color">
<span>{{ title }}</span>
<span class="adf-toolbar--spacer"></span>
<ng-content></ng-content>
</md-toolbar>

35
ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.ts Normal file
View File

@@ -0,0 +1,35 @@
/*!
* @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, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class AdfToolbarComponent {
@Input()
title: string = '';
@Input()
color: string;
}

31
ng2-components/ng2-alfresco-core/src/material.module.ts Normal file
View File

@@ -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 { NgModule } from '@angular/core';
import { MdSnackBarModule, MdToolbarModule, MdButtonModule } from '@angular/material';
const MATERIAL_MODULES = [
MdSnackBarModule,
MdToolbarModule,
MdButtonModule
];
@NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES
})
export class MaterialModule {}

2
ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css
View File

@@ -5,7 +5,7 @@
padding: 8px 15px;
list-style: none;
background-color: #fafafa;
margin: 0 0 4px;
margin: 0;
}
:host .breadcrumb > li {