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">
<title>PrimeVUE</title>
<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>
<body>

34
src/App.vue
View File

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

7
src/AppConfigurator.vue
View File

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

11
src/AppTopBar.vue
View File

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

32
src/AppWrapper.vue
View File

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

2
src/main.js
View File

@ -118,7 +118,7 @@ router.beforeEach(function (to, from, next) {
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(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">
<i class="pi pi-discord"></i>
</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>
</button>
<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>
export default {
emits: ['change-theme'],
emits: ['theme-toggle'],
data() {
return {
menuActive: false
@ -71,8 +71,8 @@ export default {
isDarkTheme() {
return this.$appState.darkTheme === true;
},
changeTheme() {
this.$emit('change-theme');
toggleTheme() {
this.$emit('theme-toggle');
},
toggleMenuActive() {
this.menuActive = !this.menuActive;

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

@ -3,9 +3,9 @@
<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>
<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': this.theme && this.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('lara')}]" @click="changeTheme('lara', 'indigo')">PrimeOne</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': 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>
</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'}">
@ -77,6 +77,7 @@
</div>
</div>
</section>
</template>
<script>
@ -84,7 +85,7 @@ import CustomerService from '../../service/CustomerService';
import {FilterMatchMode,FilterOperator} from 'primevue/api';
export default {
emits: ['theme-change'],
emits: ['table-theme-change'],
props: {
theme: null
},
@ -120,7 +121,7 @@ export default {
methods: {
changeTheme(name, color) {
let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color;
this.$emit('theme-change', newTheme);
this.$emit('table-theme-change', newTheme);
},
formatDate(value) {
return value.toLocaleDateString('en-US', {