* 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
Protobuf 3.15 introduced support for marking scalar fields like
uint32 as optional, and all of our tooling appears to support it
now. This allows us to use simple optional/null checks in our Rust/
TypeScript code, without having to resort to an inner message.
I had to apply a minor patch to protobufjs to get this working with
the json-module output; this has also been submitted upstream:
https://github.com/protobufjs/protobuf.js/pull/1693
I've modified CardStatsResponse as an example of the new syntax.
One thing to note: while the Rust and TypeScript bindings use optional/
null fields, as that is the norm in those languages, Google's Python
bindings are not very Pythonic. Referencing an optional field that is
missing will yield the default value, and a separate HasField() call
is required, eg:
```
>>> from anki.stats_pb2 import CardStatsResponse as R
... msg = R.FromString(b"")
... print(msg.first_review)
... print(msg.HasField("first_review"))
0
False
```
* 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
* Add _bytes methods for all methods in the backend
Expose get_note in qt/aqt/mediasrv.py
* Satisfy formatter
* Rename _bytes function to _raw and have them bytes as input
* Fix backend generation
* Use lib/proto/deckOptions in deck-options
* Add exposed_backend to qt/aqt/mediasrv.py
* Move some more backend methods to exposed_backend_list
* Use protobufjs for congrats and i18n
* Use protobufjs for completeTag
* Use protobufjs services in change-notetype
* Reorder post handlers in alphabetical manner
* Satisfy tests
* Remove unused collection methods
* Rename access_backend to raw_backend_request
* Use _vendor.stringcase instead of creating a new function
* Remove SKIP_UNROLL_OUTPUT
* Directly call _run_command in non _raw methods
* Remove TranslateString, ChangeNotetype and CompleteTag from SKIP_UNROLL_INPUT
* Remove UpdateDeckConfigs from SKIP_UNROLL_INPUT
* Remove ChangeNotetype from SKIP_UNROLL_INPUT
* Remove SKIP_UNROLL_INPUT
* Fix typing issue with translate_string
- Adds typing support for Protobuf maps in genbackend.py
* Do not emit convenience method for protobuf TranslateString
* Improve side margins in card info screen
* Improve top margin in deck options screen
* Hide revlog time of day on narrow screens
* Remove monospace for now (dae)
* Move some AddCards specific code to NoteCreator.svelte
* Add new strings for Toggling the Visual / HTML editor
* Set LabelContainer vertical-align to text-top
- Makes them look more centered
* Remove appendInParentheses helper
* Make all ts/*.html files include only module.js and module.css
* Move any JS from .html to index files
* Remove .html files from ts modules
* Remove Python with Starlark implemenation
* Remove reference to non-existing file
* Remove deck-option.html as well
* fix change-notetype screen (dae)
* Use nested tables in revlog
This allows for centered rows, while still preserving internal
alignment.
* Fix hidden columns
* Replace inner tables with flexbox divs
* Replace revlog table with flexbox divs
* Replace flex-gap in revlog
Unsupported on iOS and Qt5.
* Refactor out Placeholder from CardInfo.svelte
* Add breakpoint parameter for Container
- Use `Container` component inside `TitledContainer`
* Build Item into Row
- Use Row in DeckOptionsPage instead of just Item
* Reengineer Container/Row/Col CSS
* Inline Badges next to Labels when Lable spans multiple rows
* Adjust margins for mobile
* Implement Col component breakpoints
* Move card-info to use new Container and Row components
* Join StickyHeader and StickyFooter to StickyContainer
* Remove default middle vertical-alignment for Badges again
* Satisfy tests
* Restore inline gutters in change-notetype Mapper
* Add some comment to Col and Container
* Fix breaking behavior in DeckOptionsPage when multi-column
* Add back toolbar left padding to counter-act buttongroup right margins
* Make Label in SwitchRow take more of available space
* Refactor editor css, fix editor button highlight
- Avoid using webview.css
- Move more buttons css into button_mixins
* Fix DropdownItem appearance
* Fix the visuals of tags
* Make dropdown font slightly smaller
* Give SelectOption a background color
* Move some css from deck-options-base to CardStateCustomizer
* Avoid using core.scss for CardStats
* Avoid using sass/core in congrats package
* Inline core.scss into webview.scss
* Include fusion-vars for base.scss
* need to keep core.scss around for now (dae)
- negative margins result in truncated text when the window size
is reduced, so avoid them
- having a 100% table inside a flexbox is not responsive - the table
does not adjust its size as the width is increased or decreased
- in order to look decent on narrow screens (eg phones), we allow
margin collapsing
- in order to look decent on wide screens, we limit the maximum
width to something that is readable
- hide some columns in portrait mode on narrow screens
I tried preserving the centering with margin-left/right: auto, but
could not get it looking right, so have had to move things back to
left alignment.
* Only collect card stats on the backend ...
... instead of rendering an HTML string using askama.
* Add ts page Card Info
* Update test for new `col.card_stats()`
* Remove obsolete CardStats code
* Use new ts page in `CardInfoDialog`
* Align start and end instead of left and right
Curiously, `text-align: start` does not work for `th` tags if assigned
via classes.
* Adopt ts refactorings after rebase
#1405 and #1409
* Clean up `ts/card-info/BUILD.bazel`
* Port card info logic from Rust to TS
* Move repeated field to the top
https://github.com/ankitects/anki/pull/1414#discussion_r725402730
* Convert pseudo classes to interfaces
* CardInfoPage -> CardInfo
* Make revlog in card info optional
* Add legacy support for old card stats
* Check for undefined instead of falsy
* Make Revlog separate component
* drop askama dependency (dae)
* Fix nightmode for legacy card stats
