Skip to content

G
Guten-PigxUI
Commit a20c2e88 authored by 萌萌哒SAKURA酱's avatar 萌萌哒SAKURA酱
Browse files
Options

🐛 Fixing a bug.Fixed sidebar

parent 38e97227
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 169 deletions
src/mixins/color.js
View file @ a20c2e88
import { import {
mapGetters mapGetters
} from "vuex"; } from "vuex";
const version = require("element-ui/package.json").version; // element-ui version from node_modules const version = require("element-ui/package.json").version; // element-ui version from node_modules
const ORIGINAL_THEME = "#409EFF"; // default color const ORIGINAL_THEME = "#409EFF"; // default color
export default function () { export default function() {
return { return {
data() { data() {
return { return {
themeVal: ORIGINAL_THEME themeVal: ORIGINAL_THEME
}
},
created() {
this.themeVal = this.theme;
},
watch: {
themeVal(val, oldVal) {
this.$store.commit("SET_THEME", val);
this.updateTheme(val, oldVal);
}
},
computed: {
...mapGetters(["theme"])
},
methods: {
updateTheme(val, oldVal) {
if (typeof val !== "string") return;
const head = document.getElementsByTagName("head")[0];
const themeCluster = this.getThemeCluster(val.replace("#", ""));
const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(
ORIGINAL_THEME.replace("#", "")
);
const newStyle = this.updateStyle(
this[variable],
originalCluster,
themeCluster
);
let styleTag = document.getElementById(id);
if (!styleTag) {
styleTag = document.createElement("style");
styleTag.setAttribute("id", id);
head.appendChild(styleTag);
} }
styleTag.innerText = newStyle; },
}; created() {
}; this.themeVal = this.theme;
},
const chalkHandler = getHandler("chalk", "chalk-style"); watch: {
themeVal(val, oldVal) {
if (!this.chalk) { this.$store.commit("SET_THEME", val);
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`; this.updateTheme(val, oldVal);
this.getCSSString(url, chalkHandler, "chalk"); }
} else { },
chalkHandler(); computed: {
} ...mapGetters(["theme"])
},
const link = [].slice.call( methods: {
document.getElementsByTagName("head")[0].getElementsByTagName("link") updateTheme(val, oldVal) {
); if (typeof val !== "string") return;
for (let i = link.length - 3; i < link.length; i++) { const head = document.getElementsByTagName("head")[0];
const style = link[i]; const themeCluster = this.getThemeCluster(val.replace("#", ""));
if (style.href.indexOf('app') != -1) { const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
this.getCSSString(style.href, innerText => { const getHandler = (variable, id) => {
const originalCluster = this.getThemeCluster( return () => {
ORIGINAL_THEME.replace("#", "") const originalCluster = this.getThemeCluster(
); ORIGINAL_THEME.replace("#", "")
const newStyle = this.updateStyle( );
innerText, const newStyle = this.updateStyle(
originalCluster, this[variable],
themeCluster originalCluster,
); themeCluster
let styleTag = document.getElementById(i); );
if (!styleTag) {
styleTag = document.createElement("style"); let styleTag = document.getElementById(id);
styleTag.id = i; if (!styleTag) {
styleTag.innerText = newStyle; styleTag = document.createElement("style");
head.appendChild(styleTag); styleTag.setAttribute("id", id);
} head.appendChild(styleTag);
}); }
} styleTag.innerText = newStyle;
};
} };
const styles = [].slice const chalkHandler = getHandler("chalk", "chalk-style");
.call(document.querySelectorAll("style"))
.filter(style => { if (!this.chalk) {
const text = style.innerText; const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
return ( this.getCSSString(url, chalkHandler, "chalk");
new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text) } else {
); chalkHandler();
}); }
styles.forEach(style => {
const { const link = [].slice.call(
innerText document.getElementsByTagName("head")[0].getElementsByTagName("link")
} = style; );
if (typeof innerText !== "string") return; for (let i = link.length - 3; i < link.length; i++) {
style.innerText = this.updateStyle( const style = link[i];
innerText, if (style.href.indexOf('app') != -1) {
originalCluster, this.getCSSString(style.href, innerText => {
themeCluster const originalCluster = this.getThemeCluster(
); ORIGINAL_THEME.replace("#", "")
}); );
}, const newStyle = this.updateStyle(
updateStyle(style, oldCluster, newCluster) { innerText,
let newStyle = style; originalCluster,
oldCluster.forEach((color, index) => { themeCluster
newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]); );
}); let styleTag = document.getElementById(i);
return newStyle; if (!styleTag) {
}, styleTag = document.createElement("style");
styleTag.id = i;
getCSSString(url, callback, variable) { styleTag.innerText = newStyle;
const xhr = new XMLHttpRequest(); head.appendChild(styleTag);
xhr.onreadystatechange = () => { }
if (xhr.readyState === 4 && xhr.status === 200) { });
if (variable) { }
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
}
const styles = [].slice
.call(document.querySelectorAll("style"))
.filter(style => {
const text = style.innerText;
return (
new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
);
});
styles.forEach(style => {
const {
innerText
} = style;
if (typeof innerText !== "string") return;
style.innerText = this.updateStyle(
innerText,
originalCluster,
themeCluster
);
});
},
updateStyle(style, oldCluster, newCluster) {
let newStyle = style;
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
});
return newStyle;
},
getCSSString(url, callback, variable) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
if (variable) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
}
callback(xhr.responseText);
}
};
xhr.open("GET", url);
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) {
// when primary color is in its rgb space
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 shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
red = Math.round((1 - shade) * red);
green = Math.round((1 - shade) * green);
blue = Math.round((1 - shade) * 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))));
}
clusters.push(shadeColor(theme, 0.1));
return clusters;
} }
callback(xhr.responseText);
}
};
xhr.open("GET", url);
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) {
// when primary color is in its rgb space
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 shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
red = Math.round((1 - shade) * red);
green = Math.round((1 - shade) * green);
blue = Math.round((1 - shade) * 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))));
} }
clusters.push(shadeColor(theme, 0.1));
return clusters;
}
} }
}
} }
src/page/index/sidebar/index.vue
View file @ a20c2e88
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
text-color="rgba(255,255,255,0.7)" text-color="rgba(255,255,255,0.7)"
:collapse="keyCollapse"> :collapse="keyCollapse">
<sidebar-item :menu="menu" <sidebar-item :menu="menu"
first
:screen="screen" :screen="screen"
:props="website.menu.props" :props="website.menu.props"
:collapse="keyCollapse"></sidebar-item> :collapse="keyCollapse"></sidebar-item>
......
src/page/index/sidebar/sidebarItem.vue
View file @ a20c2e88
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<template slot="title"> <template slot="title">
<i :class="item[iconKey]"></i> <i :class="item[iconKey]"></i>
<span slot="title" <span slot="title"
:class="{'el-menu--display':collapse}">{{item[labelKey]}}</span> :class="{'el-menu--display':collapse&&first}">{{item[labelKey]}}</span>
</template> </template>
<template v-for="(child,cindex) in item[childrenKey]"> <template v-for="(child,cindex) in item[childrenKey]">
<el-menu-item :index="child[pathKey],cindex" <el-menu-item :index="child[pathKey],cindex"
...@@ -55,6 +55,10 @@ export default { ...@@ -55,6 +55,10 @@ export default {
screen: { screen: {
type: Number type: Number
}, },
first: {
type: Boolean,
default: false
},
props: { props: {
type: Object, type: Object,
default: () => { return {} } default: () => { return {} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment