github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update Select and Cascader chalk theme

pull/7178/head
Leopoldthecoder 2017-09-21 11:50:56 +08:00 committed by 杨奕
parent 31b9429edf
commit cb1d6bebe4
8 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/cascader/src/main.vue
View File

@ -63,6 +63,7 @@ import emitter from 'element-ui/src/mixins/emitter';
import Locale from 'element-ui/src/mixins/locale'; import Locale from 'element-ui/src/mixins/locale';
import { t } from 'element-ui/src/locale'; import { t } from 'element-ui/src/locale';
import debounce from 'throttle-debounce/debounce'; import debounce from 'throttle-debounce/debounce';
import merge from 'element-ui/src/utils/merge';
const popperMixin = { const popperMixin = {
props: { props: {
@ -76,7 +77,9 @@ const popperMixin = {
popperOptions: Popper.props.popperOptions popperOptions: Popper.props.popperOptions
}, },
methods: Popper.methods, methods: Popper.methods,
data: Popper.data, data() {
return merge({ visibleArrow: true }, Popper.data);
},
beforeDestroy: Popper.beforeDestroy beforeDestroy: Popper.beforeDestroy
}; };

10
packages/theme-chalk/src/cascader.scss
View File

@ -92,8 +92,7 @@
border-radius: $--border-radius-small; border-radius: $--border-radius-small;
box-shadow: $--select-dropdown-shadow; box-shadow: $--select-dropdown-shadow;
&.el-popper[x-placement^="bottom"] .popper__arrow { &.el-popper .popper__arrow {
// dont do that, bro dont do that
left: 24px !important; left: 24px !important;
} }
} }
@ -155,12 +154,7 @@
} }
@include when(active) { @include when(active) {
color: $--color-white; color: $--select-option-selected;
background-color: $--select-option-selected;
&:hover {
background-color: $--select-option-selected-hover;
}
} }
&:hover { &:hover {

15
packages/theme-chalk/src/common/var.scss
View File

@ -220,7 +220,7 @@ $--select-option-disabled-background: $--color-white;
$--select-option-height: 34px; $--select-option-height: 34px;
$--select-option-hover-background: $--background-color-base; $--select-option-hover-background: $--background-color-base;
$--select-option-selected: $--color-primary; $--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-color: $--color-info;
$--select-group-height: 30px; $--select-group-height: 30px;
@ -601,15 +601,14 @@ $--rate-icon-color: $--color-text-placeholder;
/* DatePicker /* DatePicker
--------------------------*/ --------------------------*/
$--datepicker-color: $--link-color; $--datepicker-color: $--color-text-regular;
$--datepicker-off-color: #ddd; $--datepicker-off-color: $--color-text-placeholder;
$--datepicker-header-color: $--border-color-hover; $--datepicker-header-color: $--color-text-regular;
$--datepicker-icon-color: $--color-text-secondary; $--datepicker-icon-color: $--color-text-primary;
$--datepicker-border-color: $--disabled-border-base; $--datepicker-border-color: $--disabled-border-base;
$--datepicker-inner-border-color: #e4e4e4; $--datepicker-inner-border-color: #e4e4e4;
$--datepicker-cell-hover-color: $--color-text-secondary; $--datepicker-inrange-color: $--border-color-extra-light;
$--datepicker-inrange-color: tint($--color-primary, 0.8); $--datepicker-inrange-hover-color: $--border-color-extra-light;
$--datepicker-inrange-hover-color: tint($--color-primary, 0.64);
$--datepicker-active-color: $--color-primary; $--datepicker-active-color: $--color-primary;
$--datepicker-text-hover-color: $--color-primary; $--datepicker-text-hover-color: $--color-primary;

7
packages/theme-chalk/src/option.scss
View File

@ -29,12 +29,7 @@
} }
&.selected { &.selected {
color: $--color-white; color: $--select-option-selected;
background-color: $--select-option-selected;
&.hover {
background-color: $--select-option-selected-hover;
}
} }
& span { & span {

4
packages/theme-chalk/src/select-dropdown.scss
View File

@ -36,8 +36,8 @@
padding: 0; padding: 0;
} }
&[x-placement^="bottom"] .popper__arrow { & .popper__arrow {
left: 10% !important; left: 24px !important;
} }
} }

4
packages/theme-chalk/src/select.scss
View File

@ -107,10 +107,6 @@
z-index: $--index-normal; z-index: $--index-normal;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
.el-tag {
}
} }
& .el-tag__close { & .el-tag__close {

38
test/unit/specs/cascader.spec.js
View File

@ -64,17 +64,17 @@ describe('Cascader', () => {
item1.click(); item1.click();
menu.$nextTick(_ => { 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; 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(); item2.click();
menu.$nextTick(_ => { 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(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(); item3.click();
setTimeout(_ => { setTimeout(_ => {
@ -155,17 +155,17 @@ describe('Cascader', () => {
item1.click(); item1.click();
menu.$nextTick(_ => { 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(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(); item2.click();
menu.$nextTick(_ => { 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(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(); item3.click();
setTimeout(_ => { setTimeout(_ => {
@ -299,7 +299,7 @@ describe('Cascader', () => {
item1.click(); item1.click();
menu.$nextTick(_ => { 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; expect(item1.classList.contains('is-active')).to.be.false;
done(); done();
}); });
@ -362,7 +362,7 @@ describe('Cascader', () => {
const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item'); const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
const item3 = menuElm.children[2].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(item1.classList.contains('is-active')).to.be.true;
expect(item2.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; expect(item3.classList.contains('is-active')).to.be.true;
@ -432,17 +432,17 @@ describe('Cascader', () => {
triggerEvent(item1, 'mouseenter'); triggerEvent(item1, 'mouseenter');
menu.$nextTick(_ => { 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(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'); triggerEvent(item2, 'mouseenter');
menu.$nextTick(_ => { 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(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(); item3.click();
setTimeout(_ => { setTimeout(_ => {
@ -514,19 +514,19 @@ describe('Cascader', () => {
item1.click(); item1.click();
menu.$nextTick(_ => { 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(item1.classList.contains('is-active')).to.be.true;
expect(vm.selectedOptions[0]).to.be.equal('zhejiang'); 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(); item2.click();
menu.$nextTick(_ => { 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(item2.classList.contains('is-active')).to.be.true;
expect(vm.selectedOptions[1]).to.be.equal('hangzhou'); 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(); item3.click();
setTimeout(_ => { setTimeout(_ => {
@ -599,7 +599,7 @@ describe('Cascader', () => {
const menuElm = menu.$el; const menuElm = menu.$el;
const item1 = menuElm.querySelector('.el-cascader-menu__item'); 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); expect(menuElm.children[0].children.length).to.be.equal(3);
item1.click(); item1.click();

2
test/unit/specs/color-picker.spec.js
View File

@ -232,7 +232,7 @@ describe('ColorPicker', () => {
alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 }); alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });
vm.$nextTick(() => { vm.$nextTick(() => {
const picker = vm.$children[0]; const picker = vm.$children[0];
expect(picker.color._alpha < 1).to.true; expect(picker.color._alpha < 100).to.true;
done(); done();
}); });
}, ANIMATION_TIME); }, ANIMATION_TIME);