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

update primary color & add popper-class for ColorPicker

pull/7352/head
Leopoldthecoder 2017-10-04 20:34:46 +08:00 committed by 杨奕
parent cd409ced7c
commit 42cde204da
8 changed files with 156 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/components/header.vue
View File

@ -92,6 +92,7 @@
position: relative;
cursor: pointer;
&.lang-item,
&:last-child {
cursor: default;
margin-left: 34px;
@ -112,6 +113,7 @@
&.active {
font-weight: 700;
opacity: 1;
color: #409EFF;
}
}
}
@ -181,7 +183,7 @@
width: 14px;
left: calc(50% - 7px);
bottom: 15px;
background: #1989fa;
background: #409EFF;
}
}
}
@ -244,6 +246,7 @@
.nav-item {
margin-left: 6px;
&.lang-item,
&:last-child {
margin-left: 10px;
}
@ -361,7 +364,7 @@
</li>
<!-- lang -->
<li class="nav-item">
<li class="nav-item lang-item">
<span
class="nav-lang"
:class="{ 'active': lang === 'zh-CN' }"
@ -376,12 +379,18 @@
En
</span>
</li>
<!--theme picker-->
<li class="nav-item" v-show="isComponentPage">
<theme-picker></theme-picker>
</li>
</ul>
</div>
</header>
</div>
</template>
<script>
import ThemePicker from './theme-picker.vue';
import bus from '../bus';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
@ -399,6 +408,9 @@
isComponentPage: true
};
},
components: { ThemePicker },
watch: {
'$route.path': {
immediate: true,

123
examples/components/theme-picker.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<el-color-picker
class="theme-picker"
popper-class="theme-picker-dropdown"
v-model="theme"></el-color-picker>
</template>
<style>
.theme-picker {
height: 80px;
display: inline-block;
@utils-vertical-center;
}
.theme-picker .el-color-picker__trigger {
vertical-align: middle;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
<script>
import { version } from 'main/index.js';
const ORIGINAL_THEME = '#409EFF';
export default {
data() {
return {
chalk: '',
theme: ORIGINAL_THEME
};
},
watch: {
theme(val, oldVal) {
if (typeof val !== 'string') return;
const themeCluster = this.getThemeCluster(val.replace('#', ''));
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
const handler = () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
let newStyle = this.updateStyle(this.chalk, originalCluster, themeCluster);
let styleTag = document.getElementById('theme-style');
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.setAttribute('id', 'theme-style');
document.head.appendChild(styleTag);
}
styleTag.innerText = newStyle;
};
if (!this.chalk) {
this.getChalkString(handler);
} else {
handler();
}
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText;
return new RegExp(oldVal).test(text) && !/Chalk Variables/.test(text);
});
styles.forEach(style => {
const { innerText } = style;
if (typeof innerText !== 'string') return;
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
});
}
},
methods: {
updateStyle(style, oldCluster, newCluster) {
let newStyle = style;
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
});
return newStyle;
},
getChalkString(callback) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this.chalk = xhr.responseText.replace(/@font-face{[^}]+}/, '');
callback();
}
};
xhr.open('GET', `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`);
xhr.send();
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
if (tint === 0) {
return [red, green, blue].join(',');
} else {
red += Math.round(tint * (255 - red));
green += Math.round(tint * (255 - green));
blue += Math.round(tint * (255 - blue));
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
return `#${ red }${ green }${ blue }`;
}
};
const clusters = [theme];
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
}
return clusters;
}
}
};
</script>

1
examples/docs/en-US/color-picker.md
View File

@ -116,6 +116,7 @@ ColorPicker is a color selector supporting multiple color formats.
| size | size of ColorPicker | string | — | medium / small / mini |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
### Events
| Event Name | Description | Parameters |

2
examples/docs/en-US/loading.md
View File

@ -51,7 +51,7 @@ Displays animation in a container (such as a table) while loading data.
```html
<template>
<el-table
v-loading.body="loading"
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column

1
examples/docs/zh-CN/color-picker.md
View File

@ -116,6 +116,7 @@
| size | 尺寸 | string | — | medium / small / mini |
| show-alpha | 是否支持透明度选择 | boolean | — | false |
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
| popper-class | ColorPicker 下拉框的类名 | string | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |

2
examples/docs/zh-CN/loading.md
View File

@ -49,7 +49,7 @@
```html
<template>
<el-table
v-loading.body="loading"
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column

5
packages/color-picker/src/main.vue
View File

@ -19,7 +19,7 @@
</div>
<picker-dropdown
ref="dropdown"
class="el-color-picker__panel"
:class="['el-color-picker__panel', popperClass || '']"
v-model="showPicker"
@pick="confirmValue"
@clear="clearValue"
@ -42,7 +42,8 @@
showAlpha: Boolean,
colorFormat: String,
disabled: Boolean,
size: String
size: String,
popperClass: String
},
directives: { Clickoutside },

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

@ -1,3 +1,5 @@
/* Element Chalk Variables */
/* Transition
-------------------------- */
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1);
@ -12,16 +14,16 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
$--color-white: #fff;
$--color-black: #000;
$--color-primary: #69B3FF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 78bbff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 87c2ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 96caff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* a5d1ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* b4d9ff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* c3e1ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* d2e8ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* e1f0ff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* f0f7ff */
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;