mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-03 18:50:30 +08:00
Extract global .badge class into a component
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ņš <rudolfs@osins.org>
This commit is contained in:
Rūdolfs Ošiņš
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
+28
-18
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="address" title={address}
|
||||
class:no-badge={noBadge}
|
||||
class:text-small={small}
|
||||
class:text-xsmall={xsmall}
|
||||
class:highlight>
|
||||
@@ -74,18 +76,26 @@
|
||||
<Avatar inline source={address} title={address}/>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if addressType === AddressType.Org}
|
||||
<a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
|
||||
<span class="badge">org</span>
|
||||
{:else if addressType === AddressType.Safe}
|
||||
<a href={safeLink(address, config)} target="_blank">{addressLabel}</a>
|
||||
<span class="badge safe">safe</span>
|
||||
{:else if addressType === AddressType.Contract}
|
||||
<a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
|
||||
<span class="badge">contract</span>
|
||||
{:else if addressType === AddressType.EOA}
|
||||
<a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
|
||||
{:else} <!-- While we're waiting to find out what address type it is -->
|
||||
<a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
|
||||
{/if}
|
||||
<div class="wrapper">
|
||||
{#if addressType === AddressType.Org}
|
||||
<a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
|
||||
{#if !noBadge}
|
||||
<Badge variant="foreground">org</Badge>
|
||||
{/if}
|
||||
{:else if addressType === AddressType.Safe}
|
||||
<a href={safeLink(address, config)} target="_blank">{addressLabel}</a>
|
||||
{#if !noBadge}
|
||||
<Badge variant="caution">safe</Badge>
|
||||
{/if}
|
||||
{:else if addressType === AddressType.Contract}
|
||||
<a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
|
||||
{#if !noBadge}
|
||||
<Badge variant="foreground">contract</Badge>
|
||||
{/if}
|
||||
{:else if addressType === AddressType.EOA}
|
||||
<a use:link href={`/${nameOrAddress}`}>{addressLabel}</a>
|
||||
{:else} <!-- While we're waiting to find out what address type it is -->
|
||||
<a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
export let variant: "foreground" | "caution" | "primary" | "tertiary";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.badge {
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
height: var(--button-tiny-height);
|
||||
display: flex;
|
||||
}
|
||||
.foreground {
|
||||
color: var(--color-foreground-faded);
|
||||
background: var(--color-foreground-background);
|
||||
}
|
||||
.primary {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-background);
|
||||
}
|
||||
.tertiary {
|
||||
color: var(--color-tertiary);
|
||||
background: var(--color-tertiary-background);
|
||||
}
|
||||
.caution {
|
||||
color: var(--color-yellow);
|
||||
background: var(--color-yellow-background);
|
||||
}
|
||||
</style>
|
||||
|
||||
<span
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class="badge"
|
||||
class:foreground={variant === "foreground"}
|
||||
class:caution={variant === "caution"}
|
||||
class:primary={variant === "primary"}
|
||||
class:tertiary={variant === "tertiary"}>
|
||||
<slot />
|
||||
</span>
|
||||
+2
-4
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Badge from "@app/Badge.svelte";
|
||||
|
||||
export let items: { key: string; title: string; value: string; badge: string | null }[];
|
||||
export let selected: string | null = null;
|
||||
@@ -19,9 +20,6 @@
|
||||
.dropdown-item:hover, .selected {
|
||||
background-color: var(--color-foreground-background-lighter);
|
||||
}
|
||||
.dropdown .badge {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.dropdown {
|
||||
@@ -36,7 +34,7 @@
|
||||
{#if key && value}
|
||||
<div class="dropdown-item" class:selected={value === selected} on:click={() => onSelect(value)} {title}>{@html key}
|
||||
{#if badge}
|
||||
<span class="badge primary">{badge}</span>
|
||||
<Badge variant="primary">{badge}</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<style>
|
||||
.popup {
|
||||
color: var(--color-foreground);
|
||||
width: 14rem;
|
||||
left: -1rem;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {}
|
||||
</style>
|
||||
|
||||
<div class="popup">
|
||||
<slot />
|
||||
</div>
|
||||
+3
-1
@@ -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)}
|
||||
</span>
|
||||
{#if profile.name && profile.org}
|
||||
<span class="badge">org</span>
|
||||
<Badge variant="foreground">org</Badge>
|
||||
{/if}
|
||||
</span>
|
||||
<div class="links">
|
||||
|
||||
@@ -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 @@
|
||||
</button>
|
||||
<!-- Check whether or not we've signed this proposal -->
|
||||
{:else if isSigned}
|
||||
<span class="badge safe no-margin">✓ signed</span>
|
||||
<Badge variant="caution">✓ signed</Badge>
|
||||
{:else}
|
||||
<button on:click|stopPropagation={() => {
|
||||
action = Action.Sign;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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";
|
||||
@@ -40,9 +41,6 @@
|
||||
color: var(--color-foreground-80);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.badge {
|
||||
margin: 0;
|
||||
}
|
||||
.authorship {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -71,7 +69,7 @@
|
||||
<div class="authorship">
|
||||
<CommitAuthorship {commit} />
|
||||
{#if commit.context?.committer}
|
||||
<span class="badge tertiary">Verified</span>
|
||||
<Badge variant="tertiary">Verified</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -94,7 +94,11 @@
|
||||
<CommitAuthorship {commit} />
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<CommitVerifiedBadge {commit} />
|
||||
{#if commit.context.committer}
|
||||
<div class="desktop">
|
||||
<CommitVerifiedBadge {commit} />
|
||||
</div>
|
||||
{/if}
|
||||
<span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
|
||||
<div class="browse" title="View file" on:click|stopPropagation={() => browseCommit(commit.header.sha1)}>
|
||||
<Icon name="browse" />
|
||||
|
||||
@@ -1,69 +1,67 @@
|
||||
<script lang="ts">
|
||||
import type { CommitMetadata } from "@app/commit";
|
||||
import Popup from "@app/Popup.svelte";
|
||||
import CommitAuthorship from "./CommitAuthorship.svelte";
|
||||
import Badge from "@app/Badge.svelte";
|
||||
|
||||
export let commit: CommitMetadata;
|
||||
|
||||
let hover = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.badge {
|
||||
margin: 0;
|
||||
}
|
||||
.badge:hover .verified-popup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.verified-popup {
|
||||
display: none;
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
.verified-popup-header {
|
||||
.popup {
|
||||
width: 14rem;
|
||||
left: -1rem;
|
||||
z-index: 99;
|
||||
color: var(--color-foreground);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 1rem 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.verified-popup-highlight {
|
||||
.highlight {
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
.verified-popup-committer {
|
||||
.committer {
|
||||
border-top: 1px dashed var(--color-foreground-subtle);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.verified-popup-checkmark {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.verified-popup-peer {
|
||||
.peer {
|
||||
padding-top: 0.5rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.badge {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if commit.context.committer}
|
||||
<span class="badge tertiary">
|
||||
Verified
|
||||
<div class="verified-popup">
|
||||
<Popup>
|
||||
<div class="verified-popup-header">
|
||||
<div class="verified-popup-checkmark verified-popup-highlight">
|
||||
✔
|
||||
</div>
|
||||
<div class="verified-popup-body">
|
||||
This commit was <span class="verified-popup-highlight">signed</span>
|
||||
with the committer's radicle key.</div>
|
||||
<Badge
|
||||
variant="tertiary"
|
||||
on:mouseenter={() => {hover = true;}}
|
||||
on:mouseleave={() => {hover = false;}}>
|
||||
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.
|
||||
</div>
|
||||
<div class="verified-popup-committer">
|
||||
<CommitAuthorship {commit} showAuthor={false} showTime={false} />
|
||||
<div class="verified-popup-peer">
|
||||
<span class="text-faded">{commit.context.committer?.peer.id}</span>
|
||||
</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>
|
||||
</div>
|
||||
</Popup>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -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)}
|
||||
</span>
|
||||
{#if meta.delegate}
|
||||
<span class="badge primary">delegate</span>
|
||||
<Badge variant="primary">delegate</Badge>
|
||||
{/if}
|
||||
<!-- If the delegate metadata is not found -->
|
||||
{:else if peer}
|
||||
|
||||
Reference in New Issue
Block a user