TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1408 from Bnyro/x

Browse source 
close dialogs when clicking the void
This commit is contained in:
Bnyro 2022-09-08 22:58:06 +02:00 committed by GitHub
commit d26be6a7e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/ModalComponent.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<div class="modal"> <div class="modal">
<div> <div @click="handleClick">
<div class="modal-container"> <div class="modal-container">
<button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -23,6 +24,10 @@ export default {
} else return; } else return;
event.preventDefault(); event.preventDefault();
}, },
handleClick(event) {
if (event.target !== event.currentTarget) return;
this.$emit("close");
},
}, },
}; };
</script> </script>
@ -37,6 +42,10 @@ export default {
} }
.modal-container { .modal-container {
@apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw]; @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
}
.modal-container > button {
@apply absolute right-8 top-6;
} }
</style> </style>

3
src/components/PlaylistAddModal.vue
View file

@ -1,9 +1,6 @@
<template> <template>
<ModalComponent> <ModalComponent>
<div class="flex">
<span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" /> <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
<button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
</div>
<select class="select w-full mt-3" v-model="selectedPlaylist"> <select class="select w-full mt-3" v-model="selectedPlaylist">
<option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" /> <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
</select> </select>

5
src/components/ShareModal.vue
View file

@ -1,9 +1,6 @@
<template> <template>
<ModalComponent> <ModalComponent>
<div class="flex">
<h2 v-t="'actions.share'" /> <h2 v-t="'actions.share'" />
<button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
</div>
<div class="flex justify-between mt-4"> <div class="flex justify-between mt-4">
<label v-t="'actions.with_timecode'" for="withTimeCode" /> <label v-t="'actions.with_timecode'" for="withTimeCode" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" /> <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
@ -16,7 +13,7 @@
<label v-t="'actions.time_code'" /> <label v-t="'actions.time_code'" />
<input class="input w-12" type="text" v-model="timeStamp" /> <input class="input w-12" type="text" v-model="timeStamp" />
</div> </div>
<h3 class="mt-4" v-text="generatedLink" /> <a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
<div class="flex justify-end mt-4"> <div class="flex justify-end mt-4">
<button class="btn" v-t="'actions.follow_link'" @click="followLink()" /> <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
<button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" /> <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />