feat(list-view): support file detail on mobile view

long press on file item in mobile view BREAKING CHANGE: In Mobile View, double click to open directory, lomg press it to popup detail log.
ElonH · Jun 15, 2020 · ce36cf2 · ce36cf2
1 parent a2a4fa2
commit ce36cf2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/src/app/pages/manager/fileMode/file.detail.ts b/src/app/pages/manager/fileMode/file.detail.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 import { overlayConfigFactory } from 'ngx-modialog-7';
 // tslint:disable-next-line: no-submodule-imports
@@ -106,6 +106,8 @@ export class FileDetailComponent implements OnInit {
 	@ViewChild('EnableServe') public EnableServe: TemplateRef<any>;
 	@ViewChild(RngSpaceUsageChartComponent) chart: RngSpaceUsageChartComponent;
 
+	@Input() initNode: OperationsListExtendsFlowOutItemNode;
+	// TODO: replace as initNode?
 	itemNode(x: OperationsListExtendsFlowOutItemNode) {
 		this.remote = x.remote || '';
 		this.path = x.Path || '';
@@ -194,5 +196,9 @@ export class FileDetailComponent implements OnInit {
 						);
 				}
 			});
+		if (this.initNode)
+			setTimeout(() => {
+				this.itemNode(this.initNode);
+			}, 100);
 	}
 }
diff --git a/src/app/pages/manager/fileMode/fileMode.component.ts b/src/app/pages/manager/fileMode/fileMode.component.ts
@@ -20,6 +20,7 @@ import { ListViewComponent } from './listView/listView.component';
 	template: `
 		<app-manager-list-view
 			[listExtends$]="listExtends$"
+			[pcDetailViewEnable]="pcDetailViewEnable"
 			(jump)="jump.emit($event)"
 			(showDetail)="showDetail.emit($event)"
 		>
@@ -31,6 +32,7 @@ export class FileModeComponent implements OnInit {
 	constructor(private connectService: ConnectionService, private clipboard: ClipboardService) {}
 
 	@Input() nav$: NavigationFlow;
+	@Input() pcDetailViewEnable: boolean;
 
 	@Output() jump = new EventEmitter<NavigationFlowOutNode>();
 	@Output() showDetail = new EventEmitter<OperationsListExtendsFlowOutItemNode>();

diff --git a/src/app/pages/manager/fileMode/listView/listView.component.ts b/src/app/pages/manager/fileMode/listView/listView.component.ts
@@ -96,6 +96,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
 	private remote: string;
 
 	@Input() listExtends$: OperationsListExtendsFlow;
+	@Input() pcDetailViewEnable: boolean;
 
 	private listScrb: Subscription;
 
@@ -121,7 +122,11 @@ export class ListViewComponent implements OnInit, OnDestroy {
 				this.jump.emit({ remote: this.remote, path: item.Path });
 				this.loading();
 			}
-		} else if ($event.event === 'onClick') {
+		} else if ($event.event === 'onClick' && this.pcDetailViewEnable) {
+			// console.log($event.value);
+			const item = $event.value.row;
+			this.showDetail.emit(item);
+		} else if ($event.event === 'onRowContextMenu' && !this.pcDetailViewEnable) {
 			// console.log($event.value);
 			const item = $event.value.row;
 			this.showDetail.emit(item);
@@ -169,6 +174,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
 		this.configuration.searchEnabled = true;
 		this.configuration.checkboxes = true;
 		this.configuration.isLoading = true;
+		this.configuration.showContextMenu = true;
 		// ... etc.
 		this.listScrb = this.listExtends$.getOutput().subscribe(listNode => {
 			this.checkAll = false;

diff --git a/src/app/pages/manager/manager.component.ts b/src/app/pages/manager/manager.component.ts
@@ -50,6 +50,7 @@ import { TaskService } from './tasks/tasks.service';
 					</app-manager-home-mode>
 					<app-manager-file-mode
 						*ngIf="fileMode"
+						[pcDetailViewEnable]="pcDetailViewEnable"
 						[nav$]="nav$"
 						(jump)="addrJump($event)"
 						(showDetail)="openFileDetail($event)"
@@ -73,6 +74,9 @@ import { TaskService } from './tasks/tasks.service';
 		<ng-template #MobileRemoteDetail let-ctx="dialogRef.context">
 			<app-home-remote-detail [initNode]="ctx.navNode"> </app-home-remote-detail>
 		</ng-template>
+		<ng-template #MobileFileDetail let-ctx="dialogRef.context">
+			<app-file-file-detail [initNode]="ctx.itemNode"> </app-file-file-detail>
+		</ng-template>
 		<nb-layout-footer [ngClass]="{ mobile: !mainBar, pc: mainBar }">
 			<nb-actions>
 				<nb-action *ngIf="fileMode" icon="copy" (click)="file.manipulate('copy')"></nb-action>
@@ -185,6 +189,7 @@ export class ManagerComponent implements OnInit, OnDestroy {
 	@ViewChild(RemoteDetailComponent) remoteDetail: RemoteDetailComponent;
 	@ViewChild('MobileRemoteDetail') remoteDetailMobile: TemplateRef<any>;
 	@ViewChild(FileDetailComponent) fileDetail: FileDetailComponent;
+	@ViewChild('MobileFileDetail') fileDetailMobile: TemplateRef<any>;
 
 	private navTrigger = new Subject<NavigationFlowOutNode>();
 	nav$: NavigationFlow;
@@ -365,7 +370,6 @@ export class ManagerComponent implements OnInit, OnDestroy {
 	openRemoteDetail(item: NavigationFlowOutNode) {
 		if (this.pcDetailView) this.remoteDetail.navNode(item);
 		if (!this.pcDetailViewEnable) {
-			console.log('remote detail');
 			this.modal.open(
 				this.remoteDetailMobile,
 				overlayConfigFactory({ isBlocking: false, navNode: item }, VEXModalContext)
@@ -374,7 +378,12 @@ export class ManagerComponent implements OnInit, OnDestroy {
 	}
 	openFileDetail(item: OperationsListExtendsFlowOutItemNode) {
 		if (this.pcDetailView) this.fileDetail.itemNode(item);
-		if (!this.pcDetailViewEnable) console.log('file detail');
+		if (!this.pcDetailViewEnable) {
+			this.modal.open(
+				this.fileDetailMobile,
+				overlayConfigFactory({ isBlocking: false, itemNode: item }, VEXModalContext)
+			);
+		}
 	}
 
 	ngOnInit(): void {