vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented ThemeSwitcher

pull/12/head
cagataycivici 2019-05-21 15:54:05 +03:00
parent 7a76a847ff
commit f69d83f4b3
11 changed files with 108 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/index.html
View File

@ -1,15 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PrimeVUE</title>
<link rel="stylesheet" href="<%= BASE_URL %>themes/nova-light/theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div id="app"></div>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PrimeVUE</title>
<link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/nova-light/theme.css">
</head>
<body>
<div id="app"></div>
</body>
</html>

90
src/AppTopBar.vue
View File

@ -9,13 +9,93 @@
<ul class="topbar-menu">
<li><router-link to="/setup">Get Started</router-link></li>
<li class="topbar-menu-themes">
<a>Themes</a>
<ul>
<li class="topbar-submenu-header">THEMING</li>
<li class="topbar-submenu-header">FREE THEMES</li>
</ul>
<a tabindex="0" @click="toggleThemesMenu($event)" class="themes-menu-link">Themes</a>
<transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
<ul v-if="themesMenuVisible">
<li class="topbar-submenu-header">THEMING</li>
<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><router-link to="/support">Support</router-link></li>
</ul>
</div>
</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>

BIN
src/assets/images/layouts/themeswitcher-luna-amber.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
src/assets/images/layouts/themeswitcher-luna-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/assets/images/layouts/themeswitcher-luna-green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
src/assets/images/layouts/themeswitcher-luna-pink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/assets/images/layouts/themeswitcher-nova-colored.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/images/layouts/themeswitcher-nova-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/layouts/themeswitcher-nova-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/layouts/themeswitcher-rhea.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

22
src/assets/styles/app.scss
View File

@ -117,24 +117,20 @@ body {
text-align: center;
padding-bottom: 8px;
border-bottom: 4px solid transparent;
@include transition(background-color .2s);
user-select: none;
@include transition(border-color .2s);
&:hover {
border-bottom-color: #41b883;
}
}
> ul{
display: none;
}
&.topbar-menu-themes {
position: relative;
cursor: pointer;
> ul {
position: absolute;
top: 65px;
top: 45px;
left: -75px;
width: 250px;
max-height: 300px;
@ -147,9 +143,6 @@ body {
padding: 15px 0;
margin: 0;
border-radius: 3px;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
animation-duration: .5s;
> li.topbar-submenu-header {
padding: 6px 12px;
@ -164,7 +157,9 @@ body {
color: #404C51;
padding: 6px 12px;
display: block;
@include transition(all .5s ease);
user-select: none;
cursor: pointer;
@include transition(background-color .2s);
&:hover {
background-color: #eeeeee;
@ -187,9 +182,6 @@ body {
margin-right: 4px;
}
}
&.active-top-menu {
display: block;
}
}
}
}
@ -329,6 +321,7 @@ body {
-webkit-border-radius: 4px;
font-size: 14px;
color: #494c52;
transition: background-color .2s;
&:hover {
background-color: #eeeeee;
@ -1068,7 +1061,6 @@ a{
pre[class*="language-"] code {
border-left: 10px solid #b3e3cd !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;
margin: 1em 0;