From 36bff2ba79707136fd76fb56b5534020d3f86282 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 7 Apr 2022 15:57:53 +0300
Subject: [PATCH] news banner added

---
 src/App.vue                            |  24 +--
 src/AppNews.vue                        |  65 ++++++
 src/AppWrapper.vue                     |  33 ++-
 src/Home.vue                           |   7 +-
 src/assets/styles/app/_content.scss    |   2 +-
 src/assets/styles/app/_news.scss       |  95 ++++-----
 src/assets/styles/app/_responsive.scss | 283 ++++++++++---------------
 src/assets/styles/app/_topbar.scss     |   4 +-
 src/main.js                            |   2 +-
 src/service/NewsService.js             |   6 +
 10 files changed, 274 insertions(+), 247 deletions(-)
 create mode 100644 src/AppNews.vue
 create mode 100644 src/service/NewsService.js

diff --git a/src/App.vue b/src/App.vue
index 43b9eb334..b94747613 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,6 @@
 <template>
     <div class="layout-wrapper" :class="containerClass">
-        <div class="layout-news" v-if="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-news v-if="$appState.newsActive" />
         <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,
-            newsActive: false
+            sidebarActive: 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>
diff --git a/src/AppNews.vue b/src/AppNews.vue
new file mode 100644
index 000000000..596f234b1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/AppWrapper.vue b/src/AppWrapper.vue
index ee883013e..4d8690c06 100644
--- a/src/AppWrapper.vue
+++ b/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>
diff --git a/src/Home.vue b/src/Home.vue
index 3d17bee9a..c7e9df01f 100755
--- a/src/Home.vue
+++ b/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>
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index e711c6a72..65156d573 100644
--- a/src/assets/styles/app/_content.scss
+++ b/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;
diff --git a/src/assets/styles/app/_news.scss b/src/assets/styles/app/_news.scss
index bafd9e40f..62b0f4336 100644
--- a/src/assets/styles/app/_news.scss
+++ b/src/assets/styles/app/_news.scss
@@ -1,66 +1,63 @@
 .layout-news {
-    height: 70px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1100;
+    width: 100%;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    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;
+    height: 2rem;
+    padding: 0 2rem;
 
-    .layout-news-container {
-        width: 100%;
-        height: 100%;
+    .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;
-        }
+    .layout-news-text {
+        line-height: 1.5;
+        display: block;
+    }
 
-        img.layout-news-logo {
-            height: 70px;
-        }
-
-        .layout-news-button {
-            border: 2px solid #283738;
-            color: #283738;
-            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-link {
+        margin-left: .5rem;
+        line-height: 1.5;
     }
 
     .layout-news-close {
+        line-height: 1.5;
         cursor: pointer;
-        color: #ffffff;
-        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;
+        display: inline-flex;
         justify-content: center;
         align-items: center;
-        width: 34px;
-        height: 34px;
+        border-radius: 50%;
+        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;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/styles/app/_responsive.scss b/src/assets/styles/app/_responsive.scss
index bf4fde627..0a39331ce 100644
--- a/src/assets/styles/app/_responsive.scss
+++ b/src/assets/styles/app/_responsive.scss
@@ -5,160 +5,117 @@
     }
 }
 
-@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 {
-            margin-left: 0;
-        }
-    }
-
-    .layout-topbar {
-        height: 110px;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 0;
-        left: 0;
-        width: 100%;
-
-        .menu-button {
-            display: block;
-        }
-
-        .logo {
-            display: block;
-
-            img{
-                width: 150px;
+        &.layout-news-active {
+            .layout-content {
+                padding-top: 10rem;
             }
         }
-
-        .app-theme {
-            margin-left: 0;
-            margin-right: 23px;
-        }
-
-        .topbar-menu {
+    
+        .layout-topbar {
+            height: 8rem;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            padding: 0;
+            left: 0;
             width: 100%;
-            height: 40px;
-            margin: 0;
-
-            > li {
-                width: 25%;
-                margin-right: 0;
-
-                > a {
-                    display: flex;
-                    height: 100%;
+    
+            .menu-button {
+                display: block;
+            }
+    
+            .app-theme {
+                margin-left: 0;
+                margin-right: 23px;
+            }
+    
+            .topbar-menu {
+                width: 100%;
+                height: 3rem;
+                margin: 0;
+    
+                > li {
+                    width: 25%;
+                    margin-right: 0;
+                    position: static;
+    
+                    > a,
+                    > .p-link {
+                        display: flex;
+                        height: 100%;
+                        width: 100%;
+                        justify-content: center;
+                        align-items: center;
+                        border-radius: 0;
+                    }
+    
+                    &.topbar-submenu > ul {
+                        right: auto;
+                        width: 100vw;
+                        left: 0;
+                        top: 8rem;
+                    }
+                }
+            }
+        }
+    
+        .layout-sidebar {
+            top: 0;
+            z-index: 1102;
+            height: 100%;
+            transform: translateX(-100%);
+    
+            &.active {
+                transform: translateX(0);
+            }
+        }
+    
+        .layout-content {
+            margin-left: 0;
+            padding-top: 8rem;
+    
+            .content-section {
+                &.introduction {
+                    flex-direction: column;
+                }
+            }
+    
+            .video-container {
+                position: relative;
+                width: 100%;
+                height: 0;
+                padding-bottom: 56.25%;
+    
+                iframe {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
                     width: 100%;
-                    justify-content: center;
-                    align-items: center;
-                    border-radius: 0;
-                }
-
-                &.topbar-submenu > ul {
-                    top: 40px;
+                    height: 100%;
                 }
             }
         }
-    }
-
-    .layout-sidebar {
-        top: 0;
-        z-index: 1102;
-        height: 100%;
-        transform: translateX(-100%);
-
-        &.active {
-            transform: translateX(0);
-        }
-    }
-
-    .layout-content {
-        margin-left: 0;
-        padding-top: 110px;
-
-        .content-section {
-            &.introduction {
-                flex-direction: column;
-
-                .app-inputstyleswitch {
-                    margin-top: 1.5rem;
-                }
-            }
-        }
-
-        .video-container {
-            position: relative;
-            width: 100%;
-            height: 0;
-            padding-bottom: 56.25%;
-
-            iframe {
-                position: absolute;
-                top: 0;
-                left: 0;
+    
+        .layout-mask {
+            background-color: rgba(0, 0, 0, 0.1);
+    
+            &.layout-mask-active {
+                z-index: 1101;
                 width: 100%;
                 height: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                background-color: rgba(0, 0, 0, 0.4);
+                transition: background-color .5s;
             }
         }
-    }
-
-    .layout-mask {
-        background-color: rgba(0, 0, 0, 0.1);
-
-        &.layout-mask-active {
-            z-index: 998;
-            width: 100%;
-            height: 100%;
-            position: fixed;
-            top: 0;
-            left: 0;
-            background-color: rgba(0, 0, 0, 0.4);
-            transition: background-color .5s;
-        }
-    }
-
-    .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%;
+    
+        .layout-config {
+            &.layout-config-active {
+                width: 100%;
+            }
         }
     }
 
@@ -167,38 +124,6 @@
     }
 }
 
-@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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss
index 7e193abf7..eafc4970e 100644
--- a/src/assets/styles/app/_topbar.scss
+++ b/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;
diff --git a/src/main.js b/src/main.js
index 76161fef3..e1d46977d 100644
--- a/src/main.js
+++ b/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);
diff --git a/src/service/NewsService.js b/src/service/NewsService.js
new file mode 100644
index 000000000..06fe7b116
--- /dev/null
+++ b/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());
+    }
+}
\ No newline at end of file