From 27322ac4d322a6bac3aef1916587df1bc6e9d179 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 19 Mar 2019 17:46:56 +0800 Subject: [PATCH] add ThemePicker to setting --- src/components/RightPanel/index.vue | 16 +----- src/components/ThemePicker/index.vue | 70 +++++++++++++----------- src/layout/components/Navbar.vue | 5 -- src/layout/components/Settings/index.vue | 13 +++-- 4 files changed, 49 insertions(+), 55 deletions(-) diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue index 77a9d0d9..9fe43f89 100644 --- a/src/components/RightPanel/index.vue +++ b/src/components/RightPanel/index.vue @@ -2,9 +2,7 @@
-
- -
+
@@ -121,20 +119,12 @@ export default { .handle-button { position: absolute; left: -48px; - border-radius: 4px 0 0 4px !important; + border-radius: 6px 0 0 6px !important; width: 48px; height: 48px; - background: #1890ff; - cursor: pointer; pointer-events: auto; z-index: 0; + font-size: 24px; text-align: center; - color: #fff; - line-height: 48px; - - i { - font-size: 24px; - line-height: 48px; - } } diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue index be3a573a..4f55a717 100644 --- a/src/components/ThemePicker/index.vue +++ b/src/components/ThemePicker/index.vue @@ -19,12 +19,21 @@ export default { } }, watch: { - theme(val) { + async theme(val) { const oldVal = this.theme if (typeof val !== 'string') return const themeCluster = this.getThemeCluster(val.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) console.log(themeCluster, originalCluster) + + const $message = this.$message({ + message: ' Compiling the theme', + customClass: 'theme-message', + type: 'success', + duration: 0, + iconClass: 'el-icon-loading' + }) + const getHandler = (variable, id) => { return () => { const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) @@ -40,15 +49,15 @@ export default { } } - const chalkHandler = getHandler('chalk', 'chalk-style') - if (!this.chalk) { const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` - this.getCSSString(url, chalkHandler, 'chalk') - } else { - chalkHandler() + await this.getCSSString(url, 'chalk') } + const chalkHandler = getHandler('chalk', 'chalk-style') + + chalkHandler() + const styles = [].slice.call(document.querySelectorAll('style')) .filter(style => { const text = style.innerText @@ -59,39 +68,32 @@ export default { if (typeof innerText !== 'string') return style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) }) - this.$message({ - message: '换肤成功', - type: 'success' - }) + + $message.close() } }, methods: { updateStyle(style, oldCluster, newCluster) { - const colorOverrides = [] // only capture color overides + let newStyle = style oldCluster.forEach((color, index) => { - const value = newCluster[index] - const color_plain = color.replace(/([()])/g, '\\$1') - const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi') - const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color' - let v - while ((v = repl.exec(style))) { - colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary - } + newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) }) - return colorOverrides.join('') + return newStyle }, - getCSSString(url, callback, variable) { - const xhr = new XMLHttpRequest() - xhr.onreadystatechange = () => { - if (xhr.readyState === 4 && xhr.status === 200) { - this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') - callback() + getCSSString(url, variable) { + return new Promise(resolve => { + const xhr = new XMLHttpRequest() + xhr.onreadystatechange = () => { + if (xhr.readyState === 4 && xhr.status === 200) { + this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') + resolve() + } } - } - xhr.open('GET', url) - xhr.send() + xhr.open('GET', url) + xhr.send() + }) }, getThemeCluster(theme) { @@ -143,10 +145,14 @@ export default {