liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): add copy link button

Browse Source
This commit is contained in:
Jake/Rads 2022-06-27 13:08:19 +02:00
parent 6468068ca4
commit 42064c66b0
2 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dashboard/src/lib/list/CardsList.svelte
View File

@ -67,6 +67,38 @@
cardIndexArray[index].classList.remove("collapsed");
}
}
function getShortLink(id: string) {
let url = "https://pk.mt"
if (itemType === "member") url += "/m/"
else if (itemType === "group") url += "/g/"
url += id;
return url;
}
let copiedArray = [];
async function copyShortLink(index: number, id: string, event?) {
if (event) {
if (event.key !== "Tab") event.preventDefault();
event.stopPropagation();
let ctrlDown = event.ctrlKey||event.metaKey; // mac support
if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
}
try {
await navigator.clipboard.writeText(getShortLink(id));
copiedArray[index] = true;
await new Promise(resolve => setTimeout(resolve, 2000));
copiedArray[index] = false;
} catch (error) {
console.log(error);
}
}
</script>
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
@ -76,7 +108,7 @@
<h2 class="accordion-header">
<button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[index]} on:click={() => toggleCard(index)} on:keydown={(e) => skipToNextItem(e, index)}>
<CardsHeader {item}>
<div slot="icon">
<div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(index, item.id)} on:keydown={(e) => copyShortLink(index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"}
<FaUserCircle />
@ -88,6 +120,7 @@
{/if}
</div>
</CardsHeader>
<Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[index] ? "Copied!" : "Copy public link"}</Tooltip>
</button>
</h2>
<Collapse isOpen={isOpenArray[index]}>
@ -108,7 +141,7 @@
<div class="accordion-button collapsed p-0" bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>
<CardHeader class="w-100">
<CardsHeader {item}>
<div slot="icon">
<div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"}
<FaUserCircle />
@ -120,6 +153,7 @@
{/if}
</div>
</CardsHeader>
<Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[index] ? "Copied!" : "Copy public link"}</Tooltip>
</CardHeader>
</div>
<CardBody>
@ -137,7 +171,7 @@
<Card>
<a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} use:link >
<CardsHeader {item}>
<div slot="icon">
<div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"}
{#if itemType === "member"}
<FaUserCircle />
@ -149,6 +183,7 @@
{/if}
</div>
</CardsHeader>
<Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[index] ? "Copied!" : "Copy public link"}</Tooltip>
</a>
</Card>
{/each}

23
dashboard/src/lib/system/Main.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Card, CardBody, CardHeader } from 'sveltestrap';
import { Card, CardBody, CardHeader, Tooltip } from 'sveltestrap';
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
import CardsHeader from '../CardsHeader.svelte';
import Body from './Body.svelte';
@ -12,13 +12,32 @@
export let isPublic = true;
let editMode = false;
let copied = false;
async function copyShortLink(event?) {
if (event) {
let ctrlDown = event.ctrlKey||event.metaKey; // mac support
if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
}
try {
await navigator.clipboard.writeText(`https://pk.mt/s/${user.id}`);
copied = true;
await new Promise(resolve => setTimeout(resolve, 2000));
copied = false;
} catch (error) {
console.log(error);
}
}
</script>
<Card class="mb-4">
<CardHeader>
<CardsHeader bind:item={user}>
<FaAddressCard slot="icon" />
<div slot="icon" style="cursor: pointer;" id={`copy-${user.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown|stopPropagation={(e) => copyShortLink(e)} tabindex={0} >
<FaAddressCard />
</div>
</CardsHeader>
<Tooltip placement="top" target={`copy-${user.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
</CardHeader>
<CardBody style="border-left: 4px solid #{user.color}">
{#if !editMode}