feat(frontend): add "copy link" button to profiles

This commit is contained in:
Sam 2023-04-22 15:04:38 +02:00
parent e656316e19
commit 21c1c5b0d9
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
3 changed files with 43 additions and 14 deletions

View file

@ -7,6 +7,7 @@
ButtonGroup,
Icon,
Input,
InputGroup,
Modal,
ModalBody,
ModalFooter,
@ -37,6 +38,7 @@
import { memberNameRegex } from "$lib/api/regex";
import StatusLine from "$lib/components/StatusLine.svelte";
import defaultPreferences from "$lib/api/default_preferences";
import { addToast } from "$lib/toast";
export let data: PageData;
@ -105,6 +107,12 @@
data.pronouns.length === 0 &&
data.fields.length === 0 &&
(!data.bio || data.bio.length === 0);
const copyURL = async () => {
const url = `${PUBLIC_BASE_URL}/@${data.name}`;
await navigator.clipboard.writeText(url);
addToast({ body: "Copied the link to your clipboard!", duration: 2000 });
};
</script>
<div class="container">
@ -187,11 +195,19 @@
</div>
{/each}
</div>
{#if $userStore && $userStore.id !== data.id}
<div class="row">
<ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
<div class="row">
<div class="col-md-6">
<InputGroup>
<Button color="secondary" outline on:click={copyURL}>
<Icon name="clipboard" /> Copy link
</Button>
{#if $userStore && $userStore.id !== data.id}
<ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
{/if}
</InputGroup>
</div>
{/if}
<div class="col-md-6" />
</div>
{#if data.members.length > 0 || ($userStore && $userStore.id === data.id)}
<div class="row">
<div class="col">

View file

@ -28,11 +28,9 @@
};
</script>
<div>
<Button color="danger" outline on:click={toggle}
><Icon name="exclamation-triangle-fill" /> Report {subject}</Button
>
</div>
<Button color="danger" outline on:click={toggle}
><Icon name="exclamation-triangle-fill" /> Report {subject}</Button
>
<Modal header="Report {subject}" {isOpen} {toggle}>
<ModalBody>

View file

@ -4,7 +4,7 @@
import type { PageData } from "./$types";
import PronounLink from "$lib/components/PronounLink.svelte";
import FallbackImage from "$lib/components/FallbackImage.svelte";
import { Alert, Button, Icon } from "sveltestrap";
import { Alert, Button, Icon, InputGroup } from "sveltestrap";
import {
memberAvatars,
pronounDisplay,
@ -19,6 +19,7 @@
import ProfileLink from "../ProfileLink.svelte";
import StatusLine from "$lib/components/StatusLine.svelte";
import defaultPreferences from "$lib/api/default_preferences";
import { addToast } from "$lib/toast";
export let data: PageData;
@ -43,6 +44,12 @@
data.pronouns.length === 0 &&
data.fields.length === 0 &&
(!data.bio || data.bio.length === 0);
const copyURL = async () => {
const url = `${PUBLIC_BASE_URL}/@${data.user.name}/${data.name}`;
await navigator.clipboard.writeText(url);
addToast({ body: "Copied the link to your clipboard!", duration: 2000 });
};
</script>
<div class="container">
@ -125,11 +132,19 @@
</div>
{/each}
</div>
{#if $userStore && $userStore.id !== data.user.id}
<div class="row">
<ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
<div class="row">
<div class="col-md-6">
<InputGroup>
<Button color="secondary" outline on:click={copyURL}>
<Icon name="clipboard" /> Copy link
</Button>
{#if $userStore && $userStore.id !== data.id}
<ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
{/if}
</InputGroup>
</div>
{/if}
<div class="col-md-6" />
</div>
</div>
</div>