anki/ftl/core
Matthias Metelka 5f6ac1a916
Field redesign (#2002)
* Adjust size of legacy buttons

* Revert "Adjust size of legacy buttons"

This reverts commit fb888fe1db9050c34b1a7b0820e6da5ac91ccee6.

* Remove unused function from #1476

* Use outline version for tag icon

* Add chevron icons

* Remove code icons, keep one pin icon version

* Add code-bg color

* Redesign fields

* Remove unused import

* Fix imports

* Move PlainTextBadge between editing inputs

where it belongs :)

* Make whole separator line clickable

* Fix transition

and format

* Don't show toggle when field is collapsed

* Show toggle only on hover

for mobile I'd like to implement a swipe mechanism.

* Use tweened SVG for triangle instead of CSS hack

* Implement more obvious HTML toggle on bottom right

* Reduce field height by a few pixels

* Reduce field height by two pixels

* Show HTML toggle when PlainTextInput is active, regardless of hover/focus

* Remove RichTextBadge.svelte

* Create separate collapsed field state

this means users can collapse fields with the HTML editor open and it will stay open when the field is expanded again.

* Add slide out animation to EditingArea, RichTextInput and PlainTextInput

only for collapsing, because it is choppy on expansion (common issue with Svelte transitions).

* Fix aliasing issue on focused field corners

* Make StickyBadge feel more responsive

* Move StickyBadge closer to field border

* Adjust field gutter/margins

* Make LabelContainer sticky

to make field operations accessible on fields with a lot of content.

* Add back html icons, remove visual editor icons

* Revert "Add code-bg color"

This reverts commit 4200f354193710b3acd9bcf84b67958e200ddcdb.

* Add rich text icon, remove strikethrough code icon

* Revert PlainTextBadge to original position

* Adjust margins in FieldState

* Rename PlainTextBadge to SecondaryInputBadge

in preparation for #1987

* Run eslint and prettier

* Make whole LabelContainer clickable area for collapse/expand

* Revert "Add slide out animation to EditingArea, RichTextInput and PlainTextInput"

This reverts commit 9a2b3410d0ead37ae1da408d68e14507a058a613.

* Fix error on collapse/expansion

this was caused by the {#if} blocks, which resulted in the deletion of original EditingAreas.

* Refocus when toggling chevron and secondary input badge

* Revert "Revert "Add code-bg color""

This reverts commit 1cfd3bda65354ab90c1ab4cbbef47596a1be8754.

* Use single rotating chevron icon and make it RTL-compatible

* Remove redundant CSS transition rule

* Introduce animated Collapsible component and fix refocus on toggle

* Do not try to force repaint, as it is not required

* Remove RTL store from LabelContainer

the direction is already applied globally.

* Collapse secondary input with field

* Add focusedField to NoteEditorAPI

* Replace :global CSS selector with class .visible

thus removing the assumption that the component is used inside an EditorField.

https://github.com/ankitects/anki/pull/2002#discussion_r944876448

* Use named function syntax instead of function expressions

* Add explanation comment

* Remove unnecessary :bind directive

* Create CollapseBadge component

* Move :global selector into .plain-text-input

* Add comment explaining box-shadow pseudo-element

* Move Collapsible from EditingArea, PlainTextInput and RichTextInput into user components

* Rename SecondaryInputBadge to PlainTextBadge and remove generalization logic

I kept the rich text icon inside icons.ts for future use.

* Sort imports

* Fix background-color for duplicates not showing

with yet another pseudo-element :)

The pseudo-element that covers up field borders on scroll caused this issue. Fighting fire with fire here.

* Increase size of plain text toggle to original value again

This makes the clickable area a bit bigger and looks slightly more consistent with StickyBadge.

* Scrap pseudo-element mess in LabelContainer and tackle the actual issue

* Add class .visible to StickyBadge too

This introduces a peculiar bug: The active prop of StickyBadge resets to false when the mouse leaves the field - regardless of the actual back-end value.

