radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-10-30 16:50:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make all elements of title row same height

Browse Source 
This is so that text areas and buttons align perfectly.
This commit is contained in:
Rūdolfs Ošiņš
2025-04-04 10:26:54 +02:00
parent 4fc03eda4e
commit f777284af2
21 changed files with 80 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.svelte
+3 -1
View File
@@ -10,6 +10,7 @@
flatLeft?: boolean;
flatRight?: boolean;
title?: string;
styleHeight?: "2rem" | "2.5rem";
}
const {
@@ -21,6 +22,7 @@
flatLeft = false,
flatRight = false,
title,
styleHeight = "2rem",
}: Props = $props();
const style = $derived(
@@ -43,7 +45,6 @@
color: var(--text-color);
height: 2rem;
column-gap: 0;
row-gap: 0;
display: grid;
@@ -371,6 +372,7 @@
<div
class="container active"
style:cursor={!disabled ? "pointer" : "default"}
style:height={styleHeight}
class:disabled
class:active
class:flat-right={flatRight}
src/components/CommentToggleInput.svelte
+1 -1
View File
@@ -70,7 +70,7 @@
hoverable
styleCursor="text"
variant="float"
styleHeight="40px"
styleHeight="2.5rem"
styleWidth="100%"
onclick={e => {
e.preventDefault();
src/components/DropdownListItem.svelte
+7 -4
View File
@@ -7,7 +7,8 @@
onclick: () => void;
disabled?: boolean;
title?: string;
style?: string;
styleGap?: string;
styleMinHeight?: string;
}
const {
@@ -16,7 +17,8 @@
selected,
disabled = false,
title,
style,
styleGap,
styleMinHeight,
}: Props = $props();
</script>
@@ -27,7 +29,7 @@
align-items: center;
flex-direction: row;
min-height: 2rem;
padding: 0 0.5rem;
padding: 0 0.75rem;
white-space: nowrap;
font-size: var(--font-size-small);
font-weight: var(--font-weight-regular);
@@ -65,7 +67,8 @@
class="item"
class:selected
class:disabled
{style}
style:gap={styleGap}
style:min-height={styleMinHeight}
{title}
onclick={() => {
if (disabled) {
src/components/HomeSidebar.svelte
+1 -1
View File
@@ -57,7 +57,7 @@
<div class="container">
<div>
<div style:margin-bottom="0.5rem">
<div style:margin-bottom="1rem">
{#if activeTab.type === "inbox"}
<Border
styleCursor="pointer"
src/components/IssueSecondColumn.svelte
+9 -7
View File
@@ -70,10 +70,10 @@
.container {
display: flex;
align-items: center;
min-height: 40px;
min-height: 2.5rem;
}
.issue-list {
margin-top: 0.5rem;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 2px;
@@ -101,7 +101,8 @@
<div class="container">
<div
class="txt-regular txt-semibold global-flex"
class="txt-medium global-flex"
style:font-weight="var(--font-weight-medium)"
style:gap="4px"
style:white-space="nowrap">
{title}
@@ -119,9 +120,9 @@
<div class="global-flex" style:margin-left="auto">
<NakedButton
styleHeight="2.5rem"
keyShortcuts="ctrl+f"
variant="ghost"
stylePadding="0 4px"
active={showFilters}
onclick={() => {
if (showFilters) {
@@ -156,9 +157,9 @@
{#if showFilters}
<div class="global-flex" style:margin="1rem 0">
<Popover popoverPositionRight="0" popoverPositionTop="2.5rem">
<Popover popoverPositionLeft="0" popoverPositionTop="3rem">
{#snippet toggle(onclick)}
<OutlineButton variant="ghost" {onclick}>
<OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
{@render icons(status)}
{capitalize(status)}
{@render counters(status)}
@@ -171,7 +172,8 @@
<DropdownList items={["all", "open", "closed"] as IssueStatus[]}>
{#snippet item(state)}
<DropdownListItem
style="gap: 0.5rem"
styleGap="0.5rem"
styleMinHeight="2.5rem"
selected={status === state}
onclick={() => {
changeFilter(state);
src/components/IssueStateButton.svelte
+5 -2
View File
@@ -49,6 +49,7 @@
<div class="main">
<Button
styleHeight="2.5rem"
variant="secondary"
flatRight
onclick={() => void save($state.snapshot(selectedAction["state"]))}>
@@ -57,10 +58,10 @@
<Popover
popoverPadding="0"
popoverPositionTop="2.5rem"
popoverPositionTop="3rem"
popoverPositionRight="0">
{#snippet toggle(onclick)}
<Button flatLeft {onclick} variant="secondary">
<Button styleHeight="2.5rem" flatLeft {onclick} variant="secondary">
<Icon name="chevron-down" />
</Button>
{/snippet}
@@ -70,6 +71,8 @@
items={actions.filter(a => !isEqual(a.state, issueState))}>
{#snippet item(action)}
<DropdownListItem
styleGap="0.5rem"
styleMinHeight="2.5rem"
selected={isEqual(selectedAction, action)}
onclick={() => {
selectedAction = action;
src/components/IssuesSecondColumn.svelte
+1 -1
View File
@@ -58,7 +58,7 @@
<div class="container">
<div>
<div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
<div style:margin-bottom="1rem" style:padding-left="0.75rem">
<RepoTeaser name={project.data.name} seeding={repo.seeding} />
</div>
src/components/NakedButton.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
disabled?: boolean;
variant: "primary" | "secondary" | "ghost";
onclick?: (e: MouseEvent) => void;
styleHeight?: string;
styleHeight?: "2rem" | "2.5rem";
stylePadding?: string;
active?: boolean;
keyShortcuts?: string;
src/components/PatchStateButton.svelte
+5 -2
View File
@@ -49,6 +49,7 @@
<div class="main">
<Button
styleHeight="2.5rem"
variant="secondary"
flatRight
onclick={() =>
@@ -58,10 +59,10 @@
<Popover
popoverPadding="0"
popoverPositionTop="2.5rem"
popoverPositionTop="3rem"
popoverPositionRight="0">
{#snippet toggle(onclick)}
<Button flatLeft {onclick} variant="secondary">
<Button styleHeight="2.5rem" flatLeft {onclick} variant="secondary">
<Icon name="chevron-down" />
</Button>
{/snippet}
@@ -71,6 +72,8 @@
items={actions.filter(a => !isEqual(a.state, patchState))}>
{#snippet item(action)}
<DropdownListItem
styleGap="0.5rem"
styleMinHeight="2.5rem"
selected={isEqual(selectedAction, action)}
onclick={() => {
selectedAction = action;
src/components/PatchesSecondColumn.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
<div class="container">
<div>
<div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
<div style:margin-bottom="1rem" style:padding-left="0.75rem">
<RepoTeaser name={project.data.name} seeding={repo.seeding} />
</div>
src/components/RepoTeaser.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
<style>
.teaser {
align-items: center;
min-height: 40px;
min-height: 2.5rem;
}
.seeding {
src/components/Review.svelte
+6 -6
View File
@@ -253,9 +253,9 @@
display: flex;
align-items: center;
white-space: nowrap;
min-height: 40px;
gap: 0.5rem;
margin-bottom: 0.5rem;
min-height: 2.5rem;
gap: 0.75rem;
margin-bottom: 1rem;
}
.metadata-divider {
width: 2px;
@@ -297,12 +297,12 @@
</style>
<div class="content">
<div style:margin-bottom="0.5rem">
<div style:margin-bottom="1rem">
<div class="title">
<NakedButton
styleHeight="2.5rem"
variant="ghost"
onclick={onNavigateBack}
stylePadding="0 4px">
onclick={onNavigateBack}>
<Icon name="arrow-left" />
</NakedButton>
<span class="global-flex" style:gap="0">
src/components/Settings.svelte
+2 -2
View File
@@ -10,13 +10,13 @@
interface Props {
compact?: boolean;
styleHeight?: string;
styleHeight?: ComponentProps<typeof NakedButton>["styleHeight"];
popoverProps: Partial<ComponentProps<typeof Popover>>;
}
const {
compact = true,
styleHeight = "40px",
styleHeight = "2.5rem",
popoverProps,
}: Props = $props();
</script>
src/components/Sidebar.svelte
+8 -8
View File
@@ -21,8 +21,8 @@
cursor: pointer;
border: 0;
background: none;
height: 40px;
width: 40px;
height: 2.5rem;
width: 2.5rem;
clip-path: var(--2px-corner-fill);
margin: 0;
display: flex;
@@ -38,7 +38,7 @@
</style>
<div class="global-flex" style:flex-direction="column" style:gap="0.5rem">
<div class="global-flex" style:height="40px">
<div class="global-flex" style:height="2.5rem">
<Icon name="repo" />
</div>
{#if activeTab === "issues"}
@@ -52,8 +52,8 @@
});
}}
variant="ghost"
styleWidth="40px"
styleHeight="40px"
styleWidth="2.5rem"
styleHeight="2.5rem"
styleJustifyContent="center">
<Icon name="issue" />
</Border>
@@ -82,8 +82,8 @@
});
}}
variant="ghost"
styleWidth="40px"
styleHeight="40px"
styleWidth="2.5rem"
styleHeight="2.5rem"
styleJustifyContent="center">
<Icon name="patch" />
</Border>
@@ -104,7 +104,7 @@
<div>
<NakedButton
styleHeight="40px"
styleHeight="2.5rem"
variant="ghost"
onclick={() => {
if (getLayout()) {
src/views/home/Inbox.svelte
+1 -1
View File
@@ -158,7 +158,7 @@
justify-content: space-between;
padding-right: 1.5rem;
align-items: center;
min-height: 40px;
min-height: 2.5rem;
}
</style>
src/views/home/Repos.svelte
+2 -2
View File
@@ -102,7 +102,7 @@
justify-content: space-between;
padding-right: 1.5rem;
align-items: center;
min-height: 40px;
min-height: 2.5rem;
}
</style>
@@ -120,7 +120,7 @@
{notificationCount} />
{/snippet}
<div class="container">
<div class="global-flex" style:margin-bottom="0.5rem">
<div class="global-flex" style:margin-bottom="1rem">
<div class="header">Repositories</div>
{#if repos.length > 0}
<div class="global-flex" style:margin-left="auto">
src/views/repo/CreateIssue.svelte
+5 -1
View File
@@ -85,7 +85,11 @@
font-weight: var(--font-weight-medium);
-webkit-user-select: text;
user-select: text;
margin-top: 0.35rem;
display: flex;
align-items: center;
justify-content: space-between;
word-break: break-word;
min-height: 2.5rem;
margin-bottom: 1rem;
}
.content {
src/views/repo/Issue.svelte
+4 -4
View File
@@ -292,13 +292,13 @@
align-items: center;
justify-content: space-between;
word-break: break-word;
min-height: 40px;
min-height: 2.5rem;
}
.status {
padding: 0;
margin-right: 0.75rem;
height: 2rem;
width: 2rem;
height: 2.5rem;
width: 2.5rem;
}
.issue-body {
margin: 1rem 0;
@@ -368,7 +368,7 @@
{/snippet}
<div class="content">
<div style:margin-bottom="0.5rem">
<div style:margin-bottom="1rem">
{#if editingTitle}
<div class="title">
<div
src/views/repo/Issues.svelte
+4 -3
View File
@@ -72,8 +72,8 @@
font-size: var(--font-size-medium);
display: flex;
align-items: center;
min-height: 40px;
margin-bottom: 0.5rem;
min-height: 2.5rem;
margin-bottom: 1rem;
}
</style>
@@ -96,7 +96,7 @@
<div class="container">
<div class="header">
<div>Issues</div>
<div class="global-flex" style:margin-left="auto">
<div class="global-flex" style:margin-left="auto" style:gap="0.75rem">
{#if issues.length > 0}
<TextInput
onSubmit={async () => {
@@ -126,6 +126,7 @@
{/if}
<div class="txt-regular txt-semibold">
<Button
styleHeight="2.5rem"
variant="secondary"
onclick={() => {
void router.push({
src/views/repo/Patch.svelte
+11 -10
View File
@@ -311,7 +311,7 @@
align-items: center;
justify-content: space-between;
word-break: break-word;
min-height: 40px;
min-height: 2.5rem;
}
.title-icons {
display: flex;
@@ -322,11 +322,11 @@
.status {
padding: 0;
margin-right: 0.75rem;
height: 2rem;
width: 2rem;
height: 2.5rem;
width: 2.5rem;
}
.patch-list {
margin-top: 0.5rem;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 2px;
@@ -389,7 +389,7 @@
{/snippet}
{#snippet secondColumn()}
<div class="txt-regular txt-semibold global-flex" style:min-height="40px">
<div class="txt-regular txt-semibold global-flex" style:min-height="2.5rem">
<div class="global-flex" style:gap="4px">
{project.data.name}
<Icon name="chevron-right" />
@@ -405,9 +405,9 @@
</div>
<div style:margin-left="auto">
<NakedButton
styleHeight="2.5rem"
keyShortcuts="ctrl+f"
variant="ghost"
stylePadding="0 4px"
active={showFilters}
onclick={() => {
if (showFilters) {
@@ -423,9 +423,9 @@
</div>
{#if showFilters}
<div class="global-flex" style:margin="1rem 0">
<Popover popoverPositionLeft="0" popoverPositionTop="2.5rem">
<Popover popoverPositionLeft="0" popoverPositionTop="3rem">
{#snippet toggle(onclick)}
<OutlineButton variant="ghost" {onclick}>
<OutlineButton variant="ghost" {onclick} styleHeight="2.5rem">
{@render icons(status)}
{status ? capitalize(status) : "All"}
{@render counters(status)}
@@ -445,7 +445,8 @@
] as const}>
{#snippet item(state)}
<DropdownListItem
style="gap: 0.5rem"
styleGap="0.5rem"
styleMinHeight="2.5rem"
selected={status === state}
onclick={async () => {
await loadPatches(state);
@@ -553,7 +554,7 @@
}} />
{:else}
<div class="content">
<div style:margin-bottom="0.5rem">
<div style:margin-bottom="1rem">
{#if editingTitle}
<div class="title">
<div
src/views/repo/Patches.svelte
+2 -2
View File
@@ -104,8 +104,8 @@
font-size: var(--font-size-medium);
display: flex;
align-items: center;
min-height: 40px;
margin-bottom: 0.5rem;
min-height: 2.5rem;
margin-bottom: 1rem;
}
</style>