hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Migrate to Vue 3 and Vite

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-07-12 10:55:28 +02:00
parent 8f4099ee33
commit ee20e03cc2
464 changed files with 31515 additions and 32758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/components/Share/DiasporaLogo.vue
View File

@@ -18,9 +18,3 @@
</svg>
</span>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class DiasporaLogo extends Vue {}
</script>

13
js/src/components/Share/MastodonLogo.vue
View File

@@ -1,11 +1,6 @@
<template>
<span class="icon has-text-primary is-large">
<svg
xmlns="http://www.w3.org/2000/svg"
width="61.076954mm"
height="65.47831mm"
viewBox="0 0 216.4144 232.00976"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976">
<title>Mastodon logo</title>
<path
d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"
@@ -17,9 +12,3 @@
</svg>
</span>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class DiasporaLogo extends Vue {}
</script>

180
js/src/components/Share/ShareModal.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<div class="dark:text-white p-4">
<header class="">
<h2 class="text-2xl">{{ title }}</h2>
</header>
<section class="flex">
<div class="">
<slot></slot>
<o-field :label="inputLabel" label-for="url-text">
<o-input id="url-text" ref="URLInput" :modelValue="url" expanded />
<p class="control">
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
variant="success"
position="left"
>
<o-button
variant="primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/>
</o-tooltip>
</p>
</o-field>
<div class="flex">
<a
:href="twitterShare"
target="_blank"
rel="nofollow noopener"
title="Twitter"
><Twitter :size="48"
/></a>
<a
:href="mastodonShare"
class="mastodon"
target="_blank"
rel="nofollow noopener"
title="Mastodon"
>
<mastodon-logo />
</a>
<a
:href="facebookShare"
target="_blank"
rel="nofollow noopener"
title="Facebook"
><Facebook :size="48"
/></a>
<a
:href="whatsAppShare"
target="_blank"
rel="nofollow noopener"
title="WhatsApp"
><Whatsapp :size="48"
/></a>
<a
:href="telegramShare"
class="telegram"
target="_blank"
rel="nofollow noopener"
title="Telegram"
>
<telegram-logo />
</a>
<a
:href="linkedInShare"
target="_blank"
rel="nofollow noopener"
title="LinkedIn"
><LinkedIn :size="48"
/></a>
<a
:href="diasporaShare"
class="diaspora"
target="_blank"
rel="nofollow noopener"
title="Diaspora"
>
<diaspora-logo />
</a>
<a
:href="emailShare"
target="_blank"
rel="nofollow noopener"
title="Email"
>
<Email :size="48" />
</a>
</div>
</div>
</section>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";
import DiasporaLogo from "./DiasporaLogo.vue";
import MastodonLogo from "./MastodonLogo.vue";
import TelegramLogo from "./TelegramLogo.vue";
import Email from "vue-material-design-icons/Email.vue";
import LinkedIn from "vue-material-design-icons/Linkedin.vue";
import Whatsapp from "vue-material-design-icons/Whatsapp.vue";
import Facebook from "vue-material-design-icons/Facebook.vue";
import Twitter from "vue-material-design-icons/Twitter.vue";
import {
diasporaShareUrl,
emailShareUrl,
facebookShareUrl,
linkedInShareUrl,
mastodonShareUrl,
telegramShareUrl,
twitterShareUrl,
whatsAppShareUrl,
} from "@/utils/share";
const props = withDefaults(
defineProps<{
title: string;
url: string;
text: string;
inputLabel: string;
}>(),
{}
);
const URLInput = ref<HTMLElement | null>(null);
const showCopiedTooltip = ref(false);
const twitterShare = computed((): string | undefined =>
twitterShareUrl(props.url, props.text)
);
const facebookShare = computed((): string | undefined =>
facebookShareUrl(props.url)
);
const linkedInShare = computed((): string | undefined =>
linkedInShareUrl(props.url, props.text)
);
const whatsAppShare = computed((): string | undefined =>
whatsAppShareUrl(props.url, props.text)
);
const telegramShare = computed((): string | undefined =>
telegramShareUrl(props.url, props.text)
);
const emailShare = computed((): string | undefined =>
emailShareUrl(props.url, props.text)
);
const diasporaShare = computed((): string | undefined =>
diasporaShareUrl(props.url, props.text)
);
const mastodonShare = computed((): string | undefined =>
mastodonShareUrl(props.url, props.text)
);
const copyURL = (): void => {
console.log("URLInput", URLInput.value);
URLInput.value?.$refs.input.select();
document.execCommand("copy");
showCopiedTooltip.value = true;
setTimeout(() => {
showCopiedTooltip.value = false;
}, 2000);
};
</script>
<style lang="scss" scoped>
.diaspora,
.mastodon,
.telegram {
:deep(span svg) {
width: 2.5rem;
margin-top: 5px;
}
}
</style>

6
js/src/components/Share/TelegramLogo.vue
View File

@@ -8,9 +8,3 @@
</svg>
</span>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class TelegramLogo extends Vue {}
</script>