Skip to content

Commit 59ad117

Browse files
author
DerGoogler
committed
fix modal
1 parent dff4a14 commit 59ad117

File tree

2 files changed

+110
-71
lines changed

2 files changed

+110
-71
lines changed

‎docs/components/Dialog.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup>
2+
import { VPButton } from 'vitepress/theme'
3+
4+
defineProps([
5+
"title",
6+
"open",
7+
"onClose",
8+
"onOpen",
9+
"contentStyle"
10+
]);
11+
</script>
12+
13+
<template>
14+
<Teleport v-if="open" to="body">
15+
<Transition name="modal">
16+
<div v-show="open" class="modal-mask">
17+
<div class="modal-container">
18+
<h2 class="modal-title">{{ title }}</h2>
19+
<div class="modal-content" :style="contentStyle">
20+
<slot />
21+
</div>
22+
<div class="model-footer">
23+
<VPButton size="medium" theme="alt" text="Close" @click="onClose" />
24+
</div>
25+
</div>
26+
</div>
27+
</Transition>
28+
</Teleport>
29+
</template>
30+
31+
<style scoped>
32+
.modal-title {
33+
display: flex;
34+
letter-spacing: -0.02em;
35+
line-height: 40px;
36+
font-size: 32px;
37+
margin: 16px 26px;
38+
/*margin-bottom: 16px;*/
39+
}
40+
41+
.modal-mask {
42+
position: fixed;
43+
z-index: 200;
44+
top: 0;
45+
left: 0;
46+
width: 100%;
47+
height: 100%;
48+
background-color: rgba(0, 0, 0, 0.5);
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
transition: opacity 0.3s ease;
53+
}
54+
55+
.modal-content {
56+
overflow: scroll;
57+
height: inherit;
58+
}
59+
60+
.modal-container {
61+
width: 88%;
62+
height: 88%;
63+
max-width: 1152px;
64+
margin: auto;
65+
display: flex;
66+
flex-direction: column;
67+
/*padding: 20px 30px;*/
68+
background-color: var(--vp-c-bg);
69+
border-radius: 12px;
70+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
71+
transition: all 0.3s ease;
72+
}
73+
74+
.model-footer {
75+
margin: 16px 26px;
76+
text-align: right;
77+
}
78+
79+
.modal-enter-from,
80+
.modal-leave-to {
81+
opacity: 0;
82+
}
83+
84+
.modal-enter-from .modal-container,
85+
.modal-leave-to .modal-container {
86+
transform: scale(1.1);
87+
}
88+
</style>

‎docs/components/repository/RepoHeader.vue‎

Lines changed: 22 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
<script setup>
22
import { ref } from 'vue'
3+
import Dialog from '../Dialog.vue'
34
import { VPTeamMembers, VPButton } from 'vitepress/theme'
45
56
defineProps(["repo", "internalRepo"]);
67
78
const showModal = ref(false)
9+
10+
const openModal = () => {
11+
document.body.style.overflow = 'hidden'
12+
showModal.value = true
13+
}
14+
15+
const closeModal = () => {
16+
document.body.style.overflow = 'unset'
17+
showModal.value = false
18+
}
819
</script>
920

1021
<template>
@@ -15,27 +26,22 @@ const showModal = ref(false)
1526
<div v-if="repo.submission || repo.support || repo.donate" :class="$style.repoActions">
1627
<VPButton tag="a" v-if="repo.submission" text="Submit Module" size="medium" theme="brand" :href="repo.submission" />
1728
<VPButton tag="a" v-if="repo.support" text="Support" size="medium" theme="alt" :href="repo.support" />
18-
<VPButton v-if="internalRepo.members" text="Team" size="medium" theme="alt" @click="showModal = true" />
29+
<VPButton v-if="internalRepo.members" text="Team" size="medium" theme="alt" @click="openModal" />
1930
<VPButton tag="a" v-if="repo.donate" text="Donate" size="medium" theme="sponsor" :href="repo.donate" />
2031
</div>
2132
</div>
22-
<Teleport v-if="internalRepo.members" to="body">
23-
<Transition name="modal">
24-
<div v-show="showModal" class="modal-mask">
25-
<div class="modal-container">
26-
<div>
27-
<h2 class="modal-title">Repository Members</h2>
28-
<VPTeamMembers size="small" :members="internalRepo.members" />
29-
</div>
30-
<div class="model-footer">
31-
<VPButton size="medium" theme="alt" text="Close" @click="showModal = false" />
32-
</div>
33-
</div>
34-
</div>
35-
</Transition>
36-
</Teleport>
33+
<Dialog :open="showModal" :onClose="closeModal" :onOpen="openModal" :contentStyle="{ padding: '16px 26px' }" title="Repository Member">
34+
<VPTeamMembers size="small" :members="internalRepo.members" />
35+
</Dialog>
3736
</template>
3837

38+
<style scoped>
39+
a {
40+
color: inherit !important;
41+
text-decoration: none !important;
42+
}
43+
</style>
44+
3945
<style module>
4046
.repoMetaContainer {
4147
padding-bottom: 16px;
@@ -71,58 +77,3 @@ const showModal = ref(false)
7177
color: var(--vp-c-text-2);
7278
}
7379
</style>
74-
75-
<style scoped>
76-
a {
77-
color: inherit !important;
78-
text-decoration: inherit !important;
79-
}
80-
81-
.modal-title {
82-
display: flex;
83-
letter-spacing: -0.02em;
84-
line-height: 40px;
85-
font-size: 32px;
86-
margin-bottom: 16px;
87-
}
88-
89-
.modal-mask {
90-
position: fixed;
91-
z-index: 200;
92-
top: 0;
93-
left: 0;
94-
width: 100%;
95-
height: 100%;
96-
background-color: rgba(0, 0, 0, 0.5);
97-
display: flex;
98-
align-items: center;
99-
justify-content: center;
100-
transition: opacity 0.3s ease;
101-
}
102-
103-
.modal-container {
104-
width: 88%;
105-
max-width: 1152px;
106-
margin: auto;
107-
padding: 20px 30px;
108-
background-color: var(--vp-c-bg);
109-
border-radius: 12px;
110-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
111-
transition: all 0.3s ease;
112-
}
113-
114-
.model-footer {
115-
margin-top: 16px;
116-
text-align: right;
117-
}
118-
119-
.modal-enter-from,
120-
.modal-leave-to {
121-
opacity: 0;
122-
}
123-
124-
.modal-enter-from .modal-container,
125-
.modal-leave-to .modal-container {
126-
transform: scale(1.1);
127-
}
128-
</style>

0 commit comments

Comments
 (0)