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

resizer updated, expander icon hover updated

Browse Source
This commit is contained in:
Pavel Laptev 2024-01-24 16:20:17 +01:00 committed by GitButler
parent 73cad6b808
commit e4ef5fb497
6 changed files with 110 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,7 +92,7 @@
transition: background-color 0.1s ease-out;
/* background-color: var(--clr-theme-container-outline-light); */
&:hover {
transition-delay: 0.3s;
transition-delay: 0.1s;
}
z-index: 40;
&:hover,

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

@ -30,7 +30,6 @@
import DropzoneOverlay from './DropzoneOverlay.svelte';
import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
import type { BranchService } from '$lib/branches/service';
export let branch: Branch;
export let readonly = false;
@ -38,7 +37,6 @@
export let base: BaseBranch | undefined | null;
export let cloud: ReturnType<typeof getCloudApiClient>;
export let branchController: BranchController;
export let branchService: BranchService;
export let branchCount = 1;
export let user: User | undefined;
export let selectedFiles: Writable<File[]>;
@ -144,8 +142,9 @@
}
</script>
<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
<div class="branch-card-resize-container">
<div class="branch-card-wrapper">
<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
<!-- <div> -->
<div
bind:this={rsViewport}
style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
@ -252,19 +251,19 @@
</div>
{/if}
</div>
<BranchCommits
{base}
{branch}
{project}
{githubService}
{branchController}
{branchService}
{branchCount}
{readonly}
/>
</div>
<!-- </div> -->
</div>
<div class="divider-line">
<Resizer
viewport={rsViewport}
@ -279,24 +278,26 @@
}}
/>
</div>
<slot name="file-view" />
</div>
<style lang="postcss">
.branch-card-wrapper {
position: relative;
display: flex;
height: 100%;
}
.branch-card {
height: 100%;
position: relative;
display: flex;
--target-branch-background: var(--clr-theme-container-pale);
display: flex;
/* display: flex; */
/* flex-direction: column; */
user-select: none;
overflow-x: hidden;
overflow-y: scroll;
/* padding: 8px; */
/* border-radius: var(--radius-l); */
background-color: var(--target-branch-background);
/* background-color: var(--target-branch-background); */
/* remover scrollbar */
@ -306,16 +307,19 @@
}
}
.branch-card-resize-container {
/* .branch-card-resize-container {
display: flex;
}
} */
.divider-line {
position: sticky;
position: absolute;
top: 0;
right: 0;
width: 3px;
width: var(--space-4);
/* margin-left: calc(var(--space-4) * -1); */
height: 100%;
/* margin-left: var(--selected-resize-shift); */
transform: translateX(var(--selected-resize-shift));
/* background-color: red; */
/* background-color: var(--clr-theme-container-outline-light); */
@ -324,22 +328,14 @@
content: '';
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
right: 0;
width: 1px;
height: 100%;
opacity: var(--selected-opacity);
background-color: var(--clr-theme-container-outline-light);
}
}
.target-branch {
--target-branch-background: color-mix(
in srgb,
var(--clr-theme-scale-pop-60) 20%,
var(--clr-theme-container-pale)
);
}
.branch-card__dropzone-wrapper {
display: flex;
flex-direction: column;
@ -351,8 +347,12 @@
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 100%;
gap: var(--space-8);
padding: var(--space-12);
/* transition: padding var(--transition-fast);
will-change: padding; */
}
.first-child {
@ -423,4 +423,10 @@
:global(.squash-dz-active .squash-dz-marker) {
@apply flex;
}
.branch-card :global(.contents) {
display: flex;
flex-direction: column;
min-height: 100%;
}
</style>

26
gitbutler-ui/src/routes/[projectId]/components/BranchLane.svelte
View File

@ -37,7 +37,12 @@
}
</script>
<div class="wrapper" data-tauri-drag-region>
<div
class="wrapper"
data-tauri-drag-region
class:target-branch={branch.selectedForChanges}
class:selected
>
<BranchCard
{branch}
{readonly}
@ -80,5 +85,24 @@
align-items: self-start;
flex-shrink: 0;
position: relative;
--target-branch-background: var(--clr-theme-container-pale);
--selected-resize-shift: 0;
--selected-opacity: 1;
--selected-file-shift: 0;
background-color: var(--target-branch-background);
}
.target-branch {
--target-branch-background: color-mix(
in srgb,
var(--clr-theme-scale-pop-60) 20%,
var(--clr-theme-container-pale)
);
}
.selected {
--selected-resize-shift: calc(var(--space-6) * -1);
--selected-file-shift: var(--space-4);
--selected-opacity: 0;
}
</style>

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

@ -76,7 +76,7 @@
<style lang="postcss">
.commit-list {
&.upstream {
background-color: var(--clr-theme-container-pale);
background-color: var(--clr-theme-container-light);
}
background-color: var(--clr-theme-container-light);
display: flex;

12
gitbutler-ui/src/routes/[projectId]/components/CommitListHeader.svelte
View File

@ -49,6 +49,12 @@
padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16);
justify-content: space-between;
gap: var(--space-8);
&:hover {
& .expander {
opacity: 1;
}
}
}
.title {
display: flex;
@ -57,4 +63,10 @@
gap: var(--space-8);
overflow-x: hidden;
}
.expander {
color: var(--clr-theme-scale-ntrl-50);
opacity: 0.5;
transition: opacity var(--transition-fast);
}
</style>

51
gitbutler-ui/src/routes/[projectId]/components/FileCard.svelte
View File

@ -235,27 +235,54 @@
</div>
</ScrollableContainer>
</div>
<Resizer
viewport={rsViewport}
direction="right"
inside
minWidth={240}
on:width={(e) => {
fileWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(fileWidthKey + file.id, fileWidth, 7 * 1440); // 7 day ttl
$defaultFileWidthRem = fileWidth;
}}
/>
<div class="divider-line">
<Resizer
viewport={rsViewport}
direction="right"
inside
minWidth={240}
on:width={(e) => {
fileWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(fileWidthKey + file.id, fileWidth, 7 * 1440); // 7 day ttl
$defaultFileWidthRem = fileWidth;
}}
/>
</div>
</div>
<style lang="postcss">
.divider-line {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
/* background-color: red; */
/* background-color: var(--clr-theme-container-outline-light); */
&:after {
pointer-events: none;
content: '';
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
width: 1px;
height: 100%;
background-color: var(--clr-theme-container-outline-light);
}
}
.resize-viewport {
position: relative;
display: flex;
height: 100%;
align-items: self-start;
overflow: hidden;
padding: var(--space-12);
padding: var(--space-12) var(--space-12) var(--space-12) 0;
margin-left: calc(var(--selected-file-shift) * -1);
/* background-color: var(--target-branch-background); */
}
.file-card {
background: var(--clr-theme-container-light);