fix: eo-editor height not full parent

Postcatlab · Jul 15, 2022 · 0377920 · 0377920
1 parent e42ef23
commit 0377920
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 36 deletions.
diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.html b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="eo-editor" [style.--eo-editor-height]="minHeight + 'px'">
   <div class="button_list">
     <span *ngIf="eventList.includes('type') && !hiddenList.includes('type')" i18n>
       Content Type
@@ -11,7 +11,7 @@
       <span>{{ item.label }}</span>
     </span>
   </div>
-  <ace [config]="config" [disabled]="disabled" [(value)]="code" [mode]="editorType" (blur)="log($event, 'blur')"
-    (focus)="log($event, 'focus')" (copy)="log($event, 'copy')" (paste)="log($event, 'paste')"
-    (change)="handleChange()"></ace>
+  <ace class="ace-editor" [config]="config" [disabled]="disabled" [(value)]="code" [mode]="editorType"
+    (blur)="log($event, 'blur')" (focus)="log($event, 'focus')" (copy)="log($event, 'copy')"
+    (paste)="log($event, 'paste')" (change)="handleChange()"></ace>
 </div>
diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.scss b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.scss
@@ -1,3 +1,7 @@
+.eo-editor {
+  min-height: var(--eo-editor-height, 200px);
+}
+
 .button_list {
   border: 1px solid var(--BORDER);
   border-top-left-radius: 3px;
@@ -32,6 +36,14 @@
     height: 100%;
   }
   .ace_editor {
-    min-height: 200px;
+    min-height: inherit !important;
+  }
+  .ace-editor {
+    height: calc(100% - 52px);
+    min-height:inherit;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 0;
+    }
   }
 }
diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts
@@ -51,6 +51,7 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
   @Input() eventList: EventType[] = [];
   @Input() hiddenList: string[] = [];
   @Input() code: string;
+  @Input() minHeight = 200;
   @Input() editorType = 'json';
   @Input() autoFormat = false;
   @Input() disabled = false;

diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.html b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.html
@@ -3,24 +3,12 @@
     <div class="flex justify-between p-3">
       <div i18n>Snippets</div>
       <div>
-        <a
-          href="https://eoapi.io/docs/script-function"
-          class="text-blue-400"
-          target="_blank"
-          rel="noopener noreferrer"
-          i18n
-          >Learn more</a
-        >
+        <a href="https://eoapi.io/docs/script-function" class="text-blue-400" target="_blank" rel="noopener noreferrer"
+          i18n>Learn more</a>
       </div>
     </div>
-    <nz-tree
-      #nzTreeComponent
-      nzBlockNode
-      [nzData]="dataSource"
-      [nzExpandedKeys]="expandedKeys"
-      (nzClick)="nzClick($event)"
-      [nzTreeTemplate]="nzTreeTemplate"
-    ></nz-tree>
+    <nz-tree #nzTreeComponent nzBlockNode [nzData]="dataSource" [nzExpandedKeys]="expandedKeys"
+      (nzClick)="nzClick($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
     <ng-template #nzTreeTemplate let-node>
       <ng-template [ngIf]="!node.isLeaf">
         <span class="text-sm">{{ node.title }}</span>
@@ -29,14 +17,8 @@
         <div (click)="insertCode(node)">
           <span class="text-sm text-blue-400">{{ node.title }}</span>
           <ng-container *ngIf="node.origin.note">
-            <span
-              [nzTooltipTitle]="titleTemplate"
-              [nzTooltipPlacement]="['topLeft', 'leftTop']"
-              class="text-blue-400"
-              nzTooltipColor="black"
-              (click)="insertCode(node)"
-              nz-tooltip
-            >
+            <span [nzTooltipTitle]="titleTemplate" [nzTooltipPlacement]="['topLeft', 'leftTop']" class="text-blue-400"
+              nzTooltipColor="black" (click)="insertCode(node)" nz-tooltip>
               [?]
             </span>
             <ng-template #titleTemplate let-thing>
@@ -61,13 +43,8 @@
     </ng-template>
   </div>
   <div class="flex-1 h-[322px]">
-    <eo-editor
-      [(code)]="code"
-      editorType="javascript"
-      [eventList]="['format', 'copy', 'search', 'replace']"
-      (codeChange)="handleChange($event)"
-      [completions]="completions"
-    >
+    <eo-editor [(code)]="code" editorType="javascript" [eventList]="['format', 'copy', 'search', 'replace']"
+      (codeChange)="handleChange($event)" [completions]="completions" [minHeight]="270">
     </eo-editor>
   </div>
 </div>