Implemented ThemeSwitcher
cagataycivici
parent
7a76a847ff
commit
f69d83f4b3
|
|
@ -1,15 +1,17 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<title>PrimeVUE</title>
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<link rel="stylesheet" href="<%= BASE_URL %>themes/nova-light/theme.css">
|
<title>PrimeVUE</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
|
<link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/nova-light/theme.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
<body>
|
||||||
</body>
|
<div id="app"></div>
|
||||||
</html>
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -9,13 +9,93 @@
|
||||||
<ul class="topbar-menu">
|
<ul class="topbar-menu">
|
||||||
<li><router-link to="/setup">Get Started</router-link></li>
|
<li><router-link to="/setup">Get Started</router-link></li>
|
||||||
<li class="topbar-menu-themes">
|
<li class="topbar-menu-themes">
|
||||||
<a>Themes</a>
|
<a tabindex="0" @click="toggleThemesMenu($event)" class="themes-menu-link">Themes</a>
|
||||||
<ul>
|
<transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
|
||||||
<li class="topbar-submenu-header">THEMING</li>
|
<ul v-if="themesMenuVisible">
|
||||||
<li class="topbar-submenu-header">FREE THEMES</li>
|
<li class="topbar-submenu-header">THEMING</li>
|
||||||
</ul>
|
<li class="topbar-submenu-header">FREE THEMES</li>
|
||||||
|
<li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'nova-colored', false)"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'luna-amber', true)"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'luna-blue', true)"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'luna-green', true)"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'luna-pink', true)"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
|
||||||
|
<li><a @click="changeTheme($event, 'rhea', false)"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</transition>
|
||||||
</li>
|
</li>
|
||||||
<li><router-link to="/support">Support</router-link></li>
|
<li><router-link to="/support">Support</router-link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DomHandler from './components/utils/DomHandler';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
themesMenuOutsideClickListener: null,
|
||||||
|
themesMenuElement: null,
|
||||||
|
darkDemoStyle: null,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
theme: 'nova-light',
|
||||||
|
themesMenuVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTheme(event, theme, dark) {
|
||||||
|
let themeElement = document.getElementById('theme-link');
|
||||||
|
themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
|
||||||
|
this.theme = theme;
|
||||||
|
|
||||||
|
if (dark) {
|
||||||
|
if (!this.darkDemoStyle) {
|
||||||
|
this.darkDemoStyle = document.createElement('style');
|
||||||
|
this.darkDemoStyle.type = 'text/css';
|
||||||
|
this.darkDemoStyle.innerHTML = '.implementation { background-color: #3f3f3f !important; color: #dedede !important} .implementation > h3, .implementation > h4{ color: #dedede !important}';
|
||||||
|
document.body.appendChild(this.darkDemoStyle);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(this.darkDemoStyle) {
|
||||||
|
document.body.removeChild(this.darkDemoStyle);
|
||||||
|
this.darkDemoStyle = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.themesMenuVisible = false;
|
||||||
|
event.preventDefault();
|
||||||
|
},
|
||||||
|
toggleThemesMenu(event) {
|
||||||
|
this.themesMenuVisible = !this.themesMenuVisible;
|
||||||
|
event.preventDefault();
|
||||||
|
},
|
||||||
|
onThemesMenuEnter(el) {
|
||||||
|
this.themesMenuElement = el;
|
||||||
|
this.bindThemesMenuOutsideClickListener();
|
||||||
|
},
|
||||||
|
onThemesMenuLeave() {
|
||||||
|
this.themesMenuElement = null;
|
||||||
|
this.unbindThemesMenuOutsideClickListener();
|
||||||
|
},
|
||||||
|
bindThemesMenuOutsideClickListener() {
|
||||||
|
if (!this.themesMenuOutsideClickListener) {
|
||||||
|
this.themesMenuOutsideClickListener = (event) => {
|
||||||
|
if (this.themesMenuVisible && this.isOutsideOfThemesMenuClicked(event)) {
|
||||||
|
this.themesMenuVisible = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('click', this.themesMenuOutsideClickListener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unbindThemesMenuOutsideClickListener() {
|
||||||
|
if (this.themesMenuOutsideClickListener) {
|
||||||
|
document.removeEventListener('click', this.themesMenuOutsideClickListener);
|
||||||
|
this.themesMenuOutsideClickListener = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isOutsideOfThemesMenuClicked(event) {
|
||||||
|
return !(DomHandler.hasClass(event.target, 'themes-menu-link') || this.themesMenuElement.isSameNode(event.target) || this.themesMenuElement.contains(event.target));
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
|
|
@ -117,24 +117,20 @@ body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
border-bottom: 4px solid transparent;
|
border-bottom: 4px solid transparent;
|
||||||
@include transition(background-color .2s);
|
user-select: none;
|
||||||
|
@include transition(border-color .2s);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom-color: #41b883;
|
border-bottom-color: #41b883;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> ul{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.topbar-menu-themes {
|
&.topbar-menu-themes {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
> ul {
|
> ul {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 65px;
|
top: 45px;
|
||||||
left: -75px;
|
left: -75px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
|
|
@ -147,9 +143,6 @@ body {
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
-webkit-animation-name: fadeInDown;
|
|
||||||
animation-name: fadeInDown;
|
|
||||||
animation-duration: .5s;
|
|
||||||
|
|
||||||
> li.topbar-submenu-header {
|
> li.topbar-submenu-header {
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
|
|
@ -164,7 +157,9 @@ body {
|
||||||
color: #404C51;
|
color: #404C51;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
display: block;
|
display: block;
|
||||||
@include transition(all .5s ease);
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
@include transition(background-color .2s);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #eeeeee;
|
background-color: #eeeeee;
|
||||||
|
|
@ -187,9 +182,6 @@ body {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.active-top-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -329,6 +321,7 @@ body {
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #494c52;
|
color: #494c52;
|
||||||
|
transition: background-color .2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #eeeeee;
|
background-color: #eeeeee;
|
||||||
|
|
@ -1068,7 +1061,6 @@ a{
|
||||||
pre[class*="language-"] code {
|
pre[class*="language-"] code {
|
||||||
border-left: 10px solid #b3e3cd !important;
|
border-left: 10px solid #b3e3cd !important;
|
||||||
box-shadow: -1px 0px 0px 0px #b3e3cd, 0px 0px 0px 1px #f8f8f8 !important;
|
box-shadow: -1px 0px 0px 0px #b3e3cd, 0px 0px 0px 1px #f8f8f8 !important;
|
||||||
webkit-box-shadow: -1px 0px 0px 0px #b3e3cd, 0px 0px 0px 1px #f8f8f8 !important;
|
|
||||||
background: #ffffff !important;
|
background: #ffffff !important;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue