Skip to content

Commit eaf478b

Browse files
aminnausinaminnausin
committed
feat: generalise modal better
1 parent e7f9926 commit eaf478b

10 files changed

Lines changed: 32 additions & 85 deletions

File tree

‎resources/js/components/dashboard/DashboardLibraries.vue‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -271,17 +271,11 @@ onMounted(() => {});
271271
/>
272272
</section>
273273
<ModalBase :modalData="confirmModal" :action="submitDelete">
274-
<template #content>
275-
<div class="relative w-auto pb-8">
276-
<p>Are you sure you want to delete this Library?</p>
277-
</div>
278-
</template>
274+
<template #description> Are you sure you want to delete this Library? </template>
279275
</ModalBase>
280276
<ModalBase :modalData="editFolderModal" :useControls="false">
281277
<template #content>
282-
<div class="pt-2">
283-
<EditFolder v-if="cachedFolder" :folder="cachedFolder" @handleFinish="handleSeriesUpdate" />
284-
</div>
278+
<EditFolder v-if="cachedFolder" :folder="cachedFolder" @handleFinish="handleSeriesUpdate" />
285279
</template>
286280
</ModalBase>
287281
</template>

‎resources/js/components/dashboard/DashboardLibraryFolders.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,7 @@ onMounted(() => {
112112
/>
113113
<ModalBase :modalData="editFolderModal" :useControls="false">
114114
<template #content>
115-
<div class="pt-2">
116-
<EditFolder v-if="cachedFolder" :folder="cachedFolder" @handleFinish="handleSeriesUpdate" />
117-
</div>
115+
<EditFolder v-if="cachedFolder" :folder="cachedFolder" @handleFinish="handleSeriesUpdate" />
118116
</template>
119117
</ModalBase>
120118
</template>

‎resources/js/components/dashboard/DashboardTasks.vue‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -255,17 +255,9 @@ onUnmounted(async () => {
255255
/>
256256
</section>
257257
<ModalBase :modalData="cancelModal" :action="submitCancel">
258-
<template #content>
259-
<div class="relative w-auto pb-8">
260-
<p>Are you sure you want to cancel this task and all of its sub tasks?</p>
261-
</div>
262-
</template>
258+
<template #description> Are you sure you want to cancel this task and all of its sub tasks? </template>
263259
</ModalBase>
264260
<ModalBase :modalData="deleteModal" :action="submitDelete">
265-
<template #content>
266-
<div class="relative w-auto pb-8">
267-
<p>Are you sure you want to delete this task and all of its sub tasks?</p>
268-
</div>
269-
</template>
261+
<template #description>Are you sure you want to delete this task and all of its sub tasks? </template>
270262
</ModalBase>
271263
</template>

‎resources/js/components/dashboard/DashboardUsers.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,6 @@ onMounted(() => {
163163
/>
164164
</section>
165165
<ModalBase :modalData="confirmModal" :action="submitDelete">
166-
<template #content>
167-
<div class="relative w-auto pb-8">
168-
<p>Are you sure you want to remove this user?</p>
169-
</div>
170-
</template>
166+
<template #description> Are you sure you want to remove this user? </template>
171167
</ModalBase>
172168
</template>

‎resources/js/components/panels/VideoSidebar.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -99,18 +99,14 @@ watch(
9999
<h3 v-show="stateRecords.length < 1" class="text-gray-500 dark:text-gray-400 tracking-wider w-full py-2">Nothing Yet...</h3>
100100
</section>
101101
<ModalBase :modalData="shareModal">
102-
<template #content>
103-
<div class="pb-2">Copy link to clipboard to share it.</div>
104-
</template>
102+
<template #description> Copy link to clipboard to share it.</template>
105103
<template #controls>
106104
<ButtonClipboard :text="shareLink" />
107105
</template>
108106
</ModalBase>
109107
<ModalBase :modalData="editFolderModal" :useControls="false">
110108
<template #content>
111-
<div class="pt-2">
112-
<EditFolder v-if="cachedFolder" :folder="cachedFolder" @handleFinish="handleSeriesUpdate" />
113-
</div>
109+
<EditFolder v-if="cachedFolder" :folder="cachedFolder" @handleFinish="handleSeriesUpdate" />
114110
</template>
115111
</ModalBase>
116112
</div>

‎resources/js/components/pinesUI/ModalBase.vue‎

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
2+
import { ref, useTemplateRef, watch } from 'vue';
23
import { OnClickOutside } from '@vueuse/components';
34
import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
45
import { useAppStore } from '@/stores/AppStore';
5-
import { ref, useTemplateRef, watch } from 'vue';
66
77
import ButtonCorner from '@/components/inputs/ButtonCorner.vue';
8+
import ButtonForm from '@/components/inputs/ButtonForm.vue';
89
910
const props = withDefaults(
1011
defineProps<{
@@ -70,39 +71,24 @@ watch(
7071
<OnClickOutside
7172
@trigger="modalData.toggleModal(false)"
7273
@keydown.esc="modalData.toggleModal(false)"
73-
class="drop-shadow-md m-auto w-full p-6 bg-white dark:bg-neutral-800/90 backdrop-blur-lg border shadow-lg border-neutral-200 dark:border-neutral-700 sm:max-w-lg xl:max-w-xl 3xl:max-w-2xl rounded-md sm:rounded-lg"
74+
class="gap-4 flex flex-col drop-shadow-md m-auto w-full p-6 bg-white dark:bg-neutral-800/90 backdrop-blur-lg border shadow-lg border-neutral-200 dark:border-neutral-700 sm:max-w-lg xl:max-w-xl 3xl:max-w-2xl rounded-md sm:rounded-lg"
7475
tabindex="-1"
7576
>
76-
<div class="flex items-center justify-between pb-3">
77-
<h3 ref="modalTitle" class="text-xl font-semibold scroll-mt-16 sm:scroll-mt-12 me-8">{{ modalData?.title ?? 'Modal Title' }}</h3>
78-
<ButtonCorner @click="modalData.toggleModal(false)" />
79-
</div>
80-
<slot name="content">
81-
<div class="relative w-auto pb-8">
82-
<p>This is placeholder text. Replace it with your own content.</p>
83-
</div>
84-
</slot>
77+
<section class="flex flex-wrap gap-2 items-center">
78+
<h3 ref="modalTitle" class="text-xl font-semibold scroll-mt-16 sm:scroll-mt-12 flex-1">{{ modalData?.title ?? 'Modal Title' }}</h3>
79+
<ButtonCorner @click="modalData.toggleModal(false)" class="!m-0 !static" />
80+
<p class="text-neutral-500 dark:text-neutral-400 text-sm w-full" v-if="$slots.description">
81+
<slot name="description"> </slot>
82+
</p>
83+
</section>
84+
<slot name="content"> </slot>
8585
<slot v-if="useControls" name="controls">
86-
<div class="relative flex flex-col-reverse sm:flex-row sm:justify-end gap-2">
87-
<button
88-
@click="modalData.toggleModal(false)"
89-
type="button"
90-
class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border dark:border-neutral-600 rounded-md focus:outline-none"
91-
:class="'focus:ring-1 focus:ring-neutral-100 dark:focus:ring-neutral-400 focus:ring-offset-1 hover:bg-neutral-100 dark:hover:bg-neutral-900'"
92-
:disabled="processing || isProcessing"
93-
>
94-
Cancel
95-
</button>
96-
<button
97-
@click="submitModal(action, modalData)"
98-
type="button"
99-
class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none"
100-
:class="'focus:ring-1 focus:ring-violet-900 focus:ring-offset-1 bg-neutral-950 hover:bg-neutral-800 dark:hover:bg-neutral-900 '"
101-
:disabled="processing || isProcessing"
102-
>
86+
<section class="relative flex flex-col-reverse sm:flex-row sm:justify-end gap-2">
87+
<ButtonForm type="button" variant="reset" @click="modalData.toggleModal(false)" :disabled="processing || isProcessing"> Cancel </ButtonForm>
88+
<ButtonForm type="button" variant="submit" @click="submitModal(action, modalData)" :disabled="processing || isProcessing">
10389
{{ modalData.submitText }}
104-
</button>
105-
</div>
90+
</ButtonForm>
91+
</section>
10692
</slot>
10793
</OnClickOutside>
10894
</UseFocusTrap>

‎resources/js/components/video/VideoInfoPanel.vue‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -263,22 +263,17 @@ watch(
263263
</section>
264264
<ModalBase :modalData="editFolderModal" :useControls="false">
265265
<template #content>
266-
<div class="pt-2">
267-
<EditFolder :folder="stateFolder" @handleFinish="handleSeriesUpdate" />
268-
</div>
266+
<EditFolder :folder="stateFolder" @handleFinish="handleSeriesUpdate" />
269267
</template>
270268
</ModalBase>
271269
<ModalBase :modalData="editVideoModal" :useControls="false">
272270
<template #content>
273-
<div class="pt-2">
274-
<EditVideo :video="stateVideo" @handleFinish="handleVideoDetailsUpdate" />
275-
</div>
271+
<EditVideo :video="stateVideo" @handleFinish="handleVideoDetailsUpdate" />
276272
</template>
277273
</ModalBase>
278274
<ModalBase :modalData="shareVideoModal">
279-
<template #content>
280-
<div class="py-3">Copy link to clipboard to share it.</div>
281-
</template>
275+
<template #description> Copy link to clipboard to share it.</template>
276+
282277
<template #controls>
283278
<ButtonClipboard :text="videoURL" />
284279
</template>

‎resources/js/components/video/VideoLyrics.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -222,9 +222,7 @@ watch(() => stateVideo.value, resetComponent);
222222
</div>
223223
<ModalBase :modalData="editLyricsModal" :useControls="false">
224224
<template #content>
225-
<div class="pt-2">
226-
<EditLyrics :video="stateVideo" @handleFinish="handleLyricsUpdated" />
227-
</div>
225+
<EditLyrics :video="stateVideo" @handleFinish="handleLyricsUpdated" />
228226
</template>
229227
</ModalBase>
230228
</template>

‎resources/js/views/HistoryView.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,7 @@ onMounted(() => {
106106
/>
107107
</section>
108108
<ModalBase :modalData="confirmModal" :action="submitDelete">
109-
<template #content>
110-
<div class="relative w-auto pb-8">
111-
<p>Are you sure you want to delete this record?</p>
112-
</div>
113-
</template>
109+
<template #description> Are you sure you want to delete this record? </template>
114110
</ModalBase>
115111
</template>
116112
<template v-slot:sidebar>

‎resources/js/views/VideoView.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -210,15 +210,11 @@ watch(() => stateVideo.value, setVideoAsDocumentTitle, { immediate: true });
210210

211211
<ModalBase :modalData="editVideoModal" :useControls="false">
212212
<template #content>
213-
<div class="pt-2">
214-
<EditVideo v-if="cachedVideo" :video="cachedVideo" @handleFinish="handleVideoDetailsUpdate" />
215-
</div>
213+
<EditVideo v-if="cachedVideo" :video="cachedVideo" @handleFinish="handleVideoDetailsUpdate" />
216214
</template>
217215
</ModalBase>
218216
<ModalBase :modalData="shareVideoModal">
219-
<template #content>
220-
<div class="py-3">Copy link to clipboard to share it.</div>
221-
</template>
217+
<template #description> Copy link to clipboard to share it.</template>
222218
<template #controls>
223219
<ButtonClipboard :text="cachedVideoUrl" />
224220
</template>

0 commit comments

Comments
 (0)