99 lines
No EOL
2.3 KiB
Vue
99 lines
No EOL
2.3 KiB
Vue
<template>
|
|
<v-expand-transition>
|
|
<v-card class="ma-3" v-show="locationLink" flat>
|
|
<v-container>
|
|
<slot/>
|
|
<v-row cols="12" class="qr-container ma-3">
|
|
<v-col cols="auto" v-if="$slots.qrCode">
|
|
<slot name="qrCode"/>
|
|
</v-col>
|
|
<v-col align-self="center" class="public-link">
|
|
<div class="link">{{ locationLink }}</div>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row align="center" class="mt-0 pt-0">
|
|
<v-col align="center" class="mt-0 pt-0">
|
|
<v-btn
|
|
id="btn-copy-room-link"
|
|
:color="publicRoomLinkCopied ? '#DEE6FF' : 'black'"
|
|
depressed
|
|
@click.stop="copyRoomLink"
|
|
:class="{'filled-button' : true, 'link-copied-in-place' : publicRoomLinkCopied}"
|
|
>{{ $t(`room_info.${publicRoomLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
|
|
>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card>
|
|
</v-expand-transition>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
locationLink: {
|
|
type: String
|
|
},
|
|
i18nCopyLinkKey: {
|
|
type: String,
|
|
default: 'copy_link'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
publicRoomLinkCopied: false,
|
|
}
|
|
},
|
|
methods: {
|
|
copyRoomLink() {
|
|
if(this.publicRoomLinkCopied) return
|
|
const self = this;
|
|
this.$copyText(this.locationLink).then(
|
|
function (ignored) {
|
|
// Success!
|
|
self.publicRoomLinkCopied = true;
|
|
setInterval(() => {
|
|
// Hide again
|
|
self.publicRoomLinkCopied = false;
|
|
}, 3000);
|
|
},
|
|
function (e) {
|
|
console.log(e);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.qr-container {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
margin-top: 20px !important;
|
|
.qr {
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: #e0e0e0;
|
|
}
|
|
.public-link {
|
|
background-color: #D6D5FC33;
|
|
border-radius: 11px;
|
|
.link {
|
|
font-family: "Inter", sans-serif;
|
|
font-size: 16px;
|
|
text-decoration: underline;
|
|
color: #3d6eff;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.link-copied-in-place .v-btn__content {
|
|
font-family: "Inter", sans-serif !important;
|
|
font-size: 12px !important;
|
|
text-transform: none !important;
|
|
color: #3d6eff;
|
|
}
|
|
</style> |