gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-26 11:08:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

- Updated changes list CSS

Browse Source 
- Updated default line-height to 120%
- Commitbox line-height updated
This commit is contained in:
Pavel Laptev 2024-01-04 01:20:24 +01:00 committed by GitButler
parent d70c6a970b
commit 955d21ab38
6 changed files with 98 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gitbutler-ui/src/routes/[projectId]/components/CommitCard.svelte
View File

@ -57,7 +57,7 @@
>
<div class="commit__card" class:is-head-commit={isHeadCommit}>
<div class="commit__header">
<span class="commit__description text-base-body-12 truncate">
<span class="commit__description text-base-12 truncate">
{commit.description}
</span>
{#if isHeadCommit && !readonly}

27
gitbutler-ui/src/routes/[projectId]/components/FileListItem.svelte
View File

@ -39,7 +39,7 @@
tabindex="0"
>
<div class="file-list-item" id={`file-${file.id}`} class:selected>
<div class="info">
<div class="info-wrap">
{#if showCheckbox}
<Checkbox
small
@ -54,13 +54,15 @@
}}
/>
{/if}
<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" />
<span class="text-base-body-12 name">
{file.filename}
</span>
<span class="text-base-body-12 path">
{file.justpath}
</span>
<div class="info">
<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" />
<span class="text-base-12 name">
{file.filename}
</span>
<span class="text-base-12 path">
{file.justpath}
</span>
</div>
</div>
<FileStatusIcons {file} />
</div>
@ -82,7 +84,14 @@
background: var(--clr-theme-container-pale);
}
}
/* hello */
.info-wrap {
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
gap: var(--space-10);
overflow: hidden;
}
.info {
display: flex;
align-items: center;

54
gitbutler-ui/src/routes/[projectId]/components/TreeListFile.svelte
View File

@ -44,29 +44,29 @@
tabindex="0"
>
<div class="tree-list-file" class:selected>
{#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;
});
}}
/>
{:else}
<div class="dot">
<Icon name="dot" />
<div class="content-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="name-wrapper">
<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" class="icon" />
<span class="name text-base-12">
{file.filename}
</span>
<FileStatusIcons {file} />
</div>
{/if}
<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" class="icon" />
<span class="name text-base-12">
{file.filename}
</span>
<FileStatusIcons {file} />
</div>
</div>
</div>
@ -88,6 +88,16 @@
}
overflow: hidden;
}
.content-wrapper {
display: flex;
align-items: center;
gap: var(--space-10);
}
.name-wrapper {
display: flex;
align-items: center;
gap: var(--space-6);
}
.name {
color: var(--clr-theme-scale-ntrl-0);
text-overflow: ellipsis;

58
gitbutler-ui/src/routes/[projectId]/components/TreeListFolder.svelte
View File

@ -32,23 +32,25 @@
</script>
<button class="tree-list-folder" class:expanded on:click>
{#if expanded}
<div class="chevron-icon" class:chevron-expanded={expanded}>
<Icon name="chevron-down-small" />
{:else}
<Icon name="chevron-right-small" />
{/if}
{#if showCheckbox}
<Checkbox
small
checked={isChecked}
indeterminate={isIndeterminate}
on:change={onSelectionChanged}
/>
{/if}
<IconFolder style="width: var(--space-12)" />
<span class="name text-base-body-12">
{node.name}
</span>
</div>
<div class="content-wrapper">
{#if showCheckbox}
<Checkbox
small
checked={isChecked}
indeterminate={isIndeterminate}
on:change={onSelectionChanged}
/>
{/if}
<div class="name-wrapper">
<IconFolder style="width: var(--space-12)" />
<span class="name text-base-12">
{node.name}
</span>
</div>
</div>
</button>
<style lang="postcss">
@ -61,9 +63,33 @@
border-radius: var(--radius-s);
&:hover {
background: var(--clr-theme-container-pale);
& .chevron-icon {
opacity: 0.7;
}
}
}
.content-wrapper {
display: flex;
align-items: center;
gap: var(--space-10);
}
.name-wrapper {
display: flex;
align-items: center;
gap: var(--space-6);
}
.name {
color: var(--clr-theme-scale-ntrl-0);
}
.chevron-icon {
opacity: 0.5;
transform: rotate(-90deg);
transition:
opacity var(--transition-fast),
transform var(--transition-fast);
}
.chevron-expanded {
transform: rotate(0deg);
}
</style>

8
gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
View File

@ -22,15 +22,14 @@
<a class="branch" class:selected {href}>
{#if branch.icon}
<!-- <div class="item__icon"><Icon name={branch.icon} color={branch.color} /></div> -->
<BranchIcon name={branch.icon} color={branch.color} />
{/if}
<div class="branch__info flex flex-col gap-2">
<p class="text-base-body-13 branch__name">
<p class="text-base-13 branch__name">
{branch.displayName}
</p>
<div class="branch__details">
<span class="branch__author text-base-body-11 details truncate">
<span class="branch__author text-base-11 details truncate">
<TimeAgo date={branch.modifiedAt} />
{#if branch.author}
by {branch.author?.name ?? 'unknown'}
@ -55,8 +54,8 @@
display: flex;
flex-grow: 1;
flex-direction: column;
overflow-x: hidden;
gap: var(--space-6);
overflow: hidden;
}
.branch__details {
@ -66,6 +65,7 @@
}
.branch__name {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}

2
gitbutler-ui/src/styles/text-classes.css
View File

@ -3,7 +3,7 @@
--base-font-weight: 500;
--semidold-font-weight: 600;
--bold-font-weight: 700;
--base-line-height: 100%;
--base-line-height: 120%;
--text-body-line-height: 140%;
}