mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-24 05:29:51 +03:00
Diff-hunk-style-fixes (#4551)
* remove styles duplication * Add hunk background color * fix: gap between commits when dragging * update hunk line colors * fix: number columns cliping * fix: number column border clipping * diff styles update * update "large diff" message style
This commit is contained in:
Pavel Laptev
GitHub
parent
9ea624b34b
commit
6fe1f25959
@ -53,6 +53,7 @@
|
||||
target: '.dropzone-target'
|
||||
}}
|
||||
class:fill-height={fillHeight}
|
||||
class="dropzone-container"
|
||||
>
|
||||
{@render overlay({ hovered, activated })}
|
||||
|
||||
@ -67,4 +68,8 @@
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.dropzone-container {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,13 +24,12 @@
|
||||
--dropzone-overlap: calc(var(--dropzone-height) / 2);
|
||||
--dropzone-height: 16px;
|
||||
|
||||
position: absolute;
|
||||
top: var(--y-offset);
|
||||
|
||||
height: var(--dropzone-height);
|
||||
margin-top: calc(var(--dropzone-overlap) * -1);
|
||||
margin-bottom: calc(var(--dropzone-overlap) * -1);
|
||||
/* background-color: rgba(0, 0, 0, 0.1); */
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: var(--y-offset);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -69,9 +69,12 @@
|
||||
{@const { added, removed } = computeAddedRemovedByHunk(section)}
|
||||
{#if 'hunk' in section}
|
||||
<div class="hunk-wrapper">
|
||||
<div class="indicators text-base-11">
|
||||
<span class="added">+{added}</span>
|
||||
<span class="removed">-{removed}</span>
|
||||
<div class="indicators text-base-11 text-semibold">
|
||||
<div class="text-base-10 semibold added-removed">
|
||||
<span class="added">+{added}</span>
|
||||
<span class="removed">-{removed}</span>
|
||||
</div>
|
||||
|
||||
{#if section.hunk.lockedTo && section.hunk.lockedTo.length > 0 && commits}
|
||||
<div
|
||||
use:tooltip={{
|
||||
@ -123,10 +126,25 @@
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.added {
|
||||
color: #45b156;
|
||||
|
||||
.added-removed {
|
||||
display: flex;
|
||||
border-radius: var(--radius-s);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.removed,
|
||||
.added {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.added {
|
||||
color: var(--clr-scale-succ-30);
|
||||
background-color: var(--clr-theme-succ-bg);
|
||||
}
|
||||
|
||||
.removed {
|
||||
color: #ff3e00;
|
||||
color: var(--clr-scale-err-30);
|
||||
background-color: var(--clr-theme-err-bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
let contents = $state<HTMLDivElement>();
|
||||
|
||||
const WHITESPACE_REGEX = /\s/;
|
||||
const NUMBER_COLUMN_WIDTH_PX = minWidth * 16;
|
||||
const NUMBER_COLUMN_WIDTH_PX = minWidth * 20;
|
||||
|
||||
const selectedOwnership: Writable<Ownership> | undefined = maybeGetContextStore(Ownership);
|
||||
|
||||
@ -210,6 +210,22 @@
|
||||
const renderRows = $derived(generateRows(subsections));
|
||||
</script>
|
||||
|
||||
{#snippet countColumn(count: number | undefined, lineType: SectionType)}
|
||||
<td
|
||||
class="table__numberColumn"
|
||||
class:diff-line-deletion={lineType === SectionType.RemovedLines}
|
||||
class:diff-line-addition={lineType === SectionType.AddedLines}
|
||||
style="--number-col-width: {NUMBER_COLUMN_WIDTH_PX}px;"
|
||||
align="center"
|
||||
class:selected={isSelected}
|
||||
onclick={() => {
|
||||
selectable && handleSelected(hunk, !isSelected);
|
||||
}}
|
||||
>
|
||||
{count}
|
||||
</td>
|
||||
{/snippet}
|
||||
|
||||
<div
|
||||
class="table__wrapper hide-native-scrollbar"
|
||||
bind:this={viewport}
|
||||
@ -224,28 +240,8 @@
|
||||
<tbody>
|
||||
{#each renderRows as line}
|
||||
<tr data-no-drag>
|
||||
<td
|
||||
class="table__numberColumn"
|
||||
style="--number-col-width: {NUMBER_COLUMN_WIDTH_PX}px;"
|
||||
align="center"
|
||||
class:selected={isSelected}
|
||||
onclick={() => {
|
||||
selectable && handleSelected(hunk, !isSelected);
|
||||
}}
|
||||
>
|
||||
{line.beforeLineNumber}
|
||||
</td>
|
||||
<td
|
||||
class="table__numberColumn"
|
||||
style="--number-col-width: {NUMBER_COLUMN_WIDTH_PX}px;"
|
||||
align="center"
|
||||
class:selected={isSelected}
|
||||
onclick={() => {
|
||||
selectable && handleSelected(hunk, !isSelected);
|
||||
}}
|
||||
>
|
||||
{line.afterLineNumber}
|
||||
</td>
|
||||
{@render countColumn(line.beforeLineNumber, line.type)}
|
||||
{@render countColumn(line.afterLineNumber, line.type)}
|
||||
<td
|
||||
{onclick}
|
||||
class="table__textContent"
|
||||
@ -274,6 +270,7 @@
|
||||
.table__wrapper {
|
||||
border: 1px solid var(--clr-border-2);
|
||||
border-radius: var(--radius-s);
|
||||
background-color: var(--clr-bg-1);
|
||||
overflow-x: auto;
|
||||
|
||||
&:hover .table__drag-handle {
|
||||
@ -311,53 +308,48 @@
|
||||
}
|
||||
|
||||
.table__numberColumn {
|
||||
color: var(--clr-text-3);
|
||||
color: color-mix(in srgb, var(--clr-text-1), transparent 60%);
|
||||
border-color: var(--clr-border-2);
|
||||
background-color: var(--clr-bg-1-muted);
|
||||
font-size: 11px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
text-align: right;
|
||||
cursor: var(--cursor);
|
||||
user-select: none;
|
||||
|
||||
position: sticky;
|
||||
left: calc(var(--number-col-width));
|
||||
width: var(--number-col-width);
|
||||
min-width: var(--number-col-width);
|
||||
max-width: var(--number-col-width);
|
||||
left: calc(var(--number-col-width) + 1px);
|
||||
box-shadow: 1px 0px 0px 0px var(--clr-border-2);
|
||||
|
||||
box-shadow: inset -1px 0 0 0 var(--clr-border-2);
|
||||
|
||||
&.diff-line-addition {
|
||||
background-color: var(--override-addition-counter-background);
|
||||
color: var(--override-addition-counter-text);
|
||||
box-shadow: inset -1px 0 0 0 var(--override-addition-counter-border);
|
||||
}
|
||||
|
||||
&.diff-line-deletion {
|
||||
background-color: var(--override-deletion-counter-background);
|
||||
color: var(--override-deletion-counter-text);
|
||||
box-shadow: inset -1px 0 0 0 var(--override-deletion-counter-border);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--hunk-line-selected-bg);
|
||||
border-color: var(--hunk-line-selected-border);
|
||||
color: white;
|
||||
box-shadow: inset -1px 0 0 0 var(--hunk-line-selected-border);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.table__numberColumn:first-of-type {
|
||||
width: var(--number-col-width);
|
||||
min-width: var(--number-col-width);
|
||||
max-width: var(--number-col-width);
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
tr:first-of-type .table__numberColumn:first-child {
|
||||
border-radius: var(--radius-s) 0 0 0;
|
||||
}
|
||||
|
||||
tr:last-of-type .table__numberColumn:first-child {
|
||||
border-radius: 0 0 0 var(--radius-s);
|
||||
}
|
||||
|
||||
.diff-line-deletion {
|
||||
background-color: #cf8d8e20;
|
||||
}
|
||||
|
||||
.diff-line-addition {
|
||||
background-color: #94cf8d20;
|
||||
}
|
||||
|
||||
.table__textContent {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
|
||||
@ -23,9 +23,10 @@
|
||||
.large-diff-message {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
background-color: var(--clr-bg-1);
|
||||
border: 1px solid var(--clr-border-2);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.frame-box {
|
||||
|
||||
@ -1,199 +0,0 @@
|
||||
.token-variable {
|
||||
color: #8953800;
|
||||
}
|
||||
|
||||
.token-property {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.token-type {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.token-variable-special {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.token-definition {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
/* .token-builtin {
|
||||
color: #d3869b;
|
||||
} */
|
||||
|
||||
.token-number {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.token-string {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.token-string-special {
|
||||
color: #0a3069;
|
||||
}
|
||||
|
||||
/* .token-atom {
|
||||
color: #0a3069;
|
||||
} */
|
||||
|
||||
.token-keyword {
|
||||
color: #cf222e;
|
||||
}
|
||||
|
||||
.token-comment {
|
||||
color: #6e7781;
|
||||
}
|
||||
|
||||
.token-meta {
|
||||
color: #1f2328;
|
||||
}
|
||||
|
||||
.token-invalid {
|
||||
color: #82071e;
|
||||
}
|
||||
|
||||
.token-tag {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.token-attribute {
|
||||
color: #1f2328;
|
||||
}
|
||||
|
||||
.token-attribute-value {
|
||||
color: var(--color-token-attribute-value);
|
||||
}
|
||||
|
||||
.token-inserted {
|
||||
color: #116329;
|
||||
background-color: #11632960;
|
||||
}
|
||||
|
||||
.token-deleted {
|
||||
color: #82071e;
|
||||
background-color: #82071e40;
|
||||
}
|
||||
|
||||
.token-heading {
|
||||
color: var(--color-token-variable-special);
|
||||
}
|
||||
|
||||
.token-link {
|
||||
color: var(--color-token-variable-special);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.token-strikethrough {
|
||||
text-decoration: strike-through;
|
||||
}
|
||||
|
||||
.token-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.token-variable {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.token-property {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.token-type {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.token-variable-special {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.token-definition {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
/* .token-builtin {
|
||||
color: #d3869b;
|
||||
} */
|
||||
|
||||
.token-number {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.token-string {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.token-string-special {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
/* .token-atom {
|
||||
color: #0a3069;
|
||||
} */
|
||||
|
||||
.token-keyword {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.token-comment {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.token-meta {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.token-invalid {
|
||||
color: #ffa198;
|
||||
}
|
||||
|
||||
.token-tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.token-attribute {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.token-attribute-value {
|
||||
color: var(--color-token-attribute-value);
|
||||
}
|
||||
|
||||
.token-inserted {
|
||||
color: #7ee787;
|
||||
background-color: #7ee78740;
|
||||
}
|
||||
|
||||
.token-deleted {
|
||||
color: #ffa198;
|
||||
background-color: #ffa19840;
|
||||
}
|
||||
|
||||
.token-heading {
|
||||
color: var(--color-token-variable-special);
|
||||
}
|
||||
|
||||
.token-link {
|
||||
color: var(--color-token-variable-special);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.token-strikethrough {
|
||||
text-decoration: strike-through;
|
||||
}
|
||||
|
||||
.token-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,35 @@
|
||||
:root {
|
||||
--hunk-line-selected-bg: #60a5fa;
|
||||
--hunk-line-selected-border: #2563eb;
|
||||
|
||||
--override-addition-background: #e0fbf0;
|
||||
--override-addition-inner-diff-background: #c5f0dc;
|
||||
--override-addition-counter-background: #c8f3e1;
|
||||
--override-addition-counter-text: #87a89a;
|
||||
--override-addition-counter-border: #aecbb7;
|
||||
|
||||
--override-deletion-background: #fff0f2;
|
||||
--override-deletion-inner-diff-background: #fdd2da;
|
||||
--override-deletion-counter-background: #fcdfe4;
|
||||
--override-deletion-counter-text: #b69292;
|
||||
--override-deletion-counter-border: #e3c1c1;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--hunk-line-selected-bg: #044289;
|
||||
--hunk-line-selected-border: #005cc5;
|
||||
|
||||
--override-addition-background: #0e2f25;
|
||||
--override-addition-inner-diff-background: #075445;
|
||||
--override-addition-counter-background: #0c4538;
|
||||
--override-addition-counter-text: #689e88;
|
||||
--override-addition-counter-border: #2b6e53;
|
||||
|
||||
--override-deletion-background: #3c131b;
|
||||
--override-deletion-inner-diff-background: #78061c;
|
||||
--override-deletion-counter-background: #53131e;
|
||||
--override-deletion-counter-text: #cb7380;
|
||||
--override-deletion-counter-border: #933f3f;
|
||||
}
|
||||
|
||||
.inner-diff {
|
||||
@ -14,28 +38,20 @@
|
||||
|
||||
.diff-line-marker-addition,
|
||||
.diff-line-addition {
|
||||
--override-addition-background-color: hsl(144deg 55% 49% / 20%);
|
||||
|
||||
background-color: var(--override-addition-background-color);
|
||||
background-color: var(--override-addition-background);
|
||||
}
|
||||
|
||||
.diff-line-marker-deletion,
|
||||
.diff-line-deletion {
|
||||
--override-deletion-background-color: rgba(220, 38, 38, 0.2);
|
||||
|
||||
background-color: var(--override-deletion-background-color);
|
||||
background-color: var(--override-deletion-background);
|
||||
}
|
||||
|
||||
.diff-line-addition .inner-diff {
|
||||
--override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 60%);
|
||||
|
||||
background-color: var(--override-addition-inner-diff-background-color);
|
||||
background-color: var(--override-addition-inner-diff-background);
|
||||
}
|
||||
|
||||
.diff-line-deletion .inner-diff {
|
||||
--override-deletion-inner-diff-background-color: rgba(220, 38, 38, 0.3);
|
||||
|
||||
background-color: var(--override-deletion-inner-diff-background-color);
|
||||
background-color: var(--override-deletion-inner-diff-background);
|
||||
}
|
||||
|
||||
.diff-line-spacer {
|
||||
|
||||
@ -60,13 +60,11 @@
|
||||
}
|
||||
|
||||
.token-inserted {
|
||||
color: #116329;
|
||||
background-color: #11632960;
|
||||
background-color: var(--override-addition-inner-diff-background);
|
||||
}
|
||||
|
||||
.token-deleted {
|
||||
color: #82071e;
|
||||
background-color: #82071e40;
|
||||
background-color: var(--override-deletion-inner-diff-background);
|
||||
}
|
||||
|
||||
.token-heading {
|
||||
@ -92,94 +90,86 @@
|
||||
|
||||
/* DARK */
|
||||
|
||||
.dark .token-variable {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.dark {
|
||||
.token-variable {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token-property {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token-property {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token-type {
|
||||
color: #7ee787;
|
||||
}
|
||||
.token-type {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.dark .token-variable-special {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token-variable-special {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token-definition {
|
||||
color: #ffa657;
|
||||
}
|
||||
.token-definition {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.dark .token-number {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.token-number {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.dark .token-string {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token-string {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token-string-special {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.token-string-special {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.dark .token-keyword {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token-keyword {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token-comment {
|
||||
color: #8b949e;
|
||||
}
|
||||
.token-comment {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.dark .token-meta {
|
||||
color: #ffa657;
|
||||
}
|
||||
.token-meta {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.dark .token-invalid {
|
||||
color: #ffa198;
|
||||
}
|
||||
.token-invalid {
|
||||
color: #ffa198;
|
||||
}
|
||||
|
||||
.dark .token-tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
.token-tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.dark .token-attribute {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token-attribute {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token-attribute-value {
|
||||
color: var(--color-token-attribute-value);
|
||||
}
|
||||
.token-attribute-value {
|
||||
color: var(--color-token-attribute-value);
|
||||
}
|
||||
|
||||
.dark .token-inserted {
|
||||
color: #7ee787;
|
||||
background-color: #7ee78740;
|
||||
}
|
||||
.token-heading {
|
||||
color: var(--color-token-variable-special);
|
||||
}
|
||||
|
||||
.dark .token-deleted {
|
||||
color: #ffa198;
|
||||
background-color: #ffa19840;
|
||||
}
|
||||
.token-link {
|
||||
color: var(--color-token-variable-special);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dark .token-heading {
|
||||
color: var(--color-token-variable-special);
|
||||
}
|
||||
.token-strikethrough {
|
||||
text-decoration: strike-through;
|
||||
}
|
||||
|
||||
.dark .token-link {
|
||||
color: var(--color-token-variable-special);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.token-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark .token-strikethrough {
|
||||
text-decoration: strike-through;
|
||||
}
|
||||
|
||||
.dark .token-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark .token-emphasis {
|
||||
font-style: italic;
|
||||
.token-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user