Commit graph

56 commits

Author SHA1 Message Date
Matthias Metelka
2d1849549b Dark theme: use less saturated flag colors 2022-09-03 10:25:12 +02:00
Matthias Metelka
7243a9c091 Dark theme: make border-faint darker than canvas-default
meaning two shades darker than it currently was.
2022-09-02 19:02:31 +02:00
Matthias Metelka
3d896b5949 Tweak inset shadow color 2022-09-02 18:57:36 +02:00
Matthias Metelka
98e7c37eaa Dark theme: make border-default one shade darker 2022-09-02 18:56:55 +02:00
Matthias Metelka
e39a3edeab 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.
2022-09-02 18:25:37 +02:00
Matthias Metelka
d3fa137e1c Tweak card/note accent colors 2022-09-02 17:39:46 +02:00
Matthias Metelka
c5f9e9954b Reduce flag colors to single default value 2022-09-02 17:35:48 +02:00
Matthias Metelka
7d45b65ebe Light theme: darken background and flatten transition
also set hue and saturation of gray-8 to 0 (like all the other grays).
2022-09-02 15:55:23 +02:00
Matthias Metelka
98ed2813cc Adjust light theme 2022-09-02 15:28:47 +02:00
Matthias Metelka
decfa16df2 Light theme: decrease brightness of canvas-default and adjust fg-default 2022-09-02 12:49:37 +02:00
Matthias Metelka
ac928225f9 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.
2022-08-31 21:21:54 +02:00
Matthias Metelka
cd726049a1 Return CSS var by default and add palette-of function for raw value 2022-08-31 21:19:53 +02:00
Matthias Metelka
1498ba2c29 Use old --frame-bg color and use darker tone for canvas-default 2022-08-30 19:17:11 +02:00
Matthias Metelka
98f8ab7344 Improve uses of default-themed variables 2022-08-30 18:54:25 +02:00
Matthias Metelka
4881f16eba Add vars_lib as dependency to base_lib and button_mixins_lib 2022-08-30 18:15:50 +02:00
Matthias Metelka
ac0d2c8954 Add functions and colors to base_lib 2022-08-30 17:56:00 +02:00
Matthias Metelka
7451b67f2a Tweak light theme border and shadow colors 2022-08-30 17:42:12 +02:00
Matthias Metelka
644ff49966 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 ..."?
2022-08-30 17:17:15 +02:00
Matthias Metelka
e9f75e1756 Add Sass functions to access color palette and semantic variables
in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076
2022-08-30 17:14:28 +02:00
Matthias Metelka
bb172edf05 Adjust box-shadow of EditingArea to make fields look inset 2022-08-30 10:06:05 +02:00
Matthias Metelka
ec290a23cb Tweak gray tones 2022-08-30 10:05:59 +02:00
Matthias Metelka
b7cc8edcae Saturate highlight-bg in light theme 2022-08-29 16:04:08 +02:00
Matthias Metelka
f2d5abb95d Improve categorization of global colors
by renaming almost all of them and sorting them into separate maps.
2022-08-29 15:43:02 +02:00
Matthias Metelka
017c3938ef Replace gray tones with more neutral values 2022-08-29 06:37:16 +02:00
Matthias Metelka
dfe3aba2d8
Merge branch 'main' into color-palette 2022-08-29 05:08:27 +02:00
Matthias Metelka
5f6ac1a916
Field redesign (#2002)
* Adjust size of legacy buttons

* Revert "Adjust size of legacy buttons"

This reverts commit fb888fe1db.

* Remove unused function from #1476

* Use outline version for tag icon

* Add chevron icons

* Remove code icons, keep one pin icon version

* Add code-bg color

* Redesign fields

* Remove unused import

* Fix imports

* Move PlainTextBadge between editing inputs

where it belongs :)

* Make whole separator line clickable

* Fix transition

and format

* Don't show toggle when field is collapsed

* Show toggle only on hover

for mobile I'd like to implement a swipe mechanism.

* Use tweened SVG for triangle instead of CSS hack

* Implement more obvious HTML toggle on bottom right

* Reduce field height by a few pixels

* Reduce field height by two pixels

* Show HTML toggle when PlainTextInput is active, regardless of hover/focus

