Add possibility to copy URL in share modal
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
6293effe13
commit
5929c7dab7
@ -27,6 +27,26 @@
|
||||
<small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
|
||||
{{ $t("All the places have already been taken") }}
|
||||
</small>
|
||||
<b-field>
|
||||
<b-input ref="eventURLInput" :value="event.url" expanded />
|
||||
<p class="control">
|
||||
<b-tooltip
|
||||
:label="$t('URL copied to clipboard')"
|
||||
:active="showCopiedTooltip"
|
||||
always
|
||||
type="is-success"
|
||||
position="is-left"
|
||||
>
|
||||
<b-button
|
||||
type="is-primary"
|
||||
icon-right="content-paste"
|
||||
native-type="button"
|
||||
@click="copyURL"
|
||||
@keyup.enter="copyURL"
|
||||
/>
|
||||
</b-tooltip>
|
||||
</p>
|
||||
</b-field>
|
||||
<div>
|
||||
<!-- <b-icon icon="mastodon" size="is-large" type="is-primary" />-->
|
||||
|
||||
@ -55,7 +75,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { Component, Prop, Vue, Ref } from "vue-property-decorator";
|
||||
import { IEvent, EventVisibility, EventStatus } from "../../types/event.model";
|
||||
// @ts-ignore
|
||||
import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
|
||||
@ -68,10 +88,13 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
|
||||
export default class ShareEventModal extends Vue {
|
||||
@Prop({ type: Object, required: true }) event!: IEvent;
|
||||
@Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
|
||||
@Ref("eventURLInput") readonly eventURLInput!: any;
|
||||
|
||||
EventVisibility = EventVisibility;
|
||||
EventStatus = EventStatus;
|
||||
|
||||
showCopiedTooltip: boolean = false;
|
||||
|
||||
get twitterShareUrl(): string {
|
||||
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
|
||||
this.event.title
|
||||
@ -97,6 +120,15 @@ export default class ShareEventModal extends Vue {
|
||||
this.event.title
|
||||
)}&url=${encodeURIComponent(this.event.url)}`;
|
||||
}
|
||||
|
||||
copyURL() {
|
||||
this.eventURLInput.$refs.input.select();
|
||||
document.execCommand("copy");
|
||||
this.showCopiedTooltip = true;
|
||||
setTimeout(() => {
|
||||
this.showCopiedTooltip = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
@ -694,5 +694,6 @@
|
||||
"A place for your code of conduct, rules or guidelines. You can use HTML tags.": "A place for your code of conduct, rules or guidelines. You can use HTML tags.",
|
||||
"contact uninformed": "contact uninformed",
|
||||
"Can be an email or a link, or just plain text.": "Can be an email or a link, or just plain text.",
|
||||
"No profiles found": "No profiles found"
|
||||
"No profiles found": "No profiles found",
|
||||
"URL copied to clipboard": "URL copied to clipboard"
|
||||
}
|
||||
|
@ -694,5 +694,6 @@
|
||||
"A place to explain who you are and the things that set your instance apart. You can use HTML tags.": "Une section pour expliquer qui vous êtes et les aspects qui caractérisent votre instance. Vous pouvez utiliser des balises HTML.",
|
||||
"A place for your code of conduct, rules or guidelines. You can use HTML tags.": "Une section appropriée pour votre code de conduite, règles ou lignes directrices. Vous pouvez utiliser des balises HTML.",
|
||||
"contact uninformed": "contact non renseigné",
|
||||
"Can be an email or a link, or just plain text.": "Peut être une adresse email ou bien un lien, ou alors du simple texte brut."
|
||||
"Can be an email or a link, or just plain text.": "Peut être une adresse email ou bien un lien, ou alors du simple texte brut.",
|
||||
"URL copied to clipboard": "URL copiée dans le presse-papiers"
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user