feat: update style

Postcatlab · Aug 3, 2022 · a383155 · a383155
1 parent be28dae
commit a383155
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 48 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
@@ -116,9 +116,10 @@ nz-divider {
     }
     .param_header {
       padding: 5px 15px;
-      >div{
-        min-height: 32px;
-      }
+      box-sizing: border-box;
+      // >div{
+      //   min-height: 32px;
+      // }
       .ant-radio-wrapper {
         font-size: 12px;
       }

diff --git a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html b/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html
@@ -1,32 +1,55 @@
-<div class="param_header">
-  <div class="f_row_ac">
+<div class="param_header flex items-center justify-start h-10">
+  <div class="flex items-center h-full">
     <nz-radio-group [(ngModel)]="bodyType" (ngModelChange)="changeBodyType()">
       <label *ngFor="let item of CONST.API_BODY_TYPE" nz-radio [nzValue]="item.value">{{ item.key }}</label>
     </nz-radio-group>
-    <span class="flex-shrink mx-0.5 text-gray-200">｜</span>
-    <!-- <nz-divider nzType="vertical"></nz-divider> -->
-    <params-import *ngIf="['formData', 'json', 'xml'].includes(bodyType)" [baseData]="model" [contentType]="bodyType"
-      (baseDataChange)="handleParamsImport($event)" (beforeHandleImport)="beforeHandleImport($event)"
-      [rootType]="jsonRootType"></params-import>
   </div>
-  <div *ngIf="bodyType === 'json'">
-    <p class="fs12 c999 mb5" i18n>JSON Root Type:</p>
-    <nz-select class="w_100 mb10" [(ngModel)]="jsonRootType" (ngModelChange)="jsonRootTypeChange.emit(jsonRootType)">
-      <nz-option *ngFor="let item of CONST.JSON_ROOT_TYPE" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
-    </nz-select>
+  <span class="flex-shrink mx-0.5 text-gray-200">｜</span>
+  <!-- <nz-divider nzType="vertical"></nz-divider> -->
+  <div *ngIf="['formData', 'json', 'xml'].includes(bodyType)" class="inline-flex items-center px-2 mt-1">
+    <params-import
+      [baseData]="model"
+      [contentType]="bodyType"
+      (baseDataChange)="handleParamsImport($event)"
+      (beforeHandleImport)="beforeHandleImport($event)"
+      [rootType]="jsonRootType"
+    ></params-import>
   </div>
 </div>
+<div *ngIf="bodyType === 'json'" class="px-4">
+  <p class="fs12 c999 mb5" i18n>JSON Root Type:</p>
+  <nz-select class="w_100 mb10" [(ngModel)]="jsonRootType" (ngModelChange)="jsonRootTypeChange.emit(jsonRootType)">
+    <nz-option *ngFor="let item of CONST.JSON_ROOT_TYPE" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
+  </nz-select>
+</div>
 <!-- FormData -->
 <!-- JSON -->
 <!-- XML -->
-<list-block-common-component *ngIf="['formData', 'json', 'xml'].includes(bodyType)" [mainObject]="listConf"
-  [(list)]="model"></list-block-common-component>
+<list-block-common-component
+  *ngIf="['formData', 'json', 'xml'].includes(bodyType)"
+  [mainObject]="listConf"
+  [(list)]="model"
+></list-block-common-component>
 <!-- Raw -->
 <!-- <eo-editor [(code)]="model" *ngIf="bodyType === 'raw'" (codeChange)="rawDataChange()" [config]="{ maxLines: 10 }"
   [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-editor> -->
-<eo-monaco-editor *ngIf="bodyType === 'raw'" [(code)]="model" [maxLine]="20"
-  [eventList]="['type', 'format', 'copy', 'search', 'replace']" (codeChange)="rawDataChange()">
+<eo-monaco-editor
+  *ngIf="bodyType === 'raw'"
+  [(code)]="model"
+  [maxLine]="20"
+  [eventList]="['type', 'format', 'copy', 'search', 'replace']"
+  (codeChange)="rawDataChange()"
+>
 </eo-monaco-editor>
 <!-- Binary -->
-<textarea class="binary_textarea" rows="4" *ngIf="bodyType === 'binary'" nzBorderless i18n-placeholder
-  (ngModelChange)="rawDataChange()" placeholder="Binary Description" nz-input [(ngModel)]="model"></textarea>
+<textarea
+  class="binary_textarea"
+  rows="4"
+  *ngIf="bodyType === 'binary'"
+  nzBorderless
+  i18n-placeholder
+  (ngModelChange)="rawDataChange()"
+  placeholder="Binary Description"
+  nz-input
+  [(ngModel)]="model"
+></textarea>
diff --git a/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.html b/src/workbench/browser/src/app/pages/api/edit/header/api-edit-header.component.html
@@ -1,4 +1,9 @@
-<div class="param_header">
-  <params-import [(baseData)]="model" contentType="formData" i18n-modalTitle="@@Header" modalTitle="Header"></params-import>
+<div class="param_header flex items-center h-10">
+  <params-import
+    [(baseData)]="model"
+    contentType="formData"
+    i18n-modalTitle="@@Header"
+    modalTitle="Header"
+  ></params-import>
 </div>
 <list-block-common-component [mainObject]="listConf" [(list)]="model"></list-block-common-component>
diff --git a/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.html b/src/workbench/browser/src/app/pages/api/edit/query/api-edit-query.component.html
@@ -1,4 +1,4 @@
-<div class="param_header">
+<div class="param_header flex items-center h-10">
   <params-import [(baseData)]="model" contentType="query" modalTitle="Query"></params-import>
 </div>
 <list-block-common-component [mainObject]="listConf" [(list)]="model"></list-block-common-component>
diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html b/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html
@@ -1,31 +1,49 @@
-<div class="param_header">
-  <div class="f_row_ac">
-    <nz-radio-group [(ngModel)]="bodyType" (ngModelChange)="changeBodyType()">
-      <label *ngFor="let item of CONST.API_BODY_TYPE" nz-radio [nzValue]="item.value">{{ item.key }}</label>
-    </nz-radio-group>
-    <nz-divider *ngIf="['formData', 'raw'].includes(bodyType)" nzType="vertical"></nz-divider>
-    <!-- Import -->
-    <params-import *ngIf="['formData'].includes(bodyType)" [baseData]="model" [contentType]="bodyType"
-      (baseDataChange)="handleParamsImport($event)"></params-import>
-    <!--Select content-type-->
-    <nz-select *ngIf="['raw'].includes(bodyType)" class="fs12" (ngModelChange)="changeContentType($event)"
-      [(ngModel)]="contentType" nzBorderless>
-      <nz-option *ngFor="let item of CONST.CONTENT_TYPE" [nzValue]="item.value" [nzLabel]="item.name"></nz-option>
-    </nz-select>
-  </div>
+<div class="param_header flex items-center justify-start h-10">
+  <nz-radio-group [(ngModel)]="bodyType" (ngModelChange)="changeBodyType()">
+    <label *ngFor="let item of CONST.API_BODY_TYPE" nz-radio [nzValue]="item.value">{{ item.key }}</label>
+  </nz-radio-group>
+  <nz-divider *ngIf="['formData', 'raw'].includes(bodyType)" nzType="vertical"></nz-divider>
+  <!-- Import -->
+  <params-import
+    *ngIf="['formData'].includes(bodyType)"
+    [baseData]="model"
+    [contentType]="bodyType"
+    (baseDataChange)="handleParamsImport($event)"
+  ></params-import>
+  <!--Select content-type-->
+  <nz-select
+    *ngIf="['raw'].includes(bodyType)"
+    class="fs12"
+    (ngModelChange)="changeContentType($event)"
+    [(ngModel)]="contentType"
+    nzBorderless
+  >
+    <nz-option *ngFor="let item of CONST.CONTENT_TYPE" [nzValue]="item.value" [nzLabel]="item.name"></nz-option>
+  </nz-select>
 </div>
 <!-- FormData -->
 <list-block-common-component *ngIf="['formData'].includes(bodyType)" [mainObject]="listConf" [(list)]="model">
 </list-block-common-component>
 <!-- JSON -->
 <!-- XML -->
 <!-- Raw -->
-<eo-monaco-editor [(code)]="model" (codeChange)="rawDataChange($event)" *ngIf="bodyType === 'raw'" [maxLine]="100"
-  [config]="editorConfig" [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
+<eo-monaco-editor
+  [(code)]="model"
+  (codeChange)="rawDataChange($event)"
+  *ngIf="bodyType === 'raw'"
+  [maxLine]="100"
+  [config]="editorConfig"
+  [eventList]="['type', 'format', 'copy', 'search', 'replace']"
+></eo-monaco-editor>
 <!-- Binary -->
 <div class="px-5" *ngIf="bodyType === 'binary'">
-  <nz-upload nzType="drag" [nzBeforeUpload]="uploadBinary"
-    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }" [(nzFileList)]="binaryFiles" nzSize="5120">
+  <nz-upload
+    nzType="drag"
+    [nzBeforeUpload]="uploadBinary"
+    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }"
+    [(nzFileList)]="binaryFiles"
+    nzSize="5120"
+  >
     <p class="ant-upload-text" i18n>Tap or drag files directly to this area</p>
   </nz-upload>
 </div>
diff --git a/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.html b/src/workbench/browser/src/app/pages/api/test/header/api-test-header.component.html
@@ -1,4 +1,9 @@
-<div class="param_header">
-  <params-import [(baseData)]="model" contentType="formData" i18n-modalTitle="@@Header" modalTitle="Header"></params-import>
+<div class="param_header flex items-center h-10">
+  <params-import
+    [(baseData)]="model"
+    contentType="formData"
+    i18n-modalTitle="@@Header"
+    modalTitle="Header"
+  ></params-import>
 </div>
 <list-block-common-component [mainObject]="listConf" [(list)]="model"></list-block-common-component>
diff --git a/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.html b/src/workbench/browser/src/app/pages/api/test/query/api-test-query.component.html
@@ -1,4 +1,4 @@
-<div class="param_header">
+<div class="param_header flex items-center h-10">
   <params-import [(baseData)]="model" contentType="query" i18n-modalTitle modalTitle="Query"></params-import>
 </div>
 <list-block-common-component [mainObject]="listConf" [(list)]="model"></list-block-common-component>
diff --git a/src/workbench/browser/src/app/shared/components/params-import/params-import.component.scss b/src/workbench/browser/src/app/shared/components/params-import/params-import.component.scss
@@ -1,8 +1,7 @@
 .menu {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 80px;
   cursor: pointer;
   user-select: none;
 }