[kylin] 05/14: KYLIN-5658 refine logic view editor issue

[xxyu]

This is an automated email from the ASF dual-hosted git repository.

xxyu pushed a commit to branch kylin5_beta
in repository https://gitbox.apache.org/repos/asf/kylin.git

commit 28e439bc63a58bdd58294781f3bf3876b8ca55fa
Author: Qian Xia <lauraxiaq...@gmail.com>
AuthorDate: Thu Jul 20 14:52:10 2023 +0800

    KYLIN-5658 refine logic view editor issue
---
 kystudio/src/components/studio/DDL/ddl.vue                 |  1 +
 .../LogicalView/EditLogicalDialog/EditLogicalDialog.vue    |  1 -
 kystudio/src/components/studio/LogicalView/LogicalView.vue | 14 ++++++++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/kystudio/src/components/studio/DDL/ddl.vue 
b/kystudio/src/components/studio/DDL/ddl.vue
index a22f979522..ac0da6b127 100644
--- a/kystudio/src/components/studio/DDL/ddl.vue
+++ b/kystudio/src/components/studio/DDL/ddl.vue
@@ -206,6 +206,7 @@
         flex: 1;
         position: relative;
         .run-btn {
+          z-index: 1;
           width: 40px;
           height: 38px;
           position: absolute;
diff --git 
a/kystudio/src/components/studio/LogicalView/EditLogicalDialog/EditLogicalDialog.vue
 
b/kystudio/src/components/studio/LogicalView/EditLogicalDialog/EditLogicalDialog.vue
index 9b109b64e0..881d3219c7 100644
--- 
a/kystudio/src/components/studio/LogicalView/EditLogicalDialog/EditLogicalDialog.vue
+++ 
b/kystudio/src/components/studio/LogicalView/EditLogicalDialog/EditLogicalDialog.vue
@@ -18,7 +18,6 @@
         ref="logicalSql"
         theme="chrome"
         :dragable="false"
-        :isAbridge="true"
         :value="sql"
         @input="handleChangeSql">
       </kap-editor>
diff --git a/kystudio/src/components/studio/LogicalView/LogicalView.vue 
b/kystudio/src/components/studio/LogicalView/LogicalView.vue
index 649e1b90e6..b263ce10c4 100644
--- a/kystudio/src/components/studio/LogicalView/LogicalView.vue
+++ b/kystudio/src/components/studio/LogicalView/LogicalView.vue
@@ -6,7 +6,7 @@
         </div>
         <el-alert type="warning" show-icon v-if="showCreateSuccessAlert"><span 
slot="title">{{$t('createViewSuccessAlert', {databaseName: 
logicalViewDatabaseName})}} <a class="import-link" href="javascript:void(0);" 
@click="importDataSource">{{$t('goToImport')}}</a></span></el-alert>
         <div class="editor-content">
-          <editor class="ddl-editor" v-model="content" ref="ddlEditor" 
lang="sql" theme="chrome" @keydown.meta.enter.native="runSql" 
@keydown.ctrl.enter.native="runSql"></editor>
+          <editor class="ddl-editor" v-model="content" :height="editorHeight" 
ref="ddlEditor" lang="sql" theme="chrome" @keydown.meta.enter.native="runSql" 
@keydown.ctrl.enter.native="runSql"></editor>
           <div class="run-btn">
             <el-tooltip effect="dark" placement="left">
               <div slot="content">{{$t('runBtnTip')}}<span 
class="accelerator-key">{{$t('acceleratorKey')}}</span></div>
@@ -161,6 +161,13 @@
           return this.$t('syntaxRules')
       }
     }
+    get editorHeight () {
+      if (this.showCreateSuccessAlert) {
+        return 'calc(100% + 37px)'
+      }
+      return '100%'
+    }
+
     setOption (option) {
       let editor = this.$refs.ddlEditor.editor
       if (!editor) return
@@ -258,10 +265,13 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      position: relative;
       .editor-content {
         flex: 1;
-        position: relative;
+        height: calc(~'100% - 60px');
+        overflow: auto;
         .run-btn {
+          z-index: 1;
           width: 40px;
           height: 38px;
           position: absolute;