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

Make SpinBox chevrons more subtle (#2243)

Browse Source 
* Make SpinBox chevrons more subtle

and keep showing them when input is focused.

* Show chevrons only on hover

* Revert "Show chevrons only on hover"

This reverts commit 20e5ec169116fe3638c53c6ec414151d20c0de6b.
This commit is contained in:
Matthias Metelka 2022-12-08 13:32:35 +01:00 committed by GitHub
parent 6481899454
commit fb2dcf1484
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ftl/core/actions.ftl
View File

@ -8,10 +8,12 @@ actions-copy = Copy
actions-create-copy = Create Copy actions-create-copy = Create Copy
actions-custom-study = Custom Study actions-custom-study = Custom Study
actions-decks = Decks actions-decks = Decks
actions-decrement-value = Decrement value
actions-delete = Delete actions-delete = Delete
actions-export = Export actions-export = Export
actions-filter = Filter actions-filter = Filter
actions-help = Help actions-help = Help
actions-increment-value = Increment value
actions-import = Import actions-import = Import
actions-manage = Manage... actions-manage = Manage...
actions-name = Name: actions-name = Name:

41
ts/components/SpinBox.svelte
View File

@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import * as tr from "@tslib/ftl";
import { isDesktop } from "@tslib/platform"; import { isDesktop } from "@tslib/platform";
import IconConstrain from "./IconConstrain.svelte"; import IconConstrain from "./IconConstrain.svelte";
@ -81,10 +82,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:focusout={() => (focused = false)} on:focusout={() => (focused = false)}
/> />
{#if isDesktop()} {#if isDesktop()}
<button <div
class="decrement" class="spinner decrement"
disabled={value == min} class:active={value > min}
tabindex="-1" tabindex="-1"
title={tr.actionsDecrementValue()}
on:click={() => { on:click={() => {
input.focus(); input.focus();
if (value > min) { if (value > min) {
@ -105,11 +107,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconConstrain> <IconConstrain>
{@html chevronDown} {@html chevronDown}
</IconConstrain> </IconConstrain>
</button> </div>
<button <div
class="increment" class="spinner increment"
disabled={value == max} class:active={value < max}
tabindex="-1" tabindex="-1"
title={tr.actionsIncrementValue()}
on:click={() => { on:click={() => {
input.focus(); input.focus();
if (value < max) { if (value < max) {
@ -130,13 +133,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconConstrain> <IconConstrain>
{@html chevronUp} {@html chevronUp}
</IconConstrain> </IconConstrain>
</button> </div>
{/if} {/if}
</div> </div>
<style lang="scss"> <style lang="scss">
@use "sass/button-mixins" as button;
.spin-box { .spin-box {
width: 100%; width: 100%;
background: var(--canvas-inset); background: var(--canvas-inset);
@ -159,16 +160,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
padding-right: 0.5em; padding-right: 0.5em;
} }
&:hover { &:hover,
button { &:focus-within {
visibility: visible; .spinner {
opacity: 0.1;
&.active {
opacity: 0.4;
cursor: pointer;
&:hover {
opacity: 1;
}
}
} }
} }
} }
button { .spinner {
visibility: hidden; opacity: 0;
@include button.base($border: false);
border-radius: 0;
height: 100%; height: 100%;
} }
</style> </style>