From 09c0729a6ca56b6133e4ef8627c2303e198cff06 Mon Sep 17 00:00:00 2001
From: fannluo <fannluowork@gmail.com>
Date: Thu, 11 Apr 2019 14:30:57 +0800
Subject: [PATCH] =?UTF-8?q?improvement:=20=E5=85=A8=E9=83=A8=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=88=97=E8=A1=A8=E5=8E=BB=E6=8E=89=E5=86=97=E4=BD=99?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E3=80=81=E6=9B=BF=E6=8D=A2=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?icon=20#85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TemplateSetting/TabGlobalVariables.vue    | 191 ++++++++----------
 1 file changed, 85 insertions(+), 106 deletions(-)

diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
index 28f673f1bb..af4e2e5594 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
@@ -32,7 +32,6 @@
         </div>
         <div class="global-variable-content">
             <div class="variable-header clearfix">
-                <span class="col-drag t-head"></span>
                 <span class="col-name t-head">{{ i18n.name }}</span>
                 <span class="col-key t-head">KEY</span>
                 <span class="col-attributes t-head">{{ i18n.attributes }}</span>
@@ -40,7 +39,7 @@
                 <span class="col-delete t-head"></span>
             </div>
             <ul class="variable-list">
-                <draggable class="variable-drag" v-model="constantsArray" :options="{handle:'.col-drag'}" @end="onDragEnd">
+                <draggable class="variable-drag" v-model="constantsArray" :options="{handle:'.col-item-drag'}" @end="onDragEnd">
                     <li
                         v-for="(constant, index) in constantsArray"
                         :key="constant.key"
@@ -49,9 +48,7 @@
                         {'variable-editing': isVariableEditing && theKeyOfEditing === constant.key}]"
                         @click="onEditVariable(constant.key)">
                         <div class="variable-content">
-                            <span class="col-item col-drag">
-                                <i class="bk-icon icon-sort"></i>
-                            </span>
+                            <i class="col-item-drag bk-icon icon-sort"></i>
                             <span class="col-item col-name">
                                 <p class="col-constant-name">{{constant.name}}</p>
                             </span>
@@ -68,12 +65,12 @@
                                     {{ i18n.copy }}
                                 </a>
                             </span>
-                            <span class="col-item col-source">
+                            <span class="col-item col-attributes">
                                 <span>
                                     {{constant.source_type !== 'component_outputs' ? i18n.inputs : i18n.outputs}}/{{ constant.show_type === 'show' ? i18n.show : i18n.hide}}
                                 </span>
                             </span>
-                            <span class="col-item col-output col-switcher">
+                            <span class="col-item col-output">
                                 <div @click="onPreventDefalut">
                                     <bk-switcher
                                         size="small"
@@ -84,9 +81,10 @@
                                     </bk-switcher>
                                 </div>
                             </span>
-                            <span class="col-item col-delete" @click.stop="onDeleteVariable(constant.key, index)">
-                                <i class="bk-icon icon-close-circle"></i>
-                            </span>
+                            <i
+                                class="col-item-delete common-icon-dark-circle-close"
+                                @click.stop="onDeleteVariable(constant.key, index)">
+                            </i>
                         </div>
                         <div
                             v-if="isVariableEditing && theKeyOfEditing === constant.key"
@@ -336,7 +334,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '@/scss/config.scss';
 @import '@/scss/mixins/scrollbar.scss';
 .global-variable-panel {
@@ -402,7 +400,7 @@ export default {
                     margin-bottom: 10px;
                 }
                 p {
-                     margin-top: -18px;
+                    margin-top: -18px;
                 }
             }
         }
@@ -417,98 +415,94 @@ export default {
         height: calc(100% - 120px);
         border-top: 1px solid $commonBorderColor;
     }
