GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -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>
TRIAEIOU <github.com/TRIAEIOU>
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>
<ButtonToolbar class="justify-content-between" wrap={false}>
<LabelButton disabled={true}>
<LabelButton ellipsis disabled={true}>
{$info.oldNotetypeName}
</LabelButton>
<Badge iconSize={70}>

10
ts/components/LabelButton.svelte
View file

@ -14,7 +14,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let active = false;
export let disabled = false;
export let tabbable = false;
export let ellipsis = false;
let buttonRef: HTMLButtonElement;
const dispatch = createEventDispatcher();
@ -27,6 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="label-button {className}"
class:active
class:primary
class:ellipsis
title={tooltip}
{disabled}
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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
padding: 0 calc(var(--buttons-size) / 3);
font-size: var(--font-size);
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 DropdownItem from "../components/DropdownItem.svelte";
import LabelButton from "../components/IconButton.svelte";
import IconButton from "../components/IconButton.svelte";
import LabelButton from "../components/LabelButton.svelte";
import Popover from "../components/Popover.svelte";
import Shortcut from "../components/Shortcut.svelte";
import WithFloating from "../components/WithFloating.svelte";