mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-24 05:29:51 +03:00
rezizer styles updated
- updated resizer styles - removed Tailwind classes (we will remove it in the future) - updated components styles that use `Resize` in order to support its update
This commit is contained in:
Pavel Laptev
Mattias Granlund
parent
0404a3a0bd
commit
7b1499e797
@ -353,6 +353,9 @@
|
||||
inside={$selectedFiles.length > 0}
|
||||
minWidth={320}
|
||||
sticky
|
||||
defaultLineColor={$selectedFiles.length > 0
|
||||
? 'transparent'
|
||||
: 'var(--clr-theme-container-outline-light)'}
|
||||
on:width={(e) => {
|
||||
laneWidth = e.detail / (16 * $userSettings.zoom);
|
||||
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
|
||||
@ -386,21 +389,8 @@
|
||||
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 {
|
||||
|
||||
@ -118,6 +118,7 @@
|
||||
direction="right"
|
||||
inside
|
||||
minWidth={240}
|
||||
defaultLineColor="var(--clr-theme-container-outline-light)"
|
||||
on:width={(e) => {
|
||||
fileWidth = e.detail / (16 * $userSettings.zoom);
|
||||
lscache.set(fileWidthKey + branch.id, fileWidth, 7 * 1440); // 7 day ttl
|
||||
@ -151,7 +152,7 @@
|
||||
}
|
||||
|
||||
.file-selected {
|
||||
--selected-resize-shift: calc(var(--space-6) * -1);
|
||||
--selected-resize-shift: calc((var(--space-6) + 0.0625rem) * -1);
|
||||
--selected-target-branch-right-padding: calc(var(--space-4) * -1);
|
||||
--selected-opacity: 0;
|
||||
}
|
||||
@ -165,7 +166,7 @@
|
||||
align-items: self-start;
|
||||
|
||||
padding: var(--space-12) var(--space-12) var(--space-12) 0;
|
||||
border-right: 1px solid var(--clr-theme-container-outline-light);
|
||||
/* border-right: 1px solid var(--clr-theme-container-outline-light); */
|
||||
margin-left: var(--selected-target-branch-right-padding);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -147,6 +147,7 @@
|
||||
viewport={rsViewport}
|
||||
direction="up"
|
||||
inside
|
||||
defaultLineColor="var(--clr-theme-container-outline-light)"
|
||||
minHeight={90}
|
||||
on:height={(e) => {
|
||||
$height = Math.min(maxHeight, e.detail / (16 * $userSettings.zoom));
|
||||
|
||||
@ -51,7 +51,6 @@
|
||||
width: 100%;
|
||||
padding: var(--space-12);
|
||||
gap: var(--space-8);
|
||||
border-top: 1px solid var(--clr-theme-container-outline-light);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-bottom var(--transition-fast);
|
||||
position: relative;
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="navigation relative flex w-80 shrink-0 flex-col border-r"
|
||||
class="navigation relative"
|
||||
style:width={$defaultTrayWidthRem ? $defaultTrayWidthRem + 'rem' : null}
|
||||
bind:this={viewport}
|
||||
role="menu"
|
||||
@ -89,9 +89,9 @@
|
||||
on:click={toggleNavCollapse}
|
||||
/>
|
||||
</div>
|
||||
<div class="domains">
|
||||
<div class="navigation-top">
|
||||
<ProjectSelector {project} {projectService} />
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="domains">
|
||||
<BaseBranchCard {project} {baseBranchService} {githubService} {isNavCollapsed} />
|
||||
<DomainButton
|
||||
href={`/${project.id}/board`}
|
||||
@ -108,7 +108,8 @@
|
||||
<Resizer
|
||||
{viewport}
|
||||
direction="right"
|
||||
minWidth={320}
|
||||
minWidth={280}
|
||||
defaultLineColor="var(--clr-theme-container-outline-light)"
|
||||
on:width={(e) => {
|
||||
$defaultTrayWidthRem = e.detail / (16 * $userSettings.zoom);
|
||||
}}
|
||||
@ -118,7 +119,10 @@
|
||||
|
||||
<style lang="postcss">
|
||||
.navigation {
|
||||
border-right: 1px solid var(--clr-theme-container-outline-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
/* border-right: 1px solid var(--clr-theme-container-outline-light); */
|
||||
background: var(--clr-theme-container-light);
|
||||
max-height: 100%;
|
||||
user-select: none;
|
||||
@ -127,15 +131,25 @@
|
||||
flex-shrink: 0;
|
||||
height: var(--space-24);
|
||||
}
|
||||
.domains {
|
||||
.navigation-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--space-24);
|
||||
padding-left: var(--space-12);
|
||||
padding-right: var(--space-12);
|
||||
}
|
||||
.domains {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.hide-nav-button {
|
||||
align-self: flex-end;
|
||||
margin-right: var(--space-12);
|
||||
}
|
||||
|
||||
/* COLLAPSED */
|
||||
|
||||
.collapsed-nav-wrapper {
|
||||
padding: var(--space-12);
|
||||
height: 100%;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { pxToRem } from '$lib/utils/pxToRem';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
// The element that is being resized
|
||||
@ -7,9 +8,13 @@
|
||||
// Sets direction of resizing for viewport
|
||||
export let direction: 'left' | 'right' | 'up' | 'down';
|
||||
|
||||
// Sets the color of the line
|
||||
export let defaultLineColor: string = 'none';
|
||||
export let defaultLineThickness: number = 1;
|
||||
export let hoverLineThickness: number = 2;
|
||||
|
||||
// Needed when overflow is hidden
|
||||
export let inside = false;
|
||||
|
||||
export let sticky = false;
|
||||
|
||||
//
|
||||
@ -71,10 +76,10 @@
|
||||
|
||||
<div
|
||||
on:mousedown={onMouseDown}
|
||||
class="resizer"
|
||||
tabindex="0"
|
||||
role="slider"
|
||||
aria-valuenow={viewport?.clientHeight}
|
||||
class="resizer"
|
||||
class:inside
|
||||
class:dragging
|
||||
class:vertical={orientation == 'vertical'}
|
||||
@ -84,68 +89,112 @@
|
||||
class:left={direction == 'left'}
|
||||
class:right={direction == 'right'}
|
||||
class:sticky
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="resizer-line"
|
||||
style="--resizer-default-line-color: {defaultLineColor}; --resizer-default-line-thickness: {pxToRem(
|
||||
defaultLineThickness
|
||||
)}; --resizer-hover-line-thickness: {pxToRem(hoverLineThickness)}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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.1s;
|
||||
}
|
||||
--resizer-frame-thickness: var(--space-4);
|
||||
--resizer-default-line-thickness: var(--space-2);
|
||||
--resizer-hover-line-thickness: var(--space-8);
|
||||
--resizer-default-line-color: none;
|
||||
|
||||
z-index: 40;
|
||||
position: absolute;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.dragging {
|
||||
background-color: var(--clr-theme-container-outline-light);
|
||||
outline: none;
|
||||
|
||||
& .resizer-line {
|
||||
transition-delay: 0.1s;
|
||||
background-color: var(--clr-theme-scale-ntrl-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
.resizer-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--resizer-default-line-color);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
background-color 0.1s ease-out,
|
||||
width 0.1s ease-out,
|
||||
height 0.1s ease-out;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: var(--space-4);
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
|
||||
& .resizer-line {
|
||||
width: var(--resizer-default-line-thickness);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: var(--space-4);
|
||||
& .resizer-line {
|
||||
width: var(--resizer-hover-line-thickness);
|
||||
}
|
||||
}
|
||||
}
|
||||
.vertical {
|
||||
height: var(--space-4);
|
||||
width: 100%;
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
|
||||
& .resizer-line {
|
||||
height: var(--resizer-default-line-thickness);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: var(--space-4);
|
||||
& .resizer-line {
|
||||
height: var(--resizer-hover-line-thickness);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
right: calc(-1 * var(--space-2));
|
||||
&.inside {
|
||||
right: 0;
|
||||
right: 0;
|
||||
|
||||
& .resizer-line {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
left: 0;
|
||||
&:hover {
|
||||
width: var(--space-4);
|
||||
|
||||
& .resizer-line {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.up {
|
||||
top: 0;
|
||||
&:hover {
|
||||
height: var(--space-4);
|
||||
|
||||
& .resizer-line {
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
.down {
|
||||
bottom: calc(-1 * var(--space-2));
|
||||
&:hover {
|
||||
height: var(--space-4);
|
||||
}
|
||||
&.inside {
|
||||
bottom: 0;
|
||||
bottom: 0;
|
||||
|
||||
& .resizer-line {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user