* Update to latest Node LTS
* Add sveltekit
* Split tslib into separate @generated and @tslib components
SvelteKit's path aliases don't support multiple locations, so our old
approach of using @tslib to refer to both ts/lib and out/ts/lib will no
longer work. Instead, all generated sources and their includes are
placed in a separate out/ts/generated folder, and imported via @generated
instead. This also allows us to generate .ts files, instead of needing
to output separate .d.ts and .js files.
* Switch package.json to module type
* Avoid usage of baseUrl
Incompatible with SvelteKit
* Move sass into ts; use relative links
SvelteKit's default sass support doesn't allow overriding loadPaths
* jest->vitest, graphs example working with yarn dev
* most pages working in dev mode
* Some fixes after rebasing
* Fix/silence some svelte-check errors
* Get image-occlusion working with Fabric types
* Post-rebase lock changes
* Editor is now checked
* SvelteKit build integrated into ninja
* Use the new SvelteKit entrypoint for pages like congrats/deck options/etc
* Run eslint once for ts/**; fix some tests
* Fix a bunch of issues introduced when rebasing over latest main
* Run eslint fix
* Fix remaining eslint+pylint issues; tests now all pass
* Fix some issues with a clean build
* Latest bufbuild no longer requires @__PURE__ hack
* Add a few missed dependencies
* Add yarn.bat to fix Windows build
* Fix pages failing to show when ANKI_API_PORT not defined
* Fix svelte-check and vitest on Windows
* Set node path in ./yarn
* Move svelte-kit output to ts/.svelte-kit
Sadly, I couldn't figure out a way to store it in out/ if out/ is
a symlink, as it breaks module resolution when SvelteKit is run.
* Allow HMR inside Anki
* Skip SvelteKit build when HMR is defined
* Fix some post-rebase issues
I should have done a normal merge instead.
* 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)
* 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)
* 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 bb0a158f96.
* 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 77bfc854ba.
* 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 75c59da65a.
* Revert "Remove option to set font size of browser entries"
This reverts commit a543783d8e.
* 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>
