Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
G
Guten-PigxUI
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄卓然
Guten-PigxUI
Commits
a20c2e88
Commit
a20c2e88
authored
Nov 29, 2018
by
萌萌哒SAKURA酱
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
🐛
Fixing a bug.Fixed sidebar
parent
38e97227
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
174 additions
and
169 deletions
+174
-169
color.js
src/mixins/color.js
+168
-168
index.vue
src/page/index/sidebar/index.vue
+1
-0
sidebarItem.vue
src/page/index/sidebar/sidebarItem.vue
+5
-1
No files found.
src/mixins/color.js
View file @
a20c2e88
import
{
mapGetters
mapGetters
}
from
"vuex"
;
const
version
=
require
(
"element-ui/package.json"
).
version
;
// element-ui version from node_modules
const
ORIGINAL_THEME
=
"#409EFF"
;
// default color
export
default
function
()
{
return
{
data
()
{
return
{
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
);
export
default
function
()
{
return
{
data
()
{
return
{
themeVal
:
ORIGINAL_THEME
}
styleTag
.
innerText
=
newStyle
;
};
};
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
();
}
const
link
=
[].
slice
.
call
(
document
.
getElementsByTagName
(
"head"
)[
0
].
getElementsByTagName
(
"link"
)
);
for
(
let
i
=
link
.
length
-
3
;
i
<
link
.
length
;
i
++
)
{
const
style
=
link
[
i
];
if
(
style
.
href
.
indexOf
(
'app'
)
!=
-
1
)
{
this
.
getCSSString
(
style
.
href
,
innerText
=>
{
const
originalCluster
=
this
.
getThemeCluster
(
ORIGINAL_THEME
.
replace
(
"#"
,
""
)
);
const
newStyle
=
this
.
updateStyle
(
innerText
,
originalCluster
,
themeCluster
);
let
styleTag
=
document
.
getElementById
(
i
);
if
(
!
styleTag
)
{
styleTag
=
document
.
createElement
(
"style"
);
styleTag
.
id
=
i
;
styleTag
.
innerText
=
newStyle
;
head
.
appendChild
(
styleTag
);
}
});
}
}
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{
[^
}
]
+}/
,
""
);
},
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
;
};
};
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
();
}
const
link
=
[].
slice
.
call
(
document
.
getElementsByTagName
(
"head"
)[
0
].
getElementsByTagName
(
"link"
)
);
for
(
let
i
=
link
.
length
-
3
;
i
<
link
.
length
;
i
++
)
{
const
style
=
link
[
i
];
if
(
style
.
href
.
indexOf
(
'app'
)
!=
-
1
)
{
this
.
getCSSString
(
style
.
href
,
innerText
=>
{
const
originalCluster
=
this
.
getThemeCluster
(
ORIGINAL_THEME
.
replace
(
"#"
,
""
)
);
const
newStyle
=
this
.
updateStyle
(
innerText
,
originalCluster
,
themeCluster
);
let
styleTag
=
document
.
getElementById
(
i
);
if
(
!
styleTag
)
{
styleTag
=
document
.
createElement
(
"style"
);
styleTag
.
id
=
i
;
styleTag
.
innerText
=
newStyle
;
head
.
appendChild
(
styleTag
);
}
});
}
}
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 @@
text-color=
"rgba(255,255,255,0.7)"
:collapse=
"keyCollapse"
>
<sidebar-item
:menu=
"menu"
first
:screen=
"screen"
:props=
"website.menu.props"
:collapse=
"keyCollapse"
></sidebar-item>
...
...
src/page/index/sidebar/sidebarItem.vue
View file @
a20c2e88
...
...
@@ -15,7 +15,7 @@
<template
slot=
"title"
>
<i
:class=
"item[iconKey]"
></i>
<span
slot=
"title"
:class=
"
{'el-menu--display':collapse}">
{{
item
[
labelKey
]
}}
</span>
:class=
"
{'el-menu--display':collapse
&&
first
}">
{{
item
[
labelKey
]
}}
</span>
</
template
>
<
template
v-for=
"(child,cindex) in item[childrenKey]"
>
<el-menu-item
:index=
"child[pathKey],cindex"
...
...
@@ -55,6 +55,10 @@ export default {
screen
:
{
type
:
Number
},
first
:
{
type
:
Boolean
,
default
:
false
},
props
:
{
type
:
Object
,
default
:
()
=>
{
return
{}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment