mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-12-24 06:23:36 +00:00
refactor -> ModalComponent
This commit is contained in:
Bnyro
Kavin
parent
d360a52797
commit
4b4c7d0926
42
src/components/ModalComponent.vue
Normal file
42
src/components/ModalComponent.vue
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<div class="modal">
|
||||||
|
<div>
|
||||||
|
<div class="modal-container">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("keydown", this.handleKeyDown);
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
window.removeEventListener("keydown", this.handleKeyDown);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleKeyDown(event) {
|
||||||
|
if (event.code === "Escape") {
|
||||||
|
this.$emit("close");
|
||||||
|
} else return;
|
||||||
|
event.preventDefault();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.modal {
|
||||||
|
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal > div {
|
||||||
|
@apply table-cell align-middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
@apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw];
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,34 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="modal">
|
<ModalComponent>
|
||||||
<div>
|
<div class="flex">
|
||||||
<div class="modal-container">
|
<span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
|
||||||
<div class="flex">
|
<button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
|
||||||
<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>
|
|
||||||
<div class="flex justify-end mt-3">
|
|
||||||
<button
|
|
||||||
class="btn"
|
|
||||||
@click="handleClick(selectedPlaylist)"
|
|
||||||
ref="addButton"
|
|
||||||
v-t="'actions.add_to_playlist'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
<div class="flex justify-end mt-3">
|
||||||
|
<button
|
||||||
|
class="btn"
|
||||||
|
@click="handleClick(selectedPlaylist)"
|
||||||
|
ref="addButton"
|
||||||
|
v-t="'actions.add_to_playlist'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ModalComponent>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ModalComponent from "./ModalComponent.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
ModalComponent,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
videoId: {
|
videoId: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -53,12 +49,10 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleKeyDown(event) {
|
handleKeyDown(event) {
|
||||||
if (event.code === "Escape") {
|
if (event.code === "Enter") {
|
||||||
this.$emit("close");
|
|
||||||
} else if (event.code === "Enter") {
|
|
||||||
this.handleClick(this.selectedPlaylist);
|
this.handleClick(this.selectedPlaylist);
|
||||||
} else return;
|
event.preventDefault();
|
||||||
event.preventDefault();
|
}
|
||||||
},
|
},
|
||||||
handleClick(playlistId) {
|
handleClick(playlistId) {
|
||||||
if (!playlistId) {
|
if (!playlistId) {
|
||||||
@ -99,17 +93,3 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal {
|
|
||||||
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal > div {
|
|
||||||
@apply table-cell align-middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
@apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,31 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="modal">
|
<ModalComponent>
|
||||||
<div>
|
<h2 v-t="'actions.share'" />
|
||||||
<div class="modal-container">
|
<div class="flex justify-between mt-4">
|
||||||
<h2 v-t="'actions.share'" />
|
<label v-t="'actions.with_timecode'" for="withTimeCode" />
|
||||||
<div class="flex justify-between mt-4">
|
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
|
||||||
<label v-t="'actions.with_timecode'" for="withTimeCode" />
|
|
||||||
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<label v-t="'actions.piped_link'" />
|
|
||||||
<input type="checkbox" v-model="pipedLink" />
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between mt-2">
|
|
||||||
<label v-t="'actions.time_code'" />
|
|
||||||
<input class="input w-12" type="text" v-model="timeStamp" />
|
|
||||||
</div>
|
|
||||||
<h3 class="mt-4" v-text="generatedLink" />
|
|
||||||
<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()" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex justify-between">
|
||||||
|
<label v-t="'actions.piped_link'" />
|
||||||
|
<input type="checkbox" v-model="pipedLink" />
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between mt-2">
|
||||||
|
<label v-t="'actions.time_code'" />
|
||||||
|
<input class="input w-12" type="text" v-model="timeStamp" />
|
||||||
|
</div>
|
||||||
|
<h3 class="mt-4" v-text="generatedLink" />
|
||||||
|
<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()" />
|
||||||
|
</div>
|
||||||
|
</ModalComponent>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ModalComponent from "./ModalComponent.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
videoId: {
|
videoId: {
|
||||||
@ -37,6 +35,9 @@ export default {
|
|||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
ModalComponent,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
withTimeCode: true,
|
withTimeCode: true,
|
||||||
@ -45,19 +46,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener("keydown", this.handleKeyDown);
|
|
||||||
this.timeStamp = parseInt(this.currentTime);
|
this.timeStamp = parseInt(this.currentTime);
|
||||||
},
|
},
|
||||||
unmounted() {
|
|
||||||
window.removeEventListener("keydown", this.handleKeyDown);
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
handleKeyDown(event) {
|
|
||||||
if (event.code === "Escape") {
|
|
||||||
this.$emit("close");
|
|
||||||
} else return;
|
|
||||||
event.preventDefault();
|
|
||||||
},
|
|
||||||
followLink() {
|
followLink() {
|
||||||
window.open(this.generatedLink, "_blank").focus();
|
window.open(this.generatedLink, "_blank").focus();
|
||||||
},
|
},
|
||||||
@ -84,17 +75,3 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal {
|
|
||||||
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal > div {
|
|
||||||
@apply table-cell align-middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
@apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user