gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 10:33:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

text-area-fixes

Browse Source
This commit is contained in:
Pavel Laptev 2024-10-30 22:03:13 +01:00 committed by Nico Domino
parent 6e54b2389b
commit 56aaccd3eb
5 changed files with 98 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/app.html
View File

@ -6,7 +6,7 @@
%sveltekit.head%
</head>
<body class="text-base">
<body class="text-base" spellcheck="false">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

8
apps/desktop/src/lib/branch/BranchLabel.svelte
View File

@ -99,14 +99,14 @@
outline: none;
/* not readonly */
&:not([readonly]):not([disabled]):hover {
background-color: var(--clr-bg-2);
&:not([readonly]):not([disabled]):not(:focus):hover {
background-color: var(--clr-bg-1-muted);
}
&:not([readonly]):not([disabled]):focus {
outline: none;
background-color: var(--clr-bg-2);
border-color: var(--clr-border-2);
background-color: var(--clr-bg-1-muted);
border: 1px solid var(--clr-border-2);
}
}
.branch-name-input[readonly] {

13
apps/desktop/src/lib/branch/StackingSeriesDescription.svelte
View File

@ -33,7 +33,7 @@
if (e.key === 'Escape') {
textAreaEl?.blur();
if (value === '') {
if (e.currentTarget.value === '') {
onEmpty?.();
}
}
@ -50,20 +50,21 @@
padding: 0 2px;
border: 1px solid transparent;
border-radius: var(--radius-s);
width: calc(100% + 4px);
margin-left: -2px;
margin-bottom: -2px;
width: 100%;
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
&:hover {
&:not(:focus-within):hover {
background-color: var(--clr-bg-1-muted);
}
&:focus-within {
background-color: var(--clr-bg-1-muted);
border-color: var(--clr-border-2);
border: 1px solid var(--clr-border-2);
/* background-color: var(--clr-bg-2); */
}
}
</style>

11
apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
View File

@ -217,9 +217,11 @@
/>
<div class="branch-info__content">
<div class="text-14 text-bold branch-info__name">
<span class:no-upstream={!forgeBranch} class="remote-name">
{$baseBranch.pushRemoteName ? `${$baseBranch.pushRemoteName} /` : 'origin /'}
</span>
{#if forgeBranch}
<span class="remote-name">
{$baseBranch.pushRemoteName ? `${$baseBranch.pushRemoteName} /` : 'origin /'}
</span>
{/if}
<BranchLabel
name={currentSeries.name}
onChange={(name) => editTitle(name)}
@ -319,6 +321,7 @@
.remote-name {
min-width: max-content;
padding: 0 0 0 2px;
color: var(--clr-scale-ntrl-60);
}
}
@ -332,12 +335,14 @@
}
.branch-info__content {
overflow: hidden;
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 0;
margin-left: -2px;
}
.branch-action {

129
packages/ui/src/lib/Textarea.svelte
View File

@ -11,6 +11,8 @@
minRows?: number;
maxRows?: number;
autofocus?: boolean;
spellcheck?: boolean;
autoComplete?: string;
class?: string;
flex?: string;
padding?: {
@ -67,6 +69,8 @@
onkeydown
}: Props = $props();
let isEmpty = $state(value === '');
function getSelectionRange() {
const selection = window.getSelection();
if (selection) {
@ -90,6 +94,14 @@
}
}
});
$effect(() => {
if (value === ' ' || value === '') {
isEmpty = true;
} else {
isEmpty = false;
}
});
</script>
<div
@ -98,6 +110,11 @@
style:--font-size={pxToRem(fontSize)}
style:--min-rows={minRows}
style:--max-rows={maxRows}
style:--padding-top={pxToRem(padding.top)}
style:--padding-right={pxToRem(padding.right)}
style:--padding-bottom={pxToRem(padding.bottom)}
style:--padding-left={pxToRem(padding.left)}
style:--line-height-ratio={1.6}
style:flex
>
{#if label}
@ -129,6 +146,8 @@
currentTarget: EventTarget & HTMLTextAreaElement;
};
isEmpty = innerText === '';
oninput?.(eventMock);
}}
onkeydown={(e: KeyboardEvent) => {
@ -154,11 +173,8 @@
class="textarea scrollbar {className}"
class:disabled
class:text-input={!unstyled}
class:textarea-placeholder={value === ''}
style:padding-top={pxToRem(padding.top)}
style:padding-right={pxToRem(padding.right)}
style:padding-bottom={pxToRem(padding.bottom)}
style:padding-left={pxToRem(padding.left)}
class:textarea-unstyled={unstyled}
class:textarea-placeholder={isEmpty}
style:border-top-width={borderTop && !borderless ? '1px' : '0'}
style:border-right-width={borderRight && !borderless ? '1px' : '0'}
style:border-bottom-width={borderBottom && !borderless ? '1px' : '0'}
@ -173,54 +189,65 @@
</div>
<style lang="postcss">
@layer textarea {
.textarea-container {
display: flex;
flex-direction: column;
gap: 6px;
overflow-x: hidden;
}
.textarea-container {
display: flex;
flex-direction: column;
gap: 6px;
overflow-x: hidden;
}
.textarea {
font-family: var(--base-font-family);
line-height: var(--body-line-height);
font-weight: var(--base-font-weight);
white-space: pre-wrap;
cursor: text;
resize: none;
@layer components {
.textarea-unstyled {
outline: none;
width: 100%;
font-size: var(--font-size);
min-height: calc(var(--font-size) * 1.5 * var(--min-rows));
max-height: calc(var(--font-size) * 1.5 * var(--max-rows));
overflow-y: auto; /* Enable scrolling when max height is reached */
overflow-x: hidden;
word-wrap: break-word;
border-color: transparent;
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
&.disabled {
cursor: default;
}
&.textarea-placeholder {
display: block;
white-space: pre-wrap;
&:before {
content: var(--placeholder-text);
color: var(--clr-text-3);
cursor: text;
pointer-events: none;
position: relative;
}
}
}
.textarea-label {
color: var(--clr-text-2);
border: none;
}
}
.textarea {
font-family: var(--base-font-family);
line-height: var(--body-line-height);
font-weight: var(--base-font-weight);
white-space: pre-wrap;
cursor: text;
resize: none;
width: 100%;
font-size: var(--font-size);
min-height: calc(
var(--font-size) * var(--line-height-ratio) * var(--min-rows) + var(--padding-top) +
var(--padding-bottom)
);
max-height: calc(
var(--font-size) * var(--line-height-ratio) * var(--max-rows) + var(--padding-top) +
var(--padding-bottom)
);
padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
overflow-y: auto; /* Enable scrolling when max height is reached */
overflow-x: hidden;
word-wrap: break-word;
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
&.disabled {
cursor: default;
}
&.textarea-placeholder {
display: block;
white-space: pre-wrap;
&:before {
content: var(--placeholder-text);
color: var(--clr-text-3);
cursor: text;
pointer-events: none;
position: absolute;
}
}
}
.textarea-label {
color: var(--clr-text-2);
}
</style>