Commit Graph

686 Commits

Author SHA1 Message Date
Henrik Giesel
6d0a242a1b
Fix overwrite surround (#2247)
* Revert "Revert to setFormat() to fix color setting"

This reverts commit 613b5c1034.

* Fix overwrite-surround
2022-12-09 10:10:58 +10:00
Damien Elmes
3413115be7 Fix MathJax editor not hiding on blur again
Originally fixed with e14f87ba99,
accidentally reverted in #2070
2022-12-08 22:46:23 +10:00
Matthias Metelka
d2fa50dd9f
Persist field states with SessionOptions object (#2241)
* Persist collapsed- and field states with SessionOptions object

* Format types.ts

* Replace format function with f-string

* Give setters more descriptive parameter names

* Do not use default prefix for descriptions and fonts

since they are not meant to be changed via Svelte.
2022-12-07 15:37:46 +10:00
Matthias Metelka
e059aab184
Improve Select component and add it back to Change Notetype screen (#2239)
* Do not include oldIdx in Select change event

I included it due to confusion about the variable names in the Change Notetype components.

* Remove redundant on:change listener from NotetypeSelector

* Use Select component in Change Notetype MapperRow (again)

* Remove redundant --cols and --col-size definitions

Bootstrap divides rows into columns of equal width by default.

* Add highlight to active DropdownItem

* Remove bootstrap dropdown item styling

* Fix JS error on dropdown accept action

cause: When closing the dropdown, buttonRef was removed before the callback in setTimeout was run.
2022-12-07 15:31:37 +10:00
Damien Elmes
613b5c1034 Revert to setFormat() to fix color setting
The surrounder code is somewhat complicated, and it could do with either
more documentation, or a simplification.

Closes #2121
2022-12-05 17:00:47 +10:00
Abdo
6ef460e74a
Close MathJax editor when Esc is pressed (#2237) 2022-12-05 15:08:38 +10:00
Damien Elmes
1a444f30e9 Fix formatting inside selection not being removed
Regression introduced in #2017 while fixing another bug.

Closes #2072
2022-12-03 21:41:54 +10:00
Matthias Metelka
43ce4cacc6
Give containers brighter color than canvas (#2220)
* Give deck browser table an elevated container look

* Tweak colors of elevated containers (e.g. in deck options)

* Prepare editor fields for custom backgrounds

* Tweak field margin and add explanatory comment
2022-11-29 17:54:42 +10:00
Damien Elmes
b2049209ff Re-enable formatting for .ts files
There are some style differences compared to prettier, and not all are
necessarily an improvement, but it's much faster now.
2022-11-28 09:33:04 +10:00
Damien Elmes
ea5153e7a4 Re-enable formatting for .svelte files 2022-11-28 09:17:39 +10:00
Damien Elmes
5e0a761b87
Move away from Bazel (#2202)
(for upgrading users, please see the notes at the bottom)

Bazel brought a lot of nice things to the table, such as rebuilds based on
content changes instead of modification times, caching of build products,
detection of incorrect build rules via a sandbox, and so on. Rewriting the build
in Bazel was also an opportunity to improve on the Makefile-based build we had
prior, which was pretty poor: most dependencies were external or not pinned, and
the build graph was poorly defined and mostly serialized. It was not uncommon
for fresh checkouts to fail due to floating dependencies, or for things to break
when trying to switch to an older commit.

For day-to-day development, I think Bazel served us reasonably well - we could
generally switch between branches while being confident that builds would be
correct and reasonably fast, and not require full rebuilds (except on Windows,
where the lack of a sandbox and the TS rules would cause build breakages when TS
files were renamed/removed).

Bazel achieves that reliability by defining rules for each programming language
that define how source files should be turned into outputs. For the rules to
work with Bazel's sandboxing approach, they often have to reimplement or
partially bypass the standard tools that each programming language provides. The
Rust rules call Rust's compiler directly for example, instead of using Cargo,
and the Python rules extract each PyPi package into a separate folder that gets
added to sys.path.

These separate language rules allow proper declaration of inputs and outputs,
and offer some advantages such as caching of build products and fine-grained
dependency installation. But they also bring some downsides:

- The rules don't always support use-cases/platforms that the standard language
tools do, meaning they need to be patched to be used. I've had to contribute a
number of patches to the Rust, Python and JS rules to unblock various issues.
- The dependencies we use with each language sometimes make assumptions that do
not hold in Bazel, meaning they either need to be pinned or patched, or the
language rules need to be adjusted to accommodate them.

I was hopeful that after the initial setup work, things would be relatively
smooth-sailing. Unfortunately, that has not proved to be the case. Things
frequently broke when dependencies or the language rules were updated, and I
began to get frustrated at the amount of Anki development time I was instead
spending on build system upkeep. It's now about 2 years since switching to
Bazel, and I think it's time to cut losses, and switch to something else that's
a better fit.

The new build system is based on a small build tool called Ninja, and some
custom Rust code in build/. This means that to build Anki, Bazel is no longer
required, but Ninja and Rust need to be installed on your system. Python and
Node toolchains are automatically downloaded like in Bazel.

This new build system should result in faster builds in some cases:

- Because we're using cargo to build now, Rust builds are able to take advantage
of pipelining and incremental debug builds, which we didn't have with Bazel.
It's also easier to override the default linker on Linux/macOS, which can
further improve speeds.
- External Rust crates are now built with opt=1, which improves performance
of debug builds.
- Esbuild is now used to transpile TypeScript, instead of invoking the TypeScript
compiler. This results in faster builds, by deferring typechecking to test/check
time, and by allowing more work to happen in parallel.

As an example of the differences, when testing with the mold linker on Linux,
adding a new message to tags.proto (which triggers a recompile of the bulk of
the Rust and TypeScript code) results in a compile that goes from about 22s on
Bazel to about 7s in the new system. With the standard linker, it's about 9s.

Some other changes of note:

- Our Rust workspace now uses cargo-hakari to ensure all packages agree on
available features, preventing unnecessary rebuilds.
- pylib/anki is now a PEP420 implicit namespace, avoiding the need to merge
source files and generated files into a single folder for running. By telling
VSCode about the extra search path, code completion now works with generated
files without needing to symlink them into the source folder.
- qt/aqt can't use PEP420 as it's difficult to get rid of aqt/__init__.py.
Instead, the generated files are now placed in a separate _aqt package that's
added to the path.
- ts/lib is now exposed as @tslib, so the source code and generated code can be
provided under the same namespace without a merging step.
- MyPy and PyLint are now invoked once for the entire codebase.
- dprint will be used to format TypeScript/json files in the future instead of
the slower prettier (currently turned off to avoid causing conflicts). It can
automatically defer to prettier when formatting Svelte files.
- svelte-check is now used for typechecking our Svelte code, which revealed a
few typing issues that went undetected with the old system.
- The Jest unit tests now work on Windows as well.

If you're upgrading from Bazel, updated usage instructions are in docs/development.md and docs/build.md. A summary of the changes:

- please remove node_modules and .bazel
- install rustup (https://rustup.rs/)
- install rsync if not already installed  (on windows, use pacman - see docs/windows.md)
- install Ninja (unzip from https://github.com/ninja-build/ninja/releases/tag/v1.11.1 and
  place on your path, or from your distro/homebrew if it's 1.10+)
- update .vscode/settings.json from .vscode.dist
2022-11-27 15:24:20 +10:00
Matthias Metelka
6c6a10c142
Fix some issues with the Tag Editor (#2215)
* Prevent global focus border on tag-input

* Fix margin issues with tag editor

* Remove redundant autocomplete call

that caused the addition of an empty tag when tag suggestions were selected with the Enter key.

* Prevent input text from overlapping with newly added tags

... at least when they're selected from the autocomplete list via mouse. If they're selected via keyboard, there's still an overlapping issue.

* Fix error on updateSuggestions

* Hide empty tag

* Make double-click to collapse/expand translatable
2022-11-27 10:45:33 +10:00
Stefan Kangas
5551a37f03
Fix typos (#2210) 2022-11-24 20:18:57 +10:00
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.
2022-11-23 16:50:15 +10:00
Matthias Metelka
fdfdd67c3a
Revert to pseudo-element approach for field description (#2209)
* Revert to pseudo-element approach for field description

to ensure it changes on update.

* Simplify CSS
2022-11-23 16:37:12 +10:00
Matthias Metelka
e9430fde3b
Give OptionsButton its own ButtonGroup and move it to more prominent position (#2207)
and give it some padding
2022-11-23 16:18:29 +10:00
Matthias Metelka
fba46e9815
Fix Floating Ui error causing freezes on image resize (#2206)
* Replace autoPlacement with flip

* Remove logic made redundant by use of flip()

* Edit preferred placement on components using WithFloating

* Rename placement to preferredPlacement

* Set "bottom" as default placement and remove redundant declarations
2022-11-23 16:16:09 +10:00
Abdo
434287a50a
Fix inverted Ctrl+right/left handling in RTL fields (again) (#2191) 2022-11-15 11:14:18 +10:00
Matthias Metelka
d902b00d0e
Fix reduce motion bottom border issues (#2185)
* Fix reduce motion bottom border issues

* Disable show/hide on hover with reduce motion setting

for purists.
2022-11-08 22:57:10 +10:00
Matthias Metelka
96381f3f2c
Make dupes highlight persist on field blur (#2182) 2022-11-05 11:05:21 +10:00
Matthias Metelka
03fe2385ef
Fix HTML editor not showing content initially (#2181)
* Fix HTML editor not showing initially

* Remove line numbers from PlainTextInput
2022-11-05 10:58:04 +10:00
Matthias Metelka
c60a1c8ebd
Remove inset shorthand property for Qt5 support (#2180) 2022-11-05 10:55:17 +10:00
Matthias Metelka
2a510fe230
Set same font size for all platforms and make editor UI a bit smaller (#2171)
* Use single base font size for all platforms

* Change 1.6em values to 1.5em in editor
2022-11-02 21:33:35 +10:00
Matthias Metelka
0770290765
Make fg-subtle subtle (#2164)
Meant to do this for a while (since I removed fg-faint), but didn't get around to it.
2022-11-02 18:30:13 +10:00
Matthias Metelka
b384417955
Add back thick field focus border (#2160)
* Add back thick field focus border

* Fix duplicate border color
2022-11-02 18:26:26 +10:00
Matthias Metelka
0c340c4f74
Add comments to Sass variables and tweak main window (#2137)
* Prevent multiple inclusion of variables in CSS files

* Use dict instead of tuple for variables

* Add comments to variables

* Improve appearance of main window

* Tweak main window styles

* Use json.dumps over pprint.format

* Make study button primary

* Improve header margin

* Make bottom toolbar slimmer

* Make congrats page more balanced

* Fix type issue

* Replace day/night with light/dark

* Exclude top-level-drag-row from hover effect

* Create dataclass for variables

* Run formatter

* Apply CSS variables from Python side

Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future.

* Fix typing

* Fix rgba values in Qt

* Darken button background

* Fix palette not being applied in light theme

For some odd reason this problem arose much later than #2016.

* Tweak default button look

* Reformat

* Apply CSS vars to ts pages

* Include elevation in button_mixins_lib

* Cast opacity to int

* Add some margin to studiedToday info

* Tweak light theme button gradient

* Tweak highlight-bg for light theme

* Add back default button color

as it made the browser sidebar tool icons dark in light theme.

* Reformat

* Tweak light theme buttons once more

Sorry for the back-and-forth. Sass only compiles when there are changes in user files, not when I only change the vars.

* Fix bottom toolbar button indicators

* Make buttons more clicky

* Fix button padding

* Handle macOS separately again

* Decrease elevation effect for main window buttons to 1

* Imitate box-shadow for Qt elements

* Adjust shadow vars

* Adjust primary border color

because the save button in the deck options had a lighter color than its background gradient.

* Boost box-shadow color of primary buttons

* Format

* Adjust Qt box-shadow imitation and shadow colors

* Use more subtle default shadow color

* Add some more padding to top toolbar

* Revert "Apply CSS vars to ts pages"

This reverts commit 5d8e7f6b7ffc8894b6517ecbb8cfba35407fc69a.

* Revert "Apply CSS variables from Python side"

This reverts commit 87db774412fd2bfd75e2630d2c5e782daef96b5f.

* Better match the standard macOS buttons

In the dark theme the standard color is a lighter grey, but at least
the size/shape is similar again.

This doesn't work for the editor buttons.

* Reduce the top margin of the congrats screen

* Fix illegible buttons when changing theme on macOS; match dark button style
2022-10-29 10:48:53 +10:00
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>
2022-10-27 09:11:36 +10:00
Damien Elmes
ab6877c714 Fix indent/outdent shortcuts not working
https://forums.ankiweb.net/t/keyboard-shortcut-for-indent-not-working/24114/6
2022-10-26 12:38:13 +10:00
Matthias Metelka
2971eb9660
Center add-on icons and allow text buttons to expand in width (#2138)
* Fix text buttons not expanding in width

* Adjust icon and font size of add-on buttons
2022-10-24 13:51:04 +10:00
Matthias Metelka
f5abd3c6af
Make resizer snap to closest end and improve toggle (#2129)
* Make resizer snap to closest end and improve toggle

* Snap on window resize

* Remove event parameter

* Remove nested ternary expression
2022-10-13 10:13:19 +10:00
Damien Elmes
e14f87ba99 Switch back to clearing MathJax preview on blur
This means two clicks are required again, but that's the lesser of two
evils:

https://forums.ankiweb.net/t/anki-2-1-55-beta-mathjax-preview/23529/8

Better fixes welcome :-)
2022-10-12 14:56:38 +10:00
Matthias Metelka
d7deb5fafc
Move MathJax toggle to OptionsButton and fix two bugs (#2126)
* Rename MathJax toggle and move it to OptionsButton

* Apply MathJax setting to newly added blocks

* Actually remove MathJax element on delete
2022-10-12 14:34:25 +10:00
Matthias Metelka
62266aece4
Fix duplicate highlight and improve aesthetic (#2102) 2022-10-03 13:16:54 +10:00
Matthias Metelka
9b878a2229
Make auto-closing of HTML tags default but optional (#2101) 2022-10-03 13:14:57 +10:00
Matthias Metelka
de4d69454a
Set line-height = 1 on inline floating-reference (#2096) 2022-09-30 11:43:08 +10:00
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
eb5600019a Revert "Fix/autofix empty div (#2066)"
This reverts commit 892c9f6da8.

Reverting until #2093 can be addressed
2022-09-28 11:47:59 +10:00
Matthias Metelka
23e6b2123e
Redesign deck options inputs (#2082)
* Create _input-mixins.scss

* Use button-mixins on more elements

* Replace <select> tag with custom Select component

* Fix RevertButton causing cursor: pointer when hidden

* Increase SaveButton chevron width

* Hide floating component box-shadow when inactive

* Rework SpinBox and move it into components

* Run eslint and prettier

* Remove leftover options prop

* Pass disabled array to EnumSelector again

* Update MapperRow.svelte

* Darken QHeaderView border color

Slipping this in without an extra PR.

* Adjust disabled color, border and cursor

* Remove redundant icon definition from stylesheets

* Fix deck options initial config

* Fix z-index issues in change notetype screen

It might be best to handle z-index locally in each user component instead of hard-coded component values.

* Give web SpinBox a horizontal design

* Give QRadioButton the same treatment as QCheckBox in #2079

* Fix unused CSS selector warning with base button-mixin

* Remove redundant import

* Fix deck options save button

* Delete input-mixins and remove unused down-arrow

* Run eslint on change-notetype

* Run eslint on components
2022-09-27 12:16:45 +10:00
Damien Elmes
6a7f2d8a79 Restrict cloze shortcut workaround to non-increment case
The workaround is only needed for the option key, and seems to trip
some people up, perhaps due to the order they're pressing/releasing the
keys.

Closes #2090
2022-09-26 11:22:00 +10:00
Damien Elmes
dd939beafe Simplify asReference 2022-09-26 10:04:08 +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
c1176a2e6c
Fix custom webview scrollbar not showing (#2085)
* Fix custom scrollbar not showing

* Move body selector out of scrollbar mixin

* Apply custom scrollbar to child elements too

* Remove some duplicate definitions

* Run prettier
2022-09-26 09:13:06 +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
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
2022-09-14 15:26:07 +10:00
Henrik Giesel
9d9d4a97c7
Apply border radius of plain text input to code mirror as well (#2067) 2022-09-13 14:20:26 +10:00
Henrik Giesel
a87d877082
Fuzzy search in symbol insertion overlay (#2059)
* Add flag for enabling insert symbols feature

* Add symbols overlay directory

* Detect if :xy is inserted into editable

* Allow naive updating of overlay, and special handling of ':'

* First step towards better Virtual Element support

* Update floating to reference range on insert text

* Position SymbolsOverlay always on top or bottom

* Add a data-provider to emulate API

* Show correct suggestions in symbols overlay

* Rename to replacementLength

* Allow replacing via clicking in menu

* Optionally remove inline padding of Popover

* Hide Symbols overlay on blur of content editable

* Add specialKey to inputHandler and generalize how arrow movement is detected

- This way macOS users can use Ctrl-N to mean down, etc.

* Detect special key from within SymbolsOverlay

* Implement full backwards search while typing

* Allow navigating symbol menu and accepting with enter

* Add some entries to data-provider

* Satisfy eslint

* Generate symbolsTable from sources

* Use other github source, allow multiple names

In return, symbol must be unique

* Automatically scroll in symbols dropdown

* Use from npm packages rather than downloading from URL

* Remove console.log

* Remove print

Co-authored-by: Damien Elmes <dae@users.noreply.github.com>

* Add pointerDown event to input-handler

- so that SymbolsOverlay can reset on field click

* Make tab do the same as enter

* Make font a bit smaller but increase relative icon size

* Satisfy type requirement of handlerlist

* Revert changing default size of DropdownItems

* Remove some now unused code for bootstrap dropdowns

* Use fuse to allow fuzzy searching of symbols

* Remove unnecessary async handling in data-provider

I did that because at first I was still expecting to fetch the symbols
from the backend

* Apply field font family in symbol preview

* Remove inline padding from latex popover

* Rename data-provier to symbols-table

* Add some explaining comments to interface

* Allow for auto insertion symbols

* Use deleteData and after instead of replaceData

* Allow using html in symbols

* Show html symbols as html

* Add SymbolsEntry component

* Also include containshtml at low search precedence

* Put character entities and gemoji into their own files

* Factor out prepareInsertion method

* Allow deletion while searching for correct symbol

* Respect insertCompositionText

* Delete data-provider

* Restrict auto insert queries to max 5 characters

* Satisfy svelte check

* Fix the overlay sometimes not showing

This will make sure to always normalize text nodes before searching.
However it adjacent text is partially formatted, this will still not
find the whole query.

For example, currently, entering `<b>:for</b>al` and then inputting `l`,
will not trigger a search for `forall`, because of the <b> formatting

* Add empty line

* Do not trigger overlay, when last character is whitespace or colon

* Add missing fuse license
2022-09-13 14:19:19 +10:00
Henrik Giesel
892c9f6da8
Fix/autofix empty div (#2066)
* Remove empty divs in rich text input

* Refactor inline content detection

* Fix formatting
2022-09-13 14:11:47 +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
8f8f3bd465
Insert symbols overlay (#2051)
* Add flag for enabling insert symbols feature

* Add symbols overlay directory

* Detect if :xy is inserted into editable

* Allow naive updating of overlay, and special handling of ':'

* First step towards better Virtual Element support

* Update floating to reference range on insert text

* Position SymbolsOverlay always on top or bottom

* Add a data-provider to emulate API

* Show correct suggestions in symbols overlay

* Rename to replacementLength

* Allow replacing via clicking in menu

* Optionally remove inline padding of Popover

* Hide Symbols overlay on blur of content editable

* Add specialKey to inputHandler and generalize how arrow movement is detected

- This way macOS users can use Ctrl-N to mean down, etc.

* Detect special key from within SymbolsOverlay

* Implement full backwards search while typing

* Allow navigating symbol menu and accepting with enter

* Add some entries to data-provider

* Satisfy eslint

* Generate symbolsTable from sources

* Use other github source, allow multiple names

In return, symbol must be unique

* Automatically scroll in symbols dropdown

* Use from npm packages rather than downloading from URL

* Remove console.log

* Remove print

* Add pointerDown event to input-handler

- so that SymbolsOverlay can reset on field click

* Make tab do the same as enter

* Make font a bit smaller but increase relative icon size

* Satisfy type requirement of handlerlist

* Revert changing default size of DropdownItems

* Remove some now unused code for bootstrap dropdowns
2022-09-10 18:46:59 +10:00
Matthias Metelka
414ff5db1c
Redesign Qt widgets with stylesheets (#2050)
* 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

* Add custom styling for Qt controls

* 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

* Create stylesheet overrides for various Qt widgets

Including QPushButton, QComboBox, QSpinBox, QLineEdit, QListWidget, QTabWidget, QTreeWidget, QToolTip, QTableView, QScrollBar and sub-widgets.

* Make webview scrollbar look identical to Qt one

* Add blue colors for primary buttons

* Tweak disabled state of SpinBox button

* Apply styles to all platforms

mainly so people like @hgiesel can easily test the widget style overrides, but maybe you actually prefer them over the native ones, who knows :)

* Tweak webview button borders

* Add type annotations to eventFilter

* Adjust padding of QComboBox and its drop-down arrow

* Use isinstance for comparison

* Remove reimport of Any

* Revert "Merge branch 'redesign-test' into custom-qt-controls"

This reverts commit ff36297456b693a0d4b4b69f5f487ac1a01c1861, reversing
changes made to 6bb45355d143aa081d2d643933bd02ddc43206de.

* Add missing copyright header

* Left-align QTabWidget headers

* Exclude macOS from stylesheet overrides

* Fix failure to start on macOS (dae)

* Use standard macOS theme in dark mode (dae)

I believe this was originally behind a feature flag because the user
had to use a hack to get it to work
(https://forums.ankiweb.net/t/title-bar-dark-mode-fix-broken/1189),
and it did not work correctly when the system theme was changed.

Since the introduction of libankihelper and the app automatically
updating as the system theme changes, these issues no longer seem to
exist, and switching between light and dark appears to work consistently.

Pushed into this PR because it addresses the background color issue
mentioned in code review.

Closes #2054
2022-09-08 20:44:38 +10:00