feat: update style

Postcatlab · Jun 22, 2022 · de6d4f9 · de6d4f9
1 parent 880d748
commit de6d4f9
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 95 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
@@ -1,38 +1,32 @@
-<header class="group_header">
-  <nz-input-group>
-    <div nz-row [nzGutter]="8">
-      <div nz-col nzFlex="4">
-        <nz-input-group [nzPrefix]="prefixIcon" nzCompact>
-          <input type="text" nz-input placeholder="搜索" [(ngModel)]="searchValue" />
-        </nz-input-group>
-        <ng-template #prefixIcon>
-          <i nz-icon nzType="search"></i>
-        </ng-template>
-      </div>
-      <div nz-col nzFlex="2">
-        <nz-button-group>
-          <button nzType="primary" nz-button (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })">
-            <i nz-icon nzType="plus"></i>
-            API
-          </button>
-          <button nzType="primary" nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomRight">
-            <i nz-icon nzType="caret-down" nzTheme="outline"></i>
-          </button>
-        </nz-button-group>
-        <nz-dropdown-menu #menu="nzDropdownMenu">
-          <ul nz-menu>
-            <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a>新建API</a></li>
-            <li nz-menu-item (click)="addGroup()"><a>新建分组</a></li>
-          </ul>
-        </nz-dropdown-menu>
-      </div>
-    </div>
-  </nz-input-group>
+<header class="flex p-2">
+  <input type="text" class="input flex-1 px-3" placeholder="search" [(ngModel)]="searchValue" />
+  <div
+    class="btn ml-3 flex items-center justify-center"
+    nzType="primary"
+    nz-button
+    nz-dropdown
+    [nzDropdownMenu]="menu"
+    nzPlacement="bottomRight"
+    (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"
+  >
+    <iconpark-icon name="plus"></iconpark-icon>
+  </div>
+  <nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a>新建API</a></li>
+      <li nz-menu-item (click)="addGroup()"><a>新建分组</a></li>
+    </ul>
+  </nz-dropdown-menu>
 </header>
 <!-- Fixed Group -->
 <div class="group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
-  <nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
-    [nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
+  <nz-tree
+    [nzData]="fixedTreeNode"
+    [nzSelectedKeys]="nzSelectedKeys"
+    nzBlockNode
+    (nzClick)="clickTreeItem($event)"
+    [nzTreeTemplate]="nzFixedTreeTemplate"
+  ></nz-tree>
   <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
     <div class="pl5 tree_node" *ngIf="node.origin?.isFixed">
       <div class="f_row_ac">
@@ -45,10 +39,20 @@
 <div class="bbd" *ngIf="electron.isElectron"></div>
 <!-- Custom Group -->
 <div class="group_container group_tree pt10">
-  <nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzSearchValue]="searchValue"
-    [nzHideUnMatched]="true" [nzExpandedKeys]="expandKeys" (nzClick)="clickTreeItem($event)"
-    (nzExpandChange)="toggleExpand()" nzDraggable nzBlockNode (nzOnDrop)="treeItemDrop($event)"
-    [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
+  <nz-tree
+    [nzData]="treeNodes"
+    [nzSelectedKeys]="nzSelectedKeys"
+    #apiGroup
+    [nzSearchValue]="searchValue"
+    [nzHideUnMatched]="true"
+    [nzExpandedKeys]="expandKeys"
+    (nzClick)="clickTreeItem($event)"
+    (nzExpandChange)="toggleExpand()"
+    nzDraggable
+    nzBlockNode
+    (nzOnDrop)="treeItemDrop($event)"
+    [nzTreeTemplate]="nzTreeTemplate"
+  ></nz-tree>
   <ng-template #nzTreeTemplate let-node let-origin="origin">
     <div class="pl5">
       <!-- Folder -->
@@ -84,13 +88,18 @@
         <div class="overflow-hidden f_row_ac text-ellipsis">
           <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">{{
             node.origin.method
-            }}</b>
+          }}</b>
           <span class="text_omit node_title">{{ node.title }}</span>
         </div>
         <span class="tree_node_operate">
           <button>
