- add dropmarker to bubbles after the text to indicate
that bubbles are clickable
- remove X remove button that was there before
- no more mask over the bubble on hover, since dropmarker
is just always visible
- 4px distance between the dropmarker and bubble text
Fixes: #2712
Implemented redesigned citation dialog with library
and list modes one can switch between. This dialog is
a direct replacement of quickFormat and classic citation
dialogs.
In Library Mode:
- items table has a new + button column to add items from the
citation and rows of selected items are highlighted
- open, cited and selected items appear in a section
between the items table and bubbleInput. When there are no
matches, a message is shown.
- only top-level items are shown when citing
items and only notes/notes' parents - when adding a note
- selected items are gathered in a collapsible deck to save space.
Click on the deck will expand it. All selected items can be
added via "Add all" button.
- when an item is added, bubble-input may increase in height and
push itemTree lower. To try to preserve relative positioning
of the mouse, itemTree will scroll to be over the row that was just clicked
In List mode:
- arrow up/down from the input will change the selected item
with the focus remaining in the input
- selected items are a collapsible list section
Other behaviors and fixes:
- one can add any locator (not just pages) by typing its full or short name
in an input and pressing Enter (e.g. line 10, or l. 10, or chap. "test chapter")
- Added a new preference to select if the citation dialog
should always open in list mode, library mode or in the last
mode that was used
- bubbles whose items are selected in library or list mode
are highlighted
- arrow up/down from a bubble will focus the bubble
above/below it for easier navigation across bubble-input
- multi-select is supported on items in list mode or item cards in
library mode via Shift-arrow or Cmd+click to select multiple items
- Cmd/Ctrl + Enter will always accept the dialog no matter what
is focused
- when there are no bubbles, accept button is disabled
- after an item is added, bubble-input is always refocused
- added suppressed property to itemTreeMenubar to be able to
hide if in list mode, where it is not relevant. Fixed menubar
getting stuck or re-appearing on Alt keypress on Linux by setting
height: 0 vs hiding it via hidden.
- added initialFolder and onActivate prop to collectionTree to set which collection
should be reopened when dialog opens and to be able to set a custom
onActivate handler.
- added getExtraField prop to itemTree to get data on if
an item is in a citation or not
Implementation details:
- citationDialog.js is the main file. It relies on a number of
helper files in citationDialog/* directory to keep the main
file less cluttered. popupHandler.js contains the logic of
opening/closing the item details popup to add locator/prefix/suffix/etc.
keyboardHandler.js is responsible for overall keyboard navigation
throughout the dialog. searchHandler.js contains the logic
for running the search based on user's query. Finally, Helpers.js
has general helper functions that don't handle any actual logic.
- SearchHandler is set to run search in two ways: for cited/selected/open
items (which are cached and do not involve any actual SQL query) and
general search for items across all libraries. When layout.search
runs, firstly cited/selected/open items are updated after which the
SQL search runs.
- bubbleInput.js is a customElement responsible for bubbles interface.
bubbleInput.refresh takes a list of items and handles adding/removing/reordering
of bubbles as needed. It always has two inputs on each side of
a bubble, as opposed to having inputs inserted dynamically. It
allows keyboardHandler.js to handle navigation with arrows within
bubbleInput.
- when user interacts with bubbleInput, it emits custom events that are
handled by IOManager singleton in citationDialog.js, which
may update the items information and pass them back to bubbleInput.refresh
to have the list of bubbles updated
- CitationDataManager singleton is responsible for storing
items added into the citation in CitationDataManager.items
in an object with both Zotero.Item and the actual citation item.
It is easier to pass both items to other components
and helpers, as opposed to sharing functions to convert
items back and forth.
- Section buttons, Locate, and Notes in the sidenav are focusable
- itemPane section buttons are combined into one focusable
group. Those buttons by themselves don't mean anything in
the context of keyboard navigation as they just scroll
to the section in the itemPane. In fact, having info,
abstract, attachments, etc. focusable and announceable by
screen readers is just confusing. However, we do want the group
of those buttons to be focusable to switch back to
zotero-context-pane-item-deck from zotero-context-pane-notes-deck
if the notes button in the sidenav is pressed.
- sidenav can be reached by tabbing into it from the end of itemPane
or via shift-tab from the focused tab
- sidenav buttons can be navigated with up/down arrows
- notes list in the context pane can be activated via the button in the
sidenav and navigated via up/down arrows
- use command vs onclick listener for notes list context menus to work
with keyboard-triggered clicks as well
- focus itemPane when tabs are switched in sidenav
- Replace flex attribute with flex-shrink and flex-grow style
to allow elements to be resized by splitter and window resizing.
- Set the max-width on collections pane to prevent it from pushing
other panes outside window border
- Set the min-width on window according to the size of both library
and reader tabs
- Use stacked layout when window width is small
fix: #4669
Unify richlistitem styling rules
- Fix richlistitem unwanted focus ring on Linux
fix: #4510
- Simplify richlistbox styling rules and do not follow Mozilla code
- Use --default-focusring-width for v-table
- added button to switch mode to creator rows
- removed that option from options menu
- extra tweak to avoid cursor flickering during re-render after
clicking on the button
- increased itemPane min-width to 320px
Fixes: #3959
- remove padding between the <dialog> and the window edges
- explicit width for all zoterosearch fields because otherwise
a menulist with a long content (e.g. longer collection name) name
can push the + and - buttons outside of the window
Fixes: #4374
- Set the window minimum size to 700px x 500px.
- Fix a regression where non-applicable operators remain visible.
- Fix the "✔️" appearing next to multiple operators in the operator popup menu.
- Include the "Year" and "Attachments" columns by default in the results table.
In libraries, notes and tags boxes, do not hide the actual
"-" toolbarbutton, hide the <image> inside of it. Visually,
it looks the same but the button can be focused via tab
without having to expicitly make it visible. It means that
shift-tab from the section header will not skip the "-" button.
Also, make "remove" toolbarbutton from tagsbox focusable like all
others for consistency.
- added 8px padding around text on linux. Mac and win already have some
padding around text through --panel-padding. Fixes: zotero#4187
- guidancePanel.js fetches text from .ftl file instead of zotero.properties
- added first-run-guidance-quickFormat to zotero.ftl with updated
text to better reflect current functionality. Fixes: zotero#4191
- removed unnecessary special treatment for qf guidance panel on mac
- moved guidance panel text for itemBox creator menu into zotero.ftl
---------
strings tweaked by @dstillman
* Improve feed item pane header (fixes#4141)
* Show item pane custom head when headerMode is none (fixes#4116)
* fx115: Fix button style on windows (fixes#4120)
* Move split-menu-button styles to SCSS
* feed settings: part of the grid, not needed
* progress queue: migrated to flex
* tab-bar-container: already fixed in scss
* zotero-lookup-multiline-progress: migrated to flex
* zotero-lookup-textbox: removed, does nothing
* #zotero-prefpane-advanced #data-dir-path: migrated to flex
* #zotero-prefpane-sync: migrated to flex on #storage-url, removed from #storage-password to fix layout
* .search-condition: migrated to flex
* updates.css: migrated to flex
