ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

feat(front/CopyableText): add simple button mode

Browse Source
This commit is contained in:
Alice Gaudon 2022-03-02 11:36:23 +01:00
parent afef367e59
commit 81a62be38d
1 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/assets/views/components/CopyableText.svelte
View File

@ -2,8 +2,9 @@
import Icon from "../utils/Icon.svelte"; import Icon from "../utils/Icon.svelte";
import { fade } from "svelte/transition"; import { fade } from "svelte/transition";
export let title: string; export let title: string | undefined = undefined;
export let content: string; export let content: string;
export let buttonMode: boolean = false;
let contentNode: HTMLElement; let contentNode: HTMLElement;
let copiedOverlay: HTMLElement; let copiedOverlay: HTMLElement;
@ -68,28 +69,53 @@
margin: 8px; margin: 8px;
} }
} }
.copied-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 8px;
text-align: center;
background-color: var(--success);
}
} }
.button-mode-button {
position: relative;
}
.copied-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 8px;
text-align: center;
background-color: var(--success);
}
.content.hidden {
pointer-events: none;
overflow: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
position: absolute;
}
</style> </style>
<div class="copyable-text panel"> {#if buttonMode}
<div class="title">{title}</div> <div class="content hidden" bind:this={contentNode} on:click={selectAll}>{content}</div>
<div class="content" bind:this={contentNode} on:click={selectAll}>{content}</div> <button class="bold button-mode-button" on:click={copy} title="{content}">
<button class="bold copy-button" on:click={copy}><Icon name="copy"/></button> <Icon name="copy"/>
{#if showCopiedOverlay} {#if showCopiedOverlay}
<div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}>Copied!</div> <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}><Icon name="check"/></div>
{/if} {/if}
</div> </button>
{:else}
<div class="copyable-text panel">
<div class="title">{title}</div>
<div class="content" bind:this={contentNode} on:click={selectAll}>{content}</div>
<button class="bold copy-button" on:click={copy}><Icon name="copy"/></button>
{#if showCopiedOverlay}
<div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}>Copied!</div>
{/if}
</div>
{/if}