From bd2030301936399e139df563240413ca0dc7b51d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E9=B9=B0?= <17kungfuboy@gmail.com> Date: Wed, 27 Jul 2022 19:46:28 +0800 Subject: [PATCH] feat: move env block --- src/workbench/browser/package.json | 4 +- .../src/app/pages/api/api.component.html | 26 +++++--- .../src/app/pages/api/api.component.scss | 59 +++++++++++------ .../src/app/pages/api/api.component.ts | 11 +++- .../app/pages/api/edit/api-edit.service.ts | 1 - .../app/pages/api/tab/api-tab.component.html | 66 ++++++++++--------- .../app/pages/api/tab/api-tab.component.scss | 5 +- .../shared/components/env/env.component.html | 21 +++--- .../shared/components/env/env.component.scss | 19 ++++-- .../shared/components/env/env.component.ts | 6 +- src/workbench/browser/src/index.html | 2 +- 11 files changed, 134 insertions(+), 86 deletions(-) diff --git a/src/workbench/browser/package.json b/src/workbench/browser/package.json index 693ed487b..a3658cbdf 100644 --- 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 -} +} \ No newline at end of file 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 62c879ea5..37217df99 100644 --- 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 @@ - + @@ -21,14 +21,6 @@ - - - - - - - - @@ -85,8 +77,22 @@ > - +
+ +
+
+ +
+ +
+
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 3bcd24257..01b74cfda 100644 --- a/src/workbench/browser/src/app/pages/api/api.component.scss +++ b/src/workbench/browser/src/app/pages/api/api.component.scss @@ -62,7 +62,7 @@ nz-divider { .ant-tabs-nav.ng-star-inserted { padding: 0 10px; } - .api-tabs { + .top-tabs { .ant-tabs-nav { height: 40px; } @@ -70,7 +70,8 @@ nz-divider { 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 index ebbd75334..86ab39e49 100644 --- 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 = []; 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 index defce4b1b..45fdd06c1 100644 --- 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 index c018fd59b..60767462a 100644 --- 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 @@ - - - - {{ tab.method }} - {{ tab.title }} - - - - - - - - - -
    -
  • Close All Tags (excluding current tabs)
    • -
  • Close All Tabs
    • - -
  • Close Tabs To The Left
    • -
  • Close Tabs to Right
    • -
- - +
+ + + + {{ tab.method }} + {{ tab.title }} + + + + + + + + + +
    +
  • Close All Tags (excluding current tabs)
    • +
  • Close All Tabs
    • + +
  • Close Tabs To The Left
    • +
  • Close Tabs to Right
    • +
+ + +
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 index c038d7c93..c0dece88a 100644 --- 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 index c5900e1a1..d6200014c 100644 --- 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 @@ -
-
+
+
Environment -
- -
+ + + +
+
+ + New
{{ item.name }} @@ -18,6 +16,7 @@ i18n-nzPopconfirmTitle nzPopconfirmTitle="Are you sure you want to delete?" (nzOnConfirm)="handleDeleteEnv($event, item.uuid)" + class="delete-btn" > 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 index fc711be23..2c7bdf717 100644 --- 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 index ae0b4a23a..c2986dc1c 100644 --- 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 = 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 index f13ba9d05..22c473bf3 100644 --- a/src/workbench/browser/src/index.html +++ b/src/workbench/browser/src/index.html @@ -5,7 +5,7 @@ Eoapi - Easy & Open Source API Ecosystem - +