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

Remove UI flicker

pull/4649/head
Cagatay Civici 2023-10-17 14:34:50 +03:00
parent 290f8e6c49
commit 7eff9bdb38
5 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app.vue
View File

@ -5,7 +5,6 @@
</template> </template>
<script> <script>
import News from '@/assets/data/news.json';
import EventBus from '@/layouts/AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
@ -22,21 +21,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.newsActivate = () => {
this.$appState.announcement = News;
const itemString = localStorage.getItem(this.$appState.storageKey);
if (itemString) {
const item = JSON.parse(itemString);
if (!item.hiddenNews || item.hiddenNews !== News.id) {
this.$appState.newsActive = true;
} else this.$appState.newsActive = false;
} else {
this.$appState.newsActive = true;
}
};
this.themeChangeListener = (event) => { this.themeChangeListener = (event) => {
this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => { this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
this.$appState.theme = event.theme; this.$appState.theme = event.theme;
@ -46,11 +30,9 @@ export default {
}; };
EventBus.on('theme-change', this.themeChangeListener); EventBus.on('theme-change', this.themeChangeListener);
EventBus.on('news-activate', this.newsActivate);
}, },
beforeUnmount() { beforeUnmount() {
EventBus.off('theme-change', this.themeChangeListener); EventBus.off('theme-change', this.themeChangeListener);
EventBus.off('news-activate', this.newsActivate);
} }
}; };
</script> </script>

20
layouts/AppNews.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="layout-news" :style="$appState.announcement.backgroundStyle"> <div v-if="$appState.newsActive" class="layout-news" :style="$appState.announcement.backgroundStyle" >
<div class="layout-news-container"> <div class="layout-news-container">
<i></i> <i></i>
<div class="layout-news-content"> <div class="layout-news-content">
@ -14,11 +14,25 @@
</template> </template>
<script> <script>
import EventBus from '@/layouts/AppEventBus'; import News from '@/assets/data/news.json';
export default { export default {
mounted() { mounted() {
EventBus.emit('news-activate'); const itemString = localStorage.getItem(this.$appState.storageKey);
if (itemString) {
const item = JSON.parse(itemString);
if (!item.hiddenNews || item.hiddenNews !== News.id) {
this.$appState.newsActive = true;
this.$appState.announcement = News;
} else {
this.$appState.newsActive = false;
}
} else {
this.$appState.announcement = News;
this.$appState.newsActive = true;
}
}, },
methods: { methods: {
onClose() { onClose() {

2
layouts/default.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme"> <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<AppNews v-if="$appState.newsActive" /> <AppNews />
<AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" /> <AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" />
<AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" /> <AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div> <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>

2
pages/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="landingClass"> <div :class="landingClass">
<AppNews v-if="$appState.newsActive" /> <AppNews />
<AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" /> <AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
<HeroSection /> <HeroSection />
<FeaturesSection /> <FeaturesSection />

2
plugins/appState.js
View File

@ -1,6 +1,6 @@
const $appState = { const $appState = {
install: (Vue, options) => { install: (Vue, options) => {
Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: true, announcement: {}, storageKey: 'primevue' }); Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
} }
}; };