news banner added

src/App.vue

@@ -1,17 +1,6 @@
 <template>
     <div class="layout-wrapper" :class="containerClass">
-        <div class="layout-news" v-if="newsActive">
+        <app-news v-if="$appState.newsActive" />
-            <div class="layout-news-container" @click="redirect">
-                <img class="layout-news-logo ml-2" src="./assets/images/topbar-primeblocks-device.png">
-                <a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
-                    Read More
-                </a>
-                <a tabindex="0" class="layout-news-close" @click="hideNews">
-                    <i class="pi pi-times"></i>
-                </a>
-            </div>
-        </div>
-
         <app-topbar @menubutton-click="onMenuButtonClick" />
         <app-menu :active="sidebarActive" />
         <app-configurator  />
@@ -35,12 +24,12 @@ import AppTopBar from '@/AppTopBar.vue';
 import AppMenu from '@/AppMenu.vue';
 import AppFooter from '@/AppFooter.vue';
 import AppConfigurator from '@/AppConfigurator.vue';
+import AppNews from '@/AppNews.vue';
 
 export default {
     data() {
         return {
-            sidebarActive: false,
+            sidebarActive: false
-            newsActive: false
         }
     },
     mounted() {
@@ -81,7 +70,7 @@ export default {
             DomHandler.removeClass(document.body, 'blocked-scroll');
         },
         hideNews(event) {
-            this.newsActive = false;
+            this.$appState.newsActive = false;
             sessionStorage.setItem('primevue-news-hidden', 'true');
             event.stopPropagation();
         },
@@ -120,7 +109,7 @@ export default {
     computed: {
         containerClass() {
             return [{
-                'layout-news-active': this.newsActive,
+                'layout-news-active': this.$appState.newsActive,
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false,
                 'layout-wrapper-dark': this.$appState.darkTheme,
@@ -132,7 +121,8 @@ export default {
         'app-topbar': AppTopBar,
         'app-menu': AppMenu,
         'app-footer': AppFooter,
-        'app-configurator': AppConfigurator
+        'app-configurator': AppConfigurator,
+        'app-news': AppNews
     }
 }
 </script>

src/AppNews.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="layout-news" :style="$appState.announcement.backgroundStyle">
+        <i></i>
+        <div class="layout-news-content">
+            <span class="layout-news-text" :style="$appState.announcement.textStyle">{{$appState.announcement.content}}</span>
+            <a class="layout-news-link" :style="[$appState.announcement.linkStyle, hovered ? $appState.announcement.linkHoverStyle : '']" :href="$appState.announcement.linkHref"
+                @mouseenter="hovered=true" @mouseleave="hovered=false">{{$appState.announcement.linkText}}</a>
+        </div>
+        <a class="layout-news-close" :style="newsTextStyleObject" @click="onClose">
+            <span class="pi pi-times"></span>
+        </a>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/AppEventBus';
+
+export default {
+    data() {
+        return {
+            storageKey: 'primevue',
+            hovered: false
+        }
+    },
+    mounted() {
+        EventBus.emit('news-activate');
+    },
+    computed: {
+        newsTextStyleObject() {
+            if (this.$appState.announcement.textStyle) {
+                const textStyle = this.$appState.announcement.textStyle.split(';');
+                return [textStyle[0], textStyle[1]];
+            }
+            return [];
+        },
+        newsStyleObject() {
+            return [this.$appState.announcement.linkStyle];
+        },
+        newsLinkHover() {
+            return this.$appState.announcement.linkHoverStyle;
+        }
+    },
+    watch: {
+        '$appState.announcement'(newValue) {
+            this.$appState.announcement = newValue;
+        }
+    },
+    methods: {
+        onClose() {
+            this.$appState.newsActive = false;
+
+            const item = {
+                hiddenNews: this.$appState.announcement.id
+            };
+            localStorage.setItem(this.storageKey, JSON.stringify(item));
+        }
+    }
+}
+</script>
+
+<style>
+.layout-news-link:hover {
+    text-decoration: newsLinkHover;
+}
+</style>

src/AppWrapper.vue

@@ -4,10 +4,39 @@
 
 <script>
 import EventBus from '@/AppEventBus';
+import NewsService from '@/service/NewsService';
 
 export default {
     themeChangeListener: null,
+    newsActivate: null,
+    newsService: null,
+    data() {
+        return {
+            storageKey: 'primevue'
+        }
+    },
+    created() {
+        this.newsService = new NewsService();
+    },
     mounted() {
+        this.newsActivate = () => {
+            this.newsService.fetchNews().then(data => {
+                this.$appState.announcement = data;
+
+                const itemString = localStorage.getItem(this.storageKey);
+                if (itemString) {
+                    const item = JSON.parse(itemString);
+                    if (item.hiddenNews && item.hiddenNews !== data.id) {
+                        this.$appState.newsActive = true;
+                    }
+                    else this.$appState.newsActive = false;
+                }
+                else {
+                    this.$appState.newsActive = true;
+                }
+            });
+        };
+
         this.themeChangeListener = (event) => {
             const elementId = 'theme-link';
             const linkElement = document.getElementById(elementId);
@@ -26,10 +55,12 @@ export default {
             this.$appState.darkTheme = event.dark;
         };
 
-        EventBus.on('theme-change', this.themeChangeListener);
+        EventBus.on('theme-change', this.themeChangeListeneappnewr);
+        EventBus.on('news-activate', this.newsActivate);
     },
     beforeUnmount() {
         EventBus.off('theme-change', this.themeChangeListener);
+        EventBus.off('news-activate', this.newsActivate);
     }
 }
 </script>

src/Home.vue

@@ -1,6 +1,7 @@
 <template>
     <div :class="landingClass">
         <div class="landing-intro">
+            <AppNews v-if="$appState.newsActive" />
             <HeaderSection @theme-toggle="onThemeToggle" />
             <HeroSection />
         </div>
@@ -27,6 +28,7 @@ import TemplateSection from './views/landing/TemplateSection';
 import UsersSection from './views/landing/UsersSection';
 import FeaturesSection from './views/landing/FeaturesSection';
 import FooterSection from './views/landing/FooterSection';
+import AppNews from './AppNews';
 
 export default {
     props: {
@@ -87,7 +89,7 @@ export default {
     },
     computed: {
         landingClass() {
-            return ['landing', {'landing-dark': this.$appState.darkTheme, 'landing-light': !this.$appState.darkTheme}];
+            return ['landing', {'landing-dark': this.$appState.darkTheme, 'landing-light': !this.$appState.darkTheme, 'landing-news-active': this.$appState.newsActive}];
         }
     },
     components: {
@@ -100,7 +102,8 @@ export default {
         TemplateSection,
         UsersSection,
         FeaturesSection,
-        FooterSection
+        FooterSection,
+        AppNews
     }
 }
 </script>

src/assets/styles/app/_content.scss

@@ -1,6 +1,6 @@
 .layout-content {
     margin-left: 250px;
-    padding-top: 70px;
+    padding-top: 5rem;
 
     .content-section {
         padding: 2rem 4rem;

src/assets/styles/app/_news.scss

@@ -1,66 +1,63 @@
 .layout-news {
-    height: 70px;
+    position: fixed;
-    display: flex;
+    top: 0;
-    justify-content: center;
+    left: 0;
-    align-items: center;
+    z-index: 1100;
-    margin-left: 250px;
-    background-image: linear-gradient(197.37deg, rgba(0, 120, 227, 0.07) -0.38%, rgba(165, 72, 181, 0) 101.89%), linear-gradient(115.93deg, rgba(62, 136, 246, 0.15) 4.86%, rgba(62, 180, 246, 0.0495) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.05) 0%, rgba(62, 158, 246, 0.013) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, rgba(163, 171, 217, 0.1) 19.83%, rgba(163, 171, 217, 0) 97.33%);
-    background-color: white;
-
-    .layout-news-container {
     width: 100%;
-        height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 2rem;
+    padding: 0 2rem;
+
+    .layout-news-content {
+        flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
-        color: #ffffff;
-        font-weight: bold;
-        font-size: 20px;
-
-        .layout-news-header {
-            margin: 0;
-            background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
-            border-radius: 4px 4px 0px 0px;
-            text-shadow: 0px 4px 4.4px rgba(0, 0, 0, 0.3);
-            font-weight: 900;
     }
 
-        img.layout-news-logo {
+    .layout-news-text {
-            height: 70px;
+        line-height: 1.5;
+        display: block;
     }
 
-        .layout-news-button {
+    .layout-news-link {
-            border: 2px solid #283738;
+        margin-left: .5rem;
-            color: #283738;
+        line-height: 1.5;
-            font-size: 15px;
-            padding: 0.3em 0.5em;
-            font-weight: 700;
-            border-radius: 3px;
-            flex-shrink: 0;
-            transition: background-color 0.15s;
-            margin-left: 1rem;
-            text-decoration: none;
-            z-index: 1;
-
-            &:hover {
-                background-color: rgba(0, 0, 0, 0.25);
-            }
-        }
     }
 
     .layout-news-close {
+        line-height: 1.5;
         cursor: pointer;
-        color: #ffffff;
+        display: inline-flex;
-        position: absolute;
-        z-index: 2;
-        right: 28px;
-        background-color: rgba(0,0,0,.3);
-        filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17));
-        border-radius: 50%;
-        display: flex;
         justify-content: center;
         align-items: center;
-        width: 34px;
+        border-radius: 50%;
-        height: 34px;
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: background-color .3s;
+
+        &:hover {
+            background-color: rgba(255,255,255,.2);
+        }
+    } 
+}
+
+.landing-news-active {
+    .landing-header {
+        top: 2rem;
+    }
+}
+
+.layout-news-active {
+    .layout-sidebar,
+    .layout-topbar,
+    .layout-config {
+        top: 2rem;
+    }
+
+    .layout-content {
+        padding-top: 7rem;
     }
 }

src/assets/styles/app/_responsive.scss

@@ -5,26 +5,16 @@
     }
 }
 
-@media screen and (max-width: 1280px) {
-    .layout-wrapper {
-        .layout-news {
-            margin-left: 250px;
-            .layout-news-button {
-                display: none;
-            }
-        }
-    }
-}
-
 @media screen and (max-width: 960px) {
     .layout-wrapper {
-        .layout-news {
+        &.layout-news-active {
-            margin-left: 0;
+            .layout-content {
+                padding-top: 10rem;
             }
         }
     
         .layout-topbar {
-        height: 110px;
+            height: 8rem;
             flex-wrap: wrap;
             justify-content: space-between;
             padding: 0;
@@ -35,14 +25,6 @@
                 display: block;
             }
     
-        .logo {
-            display: block;
-
-            img{
-                width: 150px;
-            }
-        }
-
             .app-theme {
                 margin-left: 0;
                 margin-right: 23px;
@@ -50,14 +32,16 @@
     
             .topbar-menu {
                 width: 100%;
-            height: 40px;
+                height: 3rem;
                 margin: 0;
     
                 > li {
                     width: 25%;
                     margin-right: 0;
+                    position: static;
     
-                > a {
+                    > a,
+                    > .p-link {
                         display: flex;
                         height: 100%;
                         width: 100%;
@@ -67,7 +51,10 @@
                     }
     
                     &.topbar-submenu > ul {
-                    top: 40px;
+                        right: auto;
+                        width: 100vw;
+                        left: 0;
+                        top: 8rem;
                     }
                 }
             }
@@ -86,15 +73,11 @@
     
         .layout-content {
             margin-left: 0;
-        padding-top: 110px;
+            padding-top: 8rem;
     
             .content-section {
                 &.introduction {
                     flex-direction: column;
-
-                .app-inputstyleswitch {
-                    margin-top: 1.5rem;
-                }
                 }
             }
     
@@ -118,7 +101,7 @@
             background-color: rgba(0, 0, 0, 0.1);
     
             &.layout-mask-active {
-            z-index: 998;
+                z-index: 1101;
                 width: 100%;
                 height: 100%;
                 position: fixed;
@@ -129,76 +112,18 @@
             }
         }
     
-    .home {
-        .introduction > div {
-            width: 100%;
-        }
-
-        .features > div {
-            width: 100%;
-        }
-
-        .whouses > div {
-            width: 100%;
-        }
-
-        .prosupport > div {
-            width: 100%;
-        }
-
-        .video iframe {
-            width: 100% !important;
-        }
-    }
-
         .layout-config {
-        .layout-config-button {
-            left: auto;
-            right: -52px;
-        }
-
             &.layout-config-active {
                 width: 100%;
             }
         }
+    }
 
     .blocked-scroll {
         overflow: hidden;
     }
 }
 
-@media screen and (max-width: 960px) {
-    .layout-wrapper.layout-news-active {
-        .topbar-menu {
-            > li {
-                &.topbar-submenu {
-                    > ul  {
-                        top: 180px;
-                    }
-                }
-            }
-        }
-    }
-
-    .layout-topbar {
-        .topbar-menu {
-            > li {
-                &.topbar-submenu {
-                    position: static;
-
-                    > ul {
-                        top: 110px;
-                        position: fixed;
-                        right: auto;
-                        left: 0;
-                        width: 100vw;
-                    }
-                }
-            }
-        }
-    }
-}
-
 @media screen and (max-width: 640px) {
     .layout-wrapper {
         .layout-content {
@@ -208,4 +133,14 @@
             }
         }
     }
+
+    .layout-news {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 12px;
+
+        > i {
+            display: none;
+        }
+    }
 }

src/assets/styles/app/_topbar.scss

@@ -1,6 +1,6 @@
 .layout-topbar {
     padding: 0;
-    height: 70px;
+    height: 5rem;
     position: fixed;
     top: 0;
     left: 250px;
@@ -100,7 +100,7 @@
                 > ul {
                     position: absolute;
                     transform-origin: top;
-                    top: 40px;
+                    top: 3rem;
                     right: 0;
                     width: 275px;
                     max-height: 400px;

src/main.js

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

src/service/NewsService.js

@@ -0,0 +1,6 @@
+export default class NewsService {
+
+    fetchNews() {
+        return fetch('https://www.primefaces.org/cdn/news/primevue.json', {cache: 'no-store'}).then(res => res.json());
+    }
+}