Add possibility to copy URL in share modal

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-06-23 17:19:41 +02:00
parent 6293effe13
commit 5929c7dab7
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 37 additions and 3 deletions

View file

@ -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>

View file

@ -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"
}

View file

@ -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"
}