-            <i class="mr5" nz-icon nzType="thunderbolt" nzTheme="outline"
-              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"></i>
+            <i
+              class="mr5"
+              nz-icon
+              nzType="thunderbolt"
+              nzTheme="outline"
+              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"
+            ></i>
           </button>
           <button nz-dropdown [nzDropdownMenu]="apiDataMenu">
             <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
@@ -100,12 +109,16 @@
               <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoEditApi', node: node })">
                 <a>编辑</a>
               </li>
-              <li nz-menu-item
-                (click)="operateApiEvent({ event: $event, eventName: 'gotoCopyApi', node: apiDataItems[node.key] })">
+              <li
+                nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'gotoCopyApi', node: apiDataItems[node.key] })"
+              >
                 <a>复制</a>
               </li>
-              <li nz-menu-item
-                (click)="operateApiEvent({ event: $event, eventName: 'gotoDeleteApi', node: apiDataItems[node.key] })">
+              <li
+                nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'gotoDeleteApi', node: apiDataItems[node.key] })"
+              >
                 <a>删除</a>
               </li>
             </ul>

diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss
@@ -1,3 +1,20 @@
+.input {
+  height: 30px;
+  border: none;
+  background-color: rgba(0,0,0,0.05);
+  border-radius: 3px;
+  &::placeholder {
+    color: rgba(0,0,0,0.5);
+    font-size: 0.9em;
+  }
+}
+.btn {
+  width: 40px;
+  background-color: var(--BTN_PRIMARY_BG);
+  color: #fff;
+  border-radius: 3px;
+  cursor: pointer;
+}
 ::ng-deep {
   .ant-tree-node-selected * {
     // color: var(--TEXT_ACTIVE);

diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html
@@ -1,22 +1,19 @@
 <div class="eo_navbar f_row f_js_ac">
-  <img class="logo" src="assets/images/logo.svg" />
-  <div class="can_be_click f_row_ac right_btn_container">
-    <div class="mr15" *ngIf="!isElectron">
-      <span nz-dropdown [nzDropdownMenu]="download">
-        <i nz-icon nzType="cloud-download" class="fs24" nzTheme="outline"></i>
-      </span>
-      <nz-dropdown-menu #download="nzDropdownMenu">
-        <ul nz-menu>
-          <ng-container *ngFor="let item of resourceInfo; let index = index">
-            <a [href]="item.link" nz-menu-item>{{ item.name }}</a>
-            <li nz-menu-divider *ngIf="index !== resourceInfo.length - 1"></li>
-          </ng-container>
-        </ul>
-      </nz-dropdown-menu>
-    </div>
+  <div>
+    <img class="logo" src="assets/images/logo.svg" />
+    <img class="mx-4" src="https://img.shields.io/github/stars/eolinker/eoapi?style=social" alt="" />
+  </div>
+  <div class="flex items-center">
     <ng-container *ngIf="isElectron">
-      <span class="mr15" title="{{ dataSourceText }}数据源" nz-dropdown [nzDropdownMenu]="settingMenu"
-        nzPlacement="bottomRight" [nzDisabled]="isRemote" (click)="isRemote && switchDataSource()">
+      <span
+        class="mr15"
+        title="{{ dataSourceText }}数据源"
+        nz-dropdown
+        [nzDropdownMenu]="settingMenu"
+        nzPlacement="bottomRight"
+        [nzDisabled]="isRemote"
+        (click)="isRemote && switchDataSource()"
+      >
         <i nz-icon [nzType]="isRemote ? 'cloud' : 'cloud-sync'" nzTheme="outline" class="fs20"></i>
       </span>
       <nz-dropdown-menu #settingMenu="nzDropdownMenu">
@@ -26,14 +23,18 @@
           </div>
           <div>
             <h4 class="title">{{ dataSourceText }}数据源</h4>
-            <div class="desc"> 数据储存在{{ dataSourceText }}，{{ isRemote ? '如不需协作，可以切换到本地数据源' : '如需协作请切换到远程数据源'}}</div>
+            <div class="desc">
+              数据储存在{{ dataSourceText }}，{{
+                isRemote ? '如不需协作，可以切换到本地数据源' : '如需协作请切换到远程数据源'
+              }}
+            </div>
             <button nz-button nzType="default" nzSize="small" (click)="switchDataSource()">切换</button>
           </div>
         </div>
       </nz-dropdown-menu>
     </ng-container>
-    <span class="mr15" nz-dropdown [nzDropdownMenu]="menu">
-      <i nz-icon nzType="question-circle" class="fs20" nzTheme="outline"></i>
+    <span class="icon mx-2 flex items-center justify-center" nz-dropdown [nzDropdownMenu]="menu">
+      <iconpark-icon name="help"></iconpark-icon>
     </span>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
@@ -43,16 +44,41 @@ <h4 class="title">{{ dataSourceText }}数据源</h4>
       </ul>
     </nz-dropdown-menu>
     <div *ngIf="!OS_TYPE.includes('mac') && isElectron">
-      <span nz-tooltip nzTooltipTitle="最小化" nzTooltipPlacement="left" class="iconfont icon-jianhao mr10 fs24 cp"
-        (click)="minimize()">
+      <span
+        nz-tooltip
+        nzTooltipTitle="最小化"
+        nzTooltipPlacement="left"
+        class="iconfont icon-jianhao mr10 fs24 cp"
+        (click)="minimize()"
+      >
       </span>
-      <span nz-tooltip [nzTooltipTitle]="isMaximized ? '向下还原' : '最大化'" nzTooltipPlacement="left"
+      <span
+        nz-tooltip
+        [nzTooltipTitle]="isMaximized ? '向下还原' : '最大化'"
+        nzTooltipPlacement="left"
         class="iconfont icon-{{ isMaximized ? 'copy' : 'duoxuanweixuanzhong' }} mr10 fs24 cp"
-        (click)="toggleMaximize()">
+        (click)="toggleMaximize()"
+      >
       </span>
-      <span nz-tooltip nzTooltipTitle="关闭" nzTooltipPlacement="left" class="iconfont icon-guanbi pr15 fs24 cp"
-        (click)="close()">
+      <span
+        nz-tooltip
+        nzTooltipTitle="关闭"
+        nzTooltipPlacement="left"
+        class="iconfont icon-guanbi pr15 fs24 cp"
+        (click)="close()"
+      >
       </span>
     </div>
+    <div *ngIf="!isElectron">
+      <div class="btn py-1.5 px-2 mx-1 flex items-center" nz-dropdown [nzDropdownMenu]="download">Download</div>
+      <nz-dropdown-menu #download="nzDropdownMenu">
+        <ul nz-menu>
+          <ng-container *ngFor="let item of resourceInfo; let index = index">
+            <a [href]="item.link" nz-menu-item>{{ item.name }}</a>
+            <li nz-menu-divider *ngIf="index !== resourceInfo.length - 1"></li>
+          </ng-container>
+        </ul>
+      </nz-dropdown-menu>
+    </div>
   </div>
 </div>
diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.scss
@@ -1,10 +1,31 @@
+.btn {
+  border-radius: 3px;
+  background-color: var(--BTN_PRIMARY_BG);
+  color: #fff;
+  font-size: 0.9em;
+  height: 30px;
+  cursor: pointer;
+}
+.icon {
+  width: 30px;
+  height: 30px;
+  font-size: 1.5em;
+  color: rgba(0,0,0,0.5);
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all .4s ease;
+  &:hover {
+    background-color: rgba(0,0,0,0.05);
+  }
+}
 .eo_navbar {
   -webkit-app-region: drag;
   position: sticky;
   width: 100%;
   z-index: 11;
   left: 0;
   top: 0;
+  padding: 0 8px;
   // background-color: var(--NAVBAR_BG);
   // color: var(--NAVBAR_TEXT);
   // border-bottom: 1px solid var(--NAVBAR_BORDER_BOTTOM);