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

Merge pull request #2199 from tugcekucukoglu/landing-theme 

fix routing and app header
pull/2200/head
Tuğçe Küçükoğlu 2022-02-23 16:44:27 +03:00 committed by GitHub
parent 093505e8d1 b362d0e419
commit 83bf2857b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 96 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.vue
View File

@ -30,6 +30,7 @@
</template>
<script>
import EventBus from '@/AppEventBus';
import DomHandler from '@/components/utils/DomHandler';
import AppTopBar from '@/AppTopBar.vue';
import AppMenu from '@/AppMenu.vue';
@ -37,14 +38,9 @@ import AppFooter from '@/AppFooter.vue';
import AppConfigurator from '@/AppConfigurator.vue';
export default {
props: {
theme: {
type: String,
default: "lara-light-indigo"
}
},
data() {
return {
theme: this.$appState.darkTheme ? 'lara-dark-indigo' : 'lara-light-indigo',
sidebarActive: false,
newsActive: false
}
@ -53,8 +49,6 @@ export default {
if (this.isOutdatedIE()) {
this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
}
this.newsActive = this.newsActive && sessionStorage.getItem('primevue-news-hidden') == null;
},
watch: {
$route: {
@ -94,9 +88,30 @@ export default {
event.stopPropagation();
},
changeTheme(event) {
this.$emit('change-theme', event);
let themeLink = document.getElementById('theme-link');
let hrefThemeLink = 'themes/' + event.theme + '/theme.css';
this.activeMenuIndex = null;
EventBus.emit('change-theme', { theme: event.theme, dark: event.dark });
this.theme = event.theme;
this.$appState.darkTheme = event.dark;
this.replaceLink(themeLink, hrefThemeLink);
},
replaceLink(linkElement, href) {
const id = linkElement.getAttribute('id');
const cloneLinkElement = linkElement.cloneNode(true);
cloneLinkElement.setAttribute('href', href);
cloneLinkElement.setAttribute('id', id + '-clone');
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', id);
});
},
addClass(element, className) {
if (!this.hasClass(element, className)) {

42
src/AppTopBar.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="layout-topbar">
<div :ref="containerRef" class="layout-topbar">
<a class="menu-button" @click="$emit('menubutton-click')">
<i class="pi pi-bars"></i>
</a>
<router-link to="/" class="logo">
<img alt="logo" src="./assets/images/primevue-logo.png">
</router-link>
</router-link>{{theme}}
<div class="app-theme" v-tooltip.bottom="theme">
<img :src="'demo/images/themes/' + logoMap[theme]" />
</div>
@ -185,15 +185,25 @@ export default {
'tailwind-light': 'tailwind-light.png',
'lara-dark-indigo': 'lara-dark-indigo.png',
'lara-dark-purple': 'lara-dark-purple.png',
'lara-dark-teal': 'lara-dark-teal.png',
'lara-dark-blue': 'lara-dark-blue.png',
'lara-light-indigo': 'lara-light-indigo.png',
'lara-light-purple': 'lara-light-purple.png',
'lara-dark-teal': 'lara-dark-indigo.png',
'lara-dark-blue': 'lara-dark-blue.png',
'lara-light-teal': 'lara-light-teal.png',
'lara-light-blue': 'lara-light-blue.png'
}
}
},
scrollListener: null,
container: null,
mounted() {console.log(this.theme)
this.bindScrollListener();
},
beforeUnmount() {
if (this.scrollListener) {
this.unbindScrollListener();
}
},
methods: {
changeTheme(event, theme, dark) {
this.$emit('change-theme', {theme: theme, dark: dark});
@ -207,6 +217,25 @@ export default {
onMenuEnter() {
this.bindOutsideClickListener();
},
bindScrollListener() {
if (!this.scrollListener) {
if (this.container) {
this.scrollListener = () => {
if (window.scrollY > 0)
this.container.classList.add('layout-topbar-sticky');
else
this.container.classList.remove('layout-topbar-sticky');
}
}
}
window.addEventListener('scroll', this.scrollListener);
},
unbindScrollListener() {
if (this.scrollListener) {
window.removeEventListener('scroll', this.scrollListener);
this.scrollListener = null;
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
@ -226,7 +255,10 @@ export default {
},
isOutsideTopbarMenuClicked(event) {
return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
}
},
containerRef(el) {
this.container = el;
},
}
}
</script>

51
src/AppWrapper.vue
View File

@ -3,54 +3,3 @@
<router-view></router-view>
</div>
</template>
<script>
import EventBus from '@/AppEventBus';
export default {
data() {
return {
theme: 'lara-light-indigo'
}
},
methods: {
changeTheme(event) {
let themeLink = document.getElementById('theme-link');
let href = 'themes/' + event.theme + '/theme.css';
this.theme = event.theme;
this.replaceLink(themeLink, href);
this.activeMenuIndex = null;
EventBus.emit('change-theme', event);
this.$appState.darkTheme = event.dark;
if (event.theme.startsWith('md')) {
this.$primevue.config.ripple = true;
}
},
replaceLink(linkElement, href) {
const id = linkElement.getAttribute('id');
const cloneLinkElement = linkElement.cloneNode(true);
cloneLinkElement.setAttribute('href', href);
cloneLinkElement.setAttribute('id', id + '-clone');
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', id);
});
},
}/*,
components: {
'App': App,
'Home': Home
}*/
}
</script>
<style scoped>
</style>

14
src/Home.vue
View File

@ -16,6 +16,7 @@
</template>
<script>
import EventBus from '@/AppEventBus';
import HeaderSection from './views/landing/HeaderSection';
import HeroSection from './views/landing/HeroSection';
import ComponentSection from './views/landing/ComponentSection';
@ -55,16 +56,21 @@ export default {
this.tableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
this.changeTheme(theme);
this.$emit('change-theme', { theme, dark: !this.$appState.darkTheme });
EventBus.emit('change-theme', { theme, dark: !this.$appState.darkTheme });
this.$appState.darkTheme = !this.$appState.darkTheme;
},
onThemeChange(theme) {
this.changeTheme(theme);
},
changeTheme(theme) {
let themeLink = document.getElementById('home-link');
let href = 'styles/landing/themes/' + theme + '/theme.css';
let themeLink = document.getElementById('theme-link');
let hrefThemeLink = 'themes/' + theme + '/theme.css';
this.replaceLink(themeLink, href);
let homeLink = document.getElementById('home-link');
let hrefHomeLink = 'styles/landing/themes/' + theme + '/theme.css';
this.replaceLink(themeLink, hrefThemeLink);
this.replaceLink(homeLink, hrefHomeLink);
},
replaceLink(linkElement, href) {
const id = linkElement.getAttribute('id');

20
src/assets/styles/app/_topbar.scss
View File

@ -9,6 +9,10 @@
display: flex;
align-items: center;
&.layout-topbar-sticky {
backdrop-filter: blur(12px);
}
.logo {
display: none;
}
@ -177,3 +181,19 @@
}
}
}
.layout-wrapper-dark {
.layout-topbar {
&.layout-topbar-sticky {
background-color: rgba(0, 0, 0 , 0.3);
}
}
}
.layout-wrapper-light {
.layout-topbar {
&.layout-topbar-sticky {
background-color: rgba(255, 255, 255, 0.85);
}
}
}

3
src/router/index.js
View File

@ -11,7 +11,8 @@ const routes = [
},
{
path: '/',
component: () => App,
name: 'App',
component: App,
children: [
{
path: '/setup',

4
src/views/landing/HeaderSection.vue
View File

@ -52,13 +52,13 @@
<script>
export default {
emits: ['change-theme'],
scrollListener: null,
container: null,
data() {
return {
menuActive: false
}
},
scrollListener: null,
container: null,
mounted() {
this.bindScrollListener();
},