d380f3034c
4 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Matthias Metelka
|
b12476de9a
|
Simplify NoteEditor by replacing Pane components with Collapsible (#2395)
* Remove Pane components and use Collapsible for TagEditor * Update translations * Give TagEditor border and focus outline * Use ScrollArea from #2248 for fields * Refactor ScrollArea * Fix error caused by calling bridgeCommand when it's not available * Make sure tag editor fills whole width of container which is important for the CSV import page. * Update NoteEditor.svelte * Add back removed ftl strings * Fix tests (dae) |
||
|
Matthias Metelka
|
9f8667fb47
|
Auto-hide toolbar in Reviewer (#2262)
* Give webviews a slide-in animation if reduced motion isn't set. * Auto-hide toolbar in review mode moving the mouse above the main webview expands the toolbar. When the mouse leaves the toolbar, it will collapse after a delay of 2s. * Save some space on bottom toolbars * Use props for all hard-coded transition durations and decrease most commonly used duration (200ms) to 150ms. * Move auto-hide logic into ToolbarWebView and handle auto-hide specific events in the respective webview subclasses. * Fix typing issues * Fix flickering issue * Add auto_hide_toolbar opt-in to preferences * Rename hide_toolbar to collapse_toolbar to better describe the dock-like behaviour. * Rename setting to minimize_distractions * Reduce calls to pm in eventFilter * Run formatter * Revert setting title to something more specific * Increase default animation time to 180ms * Inset toolbar in review mode when auto-hide is not enabled. * Use card background on toolbar and add glass effect * Use flatten/elevate over inset/outset * Use flatten/elevate over inset/outset * Update toolbar.py * Fix toolbar background delay * Tweak styles * Use "collapse" instead of "auto-hide" * Fix background misalignment in collapse mode * Do not collapse toolbar when pointer is outside MainWebView * Reduce hide_timer interval to 1000ms * Use CSS to hide toolbar instead of setting webview height * Add guard to prevent backdrop-filter: blur on Qt 5.14 * Apply transition to body instead of toolbar to not complicate things for #2301. * Fix Qt 5.14 and apply guard globally * Fix background image scaling difference * Tweak preference wording (dae) |
||
|
Matthias Metelka
|
365c5e1fb2
|
UI size tweaks (#2184)
* Reduce font size of answer button indicators * Increase padding of browser rows with ResizeToContents on vertical header * Remove 0.8 scale factor for dropdown item font-size * Remove font-size prop entirely from DropdownItem * Revert "Remove font-size prop entirely from DropdownItem" This reverts commit bb0a158f96183cca74e198867070c2f99af04dc4. * Remove hard-coded Python font sizes * Move font size and scrollbar into _root-vars.scss * Revert editor size variable to 1.6 * Fix icon alignment * Fix checkbox alignment for dropdown items * Remove unused classes from Tag.svelte * Revert "Increase padding of browser rows with ResizeToContents on vertical header" This reverts commit 77bfc854ba140dd99aae98efcdd4af7052615fa6. * Remove option to set font size of browser entries * Add setting for browser row padding to preferences * Revert "Add setting for browser row padding to preferences" This reverts commit 75c59da65a1028e2caa3c48b247f99825c1b0b6c. * Revert "Remove option to set font size of browser entries" This reverts commit a543783d8ea079f39b7ae445152573c96be29841. |
||
|
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> |