0a3ac591e6
6 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Matthias Metelka
|
68fa661b53
|
Finish #2070: Single overlay instead of per field (#2144)
* Move up MathjaxOverlay to be initialized only once * Move ImageOverlay to NoteEditor root * Move Symbols Overlay to NoteEditor root * Refactor image overlay to not require second mutation observer * Use elevation + overflow:hidden in Editorfield * Make it possible to show input next to each other again * Set handle background color to code bg * Make Collapsible unmount the component * Simplify how decorated elements are mounted * Set RichTextInput background to frame-bg again * Strip out FocusTrap code * Revert "Make Collapsible unmount the component" This reverts commit 52722065ea199fa57ae750fa34bf47ee1c5aab3c. * Allow clicking on label container to unfocus field * Fix mathjax overlay resetting too its api too soon * Allow scrolling on overlays * Set focus-border border-color in focused field * Fix background color of fields * Add back grid-gap removed it during merge to see if margin-top would behave any differently - which is not the case. * Fix double border issue within Collapsible.svelte * Format * Edit appearance of focused fields a bit * Remove unused properties * Include elevation in button_mixins_lib * Give label-container a background color Co-authored-by: Henrik Giesel <hengiesel@gmail.com> |
||
|
Matthias Metelka
|
35431c5944
|
Collapsible patch (#2052)
* Animate Collapsible in both directions * Fix field margin issues * Fix code style issues * Make duration prop optional * Implement reduced motion mode for Collapsible * Refactor Collapsible and add comments * Fix LabelContainer badges disappearing when field is still hovered * Remove reducedMotion store and use body class instead * Export optional animated boolean * Do not export duration * Add 5px top padding to Fields.svelte to make it look like it used to. * Revert "Add 5px top padding to Fields.svelte" This reverts commit f30026149a89f3d3b289c5030cd1ca34f728b036. * Add top margin of 5px to Fields.svelte |
||
|
Henrik Giesel
|
3642dc6245
|
Use WithFloating for MathjaxOverlay (#2011)
* Allow passing in reference into WithFloating as prop * Fix WithAutocomplete * Fix WithFloating for MathjaxOverlay * Add resize-store * Allow passing debug=True to jest_test for debugger support (#2013) * Disable auto-closing of HTML tags https://forums.ankiweb.net/t/set-html-editor-as-a-default-editor-instead-of-visual-editor/20988/3 Closes #1963 * Add slight margin to MathjaxEditor * Enable passing offset and shift to WithFloating * Hide overflow of mathjax editor * Add automatic hide functionality to sveltelib/position * Last polishes for Surrounder class (#2017) * Make private properties in Surrounder truly private * Fix remove logic of Surrounder * No reason for toggleTriggerRemove to be async * Allow using alt-shift to set all remove formats but this one * modifyFormat => updateFormat * Fix formatting * Fix field descriptions blocking cursor from being set (#2018) - happens when focus is in HTML editor * Remove hiding functionality again until it's really useful * Add support for autoPlacement * Implement new WithFloating that supports manually calling position() * Implement hide mechanisms * Add option in math dropdown to toggle MathJax rendering (#2014) * Add option in math dropdown to toggle MathJax rendering Closes #1942 * Hackily redraw the page when toggling MathJax * Add Fluent string * Default input setting in fields dialog (#1987) (kleinerpirat) * Introduce field setting to use plain text editor by default (kleinerpirat) * Remove leftover function from #1476 * Use boolean instead of string * Simplify clear_other_field_duplicates * Convert plain text key to camelCase * Move HTML item below the existing checkbox, instead of to the right (dae) Showing it on the right is more space efficient, but feels a bit cluttered IMHO. * Fix not being able to scroll when mouse hovers PlainTextInput (#2019) * Remove overscroll-behavior: none for * (all elements) * Revert "Remove overscroll-behavior: none for * (all elements)" This reverts commit 189358908cecd03027e19d8fe47822735319ec17. * Use body instead of *, but keep CSS rule * Unify two CSS rules * Remove console.logs * Reposition mathjax menu on switching between inline/block * Implement WithOverlay * Implement FloatingArrow * Display overlay with padding and brighter background * Rename to MathjaxOverlay * Simplify MathjaxOverlay component overall * Rename ImageHandle to image overlay * Generally fix ImageOverlay again * Increase z-index of StickyContainer * Fix setting block or inline on mathjax * Add reasons in closing-{click,keyup} * Have both WithFloating and WithOverlay use a simple show flag instead of a store * Remove subscribe-trigger * Fix clicking from one mathjax element to another * Check before executing cleanup * Do not wait for elements to mount before slotting in With{Floating,Overlay} * Allow using reference slot for WithFloating and WithOveray * Add inline argument to options * Add support for inline slot in WithOvelay * Use WithFloating for RemoveFormatButton * Remove last uses of DropdownMenu and WithDropdown * Remove all of the bootstrap dropdown components * Fix closing behavior of several buttons and ImageOverlay * Increase popover padding to 6px * Find a different way to create some padding at the bottom of the fields ...before the tag editor @kleinerpirat I think is what this css what trying to achieve? * Satisfy tests * Use removeStyleProperties in ImageOverlay * Use notify function in WithOverlay and WithFloating * Do not use portal for WithFloating and WithOverlay Allows for scrolling * Set hidden to default false in Rich/Plain TextInput * Reset handle when changing mathjax elements via click * Restrict size of empty mathjax image * Prevent sticky labels from obscuring menus * Remove several overflow-hidden * Fix empty string being falsy bug when editing mathjax * Do not import portal anymore * Use { reason, originalEvent } instead of symbol as update to modified event store * Fix closing behavior of image overlay (do not close after resize) * Simplify Collapsible * Use removeStyleProperties in Collapsible * Satisfy eslint * Fix latex shortcuts being mounted * Fix mathjax overlay not focusable in first field * Neither hide image overlay on escaped * Fix Block ButtonDropdown wrapping * Bring back portal to fix tag editor |
||
|
Matthias Metelka
|
e2193950a9
|
Add animation toggle to preferences (#2041)
* Add animation toggle to preferences and move settings affecting appearance together. * Add class to body if animations unchecked * Fix formatting in preferences.ftl * Update duration(height) function for Collapsible transition and add explanation. * Fix formatting * Increase duration baseline to 10 and decrease factor to 20 * Restore initial layout and rename option to "Reduce motion" * Move checkboxes together and fix tab order (dae) + Remove separation of UI size |
||
|
Matthias Metelka
|
d110c4916c
|
Introduce setting to collapse field by default (#1990)
* Introduce setting to collapse field by default * Fix schema order * Change wording from adjective to imperative sounds a bit less clunky * Update rslib/src/notetype/schema11.rs (dae) * Keep settings in single column * Add back Toggle Visual Editor string * Add RichTextBadge component and show it conditionally * Reverse input order depending on default setting * Make PlainTextInput border-radius responsive to toggle states * Prevent first Collapsible transition differently * Focus inputs after Collapsible transition The double tick calls are just a temporary solution until I find the exact moment an input is focusable again. * Use requestAnimationFrame to await focusable state Note: Svelte tick doesn't seem to work in this scenario. |
||
|
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> |