mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-26 23:47:25 +00:00
Merge pull request #1408 from Bnyro/x
close dialogs when clicking the void
This commit is contained in:
commit
d26be6a7e0
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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()" />
|
||||
|
Loading…
Reference in New Issue
Block a user