From 93b7b6b2a083ac6479e2cb21dbfc6fc50fd6e41d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Fri, 26 Aug 2022 11:08:27 +0200 Subject: [PATCH] Extract global .badge class into a component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit By encapsulating the global `.badge` class into a component we make reasoning about how badges look a bit easier, because now there's a single place where it is defined. Otherwise it is not guaranteed that the class is going to be applied to the correct html tag. This also makes combining global CSS classes that don't make sense from a design perspective impossible. Signed-off-by: Rūdolfs Ošiņš --- cypress/e2e/project.spec.ts | 7 +- public/index.css | 24 ------ src/Address.svelte | 46 +++++++---- src/Badge.svelte | 41 ++++++++++ src/Dropdown.svelte | 6 +- src/Popup.svelte | 16 ---- src/Profile.svelte | 4 +- src/base/profiles/AnchorActions.svelte | 3 +- src/base/projects/Commit.svelte | 6 +- src/base/projects/Commit/CommitTeaser.svelte | 6 +- .../Commit/CommitVerifiedBadge.svelte | 82 +++++++++---------- src/base/projects/PeerSelector.svelte | 6 +- 12 files changed, 129 insertions(+), 118 deletions(-) create mode 100644 src/Badge.svelte delete mode 100644 src/Popup.svelte diff --git a/cypress/e2e/project.spec.ts b/cypress/e2e/project.spec.ts index 0c450322c..79ffa50b2 100644 --- a/cypress/e2e/project.spec.ts +++ b/cypress/e2e/project.spec.ts @@ -142,10 +142,11 @@ describe("Project view", () => { }); }); + cy.get('.commit-teaser .badge').trigger('mouseenter'); // Checking that the initial commit has the Verified badge - cy.get(".verified-popup-body").should("have.text", "This commit was signed\n with the committer's radicle key."); - cy.get(".verified-popup-peer").should("have.text", "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue"); - cy.get(".verified-popup .verified-committer").should("have.text", "dabit3"); + cy.get(".popup .header").should("have.text", "✔ This commit was signed\n with the committer's radicle key."); + cy.get(".popup .peer").should("contain.text", "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue"); + cy.get(".popup .committer").should("contain.text", "dabit3"); cy.get(".commit").last().click(); }); diff --git a/public/index.css b/public/index.css index ccb8b9534..e95d31a9f 100644 --- a/public/index.css +++ b/public/index.css @@ -366,34 +366,10 @@ label.input { .bold { font-weight: bold !important; } -.badge { - color: var(--color-foreground-faded); - background: var(--color-foreground-background); - border-radius: var(--border-radius); - padding: 0.125rem 0.5rem; - margin: 0 0.5rem; - font-size: 0.75rem; - line-height: 1.6; - height: var(--button-tiny-height); -} -.badge.primary { - color: var(--color-primary); - background: var(--color-primary-background); -} -.badge.tertiary { - color: var(--color-tertiary); - background: var(--color-tertiary-background); -} -.badge.safe { - color: var(--color-yellow); - background: var(--color-yellow-background); -} - .yellow { color: var(--color-yellow); background: var(--color-yellow-background-solid); } - .off-centered { height: 100%; padding-top: 5rem; diff --git a/src/Address.svelte b/src/Address.svelte index fd652bc3e..e93c51f8a 100644 --- a/src/Address.svelte +++ b/src/Address.svelte @@ -5,6 +5,7 @@ import { safeLink, explorerLink, identifyAddress, formatAddress, AddressType, parseEnsLabel } from '@app/utils'; import { Profile, ProfileType } from '@app/profile'; import Avatar from "@app/Avatar.svelte"; + import Badge from "@app/Badge.svelte"; import type { Config } from '@app/config'; export let address: string; @@ -47,9 +48,6 @@ align-items: center; height: 100%; } - .address.no-badge .badge { - display: none; - } .address a { color: var(--color-foreground-90); } @@ -60,10 +58,14 @@ color: var(--color-foreground-90); font-weight: bold; } + .wrapper { + gap: 0.5rem; + display: flex; + align-items: center; + }
@@ -74,18 +76,26 @@ {/if} {/if} - {#if addressType === AddressType.Org} - {addressLabel} - org - {:else if addressType === AddressType.Safe} - {addressLabel} - safe - {:else if addressType === AddressType.Contract} - {addressLabel} - contract - {:else if addressType === AddressType.EOA} - {addressLabel} - {:else} - {addressLabel} - {/if} +
+ {#if addressType === AddressType.Org} + {addressLabel} + {#if !noBadge} + org + {/if} + {:else if addressType === AddressType.Safe} + {addressLabel} + {#if !noBadge} + safe + {/if} + {:else if addressType === AddressType.Contract} + {addressLabel} + {#if !noBadge} + contract + {/if} + {:else if addressType === AddressType.EOA} + {addressLabel} + {:else} + {addressLabel} + {/if} +
diff --git a/src/Badge.svelte b/src/Badge.svelte new file mode 100644 index 000000000..2220d318a --- /dev/null +++ b/src/Badge.svelte @@ -0,0 +1,41 @@ + + + + + + + diff --git a/src/Dropdown.svelte b/src/Dropdown.svelte index dd59dabfc..266e12b61 100644 --- a/src/Dropdown.svelte +++ b/src/Dropdown.svelte @@ -1,5 +1,6 @@ - - - -
- -
diff --git a/src/Profile.svelte b/src/Profile.svelte index fda6485d5..68f4c5015 100644 --- a/src/Profile.svelte +++ b/src/Profile.svelte @@ -20,6 +20,7 @@ import { MissingReverseRecord, NotFoundError } from '@app/error'; import NotFound from '@app/NotFound.svelte'; import RadicleUrn from '@app/RadicleUrn.svelte'; + import Badge from '@app/Badge.svelte'; export let config: Config; export let addressOrName: string; @@ -115,6 +116,7 @@ .title { display: flex; align-items: center; + gap: 0.5rem; } .links { display: flex; @@ -193,7 +195,7 @@ {profile.name ? utils.formatName(profile.name, config) : utils.formatAddress(profile.address)} {#if profile.name && profile.org} - org + org {/if}
diff --git a/src/base/profiles/AnchorActions.svelte b/src/base/profiles/AnchorActions.svelte index 03ec73d21..b9baec6cf 100644 --- a/src/base/profiles/AnchorActions.svelte +++ b/src/base/profiles/AnchorActions.svelte @@ -7,6 +7,7 @@ import Modal from "@app/Modal.svelte"; import Avatar from "@app/Avatar.svelte"; import { createEventDispatcher } from 'svelte'; + import Badge from "@app/Badge.svelte"; export let safe: Safe; export let anchor: PendingAnchor; @@ -129,7 +130,7 @@ {:else if isSigned} - ✓ signed + ✓ signed {:else}
- + {#if commit.context.committer} +
+ +
+ {/if} {formatCommit(commit.header.sha1)}
browseCommit(commit.header.sha1)}> diff --git a/src/base/projects/Commit/CommitVerifiedBadge.svelte b/src/base/projects/Commit/CommitVerifiedBadge.svelte index 9fd9231e0..468038dea 100644 --- a/src/base/projects/Commit/CommitVerifiedBadge.svelte +++ b/src/base/projects/Commit/CommitVerifiedBadge.svelte @@ -1,69 +1,67 @@ -{#if commit.context.committer} - - Verified -
- -
-
- ✔ -
-
- This commit was signed - with the committer's radicle key.
+ {hover = true;}} + on:mouseleave={() => {hover = false;}}> + Verified + + +{#if hover} +
+
+
+
✔
+
+ This commit was signed + with the committer's radicle key.
-
- -
- {commit.context.committer?.peer.id} +
+
+ + {#if commit.context.committer} +
+ {commit.context.committer.peer.id}
-
- + {/if} +
- +
{/if} diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte index 61728c62e..0ec142672 100644 --- a/src/base/projects/PeerSelector.svelte +++ b/src/base/projects/PeerSelector.svelte @@ -5,6 +5,7 @@ import { formatSeedId } from "@app/utils"; import type { Peer } from "@app/project"; import Floating from "@app/Floating.svelte"; + import Badge from "@app/Badge.svelte"; export let peer: string | null = null; export let peers: Peer[]; @@ -52,9 +53,6 @@ .selector .peer.not-allowed { cursor: not-allowed; } - .selector .badge { - margin: 0; - } .peer-id { margin: 0 0.5rem; } @@ -80,7 +78,7 @@ {meta.person?.name ?? formatSeedId(meta.id)} {#if meta.delegate} - delegate + delegate {/if} {:else if peer}