Skip to content

Commit 62512b3

Browse files
matthewevansmatthewevans
authored
Merge branch 'master' into me-fix-v3-appearance-settings
2 parents 5e397e0 + 7c1628b commit 62512b3

File tree

16 files changed

+125
-96
lines changed

16 files changed

+125
-96
lines changed

‎apps/desktop/src/components/BranchLane.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@
8181
direction="right"
8282
minWidth={20}
8383
maxWidth={100}
84-
defaultLineColor="var(--clr-border-2)"
8584
onWidth={(value) => ($width = value)}
85+
imitateBorder
8686
/>
8787
</div>
8888
{/if}

‎apps/desktop/src/components/GroupHeader.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
<style>
1616
.group-header {
17-
z-index: var(--z-lifted);
17+
z-index: var(--z-ground);
1818
position: sticky;
1919
top: 0;
2020
padding: 12px 12px 8px;

‎apps/desktop/src/components/Navigation.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@
5454
{viewport}
5555
direction="right"
5656
minWidth={minResizerWidth}
57-
defaultLineColor="var(--clr-border-2)"
5857
zIndex="var(--z-floating)"
5958
onDblClick={toggleNavCollapse}
6059
onWidth={(value) => ($width = value)}
60+
imitateBorder
6161
onHover={(isHovering) => {
6262
isResizerHovered = isHovering;
6363
}}
@@ -132,6 +132,7 @@
132132
133133
&:hover:not(.hide-fold-button) {
134134
& .folding-button {
135+
z-index: var(--z-floating);
135136
pointer-events: auto;
136137
opacity: 1;
137138
right: -6px;
@@ -171,7 +172,7 @@
171172
/* FOLDING BUTTON */
172173
173174
.folding-button {
174-
z-index: var(--z-floating);
175+
z-index: var(--z-ground);
175176
display: flex;
176177
align-items: center;
177178
justify-content: center;

‎apps/desktop/src/components/Resizer.svelte‎

Lines changed: 68 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<script lang="ts">
22
import { SETTINGS, type Settings } from '$lib/settings/userSettings';
33
import { getContextStoreBySymbol } from '@gitbutler/shared/context';
4-
import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
54
65
interface Props {
76
/** The element that is being resized */
87
viewport: HTMLElement;
98
/** Sets direction of resizing for viewport */
109
direction: 'left' | 'right' | 'up' | 'down';
11-
/** Sets the color of the line */
12-
defaultLineColor?: string;
13-
defaultLineThickness?: number;
14-
hoverLineThickness?: number;
15-
/** Needed when overflow is hidden */
16-
sticky?: boolean;
10+
/** Border radius for cases when the resizable element has rounded corners */
11+
borderRadius?: 's' | 'm' | 'ml' | 'l' | 'none';
1712
/** Custom z-index in case of overlapping with other elements */
1813
zIndex?: string;
14+
/** imitate border */
15+
imitateBorder?: boolean;
16+
imitateBorderColor?: string;
17+
18+
/** Minimum width for the resizable element */
1919
minWidth?: number;
2020
maxWidth?: number;
2121
minHeight?: number;
@@ -32,14 +32,13 @@
3232
const {
3333
viewport,
3434
direction,
35-
defaultLineColor = 'none',
36-
defaultLineThickness = 1,
37-
hoverLineThickness = 2,
38-
sticky = false,
3935
zIndex = 'var(--z-lifted)',
4036
minWidth = 0,
4137
maxWidth = 40,
4238
minHeight = 0,
39+
borderRadius = 'none',
40+
imitateBorder,
41+
imitateBorderColor = 'var(--clr-border-2)',
4342
4443
onHeight,
4544
onWidth,
@@ -133,80 +132,76 @@
133132
class:down={direction === 'down'}
134133
class:left={direction === 'left'}
135134
class:right={direction === 'right'}
136-
class:sticky
137135
style:z-index={zIndex}
136+
style:--resizer-border-radius="var(--radius-{borderRadius})"
137+
style:--border-imitation-color={imitateBorderColor}
138138
>
139-
<div
140-
class="resizer-line"
141-
style="--resizer-default-line-color: {defaultLineColor}; --resizer-default-line-thickness: {pxToRem(
142-
defaultLineThickness
143-
)}; --resizer-hover-line-thickness: {pxToRem(hoverLineThickness)}"
144-
></div>
139+
<div class="resizer-line"></div>
140+
141+
{#if imitateBorder}
142+
<div class="border-imitation"></div>
143+
{/if}
145144
</div>
146145

147146
<style lang="postcss">
148147
.resizer {
149-
--resizer-frame-thickness: 4px;
150-
--resizer-default-line-thickness: 2px;
151-
--resizer-hover-line-thickness: 8px;
152-
--resizer-default-line-color: none;
148+
--resizer-line-thickness: 0;
149+
--resizer-line-color: transparent;
150+
/* should be big for large radius */
151+
--resizer-line-frame: 20px;
153152
position: absolute;
153+
outline: none;
154+
/* background-color: rgba(255, 0, 0, 0.2); */
154155
155156
&:hover,
156157
&:focus,
157158
&.dragging {
158-
outline: none;
159+
--resizer-line-color: var(--resizer-color);
160+
--resizer-line-thickness: 0.15rem;
159161
160162
& .resizer-line {
161163
transition-delay: 0.1s;
162-
background-color: var(--resizer-color);
163-
}
164-
165-
&:not(.vertical) {
166-
& .resizer-line {
167-
width: var(--resizer-hover-line-thickness);
168-
}
169-
}
170-
171-
&:not(.horizontal) {
172-
& .resizer-line {
173-
height: var(--resizer-hover-line-thickness);
174-
}
175164
}
176165
}
177166
}
167+
178168
.resizer-line {
179169
position: absolute;
180170
top: 0;
181171
left: 0;
182172
right: 0;
183173
bottom: 0;
184-
background-color: var(--resizer-default-line-color);
185174
pointer-events: none;
186-
transition:
187-
background-color 0.1s ease-out,
188-
width 0.1s ease-out,
189-
height 0.1s ease-out;
175+
transition: border 0.1s ease;
190176
}
191177
192178
.horizontal {
193-
width: 4px;
179+
width: 8px;
194180
height: 100%;
195181
cursor: col-resize;
196182
top: 0;
197183
198184
& .resizer-line {
199-
width: var(--resizer-default-line-thickness);
185+
width: var(--resizer-line-frame);
186+
}
187+
188+
& .border-imitation {
189+
width: 1px;
200190
}
201191
}
192+
202193
.vertical {
203194
height: 4px;
204195
width: 100%;
205196
cursor: row-resize;
206197
left: 0;
207198
208199
& .resizer-line {
209-
height: var(--resizer-default-line-thickness);
200+
height: var(--resizer-line-frame);
201+
}
202+
203+
& .border-imitation {
204+
height: 1px;
210205
}
211206
}
212207
@@ -215,32 +210,59 @@
215210
216211
& .resizer-line {
217212
left: auto;
213+
border-right: var(--resizer-line-thickness) solid var(--resizer-line-color);
214+
border-top-right-radius: var(--resizer-border-radius);
215+
border-bottom-right-radius: var(--resizer-border-radius);
216+
}
217+
218+
& .border-imitation {
219+
left: auto;
218220
}
219221
}
220222
.left {
221223
left: 0;
222224
223225
& .resizer-line {
224226
right: auto;
227+
border-left: var(--resizer-line-thickness) solid var(--resizer-line-color);
228+
border-top-left-radius: var(--resizer-border-radius);
229+
border-bottom-left-radius: var(--resizer-border-radius);
230+
}
231+
232+
& .border-imitation {
233+
right: auto;
225234
}
226235
}
227236
.up {
228237
top: 0;
229238
230239
& .resizer-line {
231240
bottom: auto;
241+
border-top: var(--resizer-line-thickness) solid var(--resizer-line-color);
242+
border-top-left-radius: var(--resizer-border-radius);
243+
border-top-right-radius: var(--resizer-border-radius);
232244
}
233245
}
234246
.down {
235247
bottom: 0;
236248
237249
& .resizer-line {
238250
top: auto;
251+
border-bottom: var(--resizer-line-thickness) solid var(--resizer-line-color);
252+
border-bottom-left-radius: var(--resizer-border-radius);
253+
border-bottom-right-radius: var(--resizer-border-radius);
239254
}
240255
}
241256
242-
.sticky {
243-
position: sticky;
257+
.border-imitation {
258+
position: absolute;
259+
width: 100%;
260+
height: 100%;
244261
top: 0;
262+
left: 0;
263+
right: 0;
264+
bottom: 0;
265+
background-color: var(--border-imitation-color);
266+
z-index: -1;
245267
}
246268
</style>

‎apps/desktop/src/components/Stack.svelte‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -205,18 +205,16 @@
205205
</div>
206206
</div>
207207
</ScrollableContainer>
208-
<div class="divider-line">
209-
{#if rsViewport}
210-
<Resizer
211-
viewport={rsViewport}
212-
direction="right"
213-
minWidth={25}
214-
sticky
215-
defaultLineColor={$fileIdSelection.length === 1 ? 'transparent' : 'var(--clr-border-2)'}
216-
onWidth={(value) => ($width = value)}
217-
/>
218-
{/if}
219-
</div>
208+
{#if rsViewport}
209+
<Resizer
210+
viewport={rsViewport}
211+
direction="right"
212+
minWidth={25}
213+
onWidth={(value) => ($width = value)}
214+
imitateBorder
215+
imitateBorderColor={$fileIdSelection.length === 1 ? 'trnsparent' : 'var(--clr-border-2)'}
216+
/>
217+
{/if}
220218
</div>
221219
</div>
222220
{/if}
@@ -281,6 +279,8 @@
281279
top: 0;
282280
right: 0;
283281
height: 100%;
282+
width: 4px;
283+
border-right: 1px solid var(--clr-border-2);
284284
}
285285
286286
.branch-card__contents {

‎apps/desktop/src/components/v3/CommitHeader.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
type Props = {
55
row?: boolean;
66
commit: UpstreamCommit | Commit;
7-
fontSize?: '13' | '14' | '15' | '16';
7+
class?: string;
88
};
99
10-
const { commit, row, fontSize = '13' }: Props = $props();
10+
const { commit, row, class: className }: Props = $props();
1111
1212
const message = $derived(commit.message);
1313
const indexOfNewLine = $derived(message.indexOf('\n'));
1414
const endIndex = $derived(indexOfNewLine === -1 ? message.length : indexOfNewLine + 1);
1515
const title = $derived(message.slice(0, endIndex).trim());
1616
</script>
1717

18-
<h3 class="text-{fontSize} text-semibold commit-title" class:row>
18+
<h3 class="{className} commit-title" class:row>
1919
{title}
2020
</h3>
2121

‎apps/desktop/src/components/v3/CommitRow.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@
165165
<div class="commit-content">
166166
<!-- <button type="button" {onclick} tabindex="0"> -->
167167
<div class="commit-name truncate">
168-
<CommitHeader {commit} row />
168+
<CommitHeader {commit} row class="text-13 text-semibold" />
169169
</div>
170170

171171
<button

‎apps/desktop/src/components/v3/CommitView.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
{:else}
108108
<Drawer {projectId} {stackId}>
109109
{#snippet header()}
110-
<CommitHeader {commit} fontSize="14" />
110+
<CommitHeader {commit} class="text-14 text-semibold text-body" />
111111
{/snippet}
112112
<div class="commit-view">
113113
<CommitDetails

‎apps/desktop/src/components/v3/Drawer.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
direction="up"
106106
viewport={drawerDiv}
107107
minHeight={11}
108+
borderRadius="ml"
108109
onHeight={(value) => uiState.global.drawerHeight.set(value)}
109110
/>
110111
{/if}
@@ -142,7 +143,7 @@
142143
display: flex;
143144
gap: 6px;
144145
justify-content: space-between;
145-
padding: 14px;
146+
padding: 14px 14px 12px 14px;
146147
background-color: var(--clr-bg-1);
147148
148149
&.is-sticky {
@@ -160,7 +161,7 @@
160161
flex-shrink: 0;
161162
display: flex;
162163
gap: 2px;
163-
margin-top: -2px;
164+
margin-top: -4px;
164165
margin-right: -4px;
165166
}
166167

0 commit comments

Comments
 (0)