Browse Source

feat(repo-details): improve copy to clipboard UI

* add icon and hover background and pointer
* rename copied ~> copied to clipboard
master
DanConwayDev 2 years ago
parent
commit
78741bed05
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
  1. 5
      src/lib/components/icons.ts
  2. 20
      src/lib/components/repo/RepoDetails.svelte

5
src/lib/components/icons.ts

@ -5,4 +5,9 @@ export const icons_misc = { @@ -5,4 +5,9 @@ export const icons_misc = {
chevron_up: [
'M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1c.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0c.3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4',
],
// https://icon-sets.iconify.design/octicon/copy-16/
copy: [
'M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z',
'M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z',
],
}

20
src/lib/components/repo/RepoDetails.svelte

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
<script lang="ts">
import UserHeader from '$lib/components/users/UserHeader.svelte'
import { icons_misc } from '../icons'
import { event_defaults } from './type'
export let {
@ -181,11 +182,24 @@ @@ -181,11 +182,24 @@
}, 2000)
} catch {}
}}
class="group -m-3 mt-3 cursor-pointer rounded-md p-3 hover:bg-base-300"
>
<h4>
<h4 class="mt-0 pt-0">
naddr
{#if naddr_copied}<span class="text-success opacity-50">
(copied)</span
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
class="ml-1 inline h-4 w-4 flex-none fill-base-content opacity-50 group-hover:opacity-100"
class:fill-base-content={!naddr_copied}
class:fill-success={naddr_copied}
>
{#each icons_misc.copy as d}
<path {d} />
{/each}
</svg>
{#if naddr_copied}<span class="text-sm text-success opacity-50">
(copied to clipboard)</span
>{/if}
</h4>
<p class="my-2 break-words text-xs">{naddr}</p>

Loading…
Cancel
Save