feat(home-mode): support remote detail on mobile view

long press on remote item BREAKING CHANGE: In Mobile View, double click remote item to enter file system,and long press it to popup detail dialog.
ElonH · Jun 15, 2020 · 2015e2f · 2015e2f
1 parent 861bb57
commit 2015e2f
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 23 deletions.
diff --git a/src/app/pages/manager/homeMode/homeMode.component.ts b/src/app/pages/manager/homeMode/homeMode.component.ts
@@ -18,18 +18,30 @@ import { ConnectionService } from '../../connection.service';
 			<div
 				[ngClass]="{
 					'cloud col-sm-6': true,
-					'col-xl-3 col-md-4': !detail,
-					'col-lg-4 col-md-6': detail
+					'col-xl-3 col-md-4': !pcDetailView,
+					'col-lg-4 col-md-6': pcDetailView
 				}"
 				*ngFor="let remote of remotes"
 			>
 				<app-home-view-remote
+					*hideItBootstrap="['xs']"
 					[easyMode]="true"
 					[title]="remote"
 					(click)="showDetail.emit({ remote: remote })"
 					(dblclick)="jump.emit({ remote: remote })"
 				>
 				</app-home-view-remote>
+				<!-- associate with manager.pcDetailViewEnable -->
+				<app-home-view-remote
+					*showItBootstrap="['xs']"
+					[easyMode]="true"
+					[title]="remote"
+					(contextmenu)="
+						showDetail.emit({ remote: remote }); $event.preventDefault(); $event.stopPropagation()
+					"
+					(dblclick)="jump.emit({ remote: remote })"
+				>
+				</app-home-view-remote>
 			</div>
 		</div>
 	`,
@@ -40,7 +52,7 @@ export class HomeModeComponent implements OnInit {
 
 	remotes: string[] = [];
 
-	@Input() detail: boolean;
+	@Input() pcDetailView: boolean;
 	@Output() jump = new EventEmitter<NavigationFlowOutNode>();
 	@Output() showDetail = new EventEmitter<NavigationFlowOutNode>();
 

diff --git a/src/app/pages/manager/homeMode/remote.detail.ts b/src/app/pages/manager/homeMode/remote.detail.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { combineLatest, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CombErr } from '../../../@dataflow/core';
@@ -79,6 +79,8 @@ export class RemoteDetailComponent implements OnInit {
 
 	@ViewChild(RngSpaceUsageChartComponent) chart: RngSpaceUsageChartComponent;
 
+	@Input() initNode: NavigationFlowOutNode;
+	// TODO: replace it as initNode?
 	navNode(x: NavigationFlowOutNode) {
 		this.remote = x.remote || '';
 		this.loadingFsinfo = true;
@@ -120,5 +122,9 @@ export class RemoteDetailComponent implements OnInit {
 			if (x[1].length !== 0) return;
 			this.chart.data = x[0].about;
 		});
+		if (this.initNode)
+			setTimeout(() => {
+				this.navNode(this.initNode);
+			}, 100);
 	}
 }
diff --git a/src/app/pages/manager/manager.component.ts b/src/app/pages/manager/manager.component.ts
@@ -1,14 +1,19 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NbSidebarComponent, NbToastrService } from '@nebular/theme';
+import { NbSidebarComponent, NbSidebarService, NbToastrService } from '@nebular/theme';
 import { overlayConfigFactory } from 'ngx-modialog-7';
 // tslint:disable-next-line: no-submodule-imports
 import { Modal, VEXModalContext } from 'ngx-modialog-7/plugins/vex';
 import { ResponsiveSizeInfoRx } from 'ngx-responsive';
 import { Observable, Subject } from 'rxjs';
 import { distinctUntilChanged, map, takeWhile, withLatestFrom } from 'rxjs/operators';
 import { CombErr } from '../../@dataflow/core';
-import { IManipulate, NavigationFlow, NavigationFlowOutNode } from '../../@dataflow/extra';
+import {
+	IManipulate,
+	NavigationFlow,
+	NavigationFlowOutNode,
+	OperationsListExtendsFlowOutItemNode,
+} from '../../@dataflow/extra';
 import { OperationsMkdirFlow, OperationsMkdirFlowInNode } from '../../@dataflow/rclone';
 import { ConnectionService } from '../connection.service';
 import { ClipboardDialogComponent } from './clipboard/clipboard.dialog';
@@ -28,34 +33,46 @@ import { TaskService } from './tasks/tasks.service';
 			<app-manager-breadcrumb [nav$]="nav$" (jump)="addrJump($event)"> </app-manager-breadcrumb>
 			<a class="push-to-right option" (click)="refresh()"><nb-icon icon="refresh"></nb-icon></a>
 			<a class="option"><nb-icon icon="list"></nb-icon></a>
-			<a class="option" *ngIf="detailBar || detailExpanded" (click)="toggleDetail()">
+			<!-- *hideItBootstrap="['xs']" -->
+			<a class="option" *ngIf="pcDetailViewEnable" (click)="toggleDetail()">
 				<nb-icon icon="info"></nb-icon>
 			</a>
 		</nb-layout-header>
-		<div [ngClass]="{ subcolumn: true, 'subcolumn-right-bar': detailExpanded }">
+		<div [ngClass]="{ subcolumn: true, 'subcolumn-right-bar': pcDetailView }">
 			<nb-card>
 				<nb-card-body>
 					<app-manager-home-mode
 						*ngIf="homeMode"
-						[detail]="detailExpanded"
+						[pcDetailView]="pcDetailView"
 						(jump)="addrJump($event)"
-						(showDetail)="remoteDetail.navNode($event)"
+						(showDetail)="openRemoteDetail($event)"
 					>
 					</app-manager-home-mode>
 					<app-manager-file-mode
 						*ngIf="fileMode"
 						[nav$]="nav$"
 						(jump)="addrJump($event)"
-						(showDetail)="fileDetail.itemNode($event)"
+						(showDetail)="openFileDetail($event)"
 					>
 					</app-manager-file-mode>
 				</nb-card-body>
 			</nb-card>
 		</div>
-		<nb-sidebar fixed end class="right-bar" tag="detail" state="collapsed">
+		<!-- *hideItBootstrap="['xs']" -->
+		<nb-sidebar
+			*ngIf="pcDetailViewEnable"
+			fixed
+			end
+			class="right-bar"
+			tag="detail"
+			state="collapsed"
+		>
 			<app-home-remote-detail *ngIf="homeMode"> </app-home-remote-detail>
 			<app-file-file-detail *ngIf="fileMode"> </app-file-file-detail>
 		</nb-sidebar>
+		<ng-template #MobileRemoteDetail let-ctx="dialogRef.context">
+			<app-home-remote-detail [initNode]="ctx.navNode"> </app-home-remote-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>
@@ -156,17 +173,17 @@ export class ManagerComponent implements OnInit, OnDestroy {
 		private resp: ResponsiveSizeInfoRx,
 		public modal: Modal,
 		private router: Router,
-		private route: ActivatedRoute
+		private route: ActivatedRoute,
+		private sidebarService: NbSidebarService
 	) {}
 	homeMode = false;
 	fileMode = false;
 	mainBar = false;
-	detailBar = true;
 
 	@ViewChild(FileModeComponent) file: FileModeComponent;
 	@ViewChild(HomeModeComponent) home: HomeModeComponent;
-	@ViewChild(NbSidebarComponent) detail: NbSidebarComponent;
 	@ViewChild(RemoteDetailComponent) remoteDetail: RemoteDetailComponent;
+	@ViewChild('MobileRemoteDetail') remoteDetailMobile: TemplateRef<any>;
 	@ViewChild(FileDetailComponent) fileDetail: FileDetailComponent;
 
 	private navTrigger = new Subject<NavigationFlowOutNode>();
@@ -181,7 +198,8 @@ export class ManagerComponent implements OnInit, OnDestroy {
 
 	public orderCnt = 0;
 
-	detailExpanded = false;
+	pcDetailViewEnable = false;
+	pcDetailView = false;
 
 	visable = false;
 
@@ -331,17 +349,32 @@ export class ManagerComponent implements OnInit, OnDestroy {
 	private sidebarDeploy() {
 		this.resp.getResponsiveSize.subscribe(data => {
 			this.mainBar = !(data === 'xs' || data === 'sm' || data === 'md');
-			this.detailBar = data !== 'xs';
-			if (!this.detailBar) {
-				this.detail.collapse();
-				this.detailExpanded = false;
+			this.pcDetailViewEnable = data !== 'xs';
+			if (data === 'xs') {
+				this.pcDetailView = false;
+				this.sidebarService.collapse('detail');
 			}
 		});
 	}
 
 	toggleDetail() {
-		this.detail.toggle(false);
-		this.detailExpanded = this.detail.expanded;
+		this.pcDetailView = !this.pcDetailView;
+		this.sidebarService.toggle(false, 'detail');
+	}
+
+	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)
+			);
+		}
+	}
+	openFileDetail(item: OperationsListExtendsFlowOutItemNode) {
+		if (this.pcDetailView) this.fileDetail.itemNode(item);
+		if (!this.pcDetailViewEnable) console.log('file detail');
 	}
 
 	ngOnInit(): void {

diff --git a/src/app/pages/manager/manager.module.ts b/src/app/pages/manager/manager.module.ts
@@ -22,6 +22,7 @@ import {
 import { ChartsModule } from 'ng2-charts';
 import { TableModule } from 'ngx-easy-table';
 import { FileSaverModule } from 'ngx-filesaver';
+import { ResponsiveModule } from 'ngx-responsive';
 import { RngModule } from '../../components/rng.module';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { ClipboardRemotesTableComponent } from './clipboard/clipboard-remotes-table/clipboard-remotes-table.component';
@@ -75,6 +76,7 @@ import { TasksDialogComponent } from './tasks/tasks.dialog';
 		FileSaverModule,
 		RngModule,
 		FormsModule,
+		ResponsiveModule,
 	],
 })
 export class ManagerModule {}