[Improvement][UI] Improve script box and dialog css style (#4331)

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js

@@ -53,7 +53,7 @@ const toolOper = (dagThis) => {
     },
     {
       code: 'screen',
-      icon: 'el-icon-rank',
+      icon: 'el-icon-full-screen',
       disable: false,
       desc: `${i18n.$t('Full Screen')}`
     }

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss

@@ -207,7 +207,6 @@
         .operation {
           overflow: hidden;
           display: inline-block;
-          margin-right: 10px;
           a {
             float: left;
             width: 28px;

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@@ -874,6 +874,6 @@
 <style lang="scss" rel="stylesheet/scss">
   @import "./dag";
   .operBtn {
-    padding: 8px 20px;
+    padding: 8px 6px;
   }
 </style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue

@@ -35,10 +35,10 @@
                 <em class="el-icon-refresh"></em>
               </a>
               <a href="javascript:" @click="_screenOpen" v-show="!isScreen" data-container="body" data-toggle="tooltip" :title="$t('Enter full screen')">
-                <em class="el-icon-rank"></em>
+                <em class="el-icon-full-screen"></em>
               </a>
               <a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
-                <em class="el-icon-full-screen"></em>
+                <em class="el-icon-minus"></em>
               </a>
             </div>
           </div>
@@ -288,9 +288,10 @@
           top: 12px;
           a{
             color: #0097e0;
-            font-size: 12px;
             margin-left: 10px;
             em {
+              font-size: 17px;
+              font-weight: 400;
               text-decoration: none !important;
               vertical-align: middle;
             }

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue

@@ -109,8 +109,7 @@
   }
   .from-mirror1 {
     .CodeMirror {
-      min-height: 600px;
-      max-height: 700px;
+      height: calc(70vh - 90px);
     }
   }
 </style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue

@@ -48,7 +48,7 @@
               style="opacity: 0;">
             </textarea>
             <a class="ans-modal-box-max">
-              <em class="el-icon-rank" @click="setEditorVal"></em>
+              <em class="el-icon-full-screen" @click="setEditorVal"></em>
             </a>
           </div>
         </div>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue

@@ -23,7 +23,7 @@
           <textarea id="code-python-mirror" name="code-python-mirror" style="opacity: 0;">
           </textarea>
           <a class="ans-modal-box-max">
-            <em class="el-icon-rank" @click="setEditorVal"></em>
+            <em class="el-icon-full-screen" @click="setEditorVal"></em>
           </a>
         </div>
       </div>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue

@@ -26,7 +26,7 @@
             style="opacity: 0">
           </textarea>
           <a class="ans-modal-box-max">
-            <em class="el-icon-rank" @click="setEditorVal"></em>
+            <em class="el-icon-full-screen" @click="setEditorVal"></em>
           </a>
         </div>
       </div>
@@ -52,7 +52,7 @@
     </m-list-box>
     <el-dialog
       :visible.sync="scriptBoxDialog"
-      modal-append-to-body="true"
+      append-to-body="true"
       width="80%">
       <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
     </el-dialog>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue

@@ -90,7 +90,7 @@
                   style="opacity: 0;">
           </textarea>
           <a class="ans-modal-box-max">
-            <em class="el-icon-rank" @click="setEditorVal"></em>
+            <em class="el-icon-full-screen" @click="setEditorVal"></em>
           </a>
         </div>
       </div>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue

@@ -246,7 +246,7 @@
                   style="opacity: 0;">
           </textarea>
           <a class="ans-modal-box-max">
-            <em class="el-icon-rank" @click="setEditorVal"></em>
+            <em class="el-icon-full-screen" @click="setEditorVal"></em>
           </a>
         </div>
       </div>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js

@@ -573,10 +573,10 @@ JSP.prototype.copyNodes = function ($id) {
 JSP.prototype.handleEventScreen = function ({ item, is }) {
   let screenOpen = true
   if (is) {
-    item.icon = 'el-icon-full-screen'
+    item.icon = 'el-icon-minus'
     screenOpen = true
   } else {
-    item.icon = 'el-icon-rank'
+    item.icon = 'el-icon-full-screen'
     screenOpen = false
   }
   const $mainLayoutModel = $('.main-layout-model')

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue

@@ -141,7 +141,7 @@
       <m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
     </el-dialog>
     <el-dialog
-      title="提示"
+      :title="$t('Info')"
       :visible.sync="relatedItemsDialog"
       width="auto">
       <m-related-items :tmp="tmp" @onBatchCopy="onBatchCopy" @onBatchMove="onBatchMove" @closeRelatedItems="closeRelatedItems"></m-related-items>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue

@@ -73,6 +73,7 @@
       </el-table>
     </div>
     <el-dialog
+      :show-close="false"
       :visible.sync="logDialog"
       width="auto">
       <m-log :item="item" :source="source" :logId="logId" @ok="ok" @close="close"></m-log>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

@@ -197,5 +197,10 @@
         }
       }
     }
+    .list-model {
+      .el-dialog__header, .el-dialog__body {
+        padding: 0;
+      }
+    }
   }
 </style>

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -663,5 +663,6 @@ export default {
   'Running Memory': 'Running Memory',
   'Max Memory': 'Max Memory',
   'Min Memory': 'Min Memory',
-  'The workflow canvas is abnormal and cannot be saved, please recreate': 'The workflow canvas is abnormal and cannot be saved, please recreate'
+  'The workflow canvas is abnormal and cannot be saved, please recreate': 'The workflow canvas is abnormal and cannot be saved, please recreate',
+  Info: 'Info'
 }

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -663,5 +663,6 @@ export default {
   'Running Memory': '运行内存',
   'Max Memory': '最大内存',
   'Min Memory': '最小内存',
-  'The workflow canvas is abnormal and cannot be saved, please recreate': '该工作流画布异常，无法保存，请重新创建'
+  'The workflow canvas is abnormal and cannot be saved, please recreate': '该工作流画布异常，无法保存，请重新创建',
+  Info: '提示'
 }