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:
Rūdolfs Ošiņš
2025-01-27 12:49:16 -06:00
parent 0aef841a43
commit 4367441be8
4 changed files with 30 additions and 18 deletions
+4 -3
View File
@@ -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>
+12 -3
View File
@@ -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}
+2 -1
View File
@@ -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
View File
@@ -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">