GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix non-Latin text wrapping in deck options dropdown (#2334)

Browse source 
* Fix wrong import

* Fix text centering

* Update CONTRIBUTORS

* Add ellipsis prop to LabelButton; fix buttons

* Revert  6911fbfa6

* Create a prop to toggle ellipsis in LabelButton.svelte

Thanks to @hikaru-y: using "white-space: nowrap;" and "overflow: hidden;" together even when "text-overflow: ellipsis" is not needed can be problematic.

This fixes the text centering on deck options's SaveButton.

* Toggle ellipsis in NotetypeSelector.svelte's leftmost LabelButton

Without it, the button can expand indefinitely depending on the previous Note Type's name.

Co-Authored-By: Hikaru Y. <hkrysg@gmail.com>

Co-authored-by: Hikaru Y. <hkrysg@gmail.com>
This commit is contained in:
Fabricio Duarte 2023-01-19 07:59:27 -03:00 committed by GitHub
parent 2d4a2983bc
commit 73eec1d35a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CONTRIBUTORS
View file

@ -108,6 +108,7 @@ Yutsuten <mateus.etto@gmail.com>
Zoom <zoomrmc+git@gmail.com> Zoom <zoomrmc+git@gmail.com>
TRIAEIOU <github.com/TRIAEIOU> TRIAEIOU <github.com/TRIAEIOU>
Stefan Kangas <stefankangas@gmail.com> Stefan Kangas <stefankangas@gmail.com>
Fabricio Duarte <fabricio.duarte.jr@gmail.com>
******************** ********************

2
ts/change-notetype/NotetypeSelector.svelte
View file

@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<ButtonToolbar class="justify-content-between" wrap={false}> <ButtonToolbar class="justify-content-between" wrap={false}>
<LabelButton disabled={true}> <LabelButton ellipsis disabled={true}>
{$info.oldNotetypeName} {$info.oldNotetypeName}
</LabelButton> </LabelButton>
<Badge iconSize={70}> <Badge iconSize={70}>

8
ts/components/LabelButton.svelte
View file

@ -14,6 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let active = false; export let active = false;
export let disabled = false; export let disabled = false;
export let tabbable = false; export let tabbable = false;
export let ellipsis = false;
let buttonRef: HTMLButtonElement; let buttonRef: HTMLButtonElement;
@ -27,6 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="label-button {className}" class="label-button {className}"
class:active class:active
class:primary class:primary
class:ellipsis
title={tooltip} title={tooltip}
{disabled} {disabled}
tabindex={tabbable ? 0 : -1} tabindex={tabbable ? 0 : -1}
@ -47,8 +49,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
@include button.border-radius; @include button.border-radius;
white-space: nowrap; white-space: nowrap;
overflow: hidden; &.ellipsis {
text-overflow: ellipsis; overflow: hidden;
text-overflow: ellipsis;
}
padding: 0 calc(var(--buttons-size) / 3); padding: 0 calc(var(--buttons-size) / 3);
font-size: var(--font-size); font-size: var(--font-size);
width: auto; width: auto;

2
ts/deck-options/SaveButton.svelte
View file

@ -10,8 +10,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import DropdownDivider from "../components/DropdownDivider.svelte"; import DropdownDivider from "../components/DropdownDivider.svelte";
import DropdownItem from "../components/DropdownItem.svelte"; import DropdownItem from "../components/DropdownItem.svelte";
import LabelButton from "../components/IconButton.svelte";
import IconButton from "../components/IconButton.svelte"; import IconButton from "../components/IconButton.svelte";
import LabelButton from "../components/LabelButton.svelte";
import Popover from "../components/Popover.svelte"; import Popover from "../components/Popover.svelte";
import Shortcut from "../components/Shortcut.svelte"; import Shortcut from "../components/Shortcut.svelte";
import WithFloating from "../components/WithFloating.svelte"; import WithFloating from "../components/WithFloating.svelte";