feat: move env block

Postcatlab · Jul 27, 2022 · bd20303 · bd20303
1 parent 022543f
commit bd20303
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 86 deletions.
diff --git a/src/workbench/browser/package.json b/src/workbench/browser/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "ng": "ng",
-    "start": "ng serve -c web -o",
+    "start": "ng serve -c web -o --host 0.0.0.0",
     "start:zh": "ng serve -c webCn -o",
     "build": "node ./build/build.js",
     "build:web": "node ./build/build.js web",
@@ -90,4 +90,4 @@
     "chrome 98"
   ],
   "__npminstall_done": false
-}
+}
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,7 +1,7 @@
 <nz-layout class="layout">
   <nz-sider nzTheme="light" nzWidth="250">
     <!-- <div class="side-container"> -->
-    <nz-content class="api-tabs">
+    <nz-content class="top-tabs">
       <nz-tabset nzCentered [nzAnimated]="false" [(nzSelectedIndex)]="tabsIndex">
         <nz-tab [nzTitle]="apiTitle">
           <ng-template #apiTitle>
@@ -21,14 +21,6 @@
           </ng-template>
           <eo-history></eo-history>
         </nz-tab>
-        <nz-tab [nzTitle]="envTitle">
-          <ng-template #envTitle>
-            <span i18n-nzTooltipTitle nzTooltipTitle="Environment" nz-tooltip class="text-lg tab-content">
-              <eo-iconpark-icon name="instruction"></eo-iconpark-icon>
-            </span>
-          </ng-template>
-          <eo-env></eo-env>
-        </nz-tab>
       </nz-tabset>
     </nz-content>
     <!-- </div> -->
@@ -85,8 +77,22 @@
               >
             </nz-tab>
           </nz-tabset>
-          <router-outlet></router-outlet>
         </div>
