radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-16 03:40:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve CommitVerifiedBadge UX

Browse Source 
- debounce hover events to prevent flickering when mousing over multiple badges
- keep the card visible while hovering over it
- show verified badge on the Commit page

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
This commit is contained in:
Rūdolfs Ošiņš
2022-09-01 16:40:44 +02:00
parent da408d2a0e
commit dadd82d8e8
5 changed files with 60 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/e2e/project.spec.ts
+1 -1
View File
@@ -220,7 +220,7 @@ describe("Project view", () => {
// Checking that the initial commit has the Verified badge
cy.get(".popup .header").should(
"have.text",
"✔ This commit was signed\n with the committer's radicle key.",
"✔ This commit was signed\n with the committer's radicle key.",
);
cy.get(".popup .peer").should(
"contain.text",
package-lock.json
Generated
+16 -4
View File
@@ -29,6 +29,7 @@
"ethers": "^5.7.0",
"eventemitter3": "4.0.7",
"events": "^3.3.0",
"lodash": "^4.17.21",
"lru-cache": "^7.13.2",
"marked": "^4.0.12",
"md5": "^2.3.0",
@@ -53,6 +54,7 @@
"@tsconfig/svelte": "^1.0.13",
"@types/connect-history-api-fallback": "^1.3.5",
"@types/express-serve-static-core": "^4.17.30",
"@types/lodash": "^4.14.184",
"@types/sanitize-html": "^2.6.2",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
@@ -3618,6 +3620,12 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
"dev": true
},
"node_modules/@types/lodash": {
"version": "4.14.184",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
"integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
"dev": true
},
"node_modules/@types/marked": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.2.tgz",
@@ -8572,8 +8580,7 @@
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.clonedeep": {
"version": "4.5.0",
@@ -14555,6 +14562,12 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
"dev": true
},
"@types/lodash": {
"version": "4.14.184",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
"integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
"dev": true
},
"@types/marked": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.2.tgz",
@@ -18300,8 +18313,7 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.clonedeep": {
"version": "4.5.0",
package.json
+2
View File
@@ -25,6 +25,7 @@
"@tsconfig/svelte": "^1.0.13",
"@types/connect-history-api-fallback": "^1.3.5",
"@types/express-serve-static-core": "^4.17.30",
"@types/lodash": "^4.14.184",
"@types/sanitize-html": "^2.6.2",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
@@ -62,6 +63,7 @@
"ethers": "^5.7.0",
"eventemitter3": "4.0.7",
"events": "^3.3.0",
"lodash": "^4.17.21",
"lru-cache": "^7.13.2",
"marked": "^4.0.12",
"md5": "^2.3.0",
src/base/projects/Commit.svelte
+2 -2
View File
@@ -2,10 +2,10 @@
import * as proj from "@app/project";
import { formatCommit } from "@app/utils";
import type { Commit } from "@app/commit";
import Badge from "@app/Badge.svelte";
import Changeset from "@app/base/projects/SourceBrowser/Changeset.svelte";
import CommitAuthorship from "@app/base/projects/Commit/CommitAuthorship.svelte";
import CommitVerifiedBadge from "@app/base/projects/Commit/CommitVerifiedBadge.svelte";
export let project: proj.Project;
export let commit: Commit;
@@ -70,7 +70,7 @@
<div class="authorship">
<CommitAuthorship {commit} />
{#if commit.context?.committer}
<Badge variant="tertiary">Verified</Badge>
<CommitVerifiedBadge {commit} />
{/if}
</div>
</header>
src/base/projects/Commit/CommitVerifiedBadge.svelte
+39 -31
View File
@@ -1,14 +1,25 @@
<script lang="ts">
import type { CommitMetadata } from "@app/commit";
import CommitAuthorship from "./CommitAuthorship.svelte";
import { debounce } from "lodash";
import Badge from "@app/Badge.svelte";
import CommitAuthorship from "./CommitAuthorship.svelte";
export let commit: CommitMetadata;
let hover = false;
let visible = false;
const showDelay = 50; // ms
const setVisible = debounce((value: boolean) => {
visible = value;
}, showDelay);
</script>
<style>
.container {
cursor: default;
}
.wrapper {
position: absolute;
}
@@ -18,7 +29,7 @@
box-shadow: 16px 16px 32px 32px var(--color-shadow);
color: var(--color-foreground);
font-size: 0.75rem;
left: -1rem;
left: -10rem;
margin-top: 0.5rem;
padding: 0.5rem 0;
position: absolute;
@@ -43,35 +54,32 @@
}
</style>
<Badge
variant="tertiary"
on:mouseenter={() => {
hover = true;
}}
on:mouseleave={() => {
hover = false;
}}>
Verified
</Badge>
<div
class="container"
on:click|stopPropagation
on:mouseenter={() => setVisible(true)}
on:mouseleave={() => setVisible(false)}>
<Badge variant="tertiary">Verified</Badge>
{#if hover}
<div class="wrapper">
<div class="popup">
<div class="header">
<div class="highlight">✔</div>
<div>
This commit was <span class="highlight">signed</span>
with the committer's radicle key.
{#if visible}
<div class="wrapper">
<div class="popup">
<div class="header">
<div class="highlight">✔</div>
<div>
This commit was <span class="highlight">signed</span>
with the committer's radicle key.
</div>
</div>
<div class="committer">
<CommitAuthorship {commit} showAuthor={false} showTime={false} />
{#if commit.context.committer}
<div class="peer">
<span class="text-faded">{commit.context.committer.peer.id}</span>
</div>
{/if}
</div>
</div>
<div class="committer">
<CommitAuthorship {commit} showAuthor={false} showTime={false} />
{#if commit.context.committer}
<div class="peer">
<span class="text-faded">{commit.context.committer.peer.id}</span>
</div>
{/if}
</div>
</div>
</div>
{/if}
{/if}
</div>