* Fix sticky badge resetting on mouseleave/blur

* Apply overflow: hidden only during transition

fixes MathJax handle getting cut off by fields

* Remove unused variable

* Fix visual bug caused by overflow:hidden not applying in time

I tried several asynchronous approaches, but they all caused issues: either they prevented the CSS transition or they made field inputs lose focus.

In the end I resorted to direct, synchronous DOM-manipulation and added an explanatory comment.

* Decrease Collapsible load time by blocking first transition

I noticed the sliding animation has a hefty performance impact when a large number of fields is loaded simultaneously.

Blocking the first transition (which isn't even visible) results in a big boost in load time.

* Replace usages of gap with margins for children

* Revert unnecessary removal of grid-gap definition

* Correct comments about flex-gap property

mistook that for grid-gap.

* Resolve style issues

* Add minimum targets to gap comment

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
2022-08-19 10:02:28 +10:00
..
actions.ftl Disable full screen on Windows with OpenGL (#1715) 2022-03-09 14:21:54 +10:00
adding.ftl Make missing cloze a warning again 2021-06-15 08:43:00 +02:00
browsing.ftl View menu (#1668) 2022-02-17 16:31:46 +10:00
card-stats.ftl Move update logic into CardInfo.svelte 2021-10-18 09:01:24 +02:00
card-template-rendering.ftl Template err improvements (#1953) 2022-07-09 13:00:03 +10:00
card-templates.ftl run ftl/remove-unused.sh 2021-11-24 14:44:02 +10:00
change-notetype.ftl Change Notetype UI Rework (#1499) 2021-11-24 12:09:55 +10:00
custom-study.ftl Rework display of available cards in custom study 2022-05-20 17:52:02 +10:00
database-check.ftl move ftl into top level ftl/ folder; make it source of truth for aqt 2020-11-18 16:20:58 +10:00
deck-config.ftl Deck-specific Limits (#1955) 2022-07-19 18:27:25 +10:00
decks.ftl run ftl/remove-unused.sh 2021-11-24 14:44:02 +10:00
editing.ftl Field redesign (#2002) 2022-08-19 10:02:28 +10:00
empty-cards.ftl automatically format/check ftl files 2020-11-22 15:30:59 +10:00
errors.ftl Check ids when gathering data (#1928) 2022-06-24 13:56:52 +10:00
exporting.ftl Change "unique note identifier" to "unique identifier" 2022-06-11 10:11:29 +10:00
fields.ftl Default input setting in fields dialog (#1987) 2022-08-18 12:30:18 +10:00
findreplace.ftl automatically format/check ftl files 2020-11-22 15:30:59 +10:00
importing.ftl CSV import/export fixes and features (#1898) 2022-06-09 10:28:01 +10:00
keyboard.ftl Add getPlatformString for making shortcuts to platform string 2021-04-22 13:04:24 +02:00
media-check.ftl avoid using literal 1 in English translations 2020-12-18 10:14:19 +10:00
media.ftl remove format separator from recording string 2020-12-16 19:44:47 +10:00
network.ftl automatically format/check ftl files 2020-11-22 15:30:59 +10:00
notetypes.ftl Plaintext import/export (#1850) 2022-06-01 20:26:16 +10:00
preferences.ftl Garbage-collect unused FTL strings 2022-04-09 12:39:50 +10:00
profiles.ftl Backup improvements (#1728) 2022-03-21 19:40:42 +10:00
scheduling.ftl Reset->change in due date prompt 2022-06-01 19:44:51 +10:00
search.ftl search-invalid-flag -> search-invalid-flag-2 2021-06-02 21:49:33 +02:00
statistics.ftl run ftl/remove-unused.sh 2021-11-24 14:44:02 +10:00
studying.ftl Fix bury count (more) (#1712) 2022-03-07 11:03:14 +10:00
sync.ftl tweak sync conflict message 2021-09-08 19:19:23 +10:00
undo.ftl move action names out of undo.ftl into actions.ftl 2021-05-08 17:11:54 +10:00