Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
26
0
Fork 0
Code Issues Pull Requests Releases Activity

Add possibility to copy URL in share modal

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-06-23 17:19:41 +02:00
parent ee74dc96f3
commit f2023ff9f0
3 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
js/src/components/Event/ShareEventModal.vue
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>

3
js/src/i18n/en_US.json
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"
}

3
js/src/i18n/fr_FR.json
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"
}