diff --git a/demo-shell/src/app/app.component.html b/demo-shell/src/app/app.component.html index 1e9ccf4872..8968c0e0ba 100644 --- a/demo-shell/src/app/app.component.html +++ b/demo-shell/src/app/app.component.html @@ -1,2 +1,3 @@ + diff --git a/demo-shell/src/app/app.component.scss b/demo-shell/src/app/app.component.scss index f46c8c01f6..bdccc4c219 100644 --- a/demo-shell/src/app/app.component.scss +++ b/demo-shell/src/app/app.component.scss @@ -34,6 +34,15 @@ } } +router-outlet[name="overlay"] + * { + width: 100%; + height: 100%; + z-index: 999999; + position: absolute; + top: 0; + right: 0; +} + @media (max-width: 425px) { adf-content-node-selector { .adf-content-node-selector-content-list { diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index fdbfa8edfc..801b7149a0 100644 --- a/demo-shell/src/app/app.module.ts +++ b/demo-shell/src/app/app.module.ts @@ -39,6 +39,7 @@ import { TagComponent } from './components/tag/tag.component'; import { SocialComponent } from './components/social/social.component'; import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component'; import { MetadataDialogAdapterComponent } from './components/files/metadata-dialog-adapter.component'; +import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component'; import { ThemePickerModule } from './components/theme-picker/theme-picker'; import { DebugAppConfigService } from './services/debug-app-config.service'; @@ -49,6 +50,7 @@ import { TaskAttachmentsComponent } from './components/process-service/task-atta import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component'; import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component'; import { DemoPermissionComponent } from './components/permissions/demo-permissions.component'; +import { PreviewService } from './services/preview.service'; @NgModule({ imports: [ @@ -98,7 +100,8 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio SharedLinkViewComponent, FormLoadingComponent, DemoPermissionComponent, - FormLoadingComponent + FormLoadingComponent, + BlobPreviewComponent ], providers: [ { provide: AppConfigService, useClass: DebugAppConfigService }, @@ -117,7 +120,8 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio name: 'lazy-loading', source: 'resources/lazy-loading' } - } + }, + PreviewService ], entryComponents: [ VersionManagerDialogAdapterComponent, diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index 22d3ae1763..b8b1df16e0 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/demo-shell/src/app/app.routes.ts @@ -46,15 +46,14 @@ import { OverlayViewerComponent } from './components/overlay-viewer/overlay-view import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component'; import { FormLoadingComponent } from './components/form/form-loading.component'; import { DemoPermissionComponent } from './components/permissions/demo-permissions.component'; +import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component'; export const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'settings', component: SettingsComponent }, - { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] }, - { - path: 'preview/s/:id', - component: SharedLinkViewComponent - }, + { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ], outlet: 'overlay' }, + { path: 'preview/blob', component: BlobPreviewComponent, outlet: 'overlay', pathMatch: 'full' }, + { path: 'preview/s/:id', component: SharedLinkViewComponent }, { path: '', component: AppLayoutComponent, diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html index f2b98c3e29..83bdfd6fd0 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.html +++ b/demo-shell/src/app/components/app-layout/app-layout.component.html @@ -51,4 +51,4 @@ - + \ No newline at end of file diff --git a/demo-shell/src/app/components/blob-preview/blob-preview.component.ts b/demo-shell/src/app/components/blob-preview/blob-preview.component.ts new file mode 100644 index 0000000000..e68fffc913 --- /dev/null +++ b/demo-shell/src/app/components/blob-preview/blob-preview.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { PreviewService } from '../../services/preview.service'; +import { Router } from '@angular/router'; + +@Component({ + templateUrl: 'bob-preview.component.html' +}) +export class BlobPreviewComponent { + content: Blob; + name: string; + + constructor(preview: PreviewService, router: Router) { + if (preview.content === null || preview.name === null) { + router.navigate([{ outlets: { overlay: null } }]); + return; + } + + this.content = preview.content; + this.name = preview.name; + } +} diff --git a/demo-shell/src/app/components/blob-preview/bob-preview.component.html b/demo-shell/src/app/components/blob-preview/bob-preview.component.html new file mode 100644 index 0000000000..50d2a1515f --- /dev/null +++ b/demo-shell/src/app/components/blob-preview/bob-preview.component.html @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts index f42ff3cd67..94f51b4f49 100644 --- a/demo-shell/src/app/components/files/files.component.ts +++ b/demo-shell/src/app/components/files/files.component.ts @@ -38,6 +38,7 @@ import { SelectAppsDialogComponent } from '@alfresco/adf-process-services'; import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component'; import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component'; import { Subscription } from 'rxjs/Subscription'; +import { PreviewService } from '../../services/preview.service'; const DEFAULT_FOLDER_TO_SHOW = '-my-'; @@ -163,6 +164,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy { private logService: LogService, private preference: UserPreferencesService, private appConfig: AppConfigService, + private preview: PreviewService, @Optional() private route: ActivatedRoute, public authenticationService: AuthenticationService) { this.preference.select(UserPreferenceValues.SupportedPageSizes) @@ -174,7 +176,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy { showFile(event) { const entry = event.value.entry; if (entry && entry.isFile) { - this.router.navigate(['/files', entry.id, 'view']); + this.preview.showResource(entry.id); } } diff --git a/demo-shell/src/app/components/process-service/process-attachments.component.html b/demo-shell/src/app/components/process-service/process-attachments.component.html index 7955be82a2..c1c8d94691 100644 --- a/demo-shell/src/app/components/process-service/process-attachments.component.html +++ b/demo-shell/src/app/components/process-service/process-attachments.component.html @@ -35,13 +35,4 @@ - - -
- - -
+ \ No newline at end of file diff --git a/demo-shell/src/app/components/process-service/process-attachments.component.ts b/demo-shell/src/app/components/process-service/process-attachments.component.ts index 0b03509c15..25f2faca9e 100644 --- a/demo-shell/src/app/components/process-service/process-attachments.component.ts +++ b/demo-shell/src/app/components/process-service/process-attachments.component.ts @@ -21,6 +21,7 @@ import { ProcessInstance, ProcessService , import { UploadService } from '@alfresco/adf-core'; import { AlfrescoApiService } from '@alfresco/adf-core'; import { AppConfigService } from '@alfresco/adf-core'; +import { PreviewService } from '../../services/preview.service'; export function processUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) { return new ProcessUploadService(api, config); @@ -47,14 +48,13 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges { @Input() processInstanceId: string; - fileShowed = false; - content: Blob; - contentName: string; - processInstance: ProcessInstance; - constructor(private uploadService: UploadService, private processService: ProcessService) { - } + constructor( + private uploadService: UploadService, + private processService: ProcessService, + private preview: PreviewService + ) {} ngOnInit() { this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data)); @@ -74,9 +74,7 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges { } onAttachmentClick(content: any): void { - this.fileShowed = true; - this.content = content.contentBlob; - this.contentName = content.name; + this.preview.showBlob(content.name, content.contentBlob); } isCompletedProcess(): boolean { diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html index fa89bf410d..a998cbeb9b 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.html +++ b/demo-shell/src/app/components/process-service/process-service.component.html @@ -233,12 +233,3 @@ - -
- - -
diff --git a/demo-shell/src/app/components/process-service/process-service.component.ts b/demo-shell/src/app/components/process-service/process-service.component.ts index a4a9cf7e71..e3620f1184 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.ts +++ b/demo-shell/src/app/components/process-service/process-service.component.ts @@ -63,6 +63,7 @@ import { import { Subscription } from 'rxjs/Subscription'; import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component'; import { DemoFieldValidator } from './demo-field-validator'; +import { PreviewService } from '../../services/preview.service'; const currentProcessIdNew = '__NEW__'; const currentTaskIdNew = '__NEW__'; @@ -111,14 +112,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit @Output() changePageSize: EventEmitter = new EventEmitter(); - fileShowed = false; selectFirstReport = false; private tabs = { tasks: 0, processes: 1, reports: 2 }; - content: Blob; - contentName: string; - layoutType: string; currentTaskId: string; currentProcessInstanceId: string; @@ -161,6 +158,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit private apiService: AlfrescoApiService, private logService: LogService, private appConfig: AppConfigService, + private preview: PreviewService, formRenderingService: FormRenderingService, formService: FormService, private preferenceService: UserPreferencesService) { @@ -385,9 +383,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit } onContentClick(content: any): void { - this.fileShowed = true; - this.content = content.contentBlob; - this.contentName = content.name; + this.preview.showBlob(content.name, content.contentBlob); } onAuditClick(event: any) { diff --git a/demo-shell/src/app/components/process-service/task-attachments.component.html b/demo-shell/src/app/components/process-service/task-attachments.component.html index 00d569b4fd..027f9c2982 100644 --- a/demo-shell/src/app/components/process-service/task-attachments.component.html +++ b/demo-shell/src/app/components/process-service/task-attachments.component.html @@ -33,12 +33,3 @@ - -
- - -
diff --git a/demo-shell/src/app/components/process-service/task-attachments.component.ts b/demo-shell/src/app/components/process-service/task-attachments.component.ts index ae4aa7efb1..218f1ffbd6 100644 --- a/demo-shell/src/app/components/process-service/task-attachments.component.ts +++ b/demo-shell/src/app/components/process-service/task-attachments.component.ts @@ -18,6 +18,7 @@ import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core'; import { TaskListService, TaskAttachmentListComponent, TaskDetailsModel, TaskUploadService } from '@alfresco/adf-process-services'; import { UploadService, AlfrescoApiService, AppConfigService } from '@alfresco/adf-core'; +import { PreviewService } from '../../services/preview.service'; export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) { return new TaskUploadService(api, config); @@ -44,14 +45,12 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges { @Input() taskId: string; - fileShowed = false; - content: Blob; - contentName: string; - taskDetails: any; - constructor(private uploadService: UploadService, private activitiTaskList: TaskListService) { - } + constructor( + private uploadService: UploadService, + private activitiTaskList: TaskListService, + private preview: PreviewService) {} ngOnInit() { this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data)); @@ -71,9 +70,7 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges { } onAttachmentClick(content: any): void { - this.fileShowed = true; - this.content = content.contentBlob; - this.contentName = content.name; + this.preview.showBlob(content.name, content.contentBlob); } isCompletedTask(): boolean { diff --git a/demo-shell/src/app/services/preview.service.ts b/demo-shell/src/app/services/preview.service.ts new file mode 100644 index 0000000000..1cdfc4660b --- /dev/null +++ b/demo-shell/src/app/services/preview.service.ts @@ -0,0 +1,38 @@ +/*! + * @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 { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +@Injectable() +export class PreviewService { + + public content: Blob = null; + public name: string = null; + + constructor(private router: Router) {} + + showResource(resourceId): void { + this.router.navigate([{ outlets: { overlay: ['files', resourceId, 'view'] } }]); + } + + showBlob(name: string, content: Blob): void { + this.name = name; + this.content = content; + this.router.navigate([{ outlets: { overlay: ['preview', 'blob'] } }]); + } +}