Refactor #882

primefaces · Sep 25, 2023 · 5e53cef · 5e53cef
1 parent e204de3
commit 5e53cef
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 11 deletions.
diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss
@@ -4,12 +4,17 @@
     left: 0;
     z-index: 1100;
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     height: 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 {
         flex: 1;
         display: flex;

diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss
@@ -101,6 +101,7 @@
 
     .blocked-scroll {
         overflow: hidden;
+        padding-right: var(--scrollbar-width);
     }
 }
 

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

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

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

diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
@@ -205,8 +205,10 @@ export default {
             if (!this.modal) {
                 if (this.maximized) {
                     DomHandler.addClass(document.body, 'p-overflow-hidden');
+                    document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
                 } else {
                     DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    document.body.style.removeProperty('--scrollbar-width');
                 }
             }
         },

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

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

diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
@@ -125,13 +125,15 @@ export default {
 
             if (this.blockScroll) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         disableDocumentSettings() {
             this.unbindOutsideClickListener();
 
             if (this.blockScroll) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         onKeydown(event) {

diff --git a/layouts/AppNews.vue b/layouts/AppNews.vue
@@ -1,13 +1,15 @@
 <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" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
+        <div class="layout-news-container">
+            <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" :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>
-        <a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
-            <span class="pi pi-times"></span>
-        </a>
     </div>
 </template>
 

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