Commit Graph

11 Commits

Author SHA1 Message Date
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
Damien Elmes
4089e76800
Add option to shrink editor images by default (#2071)
+ Don't persist shrinking toggle

Closes #1894
2022-09-26 09:47:50 +10:00
Matthias Metelka
8142176f84
Introduce new color palette using Sass maps (#2016)
* Remove --medium-border variable

* Implement color palette using Sass maps

I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette.

Significant changes:
- light theme is brighter
- dark theme is darker
- borders are softer

I also deleted some platform- and night-mode-specific code.

* Use custom colors for note view switch

* Use same placeholder color for all inputs

* Skew color palette for more dark values

by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones.

* Adjust frame- window- and border colors

* Give deck browser entries --frame-bg as background color

* Define styling for QComboBox and QLineEdit globally

* Experiment with CSS filter for inline-colors

Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme.

* Use different map structure for _vars.scss

after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871

* Move custom QLineEdit styles out of searchbar.py

* Merge branch 'main' into color-palette

* Revert QComboBox stylesheet override

* Align gray color palette more with macOS

* Adjust light theme

* Use --slightly-grey-text for options tab color

* Replace gray tones with more neutral values

* Improve categorization of global colors

by renaming almost all of them and sorting them into separate maps.

* Saturate highlight-bg in light theme

* Tweak gray tones

* Adjust box-shadow of EditingArea to make fields look inset

* Add Sass functions to access color palette and semantic variables

in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076

* Showcase use of access functions in several locations

@hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."?

* Fix focus box shadow transition and remove default shadow for a cleaner look

I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing.

* Tweak light theme border and shadow colors

* Add functions and colors to base_lib

* Add vars_lib as dependency to base_lib and button_mixins_lib

* Improve uses of default-themed variables

* Use old --frame-bg color and use darker tone for canvas-default

* Return CSS var by default and add palette-of function for raw value

* Showcase use of palette-of function

The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice.

* Light theme: decrease brightness of canvas-default and adjust fg-default

* Use canvas-inset variable for switch knob

* Adjust light theme

* Add back box-shadow to EditingArea

* Light theme: darken background and flatten transition

also set hue and saturation of gray-8 to 0 (like all the other grays).

* Reduce flag colors to single default value

* Tweak card/note accent colors

* Experiment with inset look for fields again

Is this too dark in night mode? It's the same color used for all other text inputs.

* Dark theme: make border-default one shade darker

* Tweak inset shadow color

* Dark theme: make border-faint darker than canvas-default

meaning two shades darker than it currently was.

* Fix PlainTextInput not expanding

* Dark theme: use less saturated flag colors

* Adjust gray tones

* Fix nested variables not getting extracted correctly

* Rename canvas-outset to canvas-elevated

* Light theme: darken canvas-default

* Make canvas-elevated a bit darker

* Rename variables and use them in various components

* Refactor button mixins

* Remove fusion vars from Anki

* Adjust button gradients

* Refactor button mixins

* Fix deck browser table td background color

* Use color function in buttons.scss

* Rework QTabWidget stylesheet

* Fix crash on browser open

* Perfect QTableView header

* Fix bottom toolbar button gradient

* Fix focus outline of bottom toolbar buttons

* Fix custom webview scrollbar

* Fix uses of vars in various webviews

The command @use vars as * lead to repeated inclusion of the CSS vars.

* Enable primary button color with mixin

* Run prettier

* Fix Python code style issues

* Tweak colors

* Lighten scrollbar shades in light theme

* Fix code style issues caused by merge

* Fix harsh border color in editor

caused by leftover --medium-border variables, probably introduced with a merge commit.

* Compile Sass before extracting Python colors/props

This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values.

* Desaturate primary button colors by 10%

* Convert accidentally capitalized variable names to lowercase

* Simplify color definitions with qcolor function

* Remove default border-focus variable

* Remove redundant colon

* Apply custom scrollbar CSS only on Windows and Linux

* Make border-subtle color brighter than background in dark theme

* Make border-subtle color a shade brighter in light theme

* Use border-subtle for NoteEditor and EditorToolbar border

* Small patches
2022-09-16 14:11:18 +10:00
Henrik Giesel
1a87937973
Fix sticky field labels - Make editor toolbar+tag editor non sticky in editor (#2058)
* Add back overflow:hidden to field descriptions

* Add explaining comment

* Put back overflow:hidden in FieldsEditor

* Move inline padding from Fields component but EditorField+LabelContainer

* Simplify editor design by making editor toolbar not sticky

* Make tag editor in note editor non-sticky as well

* Fix merge mess

* The floating elements were portaled because I passed in undefined and they have a default argument

- Fix unrelated to PR
2022-09-12 19:22:22 +10:00
Henrik Giesel
9ca13ca3bc
Refactor how toolbar buttons get to surround within editor fields (#1931)
* Export surrounder directly from RichTextInput

* Change wording in editor/surround

* Remove empty line

* Change wording

* Fix interfaces

* Add field description directly in NoteEditor

* Strip description logic from ContentEditable

* Make RichTextInput position: relative

* Make attachToShadow an async function

* Apply field styling to field description

* Show FieldDescription only if content empty

* Remove descriptionStore and descriptionKey

* Revert "Make attachToShadow an async function"

This reverts commit b62705eadf7335c7ee0c6c8797047e1f1ccdbf44.

SvelteActionReturnType does not accept Promise<void>

* Fix mess after merge commit

* Require registering surround formats
2022-08-15 13:34:16 +10:00
Henrik Giesel
b6fb64fde1
Implement cloze buttons in Mathjax editor (#1860)
* Introduce RichTextClozeButtons

* Implement cloze buttons in Mathjax editor
2022-05-13 13:04:20 +10:00
Henrik Giesel
5b1fcccf33
Add extra button group for cloze commands (#1756)
* First attempt at adding a directory for icons under //ts

* Fix image import

* Fix import order

* Add cloze button group

* Fix issue with toolbar.toolbar dynamically slottable

* Change tooltip for repeating cloze deletion

* Fix repeat cloze button not working on macOS (dae)
2022-03-31 13:30:00 +10:00
Henrik Giesel
8b84368e3a
Move all buttons to our custom inline surrounding (#1682)
* Clarify some comments

* Don't destructure insertion trigger

* Make superscript and subscript use domlib/surround

* Create new {Text,Highlight}ColorButton

* Use domlib/surround for textcolor

- However there's still a crucial bug, when you're breaking existing
  colored span when unsurrounding, their color is not restored

* Add underline format to removeFormats

* Simplify type of ElementMatcher and ElementClearer for end users

* Add some comments for normalize-insertion-ranges

* Split normalize-insertion-ranges into remove-adjacent and remove-within

* Factor out find-remove from unsurround.ts

* Rename merge-mach, simplify remove-within

* Clarify some comments

* Refactor first reduce

* Refactor reduceRight

* Flatten functions in merge-ranges

* Move some functionality to merge-ranges and do not export

* Refactor merge-ranges

* Remove createInitialMergeMatch

* Finish refactoring of merge-ranges

* Refactor merge-ranges to minimal-ranges and add some unit testing

* Move more logic into text-node

* Remove most most of the logic from remove-adjacent

- remove-adjacent is still part of the "merging" logic, as it increases
  the scope of the child node ranges

* Add some tests for edge cases

* Merge remove-adjacent logic into minimal-ranges

* Refactor unnecessary list destructuring

* Add some TODOs

* Put removing nodes and adding new nodes into sequence

* Refactor MatchResult to MatchType and return clear from matcher

* Inline surround/helpers

* Shorten name of param

* Add another edge case test

* Add an example where commonAncestorContainer != normalization level

* Fix bug in find-adjacent when find more than one nested nodes

* Allow comments for Along type

* Simplify find-adjacent by removing intermediate and/or curried functions

* Remove extend-adjacent

* Add more tests when find-adjacent finds by descension

* Fix find-adjacent descending into block-level elements

* Add clarifying comment to refusing to descend into block-level elements

* Move shifting logic into find-adjacent

* Rename file matcher to match-type

* Give a first implemention of TreeVertex

* Remove MatchType.ALONG

- findAdjacent now directly modifies the range

* Rename MatchType.MATCH into MatchType.REMOVE

* Implement a version of find-within that utilizies match-tree

* Turn child node range into a class

* Fix bug in new find-adjacent function

* Make all find-adjacent tests test for ranges

* Surrounding within farthestMatchingAncestor when available

* Fix an issue with negligable elements

- also rename "along" elements to "negligable"

* Add two TODOs to SurroundFormat interface

* Have a messy first implementation of the new tree-node algorithm

* Maintain whether formatting nodes are covered or within user selection

* Move covered and insideRange into TreeNode superclass

* Reimplement findAdjacent logic

* Add extension logic

* Add an evaluate method to nodes

* Introduce BlockNode

* Add a first evaluate implementation

* Add left shift and inner shift logic

* Implement SurroundFormatUser

* Allow pass in formatter, ascender and merger from outside

* Fix insideRange and covered switch-up

* Fix MatchNode.prototype.isAscendable

* Fix another switch-up of covered and insideRange...

* Remove a lot of old code

* Have surround functions only return the range

- I still cannot think of a good reason why we should return addedNodes
  and removedNodes, except for testing.

* Create formatting-tree directory

* Create build-tree directory + Move find-above up to /domlib

* Remove range-anchors

* Move unsurround logic into no-splitting

* Fix extend-merge

* Fix inner shift being eroneusly returned as left shift

* Fix oversight in SplitRange

* Redefine how ranges are recreated

* Rename covered to insideMatch and put as fourth parameter instead of third

* Keep track of match holes and match leaves

* Rename ChildNodeRange to FlatRange

* Change signature of matcher

* Fix bug in extend-merge

* Improve Match class

* Utilize cache in TextColorButton

* Implement getBaseSurrounder for TextColorButton

* Add matchAncestors field to FormattingNode

* Introduce matchAncestors and getCache

* Do clearing during parsing already

- This way, you know whether elements will be removed before getting to
  Formatting nodes

* Make HighlightColorButton use our surround mechanism

* Fix a bug with calling .removeAttribute and .hasAttribute

* Add side button to RemoveFormat button

* Add disabled to remove format side button

* Expose remove formats on RemoveFormat button

* Reinvent editor/surround as Surrounder class

* Fix split-text when working with insert trigger

* Try counteracting the contenteditable's auto surrounding

* Remove matching elements before normalizing

* Rewrite match-type

* Move setting match leaves into build

* Change editing strings

- So that color strings match bold/italic strings better

* Fix border radius of List options menu

* Implement extensions functionality

* Remove some unnecessary code

* Fix split range endOffset

* Type MatchType

* Reformat MatchType + add docs

* Fix domlib/surround/apply

* Satisfy last tests

* Register Surrounder as package

* Clarify some comments

* Correctly implement reformat

* Reformat with inactive eraser formats

* Clear empty spans with RemoveFormatButton

* Fix Super/Subscript button

* Use ftl string for hardcoded tooltip

* Adjust wording
2022-02-22 22:17:22 +10:00
Henrik Giesel
30bbbaf00b
Use eslint for sorting our imports (#1637)
* Make eslint sort our imports

* fix missing deps in eslint rule (dae)

Caught on Linux due to the stricter sandboxing

* Remove exports-last eslint rule (for now?)

* Adjust browserslist settings

- We use ResizeObserver which is not supported in browsers like KaiOS,
  Baidu or Android UC

* Raise minimum iOS version 13.4

- It's the first version that supports ResizeObserver

* Apply new eslint rules to sort imports
2022-02-04 18:36:34 +10:00
Henrik Giesel
a981e56008
Improved add-on extension API (#1626)
* Add componentHook functionality

* Register package NoteEditor

* Rename OldEditorAdapter to NoteEditor

* Expose instances in component-hook as well

* Rename NoteTypeButtons to NotetypeButtons

* Move PreviewButton initialization to BrowserEditor.svelte

* Remove focusInRichText

- Same thing can be done by inspecting activeInput

* Satisfy formatter

* Fix remaining rebase issues

* Add .bazel to .prettierignore

* Rename currentField and activeInput to focused{Field,Input}

* Move identifier to lib and registration to sveltelib

* Fix Dynamic component insertion

* Simplify editingInputIsRichText

* Give extra warning in svelte/svelte.ts

- This was caused by doing a rename of a files, that only differed in
  case: NoteTypeButtons.svelte to NotetypeButtons.svelte
- It was quite tough to figure out, and this console.log might make it
  easier if it ever happens again

* Change signature of contextProperty

* Add ts/typings for add-on definition files

* Add Anki types in typings/common/index.d.ts

* Export without .svelte suffix

It conflicts with how Svelte types its packages

* Fix left over .svelte import from editor.py

* Rename NoteTypeButtons to unrelated to ensure case-only rename

* Rename back to NotetypeButtons.svelte

* Remove unused component-hook.ts, Fix typing in lifecycle-hooks

* Merge runtime-require and register-package into one file

+ Give some preliminary types to require

* Rename uiDidLoad to loaded

* Fix eslint / svelte-check

* Rename context imports to noteEditorContext

* Fix import name mismatch

- I wonder why these issues are not caught by svelte-check?

* Rename two missed usages of uiDidLoad

* Fix ButtonDropdown from having wrong border-radius

* Uniformly rename libraries to packages

- I don't have a strong opinion on whether to name them libraries or
  packages, I just think we should have a uniform name.
- JS/TS only uses the terms "module" and "namespace", however `package`
  is a reserved keyword for future use, whereas `library` is not.

* Refactor registration.ts into dynamic-slotting

- This is part of an effort to refactor the dynamic slotting (extending
  buttons) functionality out of components like ButtonGroup.

* Remove dynamically-slottable logic from ButtonToolbar

* Use DynamicallySlottable in editor-toolbar

* Fix no border radius on indentation button dropdown

* Fix AddonButtons

* Remove Item/ButtonGroupItem in deck-options, where it's not necessary

* Remove unnecessary uses of Item and ButtonGroupItem

* Fix remaining tests

* Fix relative imports

* Revert change return value of remapBinToSrcDir to ./bazel/out...

* Remove typings directory

* Adjust comments for dynamic-slottings
2022-02-03 14:52:11 +10:00
Henrik Giesel
f534dbb8e5
Separate input components into their own directories / Remove WithShortcut (#1613)
* Put PlainTextInput into its own directory

* Create a directory for RichTextInput

* Create editor-toolbar directory

* Move PreviewButton into editor-toolbar

* The time to refactor this is not quite yet here

* Create tag-editor directory

* Remove some of the uses of WithShortcut

* Remove all uses of WithShortcut from editor package

* Remove last uses of WithShortcut

* Fix typo
2022-01-24 11:43:09 +10:00