+    .variable-header, .variable-list {
+        position: relative;
+        font-size: 12px;
+        .col-name {
+            width: 100px;
+        }
+        .col-key {
+            width: 128px;
+        }
+        .col-attributes {
+            width: 70px;
+        }
+        .col-output {
+            width: 50px;
+        }
+    }
     .variable-header {
+        padding: 0 20px 0 45px;
+        background: #ecf0f4;
+        border-bottom: 1px solid $commonBorderColor;
         .t-head {
             float: left;
             height: 40px;
             line-height: 40px;
             font-size: 14px;
-            border-bottom: 1px solid $commonBorderColor;
-            background: #ECF0F4;
         }
     }
     .variable-list {
         width: 100%;
         height: calc(100% - 50px);
-        text-align: center;
         overflow-x: hidden;
         overflow-y: auto;
         @include scrollbar;
-        .variable-item, .draft-item  {
+        .variable-item {
             position: relative;
-            border-bottom: 1px solid #ebebeb;
-            background: $whiteDefault;
             cursor: pointer;
             &:hover {
                 background: $blueStatus;
-                .icon-sort {
-                    display: inline-block;
-                }
-                .icon-close-circle {
-                    display: inline-block;
-                }
-            }
-            .variable-content, .draft-content {
-                display: table;
-                height: 40px;
-                line-height: 20px;
-            }
-            .col-item {
-                display: table-cell;
-                padding: 8px 4px;
-                font-size: 12px;
-                vertical-align: middle;
-                word-break: break-all;
             }
             &.variable-editing {
                 background: $blueStatus;
             }
-            .col-source {
-                width: 90px;
-                font-size: 12px;
-                text-align: left;
-            }
-            .col-show-type {
-                font-size: 12px;
-            }
-            .col-delete {
-                width: 10px;
-                cursor: pointer;
-                .icon-close-circle {
-                    position: absolute;
-                    right: 10px;
-                    top: 15px;
-                    font-size: 12px;
+            .variable-content {
+                display: table;
+                padding: 0 20px 0 45px;
+                height: 40px;
+                line-height: 40px;
+                &:hover {
+                    .col-item-drag {
+                        display: inline-block;
+                    }
+                    .col-item-delete {
+                        display: inline-block;
+                    }
                 }
+                
             }
         }
-        .variable-edit-td {
-            padding: 0;
-            width: 412px;
-        }
-        .empty-variable-tip {
-            margin-top: 120px;
+        .col-item {
+            display: table-cell;
+            font-size: 12px;
+            vertical-align: middle;
+            word-break: break-all;
+            text-align: left;
+            border-bottom: 1px solid #ebebeb;
         }
-    }
-    .variable-header, .variable-list {
-        position: relative;
-        font-size: 12px;
-        .col-drag {
-            width: 20px;
-            padding: 10px 0;
-            cursor: pointer;
-            .icon-sort {
-                position: absolute;
-                top: 15px;
-                left: 5px;
-                display: none;
+        .col-item-drag {
+            display: none;
+            position: absolute;
+            top: 15px;
+            left: 20px;
+            color: #979ba5;
+            cursor: move;
+            &:hover {
+                color: #348aff;
             }
         }
+        .col-item-delete {
+            display: none;
+            position: absolute;
+            top: 13px;
+            right: 20px;
+            font-size: 14px;
+            color: #979ba5;
+        }
         .col-name {
-            width: 78px;
-            text-align: left;
             .col-constant-name {
-                width: 70px;
+                width: 90px;
                 overflow: hidden;
                 text-overflow:ellipsis;
                 white-space: nowrap;
@@ -516,8 +510,6 @@ export default {
         }
         .col-key {
             position: relative;
-            width: 138px;
-            text-align: left;
             .col-constant-key {
                 display: inline-block;
                 width: 90px;
@@ -528,50 +520,37 @@ export default {
             }
             .col-key-copy {
                 position: absolute;
-                bottom: 10px;
-                color: #52699D;
-            }
-        }
-        .col-attributes {
-            width: 83px;
-        }
-        .col-show-type {
-            width: 45px;
-        }
-        .col-delete {
-            width: 10px;
-            cursor: pointer;
-            .icon-close-circle {
-                position: absolute;
-                display: none;
-                // right: 10px;
-                top: 13px;
-                font-size: 12px;
+                right: 14px;
+                bottom: 0;
+                color: #52699d;
+                text-decoration: underline;
             }
         }
         .col-output {
-            width: 90px;
-            text-align: center;
-            .col-switcher {
-                width: 84px;
-            }
             .bk-switcher .bk-switcher-small {
                 margin-left: 32px;
             }
             .bk-switcher.bk-switcher-small {
-                width: 40px;
-                height: 19px;
+                width: 28px;
+                height: 16px;
                 line-height: 10px;
             }
             .bk-switcher.bk-switcher-small:after {
-                width: 16px;
-                height: 16px;
+                top: 1px;
+                width: 14px;
+                height: 14px;
             }
             .bk-switcher.bk-switcher-small.is-checked:after {
-                margin-left: -18px;
+                margin-left: -15px;
             }
         }
+        .variable-edit-td {
+            padding: 0;
+            width: 412px;
+        }
+        .empty-variable-tip {
+            margin-top: 120px;
+        }
     }
 }
-
 </style>