* Remove RichTextBadge.svelte

* Create separate collapsed field state

this means users can collapse fields with the HTML editor open and it will stay open when the field is expanded again.

* Add slide out animation to EditingArea, RichTextInput and PlainTextInput

only for collapsing, because it is choppy on expansion (common issue with Svelte transitions).

* Fix aliasing issue on focused field corners

* Make StickyBadge feel more responsive

* Move StickyBadge closer to field border

* Adjust field gutter/margins

* Make LabelContainer sticky

to make field operations accessible on fields with a lot of content.

* Add back html icons, remove visual editor icons

* Revert "Add code-bg color"

This reverts commit 4200f35419.

* Add rich text icon, remove strikethrough code icon

* Revert PlainTextBadge to original position

* Adjust margins in FieldState

* Rename PlainTextBadge to SecondaryInputBadge

in preparation for #1987

* Run eslint and prettier

* Make whole LabelContainer clickable area for collapse/expand

* Revert "Add slide out animation to EditingArea, RichTextInput and PlainTextInput"

This reverts commit 9a2b3410d0.

* Fix error on collapse/expansion

this was caused by the {#if} blocks, which resulted in the deletion of original EditingAreas.

* Refocus when toggling chevron and secondary input badge

* Revert "Revert "Add code-bg color""

This reverts commit 1cfd3bda65.

* Use single rotating chevron icon and make it RTL-compatible

* Remove redundant CSS transition rule

* Introduce animated Collapsible component and fix refocus on toggle

* Do not try to force repaint, as it is not required

* Remove RTL store from LabelContainer

the direction is already applied globally.

* Collapse secondary input with field

* Add focusedField to NoteEditorAPI

* Replace :global CSS selector with class .visible

thus removing the assumption that the component is used inside an EditorField.

https://github.com/ankitects/anki/pull/2002#discussion_r944876448

* Use named function syntax instead of function expressions

* Add explanation comment

* Remove unnecessary :bind directive

* Create CollapseBadge component

* Move :global selector into .plain-text-input

* Add comment explaining box-shadow pseudo-element

* Move Collapsible from EditingArea, PlainTextInput and RichTextInput into user components

* Rename SecondaryInputBadge to PlainTextBadge and remove generalization logic

I kept the rich text icon inside icons.ts for future use.

* Sort imports

* Fix background-color for duplicates not showing

with yet another pseudo-element :)

The pseudo-element that covers up field borders on scroll caused this issue. Fighting fire with fire here.

* Increase size of plain text toggle to original value again

This makes the clickable area a bit bigger and looks slightly more consistent with StickyBadge.

* Scrap pseudo-element mess in LabelContainer and tackle the actual issue

* Add class .visible to StickyBadge too

This introduces a peculiar bug: The active prop of StickyBadge resets to false when the mouse leaves the field - regardless of the actual back-end value.

* Fix sticky badge resetting on mouseleave/blur

* Apply overflow: hidden only during transition

fixes MathJax handle getting cut off by fields

* Remove unused variable

* Fix visual bug caused by overflow:hidden not applying in time

I tried several asynchronous approaches, but they all caused issues: either they prevented the CSS transition or they made field inputs lose focus.

In the end I resorted to direct, synchronous DOM-manipulation and added an explanatory comment.

* Decrease Collapsible load time by blocking first transition

I noticed the sliding animation has a hefty performance impact when a large number of fields is loaded simultaneously.

