* Layout toolbar using CSS grid, introducing left and right trays
The trays provide a space for add-ons to introduce their own widgets to the toolbar without interfering with each other.
* Align tray items to the top
* Move absolutely positioned add-on items to right toolbar tray
Workaround that fixes breakages in add-ons like AMBOSS, Study Timer, and potentially others that currently still inject absolutely positioned elements into the toolbar using `top_toolbar_did_init_links`.
* Account for add-ons that add manual padding (e.g. Study Timer)
* Add docstrings and slightly refactor
* Tweak item alignment
* Introduce hooks for extending left and right toolbar trays
* Assign CSS classes to all tray items
* Add disclaimer on transitional nature of new hooks
* 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)
Qt seems to be treating min-width more like width, and truncates text.
The issue is not limited to macOS with force_custom_styles: with a
sufficiently large amount of text on a button, it truncates on other
platforms too.
https://forums.ankiweb.net/t/2-1-55-issue-with-auto-browser-and-upload-download-dialog/25636
There are a few other uses of min-width in the styling - it may be worth
checking whether they suffer from the same issue as well.
The Rust community appear to have converged on tracing - it's used by
the Rust compiler, and receives close to 10x the number of downloads
that slog does. Its API is more ergonomic, and it does a much nicer
job with async rust.
To make this change, we no longer pass around explicit loggers, and rely
on a globally-registered one. The log file location has been changed
from one in each profile folder to a single one in the base folder. This
will remain empty for most users, since only errors are logged by default,
but may be useful for debugging future changes.
* Use a webview to show add-on's config help
This allows add-ons to embed images for example.
* Improve initial size of splitter widgets
* Decrease font size and margin of webview
This reverts commit 5dc79e22cd.
I appear to have been confused in my earlier testing, as reverting
this change seems to make no difference the top bar on first startup,
and fixes a bunch of other regressions that the original change introduced.
https://github.com/ankitects/anki/issues/2269
* Swap flag and mark indicator position in RTL mode
* Make buttons of bottom toolbar align to edge of screen in RTL mode
* Use start instead of left and end instead of right
Ensures the background is the correct color by the time the webview
is shown. We keep the #night check for now, as it's useful when testing
in an external browser.
The starting size of a webview seems to be 640x480, but if it is hidden
without retainSizeWhenHidden being set, the dialog it contains can end
up with a height of 0, which prevents the dialog from being shown.
By being explicit about our desired starting size, we can use a more
useful default, and avoid the issue of missing dialogs.
* Facilitate updating of hooks
- Add instructions in contributing.md
- Change addon_config_editor_will_update_json hook to work with the new
hookslib code
* Fix typo in docs
* Always run replaced hook
* Use lowercase list for typing
* Forbid defining both a replaced and a legacy hook
* 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.
When opening the graphs screen in dark mode, we want to load the
page first and then reveal the webview, to prevent a flash of white
that can appear as the page loads. Previously we did this for any
call to load_ts_page(), but this results in flicker when refreshing
an existing webview, such as the move from deck list to congrats screen.
In those cases, at least on the machines I have to test with here, the
refresh is smoother without the hide and show step.
The new window case is still not ideal - while the hide+show prevents a
flash of white, there is a flash of black instead, presumably as the
webview draws the initially-blank framebuffer with the contents of the
webview.
* Fix QMenu item not having different color on hover
due to the color changes in #2220.
* Remove strong border on pressed Qt widgets
* Make button gradient more subtle
by changing gradient-start on hover instead of gradient-end.
* Apply QPushButton style to QSpinBox buttons
* Improve margin of QComboBox arrow
* Make button-bg same color as button-gradient-end
This makes the hover gradient more subtle.
This reverts commit fa4fc3e15a.
Issue turned out to be a packaging problem, and this should not be
required as the socket should be held open even if removed.
This reverts commit ee70006ec4.
There have been a number of people complaining that the current
behaviour is not intuitive, and they have a point - it's not the
way browsers behave when you navigate between pages.
I was able to reproduce the crashes fairly reliably by opening the
prefs screen on startup and shutting down the app after 600ms; after
this change the crashes no longer seem to occur.
* 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
(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
* 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.
* Center table headers
by giving the arrow a negative margin equal to its width.
* Prevent overlap with arrow for small headers (largely)
I didn't want to go all out and make the right padding equal to the width of the arrow, because it would cut off the text too early on sections that aren't active.
* Hide vertical table header on Windows too
* Remove margin between toolbars in main view
Didn't want to create a separate PR for such a minor change.
* Create better borders for QTableWidget
* Remove unused import
* Improve RTL appearance of table
* Use button gradient only on hover
* Apply hover effect to main window buttons
* Apply arbitrary change to force recreation of colors.py
* Undo arbitrary change to fix props not being created
* Remember that the comments are used for regex matching
* Yet another try
* Revert "Yet another try"
This reverts commit eaef4805c1618cf93ac2f93bc14ada900dc6d155.
* Update _root-vars.scss
Otherwise when user returns to profiles screen, they'll be unable to
open a different profile, as the collection is still open.
Encountered when opening the collection that triggered
https://github.com/ankitects/anki/issues/2123
* 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
* Add crate snafu
* Replace all inline structs in AnkiError
* Derive Snafu on AnkiError
* Use snafu for card type errors
* Use snafu whatever error for InvalidInput
* Use snafu for NotFoundError and improve message
* Use snafu for FileIoError to attach context
Remove IoError.
Add some context-attaching helpers to replace code returning bare
io::Errors.
* Add more context-attaching io helpers
* Add message, context and backtrace to new snafus
* Utilize error context and backtrace on frontend
* Rename LocalizedError -> BackendError.
* Remove DocumentedError.
* Have all backend exceptions inherit BackendError.
* Rename localized(_description) -> message
* Remove accidentally committed experimental trait
* invalid_input_context -> ok_or_invalid
* ensure_valid_input! -> require!
* Always return `Err` from `invalid_input!`
Instead of a Result to unwrap, the macro accepts a source error now.
* new_tempfile_in_parent -> new_tempfile_in_parent_of
* ok_or_not_found -> or_not_found
* ok_or_invalid -> or_invalid
* Add crate convert_case
* Use unqualified lowercase type name
* Remove uses of snafu::ensure
* Allow public construction of InvalidInputErrors (dae)
Needed to port the AnkiDroid changes.
* Make into_protobuf() public (dae)
Also required for AnkiDroid. Not sure why it worked previously - possible
bug in older Rust version?
* Give QMenu cursor: pointer
* Darken border colors in dark theme
* Refactor cursor: pointer event filter
* Add QMenu stylesheet
* Remove min-width for QMenu item
* Add QMenuBar styles
with increased height for touchscreen users and more visible highlight color.
* Fix type
* Revert "Add QMenuBar styles"
This reverts commit 6ae405a073b15389b7926ef8aa91c3b228a7889e.
* Remove strong border from QMenu checkbox style
* Keep highlight color consistent
* Adjust highlight-bg
* Increase horizontal padding and adjust checkbox margin
* Introduce border-faint var and make default border brighter in dark mode
* Fix 1px move on hover and make highlight color more subtle
* Remove win10 styles
because the properties are set in the other stylesheets anyway.
* Fix bottom border of QMenuBar not showing underneath entries
* Remove unused import
* Make border-faint one shade darker in light theme
* Use showText to show add-on import errors
Long error messages can be completely unreadable as QMessageBox doesn't
show a scrollbar and the text can't be selected and copied by default (on Windows at least).
* HTML-escape error
* 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>
* 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
* 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
* Fix create_vars_from_map not creating vars with default definition
* Add white and black to vars
* Replace some hard-coded SVGs with mdi equivalents
* Implement function to dynamically adjust SVG icon color
* Use new svg function to make Qt stylesheet icons respond to theme changes
* Use svg function for sidebar tool icons
* Create copy for each new color instead of modifying source file
* Fix check fails
* Add custom checkbox style for #2079
* Add example of how to generate svgs during build (dae)
* Create arbitrary color variants for each icon with Bazel
* Remove unused label (dae)
* Use cursor: pointer on QCheckBoxes too and exclude disabled widgets
* Left-align all QCheckBoxes to make hover-area and clickable area the same
Altough the clickable area has always been restricted to the label, the widget itself stretched all the way. This became a problem with the new cursor-pointer for checkboxes.
* Remove Switch duplicate from deck-options
* Add cursor: pointer to Switch and RevertButton
* Add cursor: pointer to bottom toolbar buttons
* Add cursor: pointer to gears
* Add cursor: pointer to radio and checkbox inputs of graphs page
* Improve button appearance in stats screen
* Add cursor: pointer to QTabBar and QToolButton
* Add cursor: pointer to non-editable QComboBox
* Center settings-will-take-effect-after notice in preferences screen
* Use public without_qt5_compat_wrapper() function
* Run prettier
* Use horizontal orientation on browser splitter by default
* Add View menu action to toggle browser orientation
* Add shortcut for toggleOrientation action
based on the most popular add-on.
* Try to fix typing issue
* Make orientation respond to aspect ratio
aspect ratio < 1 means vertical orientation, >= 1 horizontal
* Implement three-way switch for browser orientation
* Fix typing
* Add separator before QWidgetAction
* Use submenu instead of widget and adjust enum
* Add accelerators; move non-accelerator strings into separate .ftl (dae)
* Move BrowserLayout to its own file (dae)
* Make several colors more faint
* Move selection-color definition out of table.py and adjust colors
* Use functions for repetitive border-gradient definitions
* Tweak QTableView and QScrollBar styles
* Use mdi icon for Qt drag handles and adjust padding in browser.ui
* Apply appropriate drag-handle icon depending on orientation
* Fix formatting
* Remove unused import
* Add right margin to browser layout
* Apply splitter styling on macOS as well (dae)
+ Remove the styling from sliders, as it was presumably not intentional.