+        <section class="relative" [ngClass]="activeBar ? 'pr-[250px]' : 'pr-[40px]'">
+          <router-outlet></router-outlet>
+          <div class="absolute top-0 bottom-0 right-0 flex right-bar" [ngClass]="activeBar ? 'w-[250px]' : 'w-[40px]'">
+            <div
+              class="flex items-center justify-center w-[40px] p-2 h-10 env-icon"
+              (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>
+          </div>
+        </section>
       </div>
     </nz-content>
   </nz-layout>

diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss
@@ -62,15 +62,16 @@ nz-divider {
     .ant-tabs-nav.ng-star-inserted {
       padding: 0 10px;
     }
-    .api-tabs {
+    .top-tabs {
       .ant-tabs-nav {
         height: 40px;
       }
       .ant-tabs-nav-list {
         width: 100%;
         justify-content: space-evenly;
         .ant-tabs-tab {
-          flex: 1;
+          // flex: 1;
+          width: 49%;
           justify-content: center;
           margin: 0;
         }
@@ -143,26 +144,44 @@ nz-divider {
       margin: 10px 0;
     }
   }
+
+  .env {
+    border: 2px solid pink;
+  }
+  .right-bar {
+    border-left: 1px solid rgba(0,0,0,0.1);
+    transition: 0.1s all ease;
 
-  .api-tabs {
-    ::ng-deep .ant-tabs-tab {
-      padding: 0.2em 0;
-      padding: 0;
-      margin: 0;
-      .ant-tabs-tab-btn {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .tab-content {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
+    .env-icon {
+      color: rgba(0, 0, 0, 0.5);
+      cursor: pointer;
+      transition: all 0.4s ease;
+      &:hover {
+        color: #00785a;
+        background-color: rgba(0, 0, 0, 0.05);
       }
     }
   }
+
+  // .api-tabs {
+  //   ::ng-deep .ant-tabs-tab {
+  //     padding: 0.2em 0;
+  //     padding: 0;
+  //     margin: 0;
+  //     .ant-tabs-tab-btn {
+  //       width: 100%;
+  //       height: 100%;
+  //       display: flex;
+  //       align-items: center;
+  //       justify-content: center;
+  //       .tab-content {
+  //         width: 100%;
+  //         height: 100%;
+  //         display: flex;
+  //         align-items: center;
+  //         justify-content: center;
+  //       }
+  //     }
+  //   }
+  // }
 }
diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts
@@ -35,6 +35,7 @@ export class ApiComponent implements OnInit, OnDestroy {
     },
   ];
   isOpen = false;
+  activeBar = false;
   envInfo: any = {};
   envList: Array<any> = [];
   activeUuid: number | string = 0;
@@ -137,7 +138,15 @@ export class ApiComponent implements OnInit, OnDestroy {
 
   gotoEnvManager() {
     // * switch to env
-    this.tabsIndex = 2;
+    this.tabsIndex = 1;
+  }
+
+  toggleRightBar(status = null) {
+    if (status == null) {
+      this.activeBar = !this.activeBar;
+      return;
+    }
+    this.activeBar = status;
   }
 
   getAllEnv(uuid?: number) {

diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts b/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
@@ -148,7 +148,6 @@ export class ApiEditService {
           type: 'depthInput',
           modelKey: 'name',
           placeholder: $localize`Param Name`,
-          width: 300,
           mark: 'name',
         },
         {

diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.html b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.html
@@ -1,32 +1,34 @@
-<nz-tabset
-  [(nzSelectedIndex)]="selectedIndex"
-  nzType="editable-card"
-  nzHideAdd="true"
-  (nzClose)="closeTab($event)"
-  (nzSelectChange)="pickTab()"
-  [nzTabBarExtraContent]="extraTemplate"
->
-  <nz-tab *ngFor="let tab of tabSerive.tabs; let i = index" nzClosable [nzTitle]="titleTemplate">
-    <ng-template #titleTemplate>
-      <span class="mr5 method_text_{{ tab.method }}" *ngIf="tab.method">{{ tab.method }}</span>
-      <span class="text_omit tab_text"> {{ tab.title }}</span>
-    </ng-template>
-  </nz-tab>
-</nz-tabset>
-<ng-template #extraTemplate>
-  <button (click)="newTab()" class="ant-tabs-nav-add {{ tabSerive.tabs.length >= MAX_TAB_LIMIT ? 'hidden' : '' }}">
-    <i nz-icon nzType="plus"></i>
-  </button>
-  <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
-    <button class="ant-tabs-nav-more"><i nz-icon nzType="ellipsis" nzTheme="outline"></i></button>
-  </a>
-  <nz-dropdown-menu #menu="nzDropdownMenu">
-    <ul nz-menu>
-      <li nz-menu-item (click)="operateTab('closeOther')" i18n>Close All Tags (excluding current tabs)</li>
-      <li nz-menu-item (click)="operateTab('closeAll')" i18n>Close All Tabs</li>
-      <!-- <li nz-menu-item>关闭已保存</li> -->
-      <li nz-menu-item (click)="operateTab('closeLeft')" i18n>Close Tabs To The Left</li>
-      <li nz-menu-item (click)="operateTab('closeRight')" i18n>Close Tabs to Right</li>
-    </ul>
-  </nz-dropdown-menu>
-</ng-template>
+<section class="eo-api-tabs">
+  <nz-tabset
+    [(nzSelectedIndex)]="selectedIndex"
+    nzType="editable-card"
+    nzHideAdd="true"
+    (nzClose)="closeTab($event)"
+    (nzSelectChange)="pickTab()"
+    [nzTabBarExtraContent]="extraTemplate"
+  >
+    <nz-tab *ngFor="let tab of tabSerive.tabs; let i = index" nzClosable [nzTitle]="titleTemplate">
+      <ng-template #titleTemplate>
+        <span class="mr5 method_text_{{ tab.method }}" *ngIf="tab.method">{{ tab.method }}</span>
+        <span class="text_omit tab_text"> {{ tab.title }}</span>
+      </ng-template>
+    </nz-tab>
+  </nz-tabset>
+  <ng-template #extraTemplate>
+    <button (click)="newTab()" class="ant-tabs-nav-add {{ tabSerive.tabs.length >= MAX_TAB_LIMIT ? 'hidden' : '' }}">
+      <i nz-icon nzType="plus"></i>
+    </button>
+    <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
+      <button class="ant-tabs-nav-more"><i nz-icon nzType="ellipsis" nzTheme="outline"></i></button>
+    </a>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu>
+        <li nz-menu-item (click)="operateTab('closeOther')" i18n>Close All Tags (excluding current tabs)</li>
+        <li nz-menu-item (click)="operateTab('closeAll')" i18n>Close All Tabs</li>
+        <!-- <li nz-menu-item>关闭已保存</li> -->
+        <li nz-menu-item (click)="operateTab('closeLeft')" i18n>Close Tabs To The Left</li>
+        <li nz-menu-item (click)="operateTab('closeRight')" i18n>Close Tabs to Right</li>
+      </ul>
+    </nz-dropdown-menu>
+  </ng-template>
+</section>
diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.scss b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.scss
@@ -3,7 +3,7 @@
 }
 ::ng-deep {
   eo-api-tab {
-    width: calc(100% - 160px);
+    width: calc(100% - 100px);
     .ant-tabs-card.ant-tabs-top {
       > .ant-tabs-nav {
         margin: 0;
@@ -25,7 +25,8 @@
           }
         }
         .ant-tabs-nav-wrap {
-          max-width: calc(100% - 135px);
+          // max-width: calc(100% - 100px);
+          max-width: 100%;
           flex: none;
         }
         .ant-tabs-nav-add {

diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.html b/src/workbench/browser/src/app/shared/components/env/env.component.html
@@ -1,15 +1,13 @@
-<div class="flex flex-col">
-  <div class="flex items-center justify-between h-12 mx-2 header">
+<div class="flex flex-col flex-1 env-main">
+  <div class="flex items-center justify-between px-2 h-11 header">
     <span class="font-bold" i18n>Environment</span>
-    <div
-      class="flex items-center justify-center text-base btn shrink-0 h-7"
-      (click)="handleAddEnv()"
-      nz-tooltip
-      i18n-nzTooltipTitle="@@New Environment"
-      nzTooltipTitle="New Environment"
-    >
-      <eo-iconpark-icon name="plus"> </eo-iconpark-icon>
-    </div>
+    <span class="flex items-center cursor-pointer" (click)="closeEnv()">
+      <eo-iconpark-icon name="close-small"></eo-iconpark-icon>
+    </span>
+  </div>
+  <div class="flex items-center h-8 px-2 text-sm new-btn" (click)="handleAddEnv()">
+    <eo-iconpark-icon name="plus"></eo-iconpark-icon>
+    <span class="mx-1" i18n>New</span>
   </div>
   <div *ngFor="let item of envList" class="flex items-center justify-between p-2 env-item">
     <span class="flex-1 name" (click)="handleEditEnv(item.uuid)">{{ item.name }}</span>
@@ -18,6 +16,7 @@
       i18n-nzPopconfirmTitle
       nzPopconfirmTitle="Are you sure you want to delete?"
       (nzOnConfirm)="handleDeleteEnv($event, item.uuid)"
+      class="delete-btn"
     >
       <eo-iconpark-icon name="delete"> </eo-iconpark-icon>
     </a>

diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.scss b/src/workbench/browser/src/app/shared/components/env/env.component.scss
@@ -6,6 +6,11 @@ $boxHeight: 60vh;
   border-radius: 5px;
 }
 
+.env-main {
+  border-left: 1px solid rgba(0,0,0,0.06);
+  height: 100%;
+}
+
 .header {
   border-bottom: 1px solid #eee;
 }
@@ -99,14 +104,18 @@ $boxHeight: 60vh;
   padding: 4px 11px;
 }
 
-.btn {
-  width: 32px;
-  background-color: var(--BTN_PRIMARY_BG);
-  color: #fff;
-  border-radius: 3px;
+.new-btn {
+  border-bottom: 1px solid #eee;
+  color: #00785a;
   cursor: pointer;
+  &:hover {
+    background: rgba(0,0,0,0.06);
+  }
 }
 
+.delete-btn {
+  color: #333;
+}
 
 ::ng-deep {
   eo-env {

diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.ts b/src/workbench/browser/src/app/shared/components/env/env.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { StorageRes, StorageResStatus } from '../../../shared/services/storage/index.model';
 import { EoMessageService } from '../../../eoui/message/eo-message.service';
@@ -16,6 +16,7 @@ import { Subject } from 'rxjs';
 })
 export class EnvComponent implements OnInit, OnDestroy {
   @ViewChild('table') table: EoTableComponent; // * child component ref
+  @Output() private statusChange: EventEmitter<any> = new EventEmitter();
   varName = $localize`{{Variable Name}}`;
   modalTitle = $localize`:@@New Environment:New Environment`;
   isVisible = false;
@@ -73,6 +74,9 @@ export class EnvComponent implements OnInit, OnDestroy {
       });
     });
   }
+  closeEnv() {
+    this.statusChange.emit();
+  }
 
   handleDeleteEnv($event, uuid: string) {
     $event?.stopPropagation();

diff --git a/src/workbench/browser/src/index.html b/src/workbench/browser/src/index.html
@@ -5,7 +5,7 @@
     <title>Eoapi - Easy & Open Source API Ecosystem</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_35.c0cd4ba1cfc7025289eca9733a781511.js"></script>
+    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_36.c9f19694694f8729ca4c3745c5003163.js"></script>
     <link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
   </head>
   <!-- Angular Cli need for node modules -->