fix: apply offset padding to appbars when an overlay is open (#13723)

vuetifyjs · May 28, 2021 · febab14 · febab14
1 parent d0aea9c
commit febab14
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 31 deletions.
diff --git a/packages/vuetify/src/components/VApp/VApp.tsx b/packages/vuetify/src/components/VApp/VApp.tsx
@@ -15,7 +15,7 @@ export default defineComponent({
 
   props: makeProps({
     theme: String,
-    ...makeLayoutProps(),
+    ...makeLayoutProps({ fullHeight: true }),
   }),
 
   setup (props, { slots }) {

diff --git a/packages/vuetify/src/components/VApp/__tests__/__snapshots__/VApp.spec.ts.snap b/packages/vuetify/src/components/VApp/__tests__/__snapshots__/VApp.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VApp should allow a custom id 1`] = `
-<div class="v-application v-theme--light v-layout v-locale--is-ltr"
+<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
      data-app="true"
      id="inspire"
 >
@@ -11,7 +11,7 @@ exports[`VApp should allow a custom id 1`] = `
 `;
 
 exports[`VApp should match a snapshot 1`] = `
-<div class="v-application v-theme--light v-layout v-locale--is-ltr"
+<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
      data-app="true"
 >
   <div class="v-application__wrap">

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass
@@ -9,9 +9,10 @@
   max-width: 100%
   overflow: hidden
   padding-left: $app-bar-padding-start
-  padding-right: $app-bar-padding-end
+  padding-right: calc(#{$app-bar-padding-end} + var(--v-scrollbar-offset))
   position: fixed
   transition: $app-bar-transition
+  transition-property: height, transform
 
   @include border($app-bar-border...)
   @include rounded($app-bar-border-radius)

diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -27,21 +27,24 @@
       > .v-card__actions
         padding: $dialog-card-actions-padding
 
-.v-dialog--fullscreen .v-overlay__content
-  border-radius: 0
-  margin: 0
-  width: 100%
-  height: 100%
-  overflow-y: auto
-  top: 0
-  left: 0
+.v-dialog--fullscreen
+  --v-scrollbar-offset: 0px
 
-  > .v-sheet
-    min-height: 100%
-    min-width: 100%
-    margin: 0 !important
-    padding: 0 !important
-    border-radius: 0 !important
+  .v-overlay__content
+    border-radius: 0
+    margin: 0
+    width: 100%
+    height: 100%
+    overflow-y: auto
+    top: 0
+    left: 0
+
+    > .v-sheet
+      min-height: 100%
+      min-width: 100%
+      margin: 0 !important
+      padding: 0 !important
+      border-radius: 0 !important
 
 .v-dialog--scrollable .v-overlay__content,
 .v-dialog--scrollable .v-overlay__content > form

diff --git a/packages/vuetify/src/components/VLayout/VLayout.sass b/packages/vuetify/src/components/VLayout/VLayout.sass
@@ -1,8 +1,13 @@
 @import './index'
 
 .v-layout
+  --v-scrollbar-offset: 0px
   position: relative
   display: flex
   flex: 1 1 auto
   overflow: auto
   z-index: 0
+
+  &--full-height
+    --v-scrollbar-offset: inherit
+    height: 100%
diff --git a/packages/vuetify/src/components/VLayout/VLayout.tsx b/packages/vuetify/src/components/VLayout/VLayout.tsx
@@ -17,12 +17,9 @@ export default defineComponent({
     const { layoutClasses, getLayoutItem, items } = createLayout(props)
 
     useRender(() => (
-      <div
-        class={layoutClasses.value}
-        style={{
-          height: props.fullHeight ? '100vh' : undefined,
-        }}
-      >{ slots.default?.() }</div>
+      <div class={ layoutClasses.value }>
+        { slots.default?.() }
+      </div>
     ))
 
     return {

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -123,23 +123,23 @@ class BlockScrollStrategy implements ScrollStrategy {
 
   enable () {
     this.scrollElements = getScrollParents(this.content.value)
+    const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth
 
-    document.documentElement.style.setProperty(
-      '--v-scrollbar-offset',
-      convertToUnit(window.innerWidth - document.documentElement.offsetWidth)
-    )
+    document.documentElement.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))
 
     this.scrollElements.forEach((el, i) => {
       this.initialOverflow[i] = el.style.overflowY
       el.style.overflowY = 'hidden'
+      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))
     })
   }
 
   disable () {
     this.scrollElements.forEach((el, i) => {
       el.style.overflowY = this.initialOverflow[i]
+      el.style.removeProperty('--v-scrollbar-offset')
     })
-    document.documentElement.style.setProperty('--v-scrollbar-offset', '')
+    document.documentElement.style.removeProperty('--v-scrollbar-offset')
   }
 }
 

diff --git a/packages/vuetify/src/composables/layout.ts b/packages/vuetify/src/composables/layout.ts
@@ -115,7 +115,7 @@ const generateLayers = (
 }
 
 // TODO: Remove undefined from layout and overlaps when vue typing for required: true prop is fixed
-export function createLayout (props: { layout?: string[], overlaps?: string[] }) {
+export function createLayout (props: { layout?: string[], overlaps?: string[], fullHeight?: boolean }) {
   const registered = ref<string[]>([])
   const positions = new Map<string, Ref<Position>>()
   const layoutSizes = new Map<string, Ref<number | string>>()
@@ -236,8 +236,13 @@ export function createLayout (props: { layout?: string[], overlaps?: string[] })
     items,
   })
 
+  const layoutClasses = computed(() => [
+    'v-layout',
+    { 'v-layout--full-height': props.fullHeight },
+  ])
+
   return {
-    layoutClasses: ref('v-layout'),
+    layoutClasses,
     getLayoutItem,
     items,
   }

diff --git a/packages/vuetify/src/styles/elements/_global.sass b/packages/vuetify/src/styles/elements/_global.sass
@@ -14,6 +14,7 @@ html.overflow-y-hidden
 
 :root
   --v-theme-overlay-multiplier: 1
+  --v-scrollbar-offset: 0px
 
 // iOS Safari hack to allow click events on body
 @supports (-webkit-touch-callout: none)