Skip to content

Commit

Permalink
improvement: 全部变量列表去掉冗余代码、替换删除icon TencentBlueKing#85
Browse files Browse the repository at this point in the history
  • Loading branch information
@luofann
luofann committed Apr 11, 2019
1 parent 24ac723 commit 09c0729
Showing 1 changed file with 85 additions and 106 deletions.
191 changes: 85 additions & 106 deletions pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,14 @@
</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>
<span class="col-output t-head">{{ i18n.outputs }}</span>
<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"
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -402,7 +400,7 @@ export default {
margin-bottom: 10px;
}
p {
margin-top: -18px;
margin-top: -18px;
}
}
}
Expand All @@ -417,107 +415,101 @@ 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;
}
}
.col-key {
position: relative;
width: 138px;
text-align: left;
.col-constant-key {
display: inline-block;
width: 90px;
Expand All @@ -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>

0 comments on commit 09c0729

Please sign in to comment.