mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-29 20:43:37 +03:00
resizer updated, expander icon hover updated
This commit is contained in:
Pavel Laptev
GitButler
parent
73cad6b808
commit
e4ef5fb497
@ -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,
|
||||
|
||||
@ -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-wrapper">
|
||||
<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
|
||||
<div class="branch-card-resize-container">
|
||||
<!-- <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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -235,6 +235,8 @@
|
||||
</div>
|
||||
</ScrollableContainer>
|
||||
</div>
|
||||
|
||||
<div class="divider-line">
|
||||
<Resizer
|
||||
viewport={rsViewport}
|
||||
direction="right"
|
||||
@ -247,15 +249,40 @@
|
||||
}}
|
||||
/>
|
||||
</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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user