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

* Revert "Adjust size of legacy buttons"

This reverts commit fb888fe1db.

* 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 4200f35419.

* 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 9a2b3410d0.

* 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 1cfd3bda65.

* 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

66 lines
2.8 KiB
Text

editing-actual-size = Toggle actual size
editing-add-media = Add Media
editing-align-left = Align left
editing-align-right = Align right
editing-an-error-occurred-while-opening = An error occurred while opening { $val }
editing-attach-picturesaudiovideo = Attach pictures/audio/video
editing-bold-text = Bold text
editing-cards = Cards
editing-center = Center
editing-change-color = Change color
editing-cloze-deletion = Cloze deletion (new card)
editing-cloze-deletion-repeat = Cloze deletion (same card)
editing-couldnt-record-audio-have-you-installed = Couldn't record audio. Have you installed 'lame'?
editing-customize-card-templates = Customize Card Templates
editing-customize-fields = Customize Fields
editing-cut = Cut
editing-double-click-image = double-click image
editing-double-click-to-expand = (double-click to expand)
editing-edit-current = Edit Current
editing-edit-html = Edit HTML
editing-fields = Fields
editing-float-left = Float left
editing-float-right = Float right
editing-float-none = No float
editing-indent = Increase indent
editing-italic-text = Italic text
editing-jump-to-tags-with-ctrlandshiftandt = Jump to tags with Ctrl+Shift+T
editing-justify = Justify
editing-latex = LaTeX
editing-latex-equation = LaTeX equation
editing-latex-math-env = LaTeX math env.
editing-mathjax-block = MathJax block
editing-mathjax-chemistry = MathJax chemistry
editing-mathjax-inline = MathJax inline
editing-mathjax-placeholder = Press { $accept } to accept, { $newline } for new line.
editing-media = Media
editing-ordered-list = Ordered list
editing-outdent = Decrease indent
editing-paste = Paste
editing-record-audio = Record audio
editing-remove-formatting = Remove formatting
editing-restore-original-size = Restore original size
editing-select-remove-formatting = Select formatting to remove
editing-show-duplicates = Show Duplicates
editing-subscript = Subscript
editing-superscript = Superscript
editing-tags = Tags
editing-tags-add = Add tag
editing-tags-copy = Copy tags
editing-tags-remove = Remove tags
editing-tags-select-all = Select all tags
editing-text-color = Text color
editing-text-highlight-color = Text highlight color
editing-to-make-a-cloze-deletion-on = To make a cloze deletion on an existing note, you need to change it to a cloze type first, via 'Notes>Change Note Type'
editing-toggle-html-editor = Toggle HTML Editor
editing-toggle-sticky = Toggle sticky
editing-expand-field = Expand field
editing-collapse-field = Collapse field
editing-underline-text = Underline text
editing-unordered-list = Unordered list
editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.
editing-toggle-mathjax-rendering = Toggle MathJax Rendering
## You don't need to translate these strings, as they will be replaced with different ones soon.
editing-html-editor = HTML Editor