6 commits

Author	SHA1	Message	Date
Matthias Metelka	8142176f84	Introduce new color palette using Sass maps (#2016) ... * Remove --medium-border variable * Implement color palette using Sass maps I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette. Significant changes: - light theme is brighter - dark theme is darker - borders are softer I also deleted some platform- and night-mode-specific code. * Use custom colors for note view switch * Use same placeholder color for all inputs * Skew color palette for more dark values by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones. * Adjust frame- window- and border colors * Give deck browser entries --frame-bg as background color * Define styling for QComboBox and QLineEdit globally * Experiment with CSS filter for inline-colors Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme. * Use different map structure for _vars.scss after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871 * Move custom QLineEdit styles out of searchbar.py * Merge branch 'main' into color-palette * Revert QComboBox stylesheet override * Align gray color palette more with macOS * Adjust light theme * Use --slightly-grey-text for options tab color * Replace gray tones with more neutral values * Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. * Saturate highlight-bg in light theme * Tweak gray tones * Adjust box-shadow of EditingArea to make fields look inset * Add Sass functions to access color palette and semantic variables in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076 * Showcase use of access functions in several locations @hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."? * Fix focus box shadow transition and remove default shadow for a cleaner look I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing. * Tweak light theme border and shadow colors * Add functions and colors to base_lib * Add vars_lib as dependency to base_lib and button_mixins_lib * Improve uses of default-themed variables * Use old --frame-bg color and use darker tone for canvas-default * Return CSS var by default and add palette-of function for raw value * Showcase use of palette-of function The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice. * Light theme: decrease brightness of canvas-default and adjust fg-default * Use canvas-inset variable for switch knob * Adjust light theme * Add back box-shadow to EditingArea * Light theme: darken background and flatten transition also set hue and saturation of gray-8 to 0 (like all the other grays). * Reduce flag colors to single default value * Tweak card/note accent colors * Experiment with inset look for fields again Is this too dark in night mode? It's the same color used for all other text inputs. * Dark theme: make border-default one shade darker * Tweak inset shadow color * Dark theme: make border-faint darker than canvas-default meaning two shades darker than it currently was. * Fix PlainTextInput not expanding * Dark theme: use less saturated flag colors * Adjust gray tones * Fix nested variables not getting extracted correctly * Rename canvas-outset to canvas-elevated * Light theme: darken canvas-default * Make canvas-elevated a bit darker * Rename variables and use them in various components * Refactor button mixins * Remove fusion vars from Anki * Adjust button gradients * Refactor button mixins * Fix deck browser table td background color * Use color function in buttons.scss * Rework QTabWidget stylesheet * Fix crash on browser open * Perfect QTableView header * Fix bottom toolbar button gradient * Fix focus outline of bottom toolbar buttons * Fix custom webview scrollbar * Fix uses of vars in various webviews The command @use vars as * lead to repeated inclusion of the CSS vars. * Enable primary button color with mixin * Run prettier * Fix Python code style issues * Tweak colors * Lighten scrollbar shades in light theme * Fix code style issues caused by merge * Fix harsh border color in editor caused by leftover --medium-border variables, probably introduced with a merge commit. * Compile Sass before extracting Python colors/props This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values. * Desaturate primary button colors by 10% * Convert accidentally capitalized variable names to lowercase * Simplify color definitions with qcolor function * Remove default border-focus variable * Remove redundant colon * Apply custom scrollbar CSS only on Windows and Linux * Make border-subtle color brighter than background in dark theme * Make border-subtle color a shade brighter in light theme * Use border-subtle for NoteEditor and EditorToolbar border * Small patches	2022-09-16 14:11:18 +10:00
Henrik Giesel	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 189358908c. * 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	2022-09-05 17:20:00 +10:00
Henrik Giesel	a981e56008	Improved add-on extension API (#1626) ... * Add componentHook functionality * Register package NoteEditor * Rename OldEditorAdapter to NoteEditor * Expose instances in component-hook as well * Rename NoteTypeButtons to NotetypeButtons * Move PreviewButton initialization to BrowserEditor.svelte * Remove focusInRichText - Same thing can be done by inspecting activeInput * Satisfy formatter * Fix remaining rebase issues * Add .bazel to .prettierignore * Rename currentField and activeInput to focused{Field,Input} * Move identifier to lib and registration to sveltelib * Fix Dynamic component insertion * Simplify editingInputIsRichText * Give extra warning in svelte/svelte.ts - This was caused by doing a rename of a files, that only differed in case: NoteTypeButtons.svelte to NotetypeButtons.svelte - It was quite tough to figure out, and this console.log might make it easier if it ever happens again * Change signature of contextProperty * Add ts/typings for add-on definition files * Add Anki types in typings/common/index.d.ts * Export without .svelte suffix It conflicts with how Svelte types its packages * Fix left over .svelte import from editor.py * Rename NoteTypeButtons to unrelated to ensure case-only rename * Rename back to NotetypeButtons.svelte * Remove unused component-hook.ts, Fix typing in lifecycle-hooks * Merge runtime-require and register-package into one file + Give some preliminary types to require * Rename uiDidLoad to loaded * Fix eslint / svelte-check * Rename context imports to noteEditorContext * Fix import name mismatch - I wonder why these issues are not caught by svelte-check? * Rename two missed usages of uiDidLoad * Fix ButtonDropdown from having wrong border-radius * Uniformly rename libraries to packages - I don't have a strong opinion on whether to name them libraries or packages, I just think we should have a uniform name. - JS/TS only uses the terms "module" and "namespace", however `package` is a reserved keyword for future use, whereas `library` is not. * Refactor registration.ts into dynamic-slotting - This is part of an effort to refactor the dynamic slotting (extending buttons) functionality out of components like ButtonGroup. * Remove dynamically-slottable logic from ButtonToolbar * Use DynamicallySlottable in editor-toolbar * Fix no border radius on indentation button dropdown * Fix AddonButtons * Remove Item/ButtonGroupItem in deck-options, where it's not necessary * Remove unnecessary uses of Item and ButtonGroupItem * Fix remaining tests * Fix relative imports * Revert change return value of remapBinToSrcDir to ./bazel/out... * Remove typings directory * Adjust comments for dynamic-slottings	2022-02-03 14:52:11 +10:00
Matthias Metelka	933ee647bc	Align design of Change Notetype screen with rest of UI (#1522) ... * Remove background and border from scrollArea * Fix 1px of background text showing above template header on scroll I couldn't figure out the reason for this "clipping" issue. What I tried: - check HTML structure for any elements that might add extra padding/margin - remove the 1px border of the header * Adjust spacing to be more in line with rest of UI	2021-12-04 14:53:16 +10:00
Matthias Metelka	68092082f2	Change Notetype UI Rework (#1499) ... * Enable access to old notetype name * Set minimum height for ChangeNotetypeDialog * Add bootstrap icons to change-notetype * Move alert up and make it collapsible * Tweak some CSS - Add variables --sticky-bg and --sticky-border to StickyContainer - Tweak base.css * Add translatable string "(Nothing)" * Rework ChangeNotetype screen * Initially load option at newIndex and remaining options on focus Optimization for big notetypes: Should increase efficiency from O(n²) to O(n). Test on notetype with 500 templates shows significant improvement in load time (~10s down to ~1s). * Try to satisfy rust test * Change arrow direction depending on reading direction + add 0.5em top padding to main * Create Alert.svelte * Introduce CSS variable --pane-bg * Revert "Initially load option at newIndex and remaining options on focus" This reverts commit f42beee45c. * Final cleanup * Refine padding/gutter	2021-11-24 12:09:55 +10:00
Henrik Giesel	ab6a68ec49	Introduce our own Container, Row, and Col components (#1495) ... * 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	2021-11-17 13:49:52 +10:00

Renamed from ts/components/StickyFooter.svelte (Browse further)