mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-10-30 08:40:52 +08:00
Tweak patch tab bar
- Square the dropdown icon - Set the tab bar height to what it is in the design system - Move dropdown button inside the tab
This commit is contained in:
@@ -5,8 +5,9 @@
|
||||
children: Snippet;
|
||||
title?: string;
|
||||
variant: "primary" | "secondary" | "ghost";
|
||||
onclick?: () => void;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
styleHeight?: string;
|
||||
stylePadding?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -15,6 +16,7 @@
|
||||
variant,
|
||||
onclick,
|
||||
styleHeight = "2rem",
|
||||
stylePadding = "0 8px",
|
||||
}: Props = $props();
|
||||
|
||||
const style = $derived(
|
||||
@@ -71,7 +73,6 @@
|
||||
}
|
||||
.p3-3 {
|
||||
grid-area: p3-3;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@@ -232,7 +233,7 @@
|
||||
|
||||
<div class="pixel p3-1"></div>
|
||||
<div class="pixel p3-2"></div>
|
||||
<div class="pixel p3-3 txt-semibold txt-small">
|
||||
<div class="pixel p3-3 txt-semibold txt-small" style:padding={stylePadding}>
|
||||
{@render children()}
|
||||
</div>
|
||||
<div class="pixel p3-4"></div>
|
||||
|
||||
@@ -54,10 +54,19 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<Popover popoverPadding="0" popoverPositionTop="2.5rem" popoverPositionLeft="0">
|
||||
<Popover popoverPadding="0" popoverPositionTop="37px" popoverPositionLeft="0">
|
||||
{#snippet toggle(onclick)}
|
||||
<NakedButton variant="ghost" {onclick}>
|
||||
<Icon name="chevron-down" />
|
||||
<NakedButton
|
||||
variant="ghost"
|
||||
onclick={(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
onclick();
|
||||
}}
|
||||
stylePadding="0 4px">
|
||||
<div style:color="var(--color-foreground-contrast)">
|
||||
<Icon name="chevron-down" />
|
||||
</div>
|
||||
</NakedButton>
|
||||
{/snippet}
|
||||
|
||||
|
||||
@@ -30,13 +30,14 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: var(--font-size-small);
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 5px 0;
|
||||
padding: 3px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
+12
-11
@@ -546,7 +546,7 @@
|
||||
{formatOid(patch.id)}
|
||||
<span
|
||||
class="global-counter"
|
||||
style:height="22px"
|
||||
style:height="24px"
|
||||
style:color="var(--color-foreground-contrast)">
|
||||
Initial
|
||||
</span>
|
||||
@@ -558,17 +558,18 @@
|
||||
tab = "revisions";
|
||||
}}>
|
||||
{formatOid(selectedRevision.id)}
|
||||
<RevisionBadges revision={selectedRevision} {revisions} />
|
||||
<div class="global-flex" style:gap="0.25rem">
|
||||
<RevisionBadges revision={selectedRevision} {revisions} />
|
||||
<RevisionSelector
|
||||
{patch}
|
||||
{revisions}
|
||||
{selectedRevision}
|
||||
selectRevision={rev => {
|
||||
selectedRevision = rev;
|
||||
tab = "revisions";
|
||||
}} />
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
<RevisionSelector
|
||||
{patch}
|
||||
{revisions}
|
||||
{selectedRevision}
|
||||
selectRevision={rev => {
|
||||
selectedRevision = rev;
|
||||
tab = "revisions";
|
||||
}} />
|
||||
{/if}
|
||||
|
||||
<div style:margin-left="auto">
|
||||
|
||||
Reference in New Issue
Block a user