langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor SpinBox component (#2223)

Browse Source 
this fixes the increment button not showing.
This commit is contained in:
Matthias Metelka 2022-12-01 06:34:54 +01:00 committed by GitHub
parent 5dc79e22cd
commit 1ab4ee38c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ts/components/SpinBox.svelte
View File

@ -68,21 +68,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div class="spin-box" on:wheel={handleWheel}> <div class="spin-box" on:wheel={handleWheel}>
<button <button
class="left" class="decrement"
disabled={rtl ? value == max : value == min} disabled={value == min}
tabindex="-1"
on:click={() => { on:click={() => {
input.focus(); input.focus();
if (rtl && value < max) { if (value > min) {
change(step);
} else if (value > min) {
change(-step); change(-step);
} }
}} }}
on:mousedown={() => on:mousedown={() =>
longPress(() => { longPress(() => {
if (rtl && value < max) { if (value > min) {
change(step);
} else if (value > min) {
change(-step); change(-step);
} }
})} })}
@ -92,7 +89,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}} }}
> >
<IconConstrain> <IconConstrain>
{@html chevronLeft} {@html rtl ? chevronRight : chevronLeft}
</IconConstrain> </IconConstrain>
</button> </button>
<input <input
@ -109,21 +106,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:focusout={() => (focused = false)} on:focusout={() => (focused = false)}
/> />
<button <button
class="right" class="increment"
disabled={rtl ? value == min : value == max} disabled={value == max}
tabindex="-1"
on:click={() => { on:click={() => {
input.focus(); input.focus();
if (rtl && value > min) { if (value < max) {
change(-step);
} else if (value < max) {
change(step); change(step);
} }
}} }}
on:mousedown={() => on:mousedown={() =>
longPress(() => { longPress(() => {
if (rtl && value > min) { if (value < max) {
change(-step);
} else if (value < max) {
change(step); change(step);
} }
})} })}
@ -133,7 +127,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}} }}
> >
<IconConstrain> <IconConstrain>
{@html chevronRight} {@html rtl ? chevronLeft : chevronRight}
</IconConstrain> </IconConstrain>
</button> </button>
</div> </div>
@ -143,19 +137,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
.spin-box { .spin-box {
width: 100%; width: 100%;
background: var(--canvas-inset);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex;
justify-content: space-between;
input { input {
width: 100%; flex-grow: 1;
padding: 0.2rem 1.5rem 0.2rem 0.75rem;
background: var(--canvas-inset);
color: var(--fg);
border: none; border: none;
outline: none; outline: none;
text-align: center; text-align: center;
background: transparent;
&::-webkit-inner-spin-button { &::-webkit-inner-spin-button {
display: none; display: none;
} }
@ -164,27 +159,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&:hover, &:hover,
&:focus-within { &:focus-within {
button { button {
opacity: 1; visibility: visible;
}
input {
border-left: 1px solid var(--border-subtle);
border-right: 1px solid var(--border-subtle);
} }
} }
} }
button { button {
opacity: 0; visibility: hidden;
position: absolute;
@include button.base($border: false); @include button.base($border: false);
border-radius: 0;
height: 100%;
&.left { &.decrement {
top: 0; align-self: flex-start;
right: auto;
bottom: 0;
left: 0;
border-right: 1px solid var(--border);
} }
&.right { &.increment {
position: absolute; align-self: flex-end;
right: 0;
left: auto;
border-left: 1px solid var(--border);
} }
} }
</style> </style>