Skip to content

Commit 4876ac9

Browse files
PavelLaptevByronCaleb-T-Owensndom91krlvi
authored
add-diff-contrast-level (#5721)
* Merge pull request #5717 from c-git/patch-1 docs: fix typo * Merge pull request #5650 from gitbutlerapp/upstream-integration-refactor Upstream integration refactor * feat: update DEVELOPMENT.md steps * Update DEVELOPMENT.md * feat: finish svelte5 migration (#5709) Co-authored-by: Kiril Videlov <krlvi@users.noreply.github.com> Co-authored-by: Scott Chacon <schacon@gmail.com> Co-authored-by: Sebastian Thiel <sebastian.thiel@icloud.com> Co-authored-by: Mattias Granlund <mtsgrd@gmail.com> * some-css-updated (#5720) * style: use CSS variables for Badge dimensions Update the Badge component to utilize CSS variables for height and minimum width. This should help to improve consistency. * fix: brighter warning color * fix: standardize capitalization in appearance settings title * move `diff` styles to the component * feat: add new contrast colors for diff styles * fix: brighter warning color * fix: standardize capitalization in appearance settings title * move `diff` styles to the component * feat: add new contrast colors for diff styles * fix: standardize capitalization in appearance settings title * move `diff` styles to the component * feat: add new contrast colors for diff styles * Uncommited changes * refactor: replace static content with snippets in appearance settings * Merge branch 'master' into add-diff-contrast-level * formatting fixes --------- Co-authored-by: Sebastian Thiel <sebastian.thiel@icloud.com> Co-authored-by: Caleb Owens <hello@calebowens.com> Co-authored-by: Nico Domino <yo@ndo.dev> Co-authored-by: Kiril Videlov <krlvi@users.noreply.github.com> Co-authored-by: Scott Chacon <schacon@gmail.com> Co-authored-by: Mattias Granlund <mtsgrd@gmail.com>
1 parent 84c34d0 commit 4876ac9

File tree

9 files changed

+657
-25
lines changed

9 files changed

+657
-25
lines changed

‎apps/desktop/src/lib/hunk/HunkDiff.svelte‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
diffFont: string;
3737
diffLigatures: boolean;
3838
inlineUnifiedDiffs: boolean;
39+
diffContrast: 'light' | 'medium' | 'strong';
3940
minWidth: number;
4041
draggingDisabled: boolean;
4142
onclick: () => void;
@@ -53,6 +54,7 @@
5354
wrapText,
5455
diffFont,
5556
diffLigatures,
57+
diffContrast,
5658
inlineUnifiedDiffs,
5759
minWidth,
5860
draggingDisabled = false,
@@ -339,7 +341,7 @@
339341
<div
340342
bind:clientWidth={tableWidth}
341343
bind:clientHeight={tableHeight}
342-
class="table__wrapper hide-native-scrollbar"
344+
class="table__wrapper hide-native-scrollbar contrast-{diffContrast}"
343345
style="--tab-size: {tabSize}; --diff-font: {diffFont};"
344346
style:font-variant-ligatures={diffLigatures ? 'common-ligatures' : 'none'}
345347
>
@@ -648,4 +650,66 @@
648650
cursor: text;
649651
text-wrap: var(--wrap);
650652
}
653+
654+
/* DIFF LINE */
655+
.diff-line-marker-addition,
656+
.diff-line-addition {
657+
background-color: var(--clr-diff-addition-line-bg);
658+
}
659+
660+
.diff-line-marker-deletion,
661+
.diff-line-deletion {
662+
background-color: var(--clr-diff-deletion-line-bg);
663+
}
664+
665+
/* CONTRAST MODIFIERS */
666+
.table__wrapper {
667+
&.contrast-light {
668+
--clr-diff-count-text: var('--', var(--clr-diff-count-text));
669+
/* deletion */
670+
--clr-diff-deletion-line-bg: var('--', var(--clr-diff-deletion-line-bg));
671+
--clr-diff-deletion-line-highlight: var('--', var(--clr-diff-deletion-line-highlight));
672+
--clr-diff-deletion-count-bg: var('--', var(--clr-diff-deletion-count-bg));
673+
--clr-diff-deletion-count-text: var('--', var(--clr-diff-deletion-count-text));
674+
--clr-diff-deletion-count-border: var('--', var(--clr-diff-deletion-count-border));
675+
/* addition */
676+
--ctx-diff-addition-line-bg: var('--', var(--clr-diff-addition-line-bg));
677+
--clr-diff-addition-line-highlight: var('--', var(--clr-diff-addition-line-highlight));
678+
--clr-diff-addition-count-bg: var('--', var(--clr-diff-addition-count-bg));
679+
--clr-diff-addition-count-text: var('--', var(--clr-diff-addition-count-text));
680+
--clr-diff-addition-count-border: var('--', var(--clr-diff-addition-count-border));
681+
}
682+
683+
&.contrast-medium {
684+
--clr-diff-count-text: var(--clr-diff-count-text-contrast-2);
685+
/* deletion */
686+
--clr-diff-deletion-line-bg: var(--clr-diff-deletion-contrast-2-line-bg);
687+
--clr-diff-deletion-line-highlight: var(--clr-diff-deletion-contrast-2-line-highlight);
688+
--clr-diff-deletion-count-bg: var(--clr-diff-deletion-contrast-2-count-bg);
689+
--clr-diff-deletion-count-text: var(--clr-diff-deletion-contrast-2-count-text);
690+
--clr-diff-deletion-count-border: var(--clr-diff-deletion-contrast-2-count-border);
691+
/* addition */
692+
--clr-diff-addition-line-bg: var(--clr-diff-addition-contrast-2-line-bg);
693+
--clr-diff-addition-line-highlight: var(--clr-diff-addition-contrast-2-line-highlight);
694+
--clr-diff-addition-count-bg: var(--clr-diff-addition-contrast-2-count-bg);
695+
--clr-diff-addition-count-text: var(--clr-diff-addition-contrast-2-count-text);
696+
--clr-diff-addition-count-border: var(--clr-diff-addition-contrast-2-count-border);
697+
}
698+
699+
&.contrast-strong {
700+
--clr-diff-count-text: var(--clr-diff-count-text-contrast-3);
701+
/* deletion */
702+
--clr-diff-deletion-line-bg: var(--clr-diff-deletion-contrast-3-line-bg);
703+
--clr-diff-deletion-line-highlight: var(--clr-diff-deletion-contrast-3-line-highlight);
704+
--clr-diff-deletion-count-bg: var(--clr-diff-deletion-contrast-3-count-bg);
705+
--clr-diff-deletion-count-text: var(--clr-diff-deletion-contrast-3-count-text);
706+
--clr-diff-deletion-count-border: var(--clr-diff-deletion-contrast-3-count-border);
707+
/* addition */
708+
--clr-diff-addition-line-bg: var(--clr-diff-addition-contrast-3-line-bg);
709+
--clr-diff-addition-line-highlight: var(--clr-diff-addition-contrast-3-line-highlight);
710+
--clr-diff-addition-count-bg: var(--clr-diff-addition-contrast-3-count-bg);
711+
--clr-diff-addition-count-text: var(--clr-diff-addition-contrast-3-count-text);
712+
--clr-diff-addition-count-border: var(--clr-diff-addition-contrast-3-count-border);
713+
}
714+
}
651715
</style>

