Commit Graph

36 Commits

Author SHA1 Message Date
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
2022-09-27 12:16:45 +10:00
Matthias Metelka
c1176a2e6c
Fix custom webview scrollbar not showing (#2085)
* 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
2022-09-26 09:13:06 +10:00
Henrik Giesel
3969487e77
Join RichTextAPI and RichTextContextAPI + Expose anki/RichTextInput (#1918)
* Format scss correctly so it passes ts:format

* Use on and singleCallback in ImageHandle and MathjaxHandle

* Add a few comments

* Fix relict of partial commit

* Fix 'element not found' in ImageHandle

* Remove setting css on image handle twice

* Remove use of container in ImageHandle

* Remove use of container in MathjaxHandle

* Use unprefixed properties of RichTextInputAPI

* Inline api to get to RichTextInputAPI

* Join customStyles into RichTextInputAPI

* Export RichTextInput; Remove SetContext

* Address eslint and svelte_check
2022-06-20 16:11:27 +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
Henrik Giesel
5963791d85
Consider using --force-message for ts/protobuf.bzl (#1694)
* Use --force-message in ts/protobuf

* Remove some now unnecessary type assertions in deck-options/lib

* Satisfy formatter
2022-02-27 17:35:07 +10:00
Henrik Giesel
30bbbaf00b
Use eslint for sorting our imports (#1637)
* 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
2022-02-04 18:36:34 +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
Henrik Giesel
f534dbb8e5
Separate input components into their own directories / Remove WithShortcut (#1613)
* Put PlainTextInput into its own directory

* Create a directory for RichTextInput

* Create editor-toolbar directory

* Move PreviewButton into editor-toolbar

* The time to refactor this is not quite yet here

* Create tag-editor directory

* Remove some of the uses of WithShortcut

* Remove all uses of WithShortcut from editor package

* Remove last uses of WithShortcut

* Fix typo
2022-01-24 11:43:09 +10:00
Henrik Giesel
a8d4774cdb
Add _raw methods for all methods in the backend (#1594)
* 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
2022-01-21 21:32:39 +10:00
Henrik Giesel
478b3a53f1
Remove individual .html files + other refactorings (#1588)
* 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)
2022-01-16 15:05:35 +10:00
Damien Elmes
e3bfc86f50 update JS deps
- fixes warnings about security issues in marked/markdown-it
- jsdoc is mostly unmaintained at this point, and we need to override
its dependencies manually
- typescript is still pinned
2022-01-16 13:29:48 +10:00
Damien Elmes
8d90b6b061 run buildifier/buildozer to tidy up BUILD files 2021-12-14 09:18:24 +10:00
Matthias Metelka
eefa46dc8e
Rename StickyNav to StickyHeader (#1524)
so as to not create false assumptions about its functionality.
2021-12-05 08:18:58 +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
RumovZ
f2173fddb0
Live theme changes (#1497)
* Allow theme change at runtime and add hook

* Save or restore default palette on theme change

* Update aqt widget styles on theme change

* styling fixes

- drop _light_palette, as default_palette serves the same purpose
- save default platform theme, and restore it when switching away
from nightmode
- update macOS light/dark mode on theme switch
- fix unreadable menus on Windows

* update night-mode classes on theme change

This is the easy part - CSS styling that uses standard_css or our
css variables should update automatically. The main remaining issue
is JS code that sets colors based on the theme at the time it's run -
eg the graph code, and the editor.

* switch night mode value on toggle

* expose current theme via a store; switch graphs to use it

https://github.com/ankitects/anki/issues/1471#issuecomment-972402492

* start using currentTheme in editor/components

This fixes basic editing - there are still components that need updating.

* add simple xcodeproj for code completion

* add helper to get currently-active system theme on macOS

* fix setCurrentTheme not being immediately available

* live update tag color

* style().name() doesn't work on Qt5

* automatic theme switching on Windows/Mac

* currentTheme -> pageTheme

* Replace `nightModeKey` with `pageTheme`

Co-authored-by: Damien Elmes <gpg@ankiweb.net>
2021-11-25 07:17:41 +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 f42beee45c27dba9433d76217fb583b117fb5231.

* 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
Abdo
98b527eb99
Load missing i18n modules (#1494) 2021-11-17 07:28:48 +10:00
Henrik Giesel
c87ba7d426
Set "no-non-null-assertion: off" by default (#1475) 2021-11-04 11:42:51 +10:00
Henrik Giesel
09c29219b4
Several CSS fixes - Editor Cleanup (#1470)
* 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)
2021-10-31 08:29:22 +10:00
Henrik Giesel
0dff5ea3a3
Use trailingComma: all setting in .prettierrc (#1435) 2021-10-19 09:06:00 +10:00
Damien Elmes
bb5053990b pass ts deps into most Svelte packages; remove redundant deps
Henrik, I've left editable/editor alone to avoid causing a conflict;
please add them in your PR instead when you get a chance.
2021-10-18 12:44:31 +10:00
Henrik Giesel
c64bac57a6
Put sass into repo directory (#1409)
Fix Sass build
2021-10-09 10:25:03 +10:00
Henrik Giesel
dec0fbe845
Refactor i18n (#1405)
Merging note: the typing changes were fixed in a separate PR.

* Put rootDirs into subprojects

- typings do not work for any ts or svelte files
- if we set the 'rootDirs' in ts/tsconfig.json to '../bazel-bin/ts' and then inherit
  them from e.g. editor, the root will be changed to '../../bazel-bin/ts',
  however editor needs look in '../../bazel-bin/ts/editor' instead.

* Rename i18n and i18n_helpers to i18n-generated and i18n

- This way, we can restrict the awkwardness of importing files outside
  the ts directory within lib

* Fix missing typing of i18n and backend_proto by adding back symlinks

* Split up i18n-generated into i18n-{translate,modules}

* Change i18n from singleton to functions

* Revert "Put rootDirs into subprojects"

This partially reverts commit e1d4292ce3979e7b7ee21bf3951b8a462d45c29c.

It seems like this might not be necessary after all.
However some other change made on this branch seems to have fixed
the .svelte.d.ts imports

* Introduce i18n-bundles to remove circular import

There was a circular import i18n.ts <-> i18n-translate.ts

* Create own directory for i18n

* Move lib/i18n/translate to lib/translate

* This restores tree shaking

* Update tsconfig libs and module

* es2018-2020 have wide support on all modern browsers including

* Switch bundles and langs inside i18n to variables again

* Add missing copyright header

* Rename translate.ts to ftl.ts

* Remove the symlinks again

I added them to fix to have completion for tr, however this would have
also have meant to abandon the tree shaking.
As we want to have tree shaking, it's also not necessary to have the
symlinks anymore

* Revert "Update tsconfig libs and module"

This reverts commit 0a96776a475e9901c1f9f3407c726d1d002fb9ef.

* move withCollapsedWhitespace back to i18n/utils

* Add back /ts as in rootDirs
2021-10-07 23:31:49 +10:00
Damien Elmes
046c6c55d3 use extra rootDir in tsconfig instead of symlinks
The nice thing about the symlink approach is that it allowed tsc -b
to function without any changes to the tsconfig.json file, but it meant
there were extra links we had to maintain. So instead, we just add an
extra rootDirs entry, and add two commented-out lines that can be
uncommented when wanting to build with tsc directly.
2021-10-01 18:36:52 +10:00
Damien Elmes
a3d9f90af5 update to latest rules_nodejs & switch to ts_project
ts_library() is deprecated and will presumably be dropped from a
future rules_nodejs, and it wasn't working with the jest tests
after updating, so we switch over to ts_project().

There are some downsides:

- It's a bit slower, as the worker mode doesn't appear to function
at the moment.
- Getting it working with a mix of source files and generated files
was quite tricky, especially as things behave differently on Windows,
and differently when editing with VS Code. Solved with a small patch
to the rules, and a wrapper script that copies everything into the
bin folder first. To keep VS Code working correctly as well, the built
files are symlinked into the source folder.
- TS libraries are not implicitly linked to node_modules, so they
can't be imported with an absolute name like "lib/proto" - we need
to use relative paths like "../lib/proto" instead. Adjusting "paths"
in tsconfig.json makes it work for TS compilation, but then it fails
at the esbuild stage. We could resolve it by wrapping the TS
libraries in a subsequent js_library() call, but that has the downside
of losing the transient dependencies, meaning they need to be listed
again.  Alternatively we might be able to solve it in the future by
adjusting esbuild, but for now the paths have been made relative to
keep things simple.

Upsides:

- Along with updates to the Svelte tooling, Svelte typing has improved.
All exports made in a Svelte file are now visible to other files that
import them, and we no longer rebuild the Svelte files when TS files
are updated, as the Svelte files do no type checking themselves, and
are just a simple transpilation. Svelte-check now works on Windows again,
and there should be no errors when editing in VS Code after you've
built the project. The only downside seems to be that cmd+clicking
on a Svelte imports jumps to the .d.ts file instead of the original now;
presumably they'll fix that in a future plugin update.
- Each subfolder now has its own tsconfig.json, and tsc can be called
directly for testing purposes (but beware it will place build products
in the source tree): ts/node_modules/.bin/tsc -b ts
- We can drop the custom esbuild_toolchain, as it's included in the
latest rules_nodejs.

Other changes:

- "image_module_support" is moved into lib/, and imported with
<reference types=...>
- Images are now imported directly from their npm package; the
extra copy step has been removed.

Windows users may need to use "bazel clean" before building this,
due to old files lying around in the build folder.
2021-10-01 12:52:53 +10:00
Henrik Giesel
60690e0557 Rename StickyBar and StickyBottom to StickyHeader and StickyFooter 2021-09-15 23:15:55 +02:00
Henrik Giesel
647a2a3e59 Satisfy formatter 2021-09-09 15:38:04 +02:00
Henrik Giesel
f056851c1e Port Focus tags shortcut to webview 2021-09-09 15:37:34 +02:00
Henrik Giesel
8ff8186aab Uniformly shorten SCSS imports/uses 2021-09-02 23:37:17 +02:00
Damien Elmes
141a96e221 fix inability to map fields from larger to smaller notetype
We were using the new item count instead of the old one.

https://forums.ankiweb.net/t/issue-changing-note-type-on-2-1-45/11822
2021-07-31 18:30:50 +10:00
Henrik Giesel
95c8f5a12a Use event object in createShortcut, fix F8 for highlight 2021-07-26 06:15:30 +02:00
Damien Elmes
9e0a295ab9 split out decks, deckconfig, notes, notetypes 2021-07-10 20:44:22 +10:00
Damien Elmes
616db33c0e refactor protobuf handling for split/import
In order to split backend.proto into a more manageable size, the protobuf
handling needed to be updated. This took more time than I would have
liked, as each language handles protobuf differently:

- The Python Protobuf code ignores "package" directives, and relies
solely on how the files are laid out on disk. While it would have been
nice to keep the generated files in a private subpackage, Protobuf gets
confused if the files are located in a location that does not match
their original .proto layout, so the old approach of storing them in
_backend/ will not work. They now clutter up pylib/anki instead. I'm
rather annoyed by that, but alternatives seem to be having to add an extra
level to the Protobuf path, making the other languages suffer, or trying
to hack around the issue by munging sys.modules.
- Protobufjs fails to expose packages if they don't start with a capital
letter, despite the fact that lowercase packages are the norm in most
languages :-( This required a patch to fix.
- Rust was the easiest, as Prost is relatively straightforward compared
to Google's tools.

The Protobuf files are now stored in /proto/anki, with a separate package
for each file. I've split backend.proto into a few files as a test, but
the majority of that work is still to come.

The Python Protobuf building is a bit of a hack at the moment, hard-coding
"proto" as the top level folder, but it seems to get the job done for now.

Also changed the workspace name, as there seems to be a number of Bazel
repos moving away from the more awkward reverse DNS naming style.
2021-07-10 19:17:05 +10:00
Damien Elmes
1d4b58419e add workaround for protobufjs requiring uppercase package names
I mourn the time lost trying to track this down :-(

https://github.com/protobufjs/protobuf.js/issues/1014

We can't patch the minified file in dist without essentially duplicating
it, so this change also switches from the external file to including
the src file as part of the bundle.
2021-07-10 15:24:01 +10:00
Henrik Giesel
24af5bada3 More uniform file naming
kebap-case for .ts, .scss, .html, and directories
2021-07-01 12:24:16 +02:00