diff --git a/.vscode/settings.json b/.vscode/settings.json index bc3c11c1fb..92a0bfe5c7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,5 +11,5 @@ "**/coverage": true }, "editor.renderIndentGuides": true, - "tslint.configFile": "ng2-components/config/assets/tslint.json" + "tslint.configFile": "ng2-components/tslint.json" } diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts index 2502062119..661f3d595f 100644 --- a/demo-shell-ng2/app/app.module.ts +++ b/demo-shell-ng2/app/app.module.ts @@ -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 { } diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 120461c9d6..2802b5753b 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -12,8 +12,36 @@ {{errorMessage}} + + + + + + + + + + + +
+
+ Use custom toolbar +
+
Multiple File Upload
diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts index 5b6ab18b44..92535891b6 100644 --- a/demo-shell-ng2/app/components/files/files.component.ts +++ b/demo-shell-ng2/app/components/files/files.component.ts @@ -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); + } + ); + } + }); + } } diff --git a/demo-shell-ng2/app/dialogs/create-folder.dialog.ts b/demo-shell-ng2/app/dialogs/create-folder.dialog.ts new file mode 100644 index 0000000000..a59e86d901 --- /dev/null +++ b/demo-shell-ng2/app/dialogs/create-folder.dialog.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 { Component } from '@angular/core'; + +@Component({ + selector: 'adf-create-folder-dialog', + template: ` +

Create a new folder

+
+ + + +
+
+ + +
+ `, + styles: [ + ` + .create-folder--name { + width: 100%; + } + ` + ] +}) +export class CreateFolderDialog { + value: string = ''; +} diff --git a/demo-shell-ng2/app/material.module.ts b/demo-shell-ng2/app/material.module.ts new file mode 100644 index 0000000000..cfbbb5215c --- /dev/null +++ b/demo-shell-ng2/app/material.module.ts @@ -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 {} diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts index d3a99ec9e8..2ee89d61ef 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts @@ -116,9 +116,11 @@ describe('ActivitiProcessInstanceHeader', () => { it('should render the button show diagram disabled', () => { component.processInstance = new ProcessInstance(processEnded); fixture.detectChanges(); - let showButton: HTMLButtonElement = element.querySelector('#show-diagram-button'); - expect(showButton).toBeDefined(); - expect(showButton.disabled).toBeTruthy(); + fixture.whenStable().then(() => { + let showButton: 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', () => { diff --git a/ng2-components/ng2-alfresco-core/README.md b/ng2-components/ng2-alfresco-core/README.md index f992bb9665..3839b201bd 100644 --- a/ng2-components/ng2-alfresco-core/README.md +++ b/ng2-components/ng2-alfresco-core/README.md @@ -1,4 +1,4 @@ -# Alfresco Angular 2 Components core +# Alfresco Angular Components Core

@@ -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 + + + + +``` + +### 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. @@ -547,4 +569,4 @@ npm run coverage ## License -[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) +[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts index 000aa15d84..c3408b541f 100644 --- a/ng2-components/ng2-alfresco-core/index.ts +++ b/ng2-components/ng2-alfresco-core/index.ts @@ -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 { diff --git a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.css b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.css new file mode 100644 index 0000000000..e9670861e6 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.css @@ -0,0 +1,3 @@ +.adf-toolbar--spacer { + flex: 1 1 auto; +} diff --git a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.html b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.html new file mode 100644 index 0000000000..8b6c270678 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.html @@ -0,0 +1,5 @@ + + {{ title }} + + + diff --git a/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.ts b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.ts new file mode 100644 index 0000000000..427d30895e --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.ts @@ -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; + +} diff --git a/ng2-components/ng2-alfresco-core/src/material.module.ts b/ng2-components/ng2-alfresco-core/src/material.module.ts new file mode 100644 index 0000000000..af4caf1cf4 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/material.module.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 { 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 {} diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css index 02fa295a28..92e9fb5736 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css +++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css @@ -5,7 +5,7 @@ padding: 8px 15px; list-style: none; background-color: #fafafa; - margin: 0 0 4px; + margin: 0; } :host .breadcrumb > li {