‎apps/desktop/src/lib/hunk/HunkViewer.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999
wrapText={$userSettings.wrapText}
100100
diffFont={$userSettings.diffFont}
101101
diffLigatures={$userSettings.diffLigatures}
102+
diffContrast={$userSettings.diffContrast}
102103
inlineUnifiedDiffs={$userSettings.inlineUnifiedDiffs}
103104
hunk={section.hunk}
104105
onclick={() => {

‎apps/desktop/src/lib/select/Select.svelte‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
disabled?: boolean;
2626
loading?: boolean;
2727
wide?: boolean;
28+
maxWidth?: number;
2829
flex?: string;
2930
options: readonly SelectItem<T>[];
3031
value?: T;
@@ -45,6 +46,7 @@
4546
disabled,
4647
loading,
4748
wide,
49+
maxWidth,
4850
flex,
4951
options = [],
5052
value,
@@ -161,7 +163,13 @@
161163
}
162164
</script>
163165

164-
<div class="select-wrapper" class:wide bind:this={selectWrapperEl} style:flex>
166+
<div
167+
class="select-wrapper"
168+
class:wide
169+
bind:this={selectWrapperEl}
170+
style:flex
171+
style:max-width={maxWidth ? pxToRem(maxWidth) : undefined}
172+
>
165173
{#if label}
166174
<label for={id} class="select__label text-13 text-body text-semibold">{label}</label>
167175
{/if}

‎apps/desktop/src/lib/settings/userSettings.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface Settings {
2727
diffFont: string;
2828
diffLigatures: boolean;
2929
inlineUnifiedDiffs: boolean;
30+
diffContrast: 'light' | 'medium' | 'strong';
3031
defaultCodeEditor: CodeEditorSettings;
3132
}
3233

@@ -47,6 +48,7 @@ const defaults: Settings = {
4748
diffFont: 'Geist Mono, Menlo, monospace',
4849
diffLigatures: false,
4950
inlineUnifiedDiffs: false,
51+
diffContrast: 'light',
5052
defaultCodeEditor: { schemeIdentifer: 'vscode', displayName: 'VSCode' }
5153
};
5254

‎apps/desktop/src/routes/settings/appearance/+page.svelte‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@
121121
wrapText={$userSettings.wrapText}
122122
diffFont={$userSettings.diffFont}
123123
diffLigatures={$userSettings.diffLigatures}
124+
diffContrast={$userSettings.diffContrast}
124125
inlineUnifiedDiffs={$userSettings.inlineUnifiedDiffs}
125126
hunk={testHunk}
126127
subsections={hunkSubsections}
@@ -205,7 +206,7 @@
205206

206207
<SectionCard labelFor="wrapText" orientation="row" roundedTop={false} roundedBottom={false}>
207208
{#snippet title()}
208-
Text Wrap
209+
Text wrap
209210
{/snippet}
210211
{#snippet caption()}
211212
Wrap text in the diff view once it hits the end of the viewport.
@@ -225,6 +226,38 @@
225226
{/snippet}
226227
</SectionCard>
227228

229+
<SectionCard orientation="row" roundedTop={false} roundedBottom={false}>
230+
{#snippet title()}
231+
Lines contrast
232+
{/snippet}
233+
{#snippet caption()}
234+
The contrast level of the diff lines — added, deleted, and counter lines.
235+
{/snippet}
236+
{#snippet actions()}
237+
<Select
238+
maxWidth={110}
239+
value={$userSettings.diffContrast}
240+
options={[
241+
{ label: 'Light', value: 'light' },
242+
{ label: 'Medium', value: 'medium' },
243+
{ label: 'Strong', value: 'strong' }
244+
]}
245+
onselect={(value) => {
246+
userSettings.update((s) => ({
247+
...s,
248+
diffContrast: value
249+
}));
250+
}}
251+
>
252+
{#snippet itemSnippet({ item, highlighted })}
253+
<SelectItem selected={item.value === $userSettings.diffContrast} {highlighted}>
254+
{item.label}
255+
</SelectItem>
256+
{/snippet}
257+
</Select>
258+
{/snippet}
259+
</SectionCard>
260+
228261
<SectionCard labelFor="inlineUnifiedDiffs" orientation="row" roundedTop={false}>
229262
{#snippet title()}
230263
Display word diffs inline

0 commit comments

Comments
 (0)