Skip to content

Commit f5d449c

Browse files
Afriq Yasin RamadhanAfriq Yasin Ramadhan
authored andcommitted
fix: replace body-transform with margin to avoid issue when combine with modal
1 parent 285533d commit f5d449c

File tree

5 files changed

+131
-12
lines changed

5 files changed

+131
-12
lines changed

src/components/contextual-bar/ContextualBar.vue

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ import {
7878
computed,
7979
onMounted,
8080
onBeforeUnmount,
81+
ref,
8182
} from 'vue-demi'
8283
import type { AlignVariant } from '../nav'
8384
import { useVModel } from '../input'
@@ -130,7 +131,8 @@ const emit = defineEmits<{
130131
'hide': [],
131132
}>()
132133
133-
const model = useVModel(props)
134+
const model = useVModel(props)
135+
const contextbar = ref<HTMLDivElement>()
134136
135137
function close (event: Event) : void {
136138
emit('close', event)
@@ -168,19 +170,24 @@ const styleBg = computed<StyleValue>(() => {
168170
})
169171
170172
function onEnter (target: HTMLDivElement) {
171-
target.style.setProperty('transform', `translateY(-${target.clientHeight}px)`)
173+
// target.style.setProperty('transform', `translateY(-${target.clientHeight}px)`)
174+
contextbar.value = target
172175
173176
document.body.classList.add('contextual-bar__body--active')
174-
document.body.style.setProperty('transform', `translateY(${target.clientHeight}px)`)
177+
// document.body.style.setProperty('transform', `translateY(${target.clientHeight}px)`)
178+
document.body.style.setProperty('margin-top', `${target.clientHeight}px`)
179+
document.body.style.setProperty('--p-contextual-bar-height', `${target.clientHeight}px`)
175180
176181
emit('show')
177182
}
178183
179-
function onLeave (target: HTMLDivElement) {
180-
target.style.setProperty('transform', 'translateY(0px)')
184+
function onLeave () {
185+
// target.style.setProperty('transform', 'translateY(0px)')
181186
182187
document.body.classList.remove('contextual-bar__body--active')
183-
document.body.style.removeProperty('transform')
188+
// document.body.style.removeProperty('transform')
189+
document.body.style.removeProperty('margin-top')
190+
document.body.style.removeProperty('--p-contextual-bar-height')
184191
185192
emit('hide')
186193
}
@@ -205,11 +212,26 @@ defineSlots<{
205212
.contextual-bar {
206213
--p-contextual-bar-bg-image: none;
207214
--p-contextual-bar-bg-dark-image: none;
215+
--p-contextual-bar-fixed-top: theme(spacing.0);
208216
209-
@apply fixed z-50 top-0 left-0 p-6 w-full max-w-[100vw];
217+
@apply fixed z-50 top-[var(--p-contextual-bar-fixed-top)] left-0 p-6 w-full max-w-[100vw] transition-all;
210218
211219
&__body {
212-
@apply transition-transform;
220+
@apply transition-all;
221+
222+
&--active {
223+
@apply transition-all;
224+
225+
&:not(&-hide) {
226+
.navbar--fixed {
227+
@apply mt-[var(--p-contextual-bar-height)] transition-all;
228+
}
229+
230+
.sidebar--fixed {
231+
@apply mt-[var(--p-contextual-bar-height)] transition-all;
232+
}
233+
}
234+
}
213235
}
214236
215237
&__wrapper {

src/components/contextual-bar/index.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ function example1 () {
3232
}, 3000)
3333
}
3434

35+
function scrolled (height) {
36+
console.log('height', height)
37+
}
38+
3539
onMounted (() => {
3640
document.body?.style.removeProperty('transform')
3741
})
@@ -286,7 +290,8 @@ To align Contextual Bar content, use align prop. Available value are `left`, `ri
286290
v-model="sample1"
287291
color="light"
288292
title="Hey! This is Title Text and telling less as possible"
289-
background-url="../../public/assets/images/img-contextualbar-bg.svg">
293+
background-url="../../public/assets/images/img-contextualbar-bg.svg"
294+
@onContextualScrolled="scrolled">
290295
<template #icon>
291296
<img src="../avatar/assets/avatar.png" />
292297
</template>
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
layout: false
3+
---
4+
5+
<script setup>
6+
import pButton from '../button/Button.vue'
7+
import pModal from '../modal/Modal.vue'
8+
import pNavbar from '../navbar/Navbar.vue'
9+
import pNavbarBrand from '../navbar/NavbarBrand.vue'
10+
import pNavbarNav from '../navbar/NavbarNav.vue'
11+
import pSidebar from '../sidebar/Sidebar.vue'
12+
import pSidebarBrand from '../sidebar/SidebarBrand.vue'
13+
import pSidebarNav from '../sidebar/SidebarNav.vue'
14+
import pNavItem from '../nav/NavItem.vue'
15+
import pPage from '../page/Page.vue'
16+
import pHeading from '../heading/Heading.vue'
17+
import pContextualBar from './ContextualBar.vue'
18+
import pDropzone from '../dropzone/Dropzone.vue'
19+
import pCheckbox from '../checkbox/Checkbox.vue'
20+
import pSheet from '../sheet/Sheet.vue'
21+
import pFormGroup from '../form-group/FormGroup.vue'
22+
import pInput from '../input/Input.vue'
23+
import IconClose from '@privyid/persona-icon/vue/close/16.vue'
24+
import IconEdit from '@privyid/persona-icon/vue/edit/16.vue'
25+
import { usePreview } from '../cropper/utils/use-preview'
26+
import { reactive, ref } from 'vue-demi'
27+
import { withBase } from 'vitepress'
28+
29+
const sample = ref(false)
30+
const modal = ref(false)
31+
</script>
32+
33+
<p-contextual-bar v-model="sample" title="Hey! This is Title Text">
34+
<template #action>
35+
<p-button size="sm" color="info">Button text</p-button>
36+
</template>
37+
</p-contextual-bar>
38+
39+
<p-navbar fixed>
40+
<p-navbar-nav align="right">
41+
<p-nav-item active>Label</p-nav-item>
42+
<p-nav-item>Label</p-nav-item>
43+
<p-nav-item>Label</p-nav-item>
44+
</p-navbar-nav>
45+
</p-navbar>
46+
47+
<div class="flex w-full h-full">
48+
<p-sidebar toggleable="lg" fixed>
49+
<template #brand>
50+
<p-sidebar-brand>
51+
<img src="../../public/assets/images/icon-privy.svg" />
52+
</p-sidebar-brand>
53+
</template>
54+
<p-sidebar-nav>
55+
<p-nav-item active>Documents</p-nav-item>
56+
<p-nav-item>Contacts</p-nav-item>
57+
<p-nav-item>Structure</p-nav-item>
58+
</p-sidebar-nav>
59+
</p-sidebar>
60+
<p-page expand="lg">
61+
<div class="w-6/12 mx-auto">
62+
<p-heading element="h5" class="mb-5">
63+
A wonderful serenity has taken possession
64+
</p-heading>
65+
<p class="pb-6">
66+
<div>
67+
<p-button color="info" @click="modal=true">Open modal</p-button>
68+
</div>
69+
My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
70+
<p-button size="sm" color="info" @click="sample=true">Click</p-button>
71+
</p>
72+
<p class="pb-6">
73+
My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
74+
</p>
75+
<p>
76+
My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
77+
</p>
78+
</div>
79+
</p-page>
80+
</div>
81+
82+
<p-modal
83+
v-model="modal"
84+
title="Modal Title"
85+
text="This is place holder text. The basic dialog for modals
86+
should contain only valuable and relevant information."
87+
size="full"
88+
header-class="px-6"
89+
body-class="p-6">
90+
</p-modal>

src/components/navbar/Navbar.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ provide(NAVBAR_SETTINGS, {
9191
.navbar {
9292
--p-navbar-z-index: theme(zIndex.fixed);
9393
--p-navbar-sticky-top: theme(spacing.0);
94+
--p-navbar-fixed-top: theme(spacing.0);
9495
--p-navbar-collapse-max-height: 20rem; /** 320px */
9596
--p-navbar-padding-x: theme(spacing.3);
9697
--p-navbar-padding-left: var(--p-navbar-padding-x);
@@ -108,7 +109,7 @@ provide(NAVBAR_SETTINGS, {
108109
box-shadow: var(--p-navbar-shadow);
109110
110111
&&--fixed {
111-
@apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
112+
@apply fixed left-0 top-[var(--p-navbar-fixed-top)] w-full z-[var(--p-navbar-z-index)] transition-all;
112113
}
113114
114115
&&--sticky {

src/components/sidebar/Sidebar.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ provide(SIDEBAR_SETTINGS, {
133133
--p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
134134
--p-sidebar-z-index: theme(zIndex.fixed);
135135
--p-sidebar-sticky-top: theme(spacing.0);
136+
--p-sidebar-fixed-top: theme(spacing.0);
136137
--p-sidebar-padding-x: theme(spacing.2);
137138
--p-sidebar-padding-left: var(--p-sidebar-padding-x);
138139
--p-sidebar-padding-right: var(--p-sidebar-padding-x);
@@ -165,8 +166,8 @@ provide(SIDEBAR_SETTINGS, {
165166
* Fixed sidebar
166167
*/
167168
&&--fixed {
168-
@apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg;
169-
/* box-shadow: var(--p-sidebar-shadow); */
169+
@apply fixed z-[var(--p-sidebar-z-index)] top-[var(--p-sidebar-fixed-top)] h-full transition-all;
170+
box-shadow: var(--p-sidebar-shadow);
170171
171172
.sidebar__menus {
172173
@apply grow h-full overflow-y-auto py-2;

0 commit comments

Comments
 (0)