anki/ts/components
Matthias Metelka f72570c604
Make tags editor resizable using Henrik's components (#2046)
* Make tags editor resizable using Henrik's components

All credit for the components goes to Henrik. I just tweaked the design a bit and implemented them in NoteEditor.

Co-Authored-By: Henrik Giesel <hengiesel@gmail.com>

* Remove PaneContent padding

Co-Authored-By: Henrik Giesel <hengiesel@gmail.com>

* Add responsive box-shadows on scroll/resize

only shown when content overflows in the respective direction.

* Remove comment

* Fix overflow calculations and shadow mix-up

This happened when I switched from using scrolledToX to overflowX booleans.

* Simplify overflow calculations

* Make drag handles 0 height/width

The remaining height requirement comes from a margin set on NoteEditor.

* Run eslint on components

* Split editor into three panes: Toolbar, Fields, Tags

* Remove upper split for now

to unblock 2.1.55 beta

* Move panes.scss to sass folder

* Use single type for resizable panes

* Implement collapsed state toggled with click on resizer

* Add button to uncollapse tags pane and focus input

* Add indicator for # of tags

* Use dbclick to prevent interference with resize state

* Add utility functions for expand/collapse

* Meddle around with types and formatting

* Fix collapsed state being forgotten on second browser open (dae)

* Fix typecheck (dae)

Our tooling generates .d.ts files from the Svelte files, but it doesn't
expect variables to be exported. By changing them into functions, they
get included in .bazel/bin/ts/components/Pane.svelte.d.ts

* Remove an unnecessary bridgeCommand (dae)

* Fix the bottom of tags getting cut off (dae)

Not sure why offsetHeight is inaccurate in this case.

* Add missing header (dae)

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
2022-09-28 14:02:32 +10:00
..
Absolute.svelte Translate Editor entirely to Svelte (#1403) 2021-10-18 22:01:15 +10:00
Badge.svelte Insert symbols overlay (#2051) 2022-09-10 18:46:59 +10:00
BUILD.bazel Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
ButtonGroup.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
ButtonGroupItem.svelte Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
ButtonToolbar.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
CheckBox.svelte Move all buttons to our custom inline surrounding (#1682) 2022-02-22 22:17:22 +10:00
Col.svelte Introduce our own Container, Row, and Col components (#1495) 2021-11-17 13:49:52 +10:00
Collapsible.svelte Collapsible patch (#2052) 2022-09-14 15:26:07 +10:00
Container.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
context-keys.ts Live theme changes (#1497) 2021-11-25 07:17:41 +10:00
DropdownDivider.svelte WIP: Use our components in deckoptions sticky bar 2021-05-18 16:32:29 +02:00
DropdownItem.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
DynamicallySlottable.svelte Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
FloatingArrow.svelte Use WithFloating for MathjaxOverlay (#2011) 2022-09-05 17:20:00 +10:00
helpers.ts Use trailingComma: all setting in .prettierrc (#1435) 2021-10-19 09:06:00 +10:00
HorizontalResizer.svelte Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
IconButton.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
IconConstrain.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
icons.ts Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
Item.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
LabelButton.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
Pane.svelte Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
PaneContent.svelte Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
Popover.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
resizable.ts Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
Row.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
Select.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
SelectOption.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
Shortcut.svelte Allow using keyup with registerShortcut (#1755) 2022-03-29 09:28:44 +10:00
Spacer.svelte Space out Sticky Bottom with Spacer component 2021-09-09 15:37:58 +02:00
SpinBox.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
StickyContainer.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
Switch.svelte Improve hover feedback on various widgets (#2079) 2022-09-20 16:34:15 +10:00
tsconfig.json update to latest rules_nodejs & switch to ts_project 2021-10-01 12:52:53 +10:00
types.ts Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
VerticalResizer.svelte Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
WithContext.svelte Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
WithFloating.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
WithOverlay.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
WithState.svelte Use WithFloating for MathjaxOverlay (#2011) 2022-09-05 17:20:00 +10:00
WithTooltip.svelte Default input setting in fields dialog (#1987) 2022-08-18 12:30:18 +10:00