From 929af8a03d019cccde070dd7990ebba9bd5c5e9f Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Mon, 26 Feb 2024 21:39:28 +0100 Subject: [PATCH] style: update padding and spacing in various components The padding and spacing in various components have been updated to improve the visual layout and alignment. This includes changes to the commit box, text inputs, commit list, branch files, and other related elements. The padding values have been adjusted to ensure consistent spacing and improve overall readability and usability. --- .../src/lib/components/BranchFiles.svelte | 10 +-- .../src/lib/components/BranchHeader.svelte | 3 +- .../src/lib/components/CommitCard.svelte | 4 +- .../src/lib/components/CommitDialog.svelte | 4 +- .../src/lib/components/CommitList.svelte | 2 +- .../lib/components/CommitListHeader.svelte | 2 +- .../src/lib/components/FileListItem.svelte | 78 ++++++++++--------- 7 files changed, 54 insertions(+), 49 deletions(-) diff --git a/gitbutler-ui/src/lib/components/BranchFiles.svelte b/gitbutler-ui/src/lib/components/BranchFiles.svelte index 0f4172a2d..2a21f4266 100644 --- a/gitbutler-ui/src/lib/components/BranchFiles.svelte +++ b/gitbutler-ui/src/lib/components/BranchFiles.svelte @@ -69,15 +69,15 @@ } } .branch-files__header { - padding-top: var(--space-12); + padding-top: var(--space-14); padding-bottom: var(--space-12); - padding-left: var(--space-20); - padding-right: var(--space-12); + padding-left: var(--space-14); + padding-right: var(--space-14); } .files-padding { padding-top: 0; padding-bottom: var(--space-12); - padding-left: var(--space-12); - padding-right: var(--space-12); + padding-left: var(--space-14); + padding-right: var(--space-14); } diff --git a/gitbutler-ui/src/lib/components/BranchHeader.svelte b/gitbutler-ui/src/lib/components/BranchHeader.svelte index 839e58483..da4ae6924 100644 --- a/gitbutler-ui/src/lib/components/BranchHeader.svelte +++ b/gitbutler-ui/src/lib/components/BranchHeader.svelte @@ -407,7 +407,7 @@ display: flex; gap: var(--space-4); background: var(--clr-theme-container-pale); - padding: var(--space-12); + padding: var(--space-14); justify-content: space-between; border-radius: 0 0 var(--radius-m) var(--radius-m); user-select: none; @@ -453,6 +453,7 @@ .header__remote-branch { color: var(--clr-theme-scale-ntrl-50); padding-left: var(--space-4); + padding-right: var(--space-2); display: flex; gap: var(--space-4); text-overflow: ellipsis; diff --git a/gitbutler-ui/src/lib/components/CommitCard.svelte b/gitbutler-ui/src/lib/components/CommitCard.svelte index 2232130c3..d68ff20d6 100644 --- a/gitbutler-ui/src/lib/components/CommitCard.svelte +++ b/gitbutler-ui/src/lib/components/CommitCard.svelte @@ -177,7 +177,7 @@ display: flex; flex-direction: column; gap: var(--space-10); - padding: var(--space-12); + padding: var(--space-14); } .is-commit-open { @@ -264,7 +264,7 @@ display: flex; justify-content: flex-end; gap: var(--space-8); - padding: var(--space-12); + padding: var(--space-14); border-top: 1px solid var(--clr-theme-container-outline-light); } diff --git a/gitbutler-ui/src/lib/components/CommitDialog.svelte b/gitbutler-ui/src/lib/components/CommitDialog.svelte index 87f50ee77..93f061a61 100644 --- a/gitbutler-ui/src/lib/components/CommitDialog.svelte +++ b/gitbutler-ui/src/lib/components/CommitDialog.svelte @@ -135,7 +135,7 @@ on:focus={useAutoHeight} on:change={() => currentCommitMessage.set(commitMessage)} spellcheck={false} - class="text-input commit-box__textarea" + class="text-input text-base-body-13 commit-box__textarea" rows="1" disabled={isGeneratingCommigMessage} placeholder="Your commit message here" @@ -217,7 +217,7 @@ .commit-box { display: flex; flex-direction: column; - padding: var(--space-16); + padding: var(--space-14); background: var(--clr-theme-container-light); border-top: 1px solid var(--clr-theme-container-outline-light); transition: background-color var(--transition-medium); diff --git a/gitbutler-ui/src/lib/components/CommitList.svelte b/gitbutler-ui/src/lib/components/CommitList.svelte index 86a58cf94..160556bd6 100644 --- a/gitbutler-ui/src/lib/components/CommitList.svelte +++ b/gitbutler-ui/src/lib/components/CommitList.svelte @@ -91,7 +91,7 @@ .commit-list__content { display: flex; flex-direction: column; - padding: 0 var(--space-16) var(--space-20) var(--space-16); + padding: 0 var(--space-14) var(--space-20) var(--space-14); gap: var(--space-8); } .upstream-message { diff --git a/gitbutler-ui/src/lib/components/CommitListHeader.svelte b/gitbutler-ui/src/lib/components/CommitListHeader.svelte index 57571f0a6..5df7c7a68 100644 --- a/gitbutler-ui/src/lib/components/CommitListHeader.svelte +++ b/gitbutler-ui/src/lib/components/CommitListHeader.svelte @@ -35,7 +35,7 @@ .header { display: flex; align-items: center; - padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16); + padding: var(--space-16) var(--space-14) var(--space-16) var(--space-14); justify-content: space-between; gap: var(--space-8); diff --git a/gitbutler-ui/src/lib/components/FileListItem.svelte b/gitbutler-ui/src/lib/components/FileListItem.svelte index 3b25edad3..4ba381907 100644 --- a/gitbutler-ui/src/lib/components/FileListItem.svelte +++ b/gitbutler-ui/src/lib/components/FileListItem.svelte @@ -50,49 +50,46 @@ }); -
{ - // Reset selection if the file being dragged is not in the selected list - if ($selectedFiles.length > 0 && !$selectedFiles.find((f) => f.id == file.id)) { - $selectedFiles = []; - } - }} - use:draggable={{ - ...draggableFile(branchId, file, selectedFiles), - disabled: readonly || isUnapplied, - selector: '.selected-draggable' - }} - role="button" - tabindex="0" - on:contextmenu={(e) => - popupMenu.openByMouse(e, { - files: $selectedFiles.includes(file) ? $selectedFiles : [file] - })} -> +
+ {#if showCheckbox} + { + selectedOwnership.update((ownership) => { + if (e.detail) file.hunks.forEach((h) => ownership.addHunk(file.id, h.id)); + if (!e.detail) file.hunks.forEach((h) => ownership.removeHunk(file.id, h.id)); + return ownership; + }); + }} + /> + {/if}
{ + // Reset selection if the file being dragged is not in the selected list + if ($selectedFiles.length > 0 && !$selectedFiles.find((f) => f.id == file.id)) { + $selectedFiles = []; + } + }} + use:draggable={{ + ...draggableFile(branchId, file, selectedFiles), + disabled: readonly || isUnapplied, + selector: '.selected-draggable' + }} + role="button" + tabindex="0" + on:contextmenu={(e) => + popupMenu.openByMouse(e, { + files: $selectedFiles.includes(file) ? $selectedFiles : [file] + })} >
- {#if showCheckbox} - { - selectedOwnership.update((ownership) => { - if (e.detail) file.hunks.forEach((h) => ownership.addHunk(file.id, h.id)); - if (!e.detail) file.hunks.forEach((h) => ownership.removeHunk(file.id, h.id)); - return ownership; - }); - }} - /> - {/if}
js @@ -108,7 +105,14 @@