From cb1d6bebe42ade4fa6c2046d991de4812550b257 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Thu, 21 Sep 2017 11:50:56 +0800 Subject: [PATCH] update Select and Cascader chalk theme --- packages/cascader/src/main.vue | 5 ++- packages/theme-chalk/src/cascader.scss | 10 +---- packages/theme-chalk/src/common/var.scss | 15 ++++---- packages/theme-chalk/src/option.scss | 7 +--- packages/theme-chalk/src/select-dropdown.scss | 4 +- packages/theme-chalk/src/select.scss | 4 -- test/unit/specs/cascader.spec.js | 38 +++++++++---------- test/unit/specs/color-picker.spec.js | 2 +- 8 files changed, 36 insertions(+), 49 deletions(-) diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue index b26f16b66..c4b0401b2 100644 --- a/packages/cascader/src/main.vue +++ b/packages/cascader/src/main.vue @@ -63,6 +63,7 @@ import emitter from 'element-ui/src/mixins/emitter'; import Locale from 'element-ui/src/mixins/locale'; import { t } from 'element-ui/src/locale'; import debounce from 'throttle-debounce/debounce'; +import merge from 'element-ui/src/utils/merge'; const popperMixin = { props: { @@ -76,7 +77,9 @@ const popperMixin = { popperOptions: Popper.props.popperOptions }, methods: Popper.methods, - data: Popper.data, + data() { + return merge({ visibleArrow: true }, Popper.data); + }, beforeDestroy: Popper.beforeDestroy }; diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss index 5f93193ce..25fb9f372 100644 --- a/packages/theme-chalk/src/cascader.scss +++ b/packages/theme-chalk/src/cascader.scss @@ -92,8 +92,7 @@ border-radius: $--border-radius-small; box-shadow: $--select-dropdown-shadow; - &.el-popper[x-placement^="bottom"] .popper__arrow { - // dont do that, bro dont do that + &.el-popper .popper__arrow { left: 24px !important; } } @@ -155,12 +154,7 @@ } @include when(active) { - color: $--color-white; - background-color: $--select-option-selected; - - &:hover { - background-color: $--select-option-selected-hover; - } + color: $--select-option-selected; } &:hover { diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index b015303bd..0432f1f58 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -220,7 +220,7 @@ $--select-option-disabled-background: $--color-white; $--select-option-height: 34px; $--select-option-hover-background: $--background-color-base; $--select-option-selected: $--color-primary; -$--select-option-selected-hover: mix($--color-primary, black, 95%); +$--select-option-selected-hover: $--background-color-base; $--select-group-color: $--color-info; $--select-group-height: 30px; @@ -601,15 +601,14 @@ $--rate-icon-color: $--color-text-placeholder; /* DatePicker --------------------------*/ -$--datepicker-color: $--link-color; -$--datepicker-off-color: #ddd; -$--datepicker-header-color: $--border-color-hover; -$--datepicker-icon-color: $--color-text-secondary; +$--datepicker-color: $--color-text-regular; +$--datepicker-off-color: $--color-text-placeholder; +$--datepicker-header-color: $--color-text-regular; +$--datepicker-icon-color: $--color-text-primary; $--datepicker-border-color: $--disabled-border-base; $--datepicker-inner-border-color: #e4e4e4; -$--datepicker-cell-hover-color: $--color-text-secondary; -$--datepicker-inrange-color: tint($--color-primary, 0.8); -$--datepicker-inrange-hover-color: tint($--color-primary, 0.64); +$--datepicker-inrange-color: $--border-color-extra-light; +$--datepicker-inrange-hover-color: $--border-color-extra-light; $--datepicker-active-color: $--color-primary; $--datepicker-text-hover-color: $--color-primary; diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss index 5a71acc03..8238f5b36 100644 --- a/packages/theme-chalk/src/option.scss +++ b/packages/theme-chalk/src/option.scss @@ -29,12 +29,7 @@ } &.selected { - color: $--color-white; - background-color: $--select-option-selected; - - &.hover { - background-color: $--select-option-selected-hover; - } + color: $--select-option-selected; } & span { diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss index 6ef39e38b..5122375a2 100644 --- a/packages/theme-chalk/src/select-dropdown.scss +++ b/packages/theme-chalk/src/select-dropdown.scss @@ -36,8 +36,8 @@ padding: 0; } - &[x-placement^="bottom"] .popper__arrow { - left: 10% !important; + & .popper__arrow { + left: 24px !important; } } diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index c7d0c1399..1c34fef8d 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -107,10 +107,6 @@ z-index: $--index-normal; top: 50%; transform: translateY(-50%); - - .el-tag { - - } } & .el-tag__close { diff --git a/test/unit/specs/cascader.spec.js b/test/unit/specs/cascader.spec.js index 48294da52..b1d63e411 100644 --- a/test/unit/specs/cascader.spec.js +++ b/test/unit/specs/cascader.spec.js @@ -64,17 +64,17 @@ describe('Cascader', () => { item1.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(2); + expect(menuElm.children.length).to.be.equal(3); // two menus and an arrow expect(item1.classList.contains('is-active')).to.be.true; - const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item'); + const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item'); item2.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(3); + expect(menuElm.children.length).to.be.equal(4); expect(item2.classList.contains('is-active')).to.be.true; - const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item'); + const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item'); item3.click(); setTimeout(_ => { @@ -155,17 +155,17 @@ describe('Cascader', () => { item1.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(2); + expect(menuElm.children.length).to.be.equal(3); expect(item1.classList.contains('is-active')).to.be.true; - const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item'); + const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item'); item2.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(3); + expect(menuElm.children.length).to.be.equal(4); expect(item2.classList.contains('is-active')).to.be.true; - const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item'); + const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item'); item3.click(); setTimeout(_ => { @@ -299,7 +299,7 @@ describe('Cascader', () => { item1.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(1); + expect(menuElm.children.length).to.be.equal(2); expect(item1.classList.contains('is-active')).to.be.false; done(); }); @@ -362,7 +362,7 @@ describe('Cascader', () => { const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item'); const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item'); - expect(menuElm.children.length).to.be.equal(3); + expect(menuElm.children.length).to.be.equal(4); expect(item1.classList.contains('is-active')).to.be.true; expect(item2.classList.contains('is-active')).to.be.true; expect(item3.classList.contains('is-active')).to.be.true; @@ -432,17 +432,17 @@ describe('Cascader', () => { triggerEvent(item1, 'mouseenter'); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(2); + expect(menuElm.children.length).to.be.equal(3); expect(item1.classList.contains('is-active')).to.be.true; - const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item'); + const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item'); triggerEvent(item2, 'mouseenter'); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(3); + expect(menuElm.children.length).to.be.equal(4); expect(item2.classList.contains('is-active')).to.be.true; - const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item'); + const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item'); item3.click(); setTimeout(_ => { @@ -514,19 +514,19 @@ describe('Cascader', () => { item1.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(2); + expect(menuElm.children.length).to.be.equal(3); expect(item1.classList.contains('is-active')).to.be.true; expect(vm.selectedOptions[0]).to.be.equal('zhejiang'); - const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item'); + const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item'); item2.click(); menu.$nextTick(_ => { - expect(menuElm.children.length).to.be.equal(3); + expect(menuElm.children.length).to.be.equal(4); expect(item2.classList.contains('is-active')).to.be.true; expect(vm.selectedOptions[1]).to.be.equal('hangzhou'); - const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item'); + const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item'); item3.click(); setTimeout(_ => { @@ -599,7 +599,7 @@ describe('Cascader', () => { const menuElm = menu.$el; const item1 = menuElm.querySelector('.el-cascader-menu__item'); - expect(menuElm.children.length).to.be.equal(1); + expect(menuElm.children.length).to.be.equal(2); expect(menuElm.children[0].children.length).to.be.equal(3); item1.click(); diff --git a/test/unit/specs/color-picker.spec.js b/test/unit/specs/color-picker.spec.js index cd4fd2e4e..31bb19ede 100644 --- a/test/unit/specs/color-picker.spec.js +++ b/test/unit/specs/color-picker.spec.js @@ -232,7 +232,7 @@ describe('ColorPicker', () => { alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 }); vm.$nextTick(() => { const picker = vm.$children[0]; - expect(picker.color._alpha < 1).to.true; + expect(picker.color._alpha < 100).to.true; done(); }); }, ANIMATION_TIME);