feat: left sider width support drag (#125)

* feat: left sider width support drag * fix: should remember drag width & drag-handle bar style * fix: lose focus when drag
Postcatlab · Aug 11, 2022 · 9836b14 · 9836b14
1 parent 515e613
commit 9836b14
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 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
@@ -1,5 +1,6 @@
 <nz-layout class="layout">
-  <nz-sider nzTheme="light" nzWidth="250">
+  <nz-sider nzTheme="light" [nzWidth]="siderWidth" nz-resizable [nzMinWidth]="120" [nzMaxWidth]="400"
+    (nzResize)="onSideResize($event)" (nzResizeEnd)="onResizeEnd()">
     <!-- <div class="side-container"> -->
     <nz-content class="api-container-tabs">
       <nz-tabset nzCentered [nzAnimated]="false" [(nzSelectedIndex)]="tabsIndex">
@@ -23,48 +24,31 @@
         </nz-tab>
       </nz-tabset>
     </nz-content>
+    <nz-resize-handle nzDirection="right">
+      <div class="sider-resize-line" [ngClass]="{'is-drag': isDragging}"> <i></i><i></i><i></i><i></i></div>
+    </nz-resize-handle>
     <!-- </div> -->
   </nz-sider>
   <nz-layout class="right-layout">
     <nz-content>
       <div class="inner-content">
         <div class="flex items-center tabs-bar">
-          <eo-api-tab
-            class="fg1"
-            [list]="apiTab.BASIC_TBAS"
-            [handleDataBeforeCache]="apiTab.handleDataBeforeCache"
-            (beforeClose)="apiTab.beforeTabClose($event)"
-            #apiTabComponent
-          ></eo-api-tab>
+          <eo-api-tab class="fg1" [list]="apiTab.BASIC_TBAS" [handleDataBeforeCache]="apiTab.handleDataBeforeCache"
+            (beforeClose)="apiTab.beforeTabClose($event)" #apiTabComponent></eo-api-tab>
           <div class="flex items-center fix-mt">
-            <nz-select
-              [(ngModel)]="envUuid"
-              [(nzOpen)]="isOpen"
-              (nzOpenChange)="handleEnvSelectStatus($event)"
-              [nzDropdownRender]="renderTemplate"
-              nzAllowClear
-              i18n-nzPlaceHolder="Environment Dropdown placeholder"
-              nzPlaceHolder="Environment"
-              #envSelect
-            >
+            <nz-select [(ngModel)]="envUuid" [(nzOpen)]="isOpen" (nzOpenChange)="handleEnvSelectStatus($event)"
+              [nzDropdownRender]="renderTemplate" nzAllowClear i18n-nzPlaceHolder="Environment Dropdown placeholder"
+              nzPlaceHolder="Environment" #envSelect>
               <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
             </nz-select>
             <ng-template #renderTemplate>
               <nz-divider></nz-divider>
-              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n
-                >Manage Environment</a
-              >
+              <a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n>Manage
+                Environment</a>
             </ng-template>
-            <span
-              class="flex items-center justify-center mx-1 icon"
-              i18n-nzTooltipTitle
-              nz-tooltip
-              nzTooltipTitle="Enviroment Quick Look"
-              nz-popover
-              [nzPopoverContent]="envParams"
-              nzPopoverPlacement="bottomRight"
-              nzPopoverTrigger="click"
-            >
+            <span class="flex items-center justify-center mx-1 icon" i18n-nzTooltipTitle nz-tooltip
+              nzTooltipTitle="Enviroment Quick Look" nz-popover [nzPopoverContent]="envParams"
+              nzPopoverPlacement="bottomRight" nzPopoverTrigger="click">
               <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
             </span>
             <ng-template #envParams>
@@ -85,19 +69,11 @@
           <!-- Get router child component by activate -->
           <router-outlet (activate)="onActivate($event)"></router-outlet>
           <eo-split-x *ngIf="activeBar" (x)="handleDrag($event)" [init]="[200, dyWidth, 400]"></eo-split-x>
-          <div
-            class="absolute top-0 bottom-0 right-0 flex right-bar"
-            [ngClass]="{ 'left-line': !activeBar }"
-            [ngStyle]="{ width: activeBar ? dyWidth + 'px' : '40px' }"
-          >
-            <div
-              class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
-              [ngClass]="activeBar ? 'active' : ''"
-              (click)="toggleRightBar()"
-              nz-tooltip
-              i18n-nzTooltipTitle="@@Environment Setting"
-              nzTooltipTitle="Environment Setting"
-            >
+          <div class="absolute top-0 bottom-0 right-0 flex right-bar" [ngClass]="{ 'left-line': !activeBar }"
+            [ngStyle]="{ width: activeBar ? dyWidth + 'px' : '40px' }">
+            <div class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
+              [ngClass]="activeBar ? 'active' : ''" (click)="toggleRightBar()" nz-tooltip
+              i18n-nzTooltipTitle="@@Environment Setting" nzTooltipTitle="Environment Setting">
               <eo-iconpark-icon name="instruction"></eo-iconpark-icon>
             </div>
             <eo-env *ngIf="activeBar" class="flex-auto" (statusChange)="toggleRightBar(false)"></eo-env>

diff --git 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,36 @@ 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 {
+        @apply absolute w-[1px] bg-[#f8f8f9] flex items-center justify-center flex-col right-0 top-0 bottom-0;
+        cursor: col-resize;
+        &:hover, &.is-drag {
+            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;
+            border-radius: 2px;
+            background: rgba(23,35,61,.25);
+        }
+      }
     }
     .ant-tabs-nav.ng-star-inserted {
       padding: 0 10px;
@@ -144,7 +170,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
@@ -9,16 +9,23 @@ 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';
+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',
   styleUrls: ['./api.component.scss'],
 })
 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) {
     // For lifecycle error, use timeout
@@ -134,6 +141,20 @@ export class ApiComponent implements OnInit, OnDestroy {
       this.id = Number(this.route.snapshot.queryParams.uuid);
     });
   }
+
+  onSideResize({ width }: NzResizeEvent): void {
+    this.isDragging = true;
+    cancelAnimationFrame(this.animateId);
+    this.animateId = requestAnimationFrame(() => {
+      this.siderWidth = width;
+      localStorage.setItem(LEFT_SIDER_WIDTH_KEY, String(width));
+    });
+  }
+
+  onResizeEnd() {
+    this.isDragging = false;
+  }
+
   gotoEnvManager() {
     // * switch to env
     this.messageService.send({ type: 'toggleEnv', data: true });
@@ -151,6 +172,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
@@ -11,6 +11,7 @@
 }
 
 .home_container {
+  height: 100%;
   // height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--remote-notification-height, 0px) - 1px);
 }
 .home {

diff --git 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,
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ @@
     }
     .home_container {
+      height: 100%;
       // height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--remote-notification-height, 0px) - 1px);
     }
     .home {
@@ Expand Down @@