From b5ae3e80bb00e5993be88c83c1f665419a80c5a9 Mon Sep 17 00:00:00 2001 From: msidolphin Date: Sat, 8 Jan 2022 19:53:52 +0800 Subject: [PATCH] fix(components): [el-transfer] improve styles (#5139) --- docs/examples/transfer/basic.vue | 2 +- .../transfer/src/transfer-panel.vue | 28 ++------- packages/theme-chalk/src/common/var.scss | 2 +- packages/theme-chalk/src/transfer.scss | 58 +++++++++---------- 4 files changed, 34 insertions(+), 56 deletions(-) diff --git a/docs/examples/transfer/basic.vue b/docs/examples/transfer/basic.vue index da2b754f62..bcf0710273 100644 --- a/docs/examples/transfer/basic.vue +++ b/docs/examples/transfer/basic.vue @@ -102,7 +102,7 @@ const handleChange = ( diff --git a/packages/components/transfer/src/transfer-panel.vue b/packages/components/transfer/src/transfer-panel.vue index b60a79ccc6..74683fc854 100644 --- a/packages/components/transfer/src/transfer-panel.vue +++ b/packages/components/transfer/src/transfer-panel.vue @@ -18,16 +18,13 @@ v-if="filterable" v-model="query" class="el-transfer-panel__filter" - size="small" + size="default" :placeholder="placeholder" + :prefix-icon="SearchIcon" + clearable @mouseenter="inputHover = true" @mouseleave="inputHover = false" > - option, }, @@ -107,20 +102,8 @@ export default defineComponent({ return panelState.query.length > 0 && filteredData.value.length === 0 }) - const inputIcon = computed(() => { - return panelState.query.length > 0 && panelState.inputHover - ? CircleClose - : Search - }) - const hasFooter = computed(() => !!slots.default()[0].children.length) - const clearQuery = () => { - if (inputIcon.value === CircleClose) { - panelState.query = '' - } - } - const { checked, allChecked, query, inputHover, checkChangeByUser } = toRefs(panelState) @@ -140,9 +123,8 @@ export default defineComponent({ checkChangeByUser, hasNoMatch, - inputIcon, + SearchIcon: Search, hasFooter, - clearQuery, t, } diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 94959aabfe..dc511d2a02 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -1044,7 +1044,7 @@ $transfer: map.merge( 'panel-header-height': 40px, 'panel-header-bg-color': var(--el-bg-color), 'panel-footer-height': 40px, - 'panel-body-height': 246px, + 'panel-body-height': 278px, 'item-height': 30px, 'filter-height': 32px, ), diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss index a07824deeb..ea9adf8a53 100644 --- a/packages/theme-chalk/src/transfer.scss +++ b/packages/theme-chalk/src/transfer.scss @@ -20,9 +20,7 @@ } @include e(button) { - &:first-child { - margin-bottom: 10px; - } + vertical-align: top; &:nth-child(2) { margin: 0 0 0 10px; @@ -40,8 +38,6 @@ } @include b(transfer-panel) { - border: 1px solid var(--el-transfer-border-color); - border-radius: var(--el-transfer-border-radius); overflow: hidden; background: var(--el-color-white); display: inline-block; @@ -54,9 +50,16 @@ @include e(body) { height: var(--el-transfer-panel-body-height); - - @include when(with-footer) { - padding-bottom: var(--el-transfer-panel-footer-height); + border-left: 1px solid var(--el-transfer-border-color); + border-right: 1px solid var(--el-transfer-border-color); + border-bottom: 1px solid var(--el-transfer-border-color); + border-bottom-left-radius: var(--el-transfer-border-radius); + border-bottom-right-radius: var(--el-transfer-border-radius); + overflow: hidden; + @include when('with-footer') { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } } @@ -67,12 +70,8 @@ height: var(--el-transfer-panel-body-height); overflow: auto; box-sizing: border-box; - @include when(filterable) { - height: calc( - var(--el-transfer-panel-body-height) - var(--el-transfer-filter-height) - - 20px - ); + height: calc(100% - var(--el-transfer-filter-height) - 30px); padding-top: 0; } } @@ -100,7 +99,7 @@ @include utils-ellipsis; display: block; box-sizing: border-box; - padding-left: 24px; + padding-left: 22px; line-height: var(--el-transfer-item-height); } @@ -114,7 +113,6 @@ text-align: center; margin: 15px; box-sizing: border-box; - display: block; width: auto; .#{$namespace}-input__inner { @@ -124,12 +122,6 @@ display: inline-block; box-sizing: border-box; border-radius: calc(var(--el-transfer-filter-height) / 2); - padding-right: 10px; - padding-left: 30px; - } - - .#{$namespace}-input__icon { - margin-left: 5px; } .#{$namespace}-icon-circle-close { @@ -138,18 +130,23 @@ } .#{$namespace}-transfer-panel__header { + display: flex; + align-items: center; height: var(--el-transfer-panel-header-height); - line-height: var(--el-transfer-panel-header-height); background: var(--el-transfer-panel-header-bg-color); margin: 0; padding-left: 15px; - border-bottom: 1px solid var(--el-transfer-border-color); + border: 1px solid var(--el-transfer-border-color); + border-top-left-radius: var(--el-transfer-border-radius); + border-top-right-radius: var(--el-transfer-border-radius); box-sizing: border-box; color: var(--el-color-black); .#{$namespace}-checkbox { - display: block; - line-height: 40px; + position: relative; + display: flex; + width: 100%; + align-items: center; .#{$namespace}-checkbox__label { font-size: 16px; @@ -159,6 +156,8 @@ span { position: absolute; right: 15px; + top: 50%; + transform: translate3d(0, -50%, 0); color: var(--el-text-color-secondary); font-size: 12px; font-weight: normal; @@ -172,12 +171,9 @@ background: var(--el-color-white); margin: 0; padding: 0; - border-top: 1px solid var(--el-transfer-border-color); - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: var(--el-index-normal); + border: 1px solid var(--el-transfer-border-color); + border-bottom-left-radius: var(--el-transfer-border-radius); + border-bottom-right-radius: var(--el-transfer-border-radius); @include utils-vertical-center; .#{$namespace}-checkbox {