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

Refactor #882

pull/4503/head
mertsincan 2023-09-25 11:05:27 +01:00
parent e204de32f4
commit 5e53cef422
11 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/styles/layout/_news.scss
View File

@ -4,12 +4,17 @@
left: 0; left: 0;
z-index: 1100; z-index: 1100;
width: 100%; width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 2rem; height: 2rem;
padding: 0 2rem; padding: 0 2rem;
.layout-news-container {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - var(--scrollbar-width, 0px));
height: 100%;
}
.layout-news-content { .layout-news-content {
flex: 1; flex: 1;
display: flex; display: flex;

1
assets/styles/layout/_responsive.scss
View File

@ -101,6 +101,7 @@
.blocked-scroll { .blocked-scroll {
overflow: hidden; overflow: hidden;
padding-right: var(--scrollbar-width);
} }
} }

3
assets/styles/layout/_topbar.scss
View File

@ -9,11 +9,12 @@
transition: background-color 1s; transition: background-color 1s;
.layout-topbar-inner { .layout-topbar-inner {
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 4rem; padding: 0 4rem;
height: 100%;
width: calc(100% - var(--scrollbar-width, 0px));
} }
&.layout-topbar-sticky { &.layout-topbar-sticky {

2
components/lib/blockui/BlockUI.vue
View File

@ -51,6 +51,7 @@ export default {
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
document.activeElement.blur(); document.activeElement.blur();
} else { } else {
this.mask = DomHandler.createElement('div', { this.mask = DomHandler.createElement('div', {
@ -92,6 +93,7 @@ export default {
if (this.fullScreen) { if (this.fullScreen) {
document.body.removeChild(this.mask); document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
} else { } else {
this.$refs.container.removeChild(this.mask); this.$refs.container.removeChild(this.mask);
} }

2
components/lib/calendar/Calendar.vue
View File

@ -1649,6 +1649,7 @@ export default {
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
disableModality() { disableModality() {
@ -1683,6 +1684,7 @@ export default {
if (!hasBlockerMasks) { if (!hasBlockerMasks) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
updateCurrentMetaData() { updateCurrentMetaData() {

2
components/lib/dialog/Dialog.vue
View File

@ -205,8 +205,10 @@ export default {
if (!this.modal) { if (!this.modal) {
if (this.maximized) { if (this.maximized) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} else { } else {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
} }
} }
}, },

3
components/lib/galleria/Galleria.vue
View File

@ -36,6 +36,7 @@ export default {
beforeUnmount() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
} }
this.mask = null; this.mask = null;
@ -52,6 +53,7 @@ export default {
onEnter(el) { onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
this.focus(); this.focus();
}, },
onBeforeLeave() { onBeforeLeave() {
@ -61,6 +63,7 @@ export default {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
this.containerVisible = false; this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
}, },
onActiveItemChange(index) { onActiveItemChange(index) {
if (this.activeIndex !== index) { if (this.activeIndex !== index) {

3
components/lib/image/Image.vue
View File

@ -94,6 +94,7 @@ export default {
onImageClick() { onImageClick() {
if (this.preview) { if (this.preview) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
this.maskVisible = true; this.maskVisible = true;
setTimeout(() => { setTimeout(() => {
this.previewVisible = true; this.previewVisible = true;
@ -164,6 +165,7 @@ export default {
}, },
onLeave() { onLeave() {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
this.$emit('hide'); this.$emit('hide');
}, },
onAfterLeave(el) { onAfterLeave(el) {
@ -182,6 +184,7 @@ export default {
this.rotate = 0; this.rotate = 0;
this.scale = 1; this.scale = 1;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
computed: { computed: {

2
components/lib/sidebar/Sidebar.vue
View File

@ -125,6 +125,7 @@ export default {
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
disableDocumentSettings() { disableDocumentSettings() {
@ -132,6 +133,7 @@ export default {
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
onKeydown(event) { onKeydown(event) {

16
layouts/AppNews.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div class="layout-news" :style="$appState.announcement.backgroundStyle"> <div class="layout-news" :style="$appState.announcement.backgroundStyle">
<i></i> <div class="layout-news-container">
<div class="layout-news-content"> <i></i>
<span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span> <div class="layout-news-content">
<a class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a> <span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
<a class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
</div>
<a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
<span class="pi pi-times"></span>
</a>
</div> </div>
<a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
<span class="pi pi-times"></span>
</a>
</div> </div>
</template> </template>

4
layouts/default.vue
View File

@ -43,6 +43,7 @@ export default {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.removeClass(document.body, 'blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();
} }
} }
@ -61,14 +62,17 @@ export default {
if (this.sidebarActive) { if (this.sidebarActive) {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.removeClass(document.body, 'blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
} else { } else {
this.sidebarActive = true; this.sidebarActive = true;
DomHandler.addClass(document.body, 'blocked-scroll'); DomHandler.addClass(document.body, 'blocked-scroll');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
onMaskClick() { onMaskClick() {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.removeClass(document.body, 'blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
}, },
hideNews(event) { hideNews(event) {
this.$appState.newsActive = false; this.$appState.newsActive = false;