Commit Graph

27 Commits

Author SHA1 Message Date
Matthias Metelka
365c5e1fb2
UI size tweaks (#2184)
* Reduce font size of answer button indicators

* Increase padding of browser rows with ResizeToContents on vertical header

* Remove 0.8 scale factor for dropdown item font-size

* Remove font-size prop entirely from DropdownItem

* Revert "Remove font-size prop entirely from DropdownItem"

This reverts commit bb0a158f96183cca74e198867070c2f99af04dc4.

* Remove hard-coded Python font sizes

* Move font size and scrollbar into _root-vars.scss

* Revert editor size variable to 1.6

* Fix icon alignment

* Fix checkbox alignment for dropdown items

* Remove unused classes from Tag.svelte

* Revert "Increase padding of browser rows with ResizeToContents on vertical header"

This reverts commit 77bfc854ba140dd99aae98efcdd4af7052615fa6.

* Remove option to set font size of browser entries

* Add setting for browser row padding to preferences

* Revert "Add setting for browser row padding to preferences"

This reverts commit 75c59da65a1028e2caa3c48b247f99825c1b0b6c.

* Revert "Remove option to set font size of browser entries"

This reverts commit a543783d8ea079f39b7ae445152573c96be29841.
2022-11-23 16:50:15 +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
Hikaru Y
e8b795ba69
Fix custom CSS not being applied to scrollbars in night mode (#1525) 2021-12-05 08:20:42 +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
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
Henrik Giesel
c9bd39c6a2
Several editor fixes (#1478)
* Declare toolbar api via modifiable property

* Fix addon buttons

* Assign editing areas in a synchronous way

* Restore the Tab shortcut that moves the caret to end

- moveCaretToEnd is called twice now: The moveCaretToEnd calls in
  *TextInput causes the caret to be moved to the end when switching back
  from the window and back.
- To fix this, I will need the code for saving and restoring locations
  from #1377

* Restore selections in the PlainTextInput

* Improve type safety of destroyable

- clearable-array was renamed to destroyable
2021-11-05 11:29:02 +10:00
Henrik Giesel
afc56a8398
Fix DeckOptions toolbar having wrong margins and no flex-grow (#1464)
ButtonToolbar.svelte now has to assume that the button elements
are two levels below it. This can be simplified once we can use
flex-gap.
2021-10-28 19:37:52 +10:00
Damien Elmes
6af8a47d57 fix deprecation warning in latest svelte-preprocess 2021-10-26 08:43:02 +10:00
Henrik Giesel
0dff5ea3a3
Use trailingComma: all setting in .prettierrc (#1435) 2021-10-19 09:06:00 +10:00
Henrik Giesel
c2768e2188
Translate Editor entirely to Svelte (#1403)
* Translate editor to Svelte

Make editor fields grid rather than flexbox

Refactor ButtonToolbar margins

Remove remaining svelte.d.ts symlinks

Implement saveNow

Fix text surrounding

Remove HTML editor button

Clean up some empty files

Add visual for new field state badges

* Adds new IconConstrain.svelte to generalize the icon handling for
IconButton and Badge

Implement sticky functionality again

Enable Editable and Codable field state badges

Add shortcuts to FieldState badges

Add Shift+F9 shortcut back

Add inline padding back to editor fields, tag editor and toolbar

Make Editable and Codable only "visually hidden"

This way they are still updated in the background
Otherwise reshowing them will always start them up empty

Make empty editing area focusable

Start with moving fieldsKey and currentFieldKey to context.ts

Fix Codable being wrong size when opening for first time

Add back drag'n'drop

Make ButtonItem display: contents again

* This will break the gap between ButtonGroup items, however once we
  have a newer Chromium version we should use CSS gap property anyway

Fix most of typing issues

Use --label-color background color LabelContainer

Add back red color for dupes

Generalize the editor toolbar in the multiroot editor to widgets

Implement Notification.svelte for showing cloze hints

Add colorful icon to notification

Hook up Editable to EditingArea

Move EditingArea into EditorField

Include editorField in editor/context

Fix rebasing issues

Uniformly use SvelteComponentTyped

Take LabelContainer out of EditingArea

Use mirror-dom and node-store to export editable content

Fix editable update mechanism

Prepare passing the editing inputs as slots

Pass in editing inputs as slots

Use codable options again in codemirror

Delete editor/lib.ts

Remove CodableAdapter, Use more generic CodeMirror component

Fix clicking LabelContainer to focus

Use prettier

Rename Editable to ContentEditable

Fix writing Mathjax from Codable to Editable

Correctly adjust output HTML from editable

Refactor EditableStyles out of EditableContainer

Pass Image and Mathjax Handle via slots to Editable

Make Editable add its editingInputApi

Make Editable hideable

Fix font size not being set correctly

Refactor both fieldFocused and focusInCodable to focusInEditable

Fix focusIfField

Bring back $activeInput

Fix ClozeButton

Remove signifyCustomInput

Refactor MathjaxHandle

Refactor out some logic into store-subscribe

Fix Mathjax editor

Use focusTrap instead of focusing div

Delegate focus back to editingInput when refocusing focusTrap

Elegantly move focus between editing inputs when closing/opening

Make Codable tabbable

Automatically move caret to end on editable and codable

+ remove from editingInput api

Fix ButtonDropdown having two rows and missing button margins

Make svelte_check and eslint pass

Satisfy editor svelte_check

Save field updates to db again

Await editable styles before mounting content editable

Remove unused import from OldEditorAdapter

Add copyright header to OldEditorAdapter

Update button active state from contenteditable

* Use activateStickyShortcuts after waiting for noteEditorPromise

* Set fields via stores, make tags correctly set

* Add explaining comment to setFields

* Fix ClozeButton

* Send focus and blur events again

* Fix Codable not correctly updating on blur with invalid HTML

* Remove old code for special Enter behavior in tags

* Do not use logical properties for ButtonToolbar margins

* Remove getCurrentField

Instead use noteEditor->currentField or noteEditor->activeInput

* Remove Extensible type

* Use context-property for NoteEditor, EditorField and EditingArea

* Rename parameter in mirror-dom.allowResubscription

* Fix cutOrCopy

* Refactor context.ts into the individual components

* Move focusing of editingArea up to editorField

* Rename promiseResolve -> promiseWithResolver

* Rename Editable->RichTextInput and Codable->PlainTextInput

* Remove now unnecessary type assertion for `getNoteEditor` and `getEditingArea`

* Refocus field after adding, so subscription to editing area is refreshed
2021-10-18 22:01:15 +10:00
Henrik Giesel
c64bac57a6
Put sass into repo directory (#1409)
Fix Sass build
2021-10-09 10:25:03 +10:00
Damien Elmes
e9d71bfbe4 yarn upgrade --latest
bootstrap still held back
2021-10-01 12:52:53 +10:00
Henrik Giesel
75ed24b7ea Do not use overflow-x on ButtonToolbar
* Fixes deck-options dropdown not showing.
  It seems like it's no longer necessary
2021-09-09 17:50:02 +02:00
Henrik Giesel
96cbca8fb6 Update to use shortened SCSS paths for some components 2021-09-09 15:38:05 +02:00
Henrik Giesel
04b75859cc Implement nowrap mode 2021-09-09 15:38:01 +02:00
Henrik Giesel
376f543680 Make automatic deselect when leaving tag editor 2021-09-09 15:37:52 +02:00
Henrik Giesel
24af5bada3 More uniform file naming
kebap-case for .ts, .scss, .html, and directories
2021-07-01 12:24:16 +02:00
Henrik Giesel
e030e6f656 Rename SectionItem to just Item and use across option sections 2021-06-21 17:02:46 +02:00
Henrik Giesel
282de21675 Use Bootstrap containers instead of CSS in base for deckoptions 2021-06-21 17:01:44 +02:00
Henrik Giesel
c49ad009d0 Add Section and SectionItem for the deckoptions 2021-06-21 17:01:44 +02:00
Henrik Giesel
da076aa48e Generalize ButtonToolbarItem to SectionItem 2021-06-21 17:01:42 +02:00
Henrik Giesel
358794c911 Uniformly use variables to Button{Toolbar,Group} for setting button properties
Instead of using WithTheming around ButtonToolbar/ButtonGroup
2021-05-27 17:13:36 +02:00
Damien Elmes
0026506543 update ts deps
- prettier's formatting has changed, so files needed to be reformatted
- dart is spitting out deprecation warnings like:

254 │   2: $spacer / 2,
    │      ^^^^^^^^^^^
    ╵
    bazel-out/darwin-fastbuild/bin/ts/sass/bootstrap/_variables.scss 254:6  @import
    ts/sass/button_mixins.scss 2:9                                          @use
    ts/components/ColorPicker.svelte 2:5                                    root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter-width, 2)
2021-05-26 09:37:40 +10:00
Henrik Giesel
0f4d4eb5a9 Only initialize extension apis if necessary 2021-05-07 02:04:44 +02:00
Henrik Giesel
c9368ed98f Add lefttopbtns as AddonButtons 2021-05-07 02:04:44 +02:00
Henrik Giesel
928f486867 Add ButtonToolbarItem as interface for modifying button groups 2021-05-07 02:04:44 +02:00
Henrik Giesel
4a6b3b3786 Clean up ButtonGroup and factor out extension logic 2021-05-07 02:04:44 +02:00