mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-30 20:09:50 +03:00
Merge pull request #2428 from gitbutlerapp/lane-style-updates
Lane style updates
This commit is contained in:
Pavel Laptev
GitHub
commit
04db6b7da1
@ -10,6 +10,8 @@
|
||||
// Needed when overflow is hidden
|
||||
export let inside = false;
|
||||
|
||||
export let sticky = false;
|
||||
|
||||
//
|
||||
export let minWidth = 0;
|
||||
export let minHeight = 0;
|
||||
@ -81,14 +83,16 @@
|
||||
class:down={direction == 'down'}
|
||||
class:left={direction == 'left'}
|
||||
class:right={direction == 'right'}
|
||||
class:sticky
|
||||
/>
|
||||
|
||||
<style lang="postcss">
|
||||
.resizer {
|
||||
position: absolute;
|
||||
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,
|
||||
@ -139,4 +143,8 @@
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,5 +68,6 @@
|
||||
"virtual-branch-small": "M5.75 4V7H4.25V4H5.75Z M11.75 4V5C11.75 7.07107 10.0711 8.75 8 8.75C6.75736 8.75 5.75 9.75736 5.75 11V12H4.25V11C4.25 8.92893 5.92893 7.25 8 7.25C9.24264 7.25 10.25 6.24264 10.25 5V4H11.75Z",
|
||||
"removed-branch-small": "M3.38588 10.6431L8.00002 7.87463L12.6142 10.6431L13.3859 9.35687L9.45775 6.99999L13.3859 4.64311L12.6141 3.35687L8.00002 6.12534L3.38589 3.35687L2.61415 4.64311L6.54228 6.99999L2.61414 9.35687L3.38588 10.6431Z M8.75002 13V9.99999H7.25002V13H8.75002Z",
|
||||
"target": "M5.24988 7.99805C5.24988 6.47926 6.48109 5.24805 7.99988 5.24805C9.51866 5.24805 10.7499 6.47926 10.7499 7.99805C10.7499 9.51683 9.51866 10.748 7.99988 10.748C6.48109 10.748 5.24988 9.51683 5.24988 7.99805ZM7.99988 6.74805C7.30952 6.74805 6.74988 7.30769 6.74988 7.99805C6.74988 8.6884 7.30952 9.24805 7.99988 9.24805C8.69023 9.24805 9.24988 8.6884 9.24988 7.99805C9.24988 7.30769 8.69023 6.74805 7.99988 6.74805Z M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM8 3.75C5.65279 3.75 3.75 5.65279 3.75 8C3.75 10.3472 5.65279 12.25 8 12.25C10.3472 12.25 12.25 10.3472 12.25 8C12.25 5.65279 10.3472 3.75 8 3.75Z",
|
||||
"pin": "M4.65842 2.07243L1.94734 4.78351C1.1397 5.59115 1.1397 6.9006 1.94735 7.70824C2.47262 8.23351 3.22365 8.4253 3.91415 8.25174L4.95432 9.82158C4.42239 10.6621 4.53518 11.7726 5.25174 12.4892C6.09106 13.3285 7.45187 13.3285 8.29119 12.4892L9.79734 10.983L13.3089 14.4946L14.3696 13.4339L10.858 9.92235L12.3641 8.41628C13.2034 7.57697 13.2034 6.21616 12.3641 5.37685C11.6475 4.66024 10.5369 4.54748 9.69633 5.07953L8.12657 4.03941C8.30021 3.34887 8.10844 2.59775 7.58312 2.07243C6.77549 1.2648 5.46605 1.2648 4.65842 2.07243ZM3.00801 5.84417L5.71908 3.13309C5.94093 2.91124 6.30061 2.91124 6.52246 3.13309C6.71029 3.32092 6.74288 3.61383 6.60094 3.83835L6.16002 4.53577L9.75834 6.92001L10.4452 6.38456C10.7036 6.18309 11.0717 6.2058 11.3034 6.43751C11.5569 6.69104 11.5569 7.10209 11.3034 7.35562L7.23053 11.4285C6.97699 11.682 6.56594 11.682 6.3124 11.4285C6.08069 11.1968 6.05798 10.8287 6.25944 10.5703L7.98437 8.59718L6.95997 7.54196L5.94244 8.59718L5.18683 7.45682L5.95283 6.73243L4.92218 5.64258L3.90389 6.60557L3.71328 6.72606C3.48875 6.86801 3.19584 6.83541 3.00801 6.64758C2.78615 6.42572 2.78615 6.06602 3.00801 5.84417Z"
|
||||
"pin": "M4.65842 2.07243L1.94734 4.78351C1.1397 5.59115 1.1397 6.9006 1.94735 7.70824C2.47262 8.23351 3.22365 8.4253 3.91415 8.25174L4.95432 9.82158C4.42239 10.6621 4.53518 11.7726 5.25174 12.4892C6.09106 13.3285 7.45187 13.3285 8.29119 12.4892L9.79734 10.983L13.3089 14.4946L14.3696 13.4339L10.858 9.92235L12.3641 8.41628C13.2034 7.57697 13.2034 6.21616 12.3641 5.37685C11.6475 4.66024 10.5369 4.54748 9.69633 5.07953L8.12657 4.03941C8.30021 3.34887 8.10844 2.59775 7.58312 2.07243C6.77549 1.2648 5.46605 1.2648 4.65842 2.07243ZM3.00801 5.84417L5.71908 3.13309C5.94093 2.91124 6.30061 2.91124 6.52246 3.13309C6.71029 3.32092 6.74288 3.61383 6.60094 3.83835L6.16002 4.53577L9.75834 6.92001L10.4452 6.38456C10.7036 6.18309 11.0717 6.2058 11.3034 6.43751C11.5569 6.69104 11.5569 7.10209 11.3034 7.35562L7.23053 11.4285C6.97699 11.682 6.56594 11.682 6.3124 11.4285C6.08069 11.1968 6.05798 10.8287 6.25944 10.5703L7.98437 8.59718L6.95997 7.54196L5.94244 8.59718L5.18683 7.45682L5.95283 6.73243L4.92218 5.64258L3.90389 6.60557L3.71328 6.72606C3.48875 6.86801 3.19584 6.83541 3.00801 6.64758C2.78615 6.42572 2.78615 6.06602 3.00801 5.84417Z",
|
||||
"draggable-horizontal-narrow": "M4 4.25C4 3.83579 4.33579 3.5 4.75 3.5H11.25C11.6642 3.5 12 3.83579 12 4.25C12 4.66421 11.6642 5 11.25 5H4.75C4.33579 5 4 4.66421 4 4.25Z M4 8.25C4 7.83579 4.33579 7.5 4.75 7.5H11.25C11.6642 7.5 12 7.83579 12 8.25C12 8.66421 11.6642 9 11.25 9H4.75C4.33579 9 4 8.66421 4 8.25Z M4 12.25C4 11.8358 4.33579 11.5 4.75 11.5H11.25C11.6642 11.5 12 11.8358 12 12.25C12 12.6642 11.6642 13 11.25 13H4.75C4.33579 13 4 12.6642 4 12.25Z"
|
||||
}
|
||||
|
||||
@ -202,8 +202,4 @@
|
||||
width: 100%;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -211,8 +211,9 @@
|
||||
flex-shrink: 1;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
padding: 0 var(--space-8);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -283,7 +284,6 @@
|
||||
.empty-board__suggestions__link {
|
||||
cursor: default;
|
||||
display: flex;
|
||||
/* align-items: center; */
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
|
||||
@ -294,7 +294,6 @@
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-theme-container-pale);
|
||||
/* transition: background-color 0s ease; */
|
||||
}
|
||||
|
||||
& span {
|
||||
|
||||
@ -75,7 +75,6 @@
|
||||
</div>
|
||||
<div class="new-branch-button">
|
||||
<Button
|
||||
wide
|
||||
color="neutral"
|
||||
kind="outlined"
|
||||
icon="plus-small"
|
||||
@ -87,20 +86,23 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.canvas-dropzone {
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-4);
|
||||
padding: var(--space-12);
|
||||
}
|
||||
|
||||
.new-virtual-branch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24rem;
|
||||
border-radius: var(--radius-m);
|
||||
border: 1px dashed color-mix(in srgb, var(--clr-theme-container-outline-pale) 50%, transparent);
|
||||
background-color: transparent;
|
||||
padding: var(--space-20);
|
||||
gap: var(--space-20);
|
||||
gap: var(--space-8);
|
||||
|
||||
outline-color: color-mix(in srgb, var(--clr-theme-scale-pop-40) 0%, transparent);
|
||||
outline-style: dashed;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { BranchService } from '$lib/branches/service';
|
||||
import type { BaseBranch, Branch, File } from '$lib/vbranches/types';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import { dropzone } from '$lib/utils/draggable';
|
||||
@ -29,16 +30,14 @@
|
||||
import ImgThemed from '$lib/components/ImgThemed.svelte';
|
||||
|
||||
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;
|
||||
export let project: Project;
|
||||
export let base: BaseBranch | undefined | null;
|
||||
export let cloud: ReturnType<typeof getCloudApiClient>;
|
||||
export let branchController: BranchController;
|
||||
export let branchService: BranchService;
|
||||
export let branchController: BranchController;
|
||||
export let branchCount = 1;
|
||||
export let user: User | undefined;
|
||||
export let selectedFiles: Writable<File[]>;
|
||||
@ -144,9 +143,13 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={rsViewport} class="branch-card resize-viewport" data-tauri-drag-region>
|
||||
<ScrollableContainer>
|
||||
<div style:width={`${laneWidth || $defaultBranchWidthRem}rem`} class="branch-card__contents">
|
||||
<div class="branch-card-wrapper">
|
||||
<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
|
||||
<div
|
||||
bind:this={rsViewport}
|
||||
style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
|
||||
class="branch-card__contents"
|
||||
>
|
||||
<BranchHeader
|
||||
{readonly}
|
||||
{branchController}
|
||||
@ -247,6 +250,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<BranchCommits
|
||||
{base}
|
||||
{branch}
|
||||
@ -258,48 +262,82 @@
|
||||
{readonly}
|
||||
/>
|
||||
</div>
|
||||
</ScrollableContainer>
|
||||
|
||||
<Resizer
|
||||
viewport={rsViewport}
|
||||
direction="right"
|
||||
inside={$selectedFiles.length > 0}
|
||||
minWidth={320}
|
||||
on:width={(e) => {
|
||||
laneWidth = e.detail / (16 * $userSettings.zoom);
|
||||
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
|
||||
$defaultBranchWidthRem = laneWidth;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="divider-line">
|
||||
<Resizer
|
||||
viewport={rsViewport}
|
||||
direction="right"
|
||||
inside={$selectedFiles.length > 0}
|
||||
minWidth={320}
|
||||
sticky
|
||||
on:width={(e) => {
|
||||
laneWidth = e.detail / (16 * $userSettings.zoom);
|
||||
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
|
||||
$defaultBranchWidthRem = laneWidth;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.resize-viewport {
|
||||
height: 100%;
|
||||
.branch-card-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.branch-card {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
}
|
||||
|
||||
.branch-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
.divider-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: var(--space-4);
|
||||
height: 100%;
|
||||
transform: translateX(var(--selected-resize-shift));
|
||||
|
||||
&:after {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
opacity: var(--selected-opacity);
|
||||
background-color: var(--clr-theme-container-outline-light);
|
||||
}
|
||||
}
|
||||
|
||||
.branch-card__dropzone-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.branch-card__contents {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 20px;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-16) var(--space-8) var(--space-16) var(--space-8);
|
||||
flex: 1;
|
||||
min-height: 100%;
|
||||
gap: var(--space-8);
|
||||
padding: var(--space-12);
|
||||
}
|
||||
|
||||
.resize-viewport {
|
||||
position: relative;
|
||||
.card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.new-branch__content {
|
||||
@ -362,4 +400,10 @@
|
||||
:global(.squash-dz-active .squash-dz-marker) {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.branch-card :global(.contents) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -112,6 +112,7 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.branch-files {
|
||||
flex: 1;
|
||||
background: var(--clr-theme-container-light);
|
||||
border-radius: var(--radius-m) var(--radius-m) 0 0;
|
||||
&.readonly {
|
||||
|
||||
@ -232,7 +232,7 @@
|
||||
.header__wrapper {
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
top: var(--space-16);
|
||||
top: var(--space-12);
|
||||
}
|
||||
.header {
|
||||
z-index: 2;
|
||||
@ -256,7 +256,7 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: var(--space-20);
|
||||
background: var(--clr-theme-container-pale);
|
||||
background: var(--target-branch-background);
|
||||
/* background-color: red; */
|
||||
}
|
||||
.header__info {
|
||||
@ -304,10 +304,6 @@
|
||||
&:hover {
|
||||
color: var(--clr-theme-scale-ntrl-40);
|
||||
}
|
||||
|
||||
& svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.branch-popup-menu {
|
||||
|
||||
@ -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,22 @@
|
||||
align-items: self-start;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
--target-branch-background: var(--clr-theme-container-pale);
|
||||
--selected-resize-shift: 0;
|
||||
--selected-opacity: 1;
|
||||
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-opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import * as toasts from '$lib/utils/toasts';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import type { BranchController } from '$lib/vbranches/branchController';
|
||||
import type { Branch, File } from '$lib/vbranches/types';
|
||||
@ -125,7 +126,7 @@
|
||||
|
||||
<div class="commit-box" class:commit-box__expanded={$expanded}>
|
||||
{#if $expanded}
|
||||
<div class="commit-box__expander" transition:slide={{ duration: 150 }}>
|
||||
<div class="commit-box__expander" transition:slide={{ duration: 150, easing: quintOut }}>
|
||||
<div class="commit-box__textarea-wrapper">
|
||||
<textarea
|
||||
bind:this={textareaElement}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
<div
|
||||
class="resize-viewport"
|
||||
bind:this={rsViewport}
|
||||
transition:slide={{ duration: 170, easing: quintOut, axis: 'x' }}
|
||||
in:slide={{ duration: 180, easing: quintOut, axis: 'x' }}
|
||||
use:draggable={{
|
||||
...draggableFile(branchId, file, writable([file])),
|
||||
disabled: readonly
|
||||
@ -235,27 +235,52 @@
|
||||
</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-16) var(--space-6);
|
||||
padding: var(--space-12) var(--space-12) var(--space-12) 0;
|
||||
}
|
||||
.file-card {
|
||||
background: var(--clr-theme-container-light);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user