ed45adcb08
8 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Matthias Metelka
|
a48c96559d
|
Fix glitchy animation of floating elements (#2224)
* Set max-height of 400px to scrollable Popover * Pass computed placement to user components to set different animation directions when the placement changes. * Move elevation effect from WithFloating/WithOverlay to Popover * Apply same changes as in WithFloating to WithOverlay * Adjust FloatingArrow CSS to Popover * Run eslint and formatter |
||
|
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 |
||
|
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 |
||
|
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 |
||
|
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 |
||
|
Henrik Giesel
|
3642dc6245
|
Use WithFloating for MathjaxOverlay (#2011)
* Allow passing in reference into WithFloating as prop * Fix WithAutocomplete * Fix WithFloating for MathjaxOverlay * Add resize-store * Allow passing debug=True to jest_test for debugger support (#2013) * Disable auto-closing of HTML tags https://forums.ankiweb.net/t/set-html-editor-as-a-default-editor-instead-of-visual-editor/20988/3 Closes #1963 * Add slight margin to MathjaxEditor * Enable passing offset and shift to WithFloating * Hide overflow of mathjax editor * Add automatic hide functionality to sveltelib/position * Last polishes for Surrounder class (#2017) * Make private properties in Surrounder truly private * Fix remove logic of Surrounder * No reason for toggleTriggerRemove to be async * Allow using alt-shift to set all remove formats but this one * modifyFormat => updateFormat * Fix formatting * Fix field descriptions blocking cursor from being set (#2018) - happens when focus is in HTML editor * Remove hiding functionality again until it's really useful * Add support for autoPlacement * Implement new WithFloating that supports manually calling position() * Implement hide mechanisms * Add option in math dropdown to toggle MathJax rendering (#2014) * Add option in math dropdown to toggle MathJax rendering Closes #1942 * Hackily redraw the page when toggling MathJax * Add Fluent string * Default input setting in fields dialog (#1987) (kleinerpirat) * Introduce field setting to use plain text editor by default (kleinerpirat) * Remove leftover function from #1476 * Use boolean instead of string * Simplify clear_other_field_duplicates * Convert plain text key to camelCase * Move HTML item below the existing checkbox, instead of to the right (dae) Showing it on the right is more space efficient, but feels a bit cluttered IMHO. * Fix not being able to scroll when mouse hovers PlainTextInput (#2019) * Remove overscroll-behavior: none for * (all elements) * Revert "Remove overscroll-behavior: none for * (all elements)" This reverts commit 189358908cecd03027e19d8fe47822735319ec17. * Use body instead of *, but keep CSS rule * Unify two CSS rules * Remove console.logs * Reposition mathjax menu on switching between inline/block * Implement WithOverlay * Implement FloatingArrow * Display overlay with padding and brighter background * Rename to MathjaxOverlay * Simplify MathjaxOverlay component overall * Rename ImageHandle to image overlay * Generally fix ImageOverlay again * Increase z-index of StickyContainer * Fix setting block or inline on mathjax * Add reasons in closing-{click,keyup} * Have both WithFloating and WithOverlay use a simple show flag instead of a store * Remove subscribe-trigger * Fix clicking from one mathjax element to another * Check before executing cleanup * Do not wait for elements to mount before slotting in With{Floating,Overlay} * Allow using reference slot for WithFloating and WithOveray * Add inline argument to options * Add support for inline slot in WithOvelay * Use WithFloating for RemoveFormatButton * Remove last uses of DropdownMenu and WithDropdown * Remove all of the bootstrap dropdown components * Fix closing behavior of several buttons and ImageOverlay * Increase popover padding to 6px * Find a different way to create some padding at the bottom of the fields ...before the tag editor @kleinerpirat I think is what this css what trying to achieve? * Satisfy tests * Use removeStyleProperties in ImageOverlay * Use notify function in WithOverlay and WithFloating * Do not use portal for WithFloating and WithOverlay Allows for scrolling * Set hidden to default false in Rich/Plain TextInput * Reset handle when changing mathjax elements via click * Restrict size of empty mathjax image * Prevent sticky labels from obscuring menus * Remove several overflow-hidden * Fix empty string being falsy bug when editing mathjax * Do not import portal anymore * Use { reason, originalEvent } instead of symbol as update to modified event store * Fix closing behavior of image overlay (do not close after resize) * Simplify Collapsible * Use removeStyleProperties in Collapsible * Satisfy eslint * Fix latex shortcuts being mounted * Fix mathjax overlay not focusable in first field * Neither hide image overlay on escaped * Fix Block ButtonDropdown wrapping * Bring back portal to fix tag editor |
||
|
Henrik Giesel
|
1ec3741934
|
Fix outstanding tag editor issues (#1717)
* Start using WithFloating for SelectedTagBadge * Adjust arrow on WithFloating for all directions * Move TagOptionsBadge to its own sub directory * Show autocomplete menu via WithFloating * Have WithFloating return asReference instead of initializing its own reference element * Add html: overflow: hidden for editor * Replace ButtonToolbar with generic div * Move scroll logic into autocomplete item + restrict Popover width to 95vw * Fix autocomplete menu after pressing enter after selecting - should not trigger an autocomplete choose * Overlap TagInput perfectly with Tag * Satisfy formatter * Fix autocompletion item scrolling too much * Remove unused Tag.svelte focusable prop * Remove console.log * Fix floating arrow is a diamond in dark mode * Set autocompletion menu to 80vw |
||
|
Henrik Giesel
|
88217c5e7d
|
Replace (some) Bootstrap dropdowns with Floating UI (#1695)
* Implement a first version of WithFloating and Portal * Add outside slot for Portal * Execute computePosition from WithFloating * Set up a first example of new WithFloating with the Latex menu * Use autoUpdate in WithFloating * Create sveltelib/position * Add event-store * Use event-store in close-on-click * Implement subscribeToUpdates * Introduce sass/elevation * Split close-on-click to closing-click and subscribe-trigger * Have closing-* stores return a symbol - This way they act more of an EventEmitter than a store * Allow passing show store * Remove styling on float on updatePosition removal * Implement a nice border for dropdowns * Apply different border and box-shadow to Popover in dark/light theme * Fix Ctrl+Shift+T not working * Satisfy formatters and tests * Add copyright header * move copyright header to top (dae) |