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>
<div class="modal">
<div>
<div @click="handleClick">
<div class="modal-container">
<button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
<slot></slot>
</div>
</div>
@ -23,6 +24,10 @@ export default {
} else return;
event.preventDefault();
},
handleClick(event) {
if (event.target !== event.currentTarget) return;
this.$emit("close");
},
},
};
</script>
@ -37,6 +42,10 @@ export default {
}
.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>

3
src/components/PlaylistAddModal.vue
View file

@ -1,9 +1,6 @@
<template>
<ModalComponent>
<div class="flex">
<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">
<option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
</select>

5
src/components/ShareModal.vue
View file

@ -1,9 +1,6 @@
<template>
<ModalComponent>
<div class="flex">
<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">
<label v-t="'actions.with_timecode'" for="withTimeCode" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
@ -16,7 +13,7 @@
<label v-t="'actions.time_code'" />
<input class="input w-12" type="text" v-model="timeStamp" />
</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">
<button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
<button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />