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

Lifted theme state and switcher up

pull/2206/head
Cagatay Civici 2022-02-23 22:52:21 +03:00
parent 6900db8f82
commit 410a2872e4
9 changed files with 75 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -13,7 +13,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PrimeVUE</title> <title>PrimeVUE</title>
<link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/lara-light-blue/theme.css"> <link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/lara-light-blue/theme.css">
<link id="home-link" rel="stylesheet" href="<%= BASE_URL %>styles/landing/themes/lara-light-blue/theme.css"> <link id="home-table-link" rel="stylesheet" href="<%= BASE_URL %>styles/landing/themes/lara-light-indigo/theme.css">
</head> </head>
<body> <body>

34
src/App.vue
View File

@ -12,9 +12,9 @@
</div> </div>
</div> </div>
<app-topbar @menubutton-click="onMenuButtonClick" @change-theme="changeTheme" :theme="theme" /> <app-topbar @menubutton-click="onMenuButtonClick" />
<app-menu :active="sidebarActive" /> <app-menu :active="sidebarActive" />
<app-configurator @change-theme="changeTheme" :theme="theme" /> <app-configurator />
<div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div> <div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
<div class="layout-content"> <div class="layout-content">
<div class="layout-content-inner"> <div class="layout-content-inner">
@ -30,7 +30,6 @@
</template> </template>
<script> <script>
import EventBus from '@/AppEventBus';
import DomHandler from '@/components/utils/DomHandler'; import DomHandler from '@/components/utils/DomHandler';
import AppTopBar from '@/AppTopBar.vue'; import AppTopBar from '@/AppTopBar.vue';
import AppMenu from '@/AppMenu.vue'; import AppMenu from '@/AppMenu.vue';
@ -40,7 +39,6 @@ import AppConfigurator from '@/AppConfigurator.vue';
export default { export default {
data() { data() {
return { return {
theme: this.$appState.darkTheme ? 'lara-dark-indigo' : 'lara-light-indigo',
sidebarActive: false, sidebarActive: false,
newsActive: false newsActive: false
} }
@ -49,8 +47,6 @@ export default {
if (this.isOutdatedIE()) { 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.$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.changeTheme({ theme: this.theme, dark: this.$appState.darkTheme });
}, },
watch: { watch: {
$route: { $route: {
@ -89,32 +85,6 @@ export default {
sessionStorage.setItem('primevue-news-hidden', 'true'); sessionStorage.setItem('primevue-news-hidden', 'true');
event.stopPropagation(); event.stopPropagation();
}, },
changeTheme(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) { addClass(element, className) {
if (!this.hasClass(element, className)) { if (!this.hasClass(element, className)) {
if (element.classList) if (element.classList)

7
src/AppConfigurator.vue
View File

@ -373,7 +373,6 @@ import EventBus from '@/AppEventBus';
export default { export default {
props: { props: {
theme: String,
inputStyle: String inputStyle: String
}, },
data() { data() {
@ -394,7 +393,7 @@ export default {
} }
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('change-theme', this.themeChangeListener); EventBus.off('theme-change', this.themeChangeListener);
}, },
mounted() { mounted() {
this.themeChangeListener = (event) => { this.themeChangeListener = (event) => {
@ -406,7 +405,7 @@ export default {
this.applyScale(); this.applyScale();
}; };
EventBus.on('change-theme', this.themeChangeListener); EventBus.on('theme-change', this.themeChangeListener);
}, },
methods: { methods: {
toggleConfigurator(event) { toggleConfigurator(event) {
@ -424,7 +423,7 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
changeTheme(event, theme, dark) { changeTheme(event, theme, dark) {
this.$emit('change-theme', {theme: theme, dark: dark}); EventBus.emit('theme-change', { theme: theme, dark: dark });
event.preventDefault(); event.preventDefault();
}, },
bindOutsideClickListener() { bindOutsideClickListener() {

11
src/AppTopBar.vue
View File

@ -6,8 +6,8 @@
<router-link to="/" class="logo"> <router-link to="/" class="logo">
<img alt="logo" src="./assets/images/primevue-logo.png"> <img alt="logo" src="./assets/images/primevue-logo.png">
</router-link> </router-link>
<div class="app-theme" v-tooltip.bottom="theme"> <div class="app-theme" v-tooltip.bottom="$appState.theme">
<img :src="'demo/images/themes/' + logoMap[theme]" /> <img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
</div> </div>
<ul ref="topbarMenu" class="topbar-menu"> <ul ref="topbarMenu" class="topbar-menu">
<li><router-link to="/setup">Get Started</router-link></li> <li><router-link to="/setup">Get Started</router-link></li>
@ -127,6 +127,8 @@
</template> </template>
<script> <script>
import EventBus from '@/AppEventBus';
export default { export default {
outsideClickListener: null, outsideClickListener: null,
darkDemoStyle: null, darkDemoStyle: null,
@ -135,9 +137,6 @@ export default {
this.activeMenuIndex = null; this.activeMenuIndex = null;
} }
}, },
props: {
theme: null
},
data() { data() {
return { return {
activeMenuIndex: null, activeMenuIndex: null,
@ -206,7 +205,7 @@ export default {
}, },
methods: { methods: {
changeTheme(event, theme, dark) { changeTheme(event, theme, dark) {
this.$emit('change-theme', {theme: theme, dark: dark}); EventBus.emit('theme-change', { theme: theme, dark: dark });
this.activeMenuIndex = null; this.activeMenuIndex = null;
event.preventDefault(); event.preventDefault();
}, },

32
src/AppWrapper.vue
View File

@ -1,3 +1,35 @@
<template> <template>
<router-view></router-view> <router-view></router-view>
</template> </template>
<script>
import EventBus from '@/AppEventBus';
export default {
themeChangeListener: null,
mounted() {
this.themeChangeListener = (event) => {
const elementId = 'theme-link';
const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(this.$appState.theme, event.theme);
cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', elementId);
});
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
this.$appState.theme = event.theme;
this.$appState.darkTheme = event.dark;
};
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('theme-change', this.themeChangeListener);
}
}
</script>

49
src/Home.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div :class="landingClass"> <div :class="landingClass">
<div class="landing-intro"> <div class="landing-intro">
<HeaderSection @change-theme="onToggleTheme" /> <HeaderSection @theme-toggle="onThemeToggle" />
<HeroSection /> <HeroSection />
</div> </div>
<ComponentSection /> <ComponentSection />
<ThemeSection :theme="theme" @theme-change="onThemeChange" /> <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
<BlockSection /> <BlockSection />
<DesignerSection /> <DesignerSection />
<TemplateSection /> <TemplateSection />
@ -51,41 +51,32 @@ export default {
} }
}, },
methods: { methods: {
onToggleTheme() { onThemeToggle() {
const theme = this.$appState.darkTheme ? 'lara-light-indigo' : 'lara-dark-indigo'; const newTheme = this.$appState.darkTheme ? 'lara-light-indigo' : 'lara-dark-indigo';
this.tableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
this.changeTheme(theme);
EventBus.emit('change-theme', { theme, dark: !this.$appState.darkTheme }); EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
this.$appState.darkTheme = !this.$appState.darkTheme; this.replaceTableTheme(newTableTheme);
}, },
onThemeChange(theme) { onTableThemeChange(value) {
this.changeTheme(theme); this.replaceTableTheme(value);
}, },
changeTheme(theme) { replaceTableTheme(newTheme) {
let themeLink = document.getElementById('theme-link'); const elementId = 'home-table-link';
let hrefThemeLink = 'themes/' + theme + '/theme.css'; const linkElement = document.getElementById(elementId);
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');
const cloneLinkElement = linkElement.cloneNode(true); const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(this.tableTheme, newTheme);
cloneLinkElement.setAttribute('href', href); cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('id', id + '-clone'); cloneLinkElement.setAttribute('href', newThemeUrl);
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
cloneLinkElement.addEventListener('load', () => { cloneLinkElement.addEventListener('load', () => {
linkElement.remove(); linkElement.remove();
cloneLinkElement.setAttribute('id', id); cloneLinkElement.setAttribute('id', elementId);
}); });
}, linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
this.tableTheme = newTheme;
}
}, },
computed: { computed: {
landingClass() { landingClass() {

2
src/main.js
View File

@ -118,7 +118,7 @@ router.beforeEach(function (to, from, next) {
const app = createApp(AppWrapper); const app = createApp(AppWrapper);
app.config.globalProperties.$appState = reactive({darkTheme: false, codeSandbox: false, sourceType: 'options-api'}); app.config.globalProperties.$appState = reactive({theme: 'lara-light-blue', darkTheme: false, codeSandbox: false, sourceType: 'options-api'});
app.use(PrimeVue, {ripple: true}); app.use(PrimeVue, {ripple: true});
app.use(ToastService); app.use(ToastService);

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

@ -39,7 +39,7 @@
<a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0"> <a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
<i class="pi pi-discord"></i> <i class="pi pi-discord"></i>
</a> </a>
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="changeTheme"> <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
<i :class="['pi', {'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme()}]"></i> <i :class="['pi', {'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme()}]"></i>
</button> </button>
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" @click="toggleMenuActive" > <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" @click="toggleMenuActive" >
@ -51,7 +51,7 @@
<script> <script>
export default { export default {
emits: ['change-theme'], emits: ['theme-toggle'],
data() { data() {
return { return {
menuActive: false menuActive: false
@ -71,8 +71,8 @@ export default {
isDarkTheme() { isDarkTheme() {
return this.$appState.darkTheme === true; return this.$appState.darkTheme === true;
}, },
changeTheme() { toggleTheme() {
this.$emit('change-theme'); this.$emit('theme-toggle');
}, },
toggleMenuActive() { toggleMenuActive() {
this.menuActive = !this.menuActive; this.menuActive = !this.menuActive;

11
src/views/landing/ThemeSection.vue
View File

@ -3,9 +3,9 @@
<div class="section-header">Themes</div> <div class="section-header">Themes</div>
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p> <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
<div class="flex flex-wrap justify-content-center"> <div class="flex flex-wrap justify-content-center">
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': this.theme && this.theme.startsWith('lara')}]" @click="changeTheme('lara', 'indigo')">PrimeOne</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('lara')}]" @click="changeTheme('lara', 'indigo')">PrimeOne</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': this.theme && this.theme.startsWith('md')}]" @click="changeTheme('md', 'indigo')">Material</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('md')}]" @click="changeTheme('md', 'indigo')">Material</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': this.theme && this.theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
<a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a> <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
</div> </div>
<div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}"> <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
@ -77,6 +77,7 @@
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
@ -84,7 +85,7 @@ import CustomerService from '../../service/CustomerService';
import {FilterMatchMode,FilterOperator} from 'primevue/api'; import {FilterMatchMode,FilterOperator} from 'primevue/api';
export default { export default {
emits: ['theme-change'], emits: ['table-theme-change'],
props: { props: {
theme: null theme: null
}, },
@ -120,7 +121,7 @@ export default {
methods: { methods: {
changeTheme(name, color) { changeTheme(name, color) {
let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color; let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color;
this.$emit('theme-change', newTheme); this.$emit('table-theme-change', newTheme);
}, },
formatDate(value) { formatDate(value) {
return value.toLocaleDateString('en-US', { return value.toLocaleDateString('en-US', {