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

news banner added

pull/2404/head
Tuğçe Küçükoğlu 2022-04-07 15:57:53 +03:00
parent ba1733696c
commit 36bff2ba79
10 changed files with 274 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@ -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>

65
src/AppNews.vue Normal file
View File

@ -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>

33
src/AppWrapper.vue
View File

@ -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>

7
src/Home.vue
View File

@ -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>

2
src/assets/styles/app/_content.scss
View File

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

95
src/assets/styles/app/_news.scss
View File

@ -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;
}
}

283
src/assets/styles/app/_responsive.scss
View File

@ -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;
}
}
}

4
src/assets/styles/app/_topbar.scss
View File

@ -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;

2
src/main.js
View File

@ -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);

6
src/service/NewsService.js Normal file
View File

@ -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());
}
}