Blocking the first transition (which isn't even visible) results in a big boost in load time.

* Replace usages of gap with margins for children

* Revert unnecessary removal of grid-gap definition

* Correct comments about flex-gap property

mistook that for grid-gap.

* Resolve style issues

* Add minimum targets to gap comment

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
2022-08-19 10:02:28 +10:00
Matthias Metelka
f8f3f28d08 Adjust light theme 2022-08-18 12:38:32 +02:00
Matthias Metelka
068c2c10cf Align gray color palette more with macOS 2022-08-18 11:20:58 +02:00
Matthias Metelka
ac4c88afdc Merge branch 'main' into color-palette 2022-08-18 11:20:58 +02:00
Matthias Metelka
59d618851d Use different map structure for _vars.scss
after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871
2022-08-18 11:20:58 +02:00
Matthias Metelka
7517af4942
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
2022-08-18 12:48:28 +10:00
Matthias Metelka
08553e0009 Adjust frame- window- and border colors 2022-08-16 22:33:27 +02:00
Matthias Metelka
eba1fc18b6 Skew color palette for more dark values
by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones.
2022-08-16 22:32:24 +02:00
Matthias Metelka
cb9b452666 Use custom colors for note view switch 2022-08-16 14:54:48 +02:00
Matthias Metelka
6c48dbcc7f 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.
2022-08-16 14:54:12 +02:00
Matthias Metelka
fb197aa32e Remove --medium-border variable 2022-08-16 14:16:22 +02:00
RumovZ
42cbe42f06
Plaintext import/export (#1850)
* Add crate csv

* Add start of csv importing on backend

* Add Menomosyne serializer

* Add csv and json importing on backend

* Add plaintext importing on frontend

* Add csv metadata extraction on backend

* Add csv importing with GUI

* Fix missing dfa file in build

Added compile_data_attr, then re-ran cargo/update.py.

* Don't use doubly buffered reader in csv

* Escape HTML entities if CSV is not HTML

Also use name 'is_html' consistently.

* Use decimal number as foreign ease (like '2.5')

* ForeignCard.ivl → ForeignCard.interval

* Only allow fixed set of CSV delimiters

* Map timestamp of ForeignCard to native due time

* Don't trim CSV records

* Document use of empty strings for defaults

* Avoid creating CardGenContexts for every note

This requires CardGenContext to be generic, so it works both with an
owned and borrowed notetype.

* Show all accepted file types  in import file picker

* Add import_json_file()

* factor → ease_factor

* delimter_from_value → delimiter_from_value

* Map columns to fields, not the other way around

* Fallback to current config for csv metadata

* Add start of new import csv screen

* Temporary fix for compilation issue on Linux/Mac

* Disable jest bazel action for import-csv

Jest fails with an error code if no tests are available, but this would
not be noticable on Windows as Jest is not run there.

* Fix field mapping issue

* Revert "Temporary fix for compilation issue on Linux/Mac"

This reverts commit 21f8a26140.

* Add HtmlSwitch and move Switch to components

* Fix spacing and make selectors consistent

* Fix shortcut tooltip

* Place import button at the top with path

* Fix meta column indices

* Remove NotetypeForString

* Fix queue and type of foreign cards

* Support different dupe resolution strategies

* Allow dupe resolution selection when importing CSV

* Test import of unnormalized text

Close  #1863.

* Fix logging of foreign notes

* Implement CSV exports

* Use db_scalar() in notes_table_len()

* Rework CSV metadata

- Notetypes and decks are either defined by a global id or by a column.
- If a notetype id is provided, its field map must also be specified.
- If a notetype column is provided, fields are now mapped by index
instead of name at import time. So the first non-meta column is used for
the first field of every note, regardless of notetype. This makes
importing easier and should improve compatiblity with files without a
notetype column.
- Ensure first field can be mapped to a column.
- Meta columns must be defined as `#[meta name]:[column index]` instead
of in the `#columns` tag.
- Column labels contain the raw names defined by the file and must be
prettified by the frontend.

* Adjust frontend to new backend column mapping

* Add force flags for is_html and delimiter

* Detect if CSV is HTML by field content

* Update dupe resolution labels

* Simplify selectors

* Fix coalescence of oneofs in TS

* Disable meta columns from selection

Plus a lot of refactoring.

* Make import button stick to the bottom

* Write delimiter and html flag into csv

* Refetch field map after notetype change

* Fix log labels for csv import

* Log notes whose deck/notetype was missing

* Fix hiding of empty log queues

* Implement adding tags to all notes of a csv

* Fix dupe resolution not being set in log

* Implement adding tags to updated notes of a csv

* Check first note field is not empty

* Temporary fix for build on Linux/Mac

* Fix inverted html check (dae)

* Remove unused ftl string

* Delimiter → Separator

* Remove commented-out line

* Don't accept .json files

* Tweak tag ftl strings

* Remove redundant blur call

* Strip sound and add spaces in csv export

* Export HTML by default

* Fix unset deck in Mnemosyne import

Also accept both numbers and strings for notetypes and decks in JSON.

* Make DupeResolution::Update the default

* Fix missing dot in extension

* Make column indices 1-based

* Remove StickContainer from TagEditor

Fixes line breaking, border and z index on ImportCsvPage.

* Assign different key combos to tag editors

* Log all updated duplicates

Add a log field for the true number of found notes.

* Show identical notes as skipped

* Split tag-editor into separate ts module (dae)

* Add progress for CSV export

* Add progress for text import

* Tidy-ups after tag-editor split (dae)

- import-csv no longer depends on editor
- remove some commented lines
2022-06-01 20:26:16 +10:00
Damien Elmes
9b0729970e Fix deck options sticky bar at top disappearing on scroll
Issue was introduced in 7922f18296
when the styling was moved into base.scss. From what I can tell, there
are two locations where the current styling is required:

- the editor, to ensure the tags are shown at the bottom
- the change notetype screen, which requires this styling for a sticky
bar at top

I'm no CSS guru, so if someone thinks this could be solved in a better
way, please submit a follow-up PR.

Closes #1782
2022-05-23 16:10:45 +10:00
RumovZ
8504bd67ed
Fix bury count (more) (#1712)
* Fix bury count for negative values

* Enhance bury count tooltip

* Please type checker
2022-03-07 11:03:14 +10:00
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)
2022-03-02 14:21:19 +10:00
RumovZ
098881741b
Show buried until daily limits in overview screen (#1664)
* Show buried until daily limits in overview screen

This explains differences between the counts shown in the deck tree and
those shown in the overview screen.

Closes #1633.

* interday learning cards can be buried too (dae)

* add 'buried' tooltip to bury counts; generate row in helper fn (dae)

* Use grey for buried counts
2022-02-14 18:57:01 +10:00
RumovZ
f61126a40c
Fix button focus highlight on Windows (#1627)
* Fix button focus highlight on Windows

* Use none instead of none for outline and box-shadow

* Unnest selectors in reviewer-bottom

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
2022-02-07 19:41:19 +10:00
Damien Elmes
ce049ec360 sass/codemirror does not appear to be used 2022-01-15 21:19:58 +10:00
Damien Elmes
c3b5902da0 add color-scheme: dark in night mode
https://forums.ankiweb.net/t/anki-2-1-50-beta/15608/97
2021-12-28 13:35:19 +10:00
Henrik Giesel
4966f3cc44
Add back wrap function (#1551)
* Remove surround from RichText and PlainText

* Export wrap
2021-12-13 14:00:35 +10:00
Abdo
b3ea7288ab
Flip arrows of Bootstrap-styled <select>s for RTL langs (#1526)
* Flip arrows of Bootstrap-styled <select>s for RTL langs

* Use the dir attribute to set document direction

* Remove unused variable and fix use of CSS var
2021-12-06 18:40:26 +10:00
Hikaru Y
e8b795ba69
Fix custom CSS not being applied to scrollbars in night mode (#1525) 2021-12-05 08:20:42 +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
2778b9220c
Mathjax editor improvements (#1502)
* Remove unnecessary stopPropagation of mathjax-overlay events

* Use CodeMirror component for MathjaxHandle

* Refactor ResizeObserver code in MathjaxHandle

* Wrap setRange in CodeMirror in try/catch

* Add Mathjax Editor bottom margin

* Add custom Enter and Shift+Enter shortcuts for the MathjaxHandle

* Format

* Move placeCaretAfter to domlib

* Move focus back to field after editing Mathjax

* Put Cursor after Mathjax after accepting

* Add delete button for Mathjax

* Change border color of mathjax menu

* Refactor into MathjaxMenu

* Put caretKeyword in variable

* Use one ResizeObserver for all Mathjax images

* Add minmimum width for Mathjax editor

* is still smaller than minimal window width

* Add bazel directories to .prettierignore and format from root

* exclude ftl/usage (dae)

the json files that live there are output from our tooling, and
formatting them means an extra step each time we want to update them

also exclude .mypy_cache, which is output by scripts/mypy*

* minor ftl tweak: newline -> new line  (dae)
2021-11-23 10:27:32 +10:00