From eb3a1602630485d145632a6b2c7adad2d8aebda3 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Thu, 11 Aug 2022 15:01:34 +0800 Subject: [PATCH 1/3] feat: left sider width support drag --- .../src/app/pages/api/api.component.html | 64 ++++++------------- .../src/app/pages/api/api.component.scss | 34 +++++++++- .../src/app/pages/api/api.component.ts | 12 ++++ .../browser/src/app/shared/shared.module.ts | 3 + 4 files changed, 67 insertions(+), 46 deletions(-) diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html index ccd283714..085d0aed5 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.html +++ b/src/workbench/browser/src/app/pages/api/api.component.html @@ -1,5 +1,6 @@ - + @@ -23,48 +24,31 @@ + +
+
- +
- + - Manage Environment + Manage + Environment - + @@ -85,19 +69,11 @@ -
-
+
+
diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss index 6c96d4eae..90a05922a 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.scss +++ b/src/workbench/browser/src/app/pages/api/api.component.scss @@ -31,6 +31,8 @@ nz-divider { color: #00785a; } + + .icon { -webkit-app-region: no-drag; width: 30px; @@ -48,12 +50,40 @@ nz-divider { ::ng-deep { eo-api { .ant-layout-sider-children { - border-right: 1px solid #f0f0f0; + position: relative; + display: flex; + // border-right: 1px solid #f0f0f0; // padding: 0 10px; .group-btn-add, .group-search { margin-bottom: 12px; } + .sider-resize-line { + position: absolute; + width: 1px; + background: #f8f8f9; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + right: 0; + top: 0; + bottom: 0; + cursor: col-resize; + &:hover { + width: 6px; + right: -3px; + background: #68be8d; + border-color: #68be8d; + } + > i { + margin: 1px 0; + height: 2px; + width: 2px; + border-radius: 2px; + background: rgba(23,35,61,.25); + } + } } .ant-tabs-nav.ng-star-inserted { padding: 0 10px; @@ -144,7 +174,7 @@ nz-divider { // margin: 10px 0; } } - + .env { border: 2px solid pink; } diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts index 0f9186f7f..e7f13a561 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.ts +++ b/src/workbench/browser/src/app/pages/api/api.component.ts @@ -9,6 +9,7 @@ import { Change } from '../../shared/store/env.state'; import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service'; import { ApiTabComponent } from 'eo/workbench/browser/src/app/pages/api/tab/api-tab.component'; import { ApiTabService } from './api-tab.service'; +import { NzResizeEvent } from 'ng-zorro-antd/resizable'; const DY_WIDTH_KEY = 'DY_WIDTH'; @@ -19,6 +20,9 @@ const DY_WIDTH_KEY = 'DY_WIDTH'; }) export class ApiComponent implements OnInit, OnDestroy { isFirstTime = true; + siderWidth = 250; + contentHeight = 200; + animateId = -1; @ViewChild('apiTabComponent') set apiTabComponent(value: ApiTabComponent) { // For lifecycle error, use timeout @@ -134,6 +138,14 @@ export class ApiComponent implements OnInit, OnDestroy { this.id = Number(this.route.snapshot.queryParams.uuid); }); } + + onSideResize({ width }: NzResizeEvent): void { + cancelAnimationFrame(this.animateId); + this.animateId = requestAnimationFrame(() => { + this.siderWidth = width; + }); + } + gotoEnvManager() { // * switch to env this.messageService.send({ type: 'toggleEnv', data: true }); diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts index 228b9e167..f58368838 100644 --- a/src/workbench/browser/src/app/shared/shared.module.ts +++ b/src/workbench/browser/src/app/shared/shared.module.ts @@ -16,6 +16,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'; +import { NzResizableModule } from 'ng-zorro-antd/resizable'; import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { NzMessageModule } from 'ng-zorro-antd/message'; @@ -68,6 +69,7 @@ const COMPONENTS = [ NzTreeModule, NzPopoverModule, NzCodeEditorModule, + NzResizableModule, ], declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, EnvListComponent], providers: [ModalService], @@ -77,6 +79,7 @@ const COMPONENTS = [ ApiParamsNumPipe, NzPopoverModule, NzCodeEditorModule, + NzResizableModule, EoIconparkIconModule, EnvListComponent, SplitPanelComponent, From e2078463d4b9a91e7f7fd7f0c9f104955010c442 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Thu, 11 Aug 2022 19:11:13 +0800 Subject: [PATCH 2/3] fix: should remember drag width & drag-handle bar style --- .../browser/src/app/pages/api/api.component.scss | 16 ++++++---------- .../browser/src/app/pages/api/api.component.ts | 6 +++++- .../browser/src/app/pages/pages.component.scss | 1 + 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss index 90a05922a..d10ca793e 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.scss +++ b/src/workbench/browser/src/app/pages/api/api.component.scss @@ -59,24 +59,20 @@ nz-divider { margin-bottom: 12px; } .sider-resize-line { - position: absolute; - width: 1px; - background: #f8f8f9; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - right: 0; - top: 0; - bottom: 0; + @apply absolute w-[1px] bg-[#f8f8f9] flex items-center justify-center flex-col right-0 top-0 bottom-0; cursor: col-resize; &:hover { width: 6px; right: -3px; background: #68be8d; border-color: #68be8d; + z-index: 20; + i { + opacity: 1; + } } > i { + opacity: 0; margin: 1px 0; height: 2px; width: 2px; diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts index e7f13a561..d4ba76117 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.ts +++ b/src/workbench/browser/src/app/pages/api/api.component.ts @@ -12,7 +12,9 @@ import { ApiTabService } from './api-tab.service'; import { NzResizeEvent } from 'ng-zorro-antd/resizable'; const DY_WIDTH_KEY = 'DY_WIDTH'; +const LEFT_SIDER_WIDTH_KEY = 'LEFT_SIDER_WIDTH_KEY'; +const localSiderWidth = Number.parseInt(localStorage.getItem(LEFT_SIDER_WIDTH_KEY), 10); @Component({ selector: 'eo-api', templateUrl: './api.component.html', @@ -20,7 +22,7 @@ const DY_WIDTH_KEY = 'DY_WIDTH'; }) export class ApiComponent implements OnInit, OnDestroy { isFirstTime = true; - siderWidth = 250; + siderWidth = Math.max(120, Number.isNaN(localSiderWidth) ? 250 : localSiderWidth); contentHeight = 200; animateId = -1; @ViewChild('apiTabComponent') @@ -143,6 +145,7 @@ export class ApiComponent implements OnInit, OnDestroy { cancelAnimationFrame(this.animateId); this.animateId = requestAnimationFrame(() => { this.siderWidth = width; + localStorage.setItem(LEFT_SIDER_WIDTH_KEY, String(width)); }); } @@ -163,6 +166,7 @@ export class ApiComponent implements OnInit, OnDestroy { handleDrag(e) { const distance = e; this.dyWidth = distance; + localStorage.setItem(DY_WIDTH_KEY, String(this.dyWidth)); } handleEnvSelectStatus(event: boolean) {} private changeStoreEnv(uuid) { diff --git a/src/workbench/browser/src/app/pages/pages.component.scss b/src/workbench/browser/src/app/pages/pages.component.scss index eef92cd32..8044e79e5 100644 --- a/src/workbench/browser/src/app/pages/pages.component.scss +++ b/src/workbench/browser/src/app/pages/pages.component.scss @@ -11,6 +11,7 @@ } .home_container { + height: 100%; // height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--remote-notification-height, 0px) - 1px); } .home { From ca832deb51862cb2675e487dc9c9101e78de38da Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Thu, 11 Aug 2022 20:36:35 +0800 Subject: [PATCH 3/3] fix: lose focus when drag --- src/workbench/browser/src/app/pages/api/api.component.html | 4 ++-- src/workbench/browser/src/app/pages/api/api.component.scss | 2 +- src/workbench/browser/src/app/pages/api/api.component.ts | 6 ++++++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html index 085d0aed5..cfc6f50e8 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.html +++ b/src/workbench/browser/src/app/pages/api/api.component.html @@ -1,6 +1,6 @@ + (nzResize)="onSideResize($event)" (nzResizeEnd)="onResizeEnd()"> @@ -25,7 +25,7 @@ -
+
diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss index d10ca793e..27d72c46b 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.scss +++ b/src/workbench/browser/src/app/pages/api/api.component.scss @@ -61,7 +61,7 @@ nz-divider { .sider-resize-line { @apply absolute w-[1px] bg-[#f8f8f9] flex items-center justify-center flex-col right-0 top-0 bottom-0; cursor: col-resize; - &:hover { + &:hover, &.is-drag { width: 6px; right: -3px; background: #68be8d; diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts index d4ba76117..159f226e3 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.ts +++ b/src/workbench/browser/src/app/pages/api/api.component.ts @@ -24,6 +24,7 @@ export class ApiComponent implements OnInit, OnDestroy { isFirstTime = true; siderWidth = Math.max(120, Number.isNaN(localSiderWidth) ? 250 : localSiderWidth); contentHeight = 200; + isDragging = false; animateId = -1; @ViewChild('apiTabComponent') set apiTabComponent(value: ApiTabComponent) { @@ -142,6 +143,7 @@ export class ApiComponent implements OnInit, OnDestroy { } onSideResize({ width }: NzResizeEvent): void { + this.isDragging = true; cancelAnimationFrame(this.animateId); this.animateId = requestAnimationFrame(() => { this.siderWidth = width; @@ -149,6 +151,10 @@ export class ApiComponent implements OnInit, OnDestroy { }); } + onResizeEnd() { + this.isDragging = false; + } + gotoEnvManager() { // * switch to env this.messageService.send({ type: 'toggleEnv', data: true });