gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-24 01:51:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

style: update padding and spacing in various components

Browse Source 
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.
This commit is contained in:
Pavel Laptev 2024-02-26 21:39:28 +01:00 committed by GitButler
parent 78ebcfd0ba
commit 929af8a03d
7 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gitbutler-ui/src/lib/components/BranchFiles.svelte
View File

@ -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);
}
</style>

3
gitbutler-ui/src/lib/components/BranchHeader.svelte
View File

@ -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;

4
gitbutler-ui/src/lib/components/CommitCard.svelte
View File

@ -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);
}
</style>

4
gitbutler-ui/src/lib/components/CommitDialog.svelte
View File

@ -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);

2
gitbutler-ui/src/lib/components/CommitList.svelte
View File

@ -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 {

2
gitbutler-ui/src/lib/components/CommitListHeader.svelte
View File

@ -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);

78
gitbutler-ui/src/lib/components/FileListItem.svelte
View File

@ -50,49 +50,46 @@
});
</script>
<div
on:click
on:keydown
on:dragstart={() => {
// 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]
})}
>
<div class="list-item-wrapper">
{#if showCheckbox}
<Checkbox
small
{checked}
{indeterminate}
on:change={(e) => {
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}
<div
class="file-list-item"
id={`file-${file.id}`}
class:selected-draggable={selected}
role="listitem"
on:contextmenu|preventDefault
on:click
on:keydown
on:dragstart={() => {
// 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]
})}
>
<div class="info-wrap">
{#if showCheckbox}
<Checkbox
small
{checked}
{indeterminate}
on:change={(e) => {
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}
<div class="info">
<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" />
<span class="text-base-12 name">
@ -108,7 +105,14 @@
</div>
<style lang="postcss">
.list-item-wrapper {
display: flex;
align-items: center;
gap: var(--space-8);
}
.file-list-item {
flex: 1;
display: flex;
align-items: center;
height: var(--space-28);