Commit graph

258 commits

Author SHA1 Message Date
Tom Najdek
b1333d0e9d
More attachment type icons in the item tree (#3645) 2024-02-23 06:11:40 -05:00
yexingsha
35a324b65b
Replace tag icons and update scss (#3722) 2024-02-21 06:39:12 -05:00
abaevbog
826774b1f7
keyboard navigation for tag selector (#3615)
- Tab from the tags list or shift-tab from the tags filter field
focuses the first non-disabled tag. If there are none, the tags are
skipped and the focus moves directly to the input field or the tags list.
- Arrow Right/Left move focus between tags skipping over disabled tags
- Space/Enter clicks on the selected tag
- Space/Enter click on the search button when focused
2024-02-19 04:57:03 -05:00
Adomas Venčkauskas
beb7b51cb3 Adjust the titlebar/menubar xml and styling.
Reasoning:
- Different Linux DEs specify different titlebar button (min, max,
close) locations which we did not and could not support before.
- Previous approach copied from Firefox depended on custom offsets
specified in CSS instead of allowing the browser engine to place
elements

Changes:
- Titlebar and menubar no longer collapsed into each other with a
negative margin, instead just a single flexbox (on macOS the titlebar
is still collapsed into the tab bar)
- Support for -moz-gtk-csd-reversed-placement to correctly place the
titlebar buttons on Linux
- Removed/changed some code copied from Firefox that does not apply or
uses the wrong selectors
- Fixed the display of Linux Unity DE buttons with icons appearing outside
of button borders
- Removed the Z in the titlebar on Linux since only a few DEs use that.
- Aligned the tabbar on Linux and Windows to the left margin of the
window.
2024-02-14 06:24:00 -05:00
Bogdan Abaev
579106c3af new accent-highlight color for virt table
Added accent-highlight color for highlighted virtualized table rows
2024-02-06 15:20:43 -05:00
yexingsha
7344b8bb46
Reduce contrast of alternating row colors (#3667)
Closes #3635
2024-02-02 03:20:47 -05:00
Tom Najdek
6efbf4c2ec
Fix tab content misaligned in RTL mode. Fix #3658 2024-02-01 15:41:23 +01:00
Martynas Bagdonas
8a9df4a1b3 Move context pane toggle into reader toolbar
Related #3648
2024-02-01 14:49:59 +08:00
Tom Najdek
b3cf2ac67e
Switch to mask-image for fade-off effect in tabs 2024-01-30 00:45:16 +01:00
Tom Najdek
83491c14bb
Fix descenders cut-off in tab titles on Windows 2024-01-29 19:59:01 +01:00
abaevbog
e68b9b80ad
opened tabs menu visibility improvements (#3620)
- Added tooltip to display the entire title of the tab on hover
- Ellipsize the text of the tab title to display as much of the last
word as possible

Fixes: #3609
2024-01-29 02:40:09 -05:00
Tom Najdek
41294e0ff7
Fix a bug where first column is clipped if it has fixed or static width (#3605)
Also:

* Fix issues with notes and attachment columns
* Tweak first-column attachment column alignment
2024-01-29 02:37:46 -05:00
abaevbog
1a82ae5c3b collection filter sizing tweaks
- ensure filter field is hidden if the pane is collapsed
- JS-based max-width setting to prevent overflow outside of collection pane
2024-01-24 23:32:24 -05:00
Abe Jellinek
608b732fbb Open tabs menu: Move margin/padding to SCSS 2024-01-24 23:32:24 -05:00
Abe Jellinek
3472d6cabe Prevent window overflow in Standard mode 2024-01-24 23:32:23 -05:00
windingwind
3bdcf34a89 Fix stacked mode layout when toggle item pane 2024-01-24 23:32:23 -05:00
windingwind
8aa77fd5c8 Fix item pane splitter style 2024-01-24 23:32:23 -05:00
Tom Najdek
ccfc3127ba Tweak padding in the tag selector list 2024-01-24 23:32:22 -05:00
Tom Najdek
03be35426c Couple of small fixes to the tag selector
* Add bottom padding
* Increase padding for macOS 0-width scrollbars
2024-01-24 23:32:21 -05:00
Tom Najdek
71d6e219bd Switch to .svg spinner icon for the PDF metadata retrieval 2024-01-24 23:32:21 -05:00
windingwind
982289b484 Fix dialog background 2024-01-24 23:32:19 -05:00
Tom Najdek
2f9a12c2da Improve "Run JavaScript" dialog 2024-01-24 23:32:19 -05:00
Tom Najdek
a54ed665bf Improve style editor dialog 2024-01-24 23:32:19 -05:00
Tom Najdek
d99ad84d4c Improve long tag fixer dialog 2024-01-24 23:32:19 -05:00
Tom Najdek
f0de6d0d57 Tweak spacing in select items dialog 2024-01-24 23:32:19 -05:00
Tom Najdek
0734808774 Fix invalid colors for collection tree in dialogs 2024-01-24 23:32:19 -05:00
Tom Najdek
7497226de2 Fix table header doesn't cover the entire width of the table
This affected every virtualized table with a header, except the main items table.
2024-01-24 23:32:19 -05:00
Tom Najdek
701c76aa3f Redesign RTF Scan wizard 2024-01-24 23:32:19 -05:00
Abe Jellinek
63e492261d Fix splitter misalignment on some displays 2024-01-24 23:32:18 -05:00
Abe Jellinek
8e3abd8706 Add padding to reader tags popup
And move styles to SCSS.
2024-01-24 23:32:18 -05:00
Bogdan Abaev
b6d5a52417 additional focus management for popups
When a menupopup is opened, the active element does not change, so
their focus-ring will be hidden until the menupopup closes for it to be
less distracting.

When a panel popup is opened, the focus will be moved inside
of the panel, so we keep track of whichever element was previously
focused, and re-focus it when the panel goes away.

Minor reorganization of focus-ring mixin to use variables instead
of parameters to make hiding of focus-ring easier.
2024-01-24 23:32:16 -05:00
Dan Stillman
6cb50c3ca4 First item row should not be gray 2024-01-24 23:32:16 -05:00
yexingsha
c5346d08b9 fixed some spacing in item pane 2024-01-24 23:32:15 -05:00
yexingsha
6e7c80d97b changed all font-weight: bold/590 to 600 2024-01-24 23:32:15 -05:00
windingwind
6af4605bd0 Implement attachment preview
- Implement attachment preview
- Implement attachment-box redesign
- Make filename editable
- Use new reindex icon
- Update attachment note layout
- Fix reader.js eslint errors
- Add fallback attachment icon and use redesign
- Use attachment preview for regular items
- Fix pinned pane not exists error
- Double click preview to open to page
- Fix itemPane pin bug
- Preload preview iframe
- Fix item pane scroll
- Add media preview support
- Fix item pane scroll bar on macos
- Fix reader sidebar with standalone attachment
- Fix attributeChangedCallback
- Add attachmentBox _updateAttachmentIDs
- Make attachment notes readonly and simplify note window script
- Implement convert attachment note to new note
- Support preview dragging
- Annotations box redesign
- Support custom buttons in the collapsible-section
- Add preview toggle button
- Fix collapsible section attribute listener
- Make attachment box notify sync to fix errors in test
2024-01-24 23:32:15 -05:00
windingwind
424afb9af6 Fix splitter style 2024-01-24 23:32:14 -05:00
yexingsha
13acfe8c05 fixed spacing in tag-selector-filter 2024-01-24 23:32:14 -05:00
yexingsha
cf241447ab fixed some spacing in collectionTree and itemTree 2024-01-24 23:32:14 -05:00
yexingsha
d06ad5c14a update toolbar, tabbar, and paneheader 2024-01-24 23:32:14 -05:00
Abe Jellinek
6836bde339 Fix RTL layout issues in item tree 2024-01-24 23:32:13 -05:00
Abe Jellinek
9960483527 RTL: Use much simpler approach to flip toolbar icons & preserve padding
We don't have to deal with background images attached to various parts of the
button like we did on macOS before, so we can just flip the icon and be done
with it.
2024-01-24 23:32:13 -05:00
Abe Jellinek
667ea83f4b RTL: Flip Sync button
Sync isn't inside #zotero-pane anymore, so match on :root:-moz-locale-dir(rtl)
instead.
2024-01-24 23:32:13 -05:00
Abe Jellinek
e4837168b9 RTL: Fix toolbarbutton margins 2024-01-24 23:32:13 -05:00
Abe Jellinek
761c8a1bd4 RTL: Flip search icons 2024-01-24 23:32:13 -05:00
Abe Jellinek
9a5a8cf107 RTL: Apply Quick Search fixes to other search fields 2024-01-24 23:32:12 -05:00
Abe Jellinek
0d37d2752c Item tree: RTL: Fix misaligned backgrounds on first/last column 2024-01-24 23:32:12 -05:00
Dan Stillman
5167ac2d6f Restore Dev/Troubleshooting Mode warning after redesign
Show label after tabs menu, and adjust Troubleshooting Mode color for
dark mode
2024-01-24 23:32:12 -05:00
Abe Jellinek
ecf1595998 Don't gray out collection tree row when editing name 2024-01-24 23:32:12 -05:00
Abe Jellinek
d44b869420 Implement new New Collection dialog with parent menu 2024-01-24 23:32:12 -05:00
Tom Najdek
6a855f5c8f Fix issues with item tree row drag image
* Attachment icon being cut off due to box-sizing issue
* Twisty icon incorrect using color
* Dragged image being slightly wider than the item in the tree
2024-01-24 23:32:11 -05:00
Tom Najdek
a9eb79a45b Extend hover/drag color to the edges of the items header 2024-01-24 23:32:10 -05:00
abaevbog
d8a00610da added library tab to tabs menu, minor refactoring
- library tab appears in the tabs menu without the close button
and no drag functionality
- minor refactoring to simplify how the tabs icons are fetched for
items with item.getItemTypeIconName()
- added focus-ring to tabs and filter field via @focus-ring mixin
so that the focus outline looks the same for the input field and buttons
- removed default margin from the <description> component of the tab
titles that moved titles up by a bit
2024-01-24 23:32:10 -05:00
Abe Jellinek
743597bc47 Let window chrome shrink
Now it's no worse than it was pre-redesign. But there's still
room for improvement, either by preventing the window from shrinking to the
point that the sidebars overflow or by making the sidebars horizontally
scrollable at very small window sizes.
2024-01-24 23:32:01 -05:00
Abe Jellinek
87d344e5f8 Bring back default virtualized-table background color 2024-01-24 23:32:00 -05:00
Abe Jellinek
9f8e3f1521 Use borders with color-*-on-*, not outlines
Since outlines don't take up space in the layout, but borders do.
2024-01-24 23:32:00 -05:00
Bogdan Abaev
13de06cd52 itemBox redesign
- Table structure rewrite to use grid layout instead
of the <table> component so that screen readers can see the content
- Added icons to mirror right-click actions
- Moved creator actions to the options menu
- Drag-drop to reorder creators
- Using editable-text instead of clicky component
- Consolidated autocomplete logic in one function
- Added @focus-ring to all components of the itemBox
- Fields are focusable and navigatable via keyboard in non-edit modes
- General refactoring to consolidate stylesheets across platforms
and remove code that's not more used (mainly related to handling old
clicky text component).
- Retractions panel background set for --material-background instead
of light pink in dark mode.
2024-01-24 23:31:52 -05:00
Abe Jellinek
527c30b8c1 Initial implementation of Libraries and Collections box 2024-01-24 23:31:51 -05:00
windingwind
a3dec4be45 Fix Scaffold for redesign 2024-01-24 23:31:51 -05:00
windingwind
b649a1a953 Fix context pane return button and background
* Fix context pane return button and background
* Remove unused code
* Fix tab notes container background
* Fix context pane sections background
2024-01-24 23:31:51 -05:00
abaevbog
133fb3ad23 improve collection search filter expansion
- Speed up transition to 0.2s
- Focus once the transition is fully done
- The actual input field is hidden and the button is displayed 50 milliseconds
after the field starts shrinking to not have the magnifying glass
appear to the right of the input field right before the input is
hidden.
2024-01-24 23:31:51 -05:00
Abe Jellinek
583c6328a0 Unify context pane into new item pane/sidenav design 2024-01-24 23:31:51 -05:00
windingwind
f9a2f2f3e0 Fix Linux UI bugs 2024-01-24 23:31:51 -05:00
abaevbog
fb26921e11 Opened tabs menu with a search bar
- Matching substrings from tab's title are bolded.
- Drag-and-drop functionality to reorder tabs.
- ArrowUp/ArrowDown navigate the tab's titles. Tab/Shift-Tab move
across both titles and close buttons. Enter from filter field focuses
the first tab's title. Home/PageUp focuses the filter field. End/PageDown
focuses the last tab's title. ArrowUp/ArrowDown from the filter focus
the last/first tab's title respectively. ArrowUp from the first tab or
ArrowDown from the last tab focus the filter.
2024-01-24 23:31:51 -05:00
windingwind
695e7f7975 Fix css naming 2024-01-24 23:31:50 -05:00
windingwind
91ec79401d Add window inactive opacity to toolbar and tabs 2024-01-24 23:31:50 -05:00
windingwind
b18a47b0d2 Remove stop sync button 2024-01-24 23:31:50 -05:00
windingwind
db5863fa0a Use redesign loading icon for sync spinner 2024-01-24 23:31:50 -05:00
Tom Najdek
472593c400 Ensure column text lines up with column header 2024-01-24 23:31:50 -05:00
Tom Najdek
c40807909d Fix column header separator vanishes on scroll 2024-01-24 23:31:50 -05:00
windingwind
360f65e8c2 Fix toolbar dragging 2024-01-24 04:03:36 -05:00
windingwind
df0c2e2fd2 Toolbar redesign 2024-01-24 04:03:36 -05:00
Tom Najdek
bd067df4f6 Tabs redesign 2024-01-24 04:03:36 -05:00
Tom Najdek
f454e110ec Fix missing icon regression
* After 02b864d icon next to the filter icon in the tab selector has
gone missing. This is because the chevron-6 has been moved to a new
location
* Tweaked CSS for this and other universal icons to use new location
* Removed duplicate icons in the old location
2024-01-24 04:03:36 -05:00
windingwind
44ff2b1764 Fix library lookup icon 2024-01-24 04:03:35 -05:00
Abe Jellinek
524560799f Fix references to numbered --accent-blue colors 2024-01-24 04:03:35 -05:00
Abe Jellinek
19b78e2b20 Implement new pane selection algorithm, remove bottom padding 2024-01-24 04:03:17 -05:00
abaevbog
cc9d58e6be adjust spacing within tag selector
1. Decrease the gap after colored tags.
2. In compact mode, decrease the splitter height.
2024-01-24 04:03:17 -05:00
windingwind
cec0592e14 Use SelectedItem color on non-Windows 2024-01-24 04:03:13 -05:00
windingwind
82a9aee21c Unify item tree & v-table style on Windows & Linux 2024-01-24 04:03:13 -05:00
Tom Najdek
f5be1b26f4 Remove cell padding from the first-column 2024-01-24 04:03:13 -05:00
Tom Najdek
60dedf7d95 Fix items table header bottom border 2024-01-24 04:03:13 -05:00
Abe Jellinek
bf72c9d828 Notes/Tags/Related redesign 2024-01-24 04:03:13 -05:00
Tom Najdek
374b5337d8 Items table redesign 2024-01-24 04:03:13 -05:00
windingwind
077214a327 Add menu icons and unify Open PDF/EPUB/Snapshot options 2024-01-24 04:03:13 -05:00
windingwind
7da00957ef Unify tab bar on Windows/Linux 2024-01-24 04:03:12 -05:00
Tom Najdek
464c37e66f Don't use color for background of emoji tags 2024-01-24 04:03:12 -05:00
Tom Najdek
7fe5f0145d Restyle tags splitter 2024-01-24 04:03:12 -05:00
Tom Najdek
9ff76d2dd9 Restyle Tag Selector
* Render a colored dot for colored tags
* Improve spacing and positioning, especially on 2x screens
* Add scss map for tag colors in light/dark scheme
* Add support for compact/comfortable in tag selector
* Restyle filter box, add a placeholder and a new icon
2024-01-24 04:03:12 -05:00
Abe Jellinek
810402c9c7 Implement pane header, non-tabbed layout, collapsible sections, and new abstract box 2024-01-24 03:42:43 -05:00
Abe Jellinek
a2f259d14c Use item type CSS icons in more places
.icon-item-type is now global, with extra styling to handle row selection when
it's inside the item tree.

getImageSrc() is still used for progress windows, which is probably OK for now
because those don't stay on screen for very long. I've updated it to return SVGs
based on the current UI color scheme.

Other code uses treeitem-* images directly; getting rid of those references will
cause a lot of conflicts and be a bit more involved than this initial pass, so
I'll put that in a separate PR.
2024-01-24 03:42:43 -05:00
abaevbog
200e1d7564 toolbar and keyboard navigation updates
1. Toolbarbuttons changes:
	1. “New Library” moved from toolbar to File menu
	2. “New note” on click makes a standalone note
	3. “New attachment” on click adds stored copy of a file
	4. Menuitems from old note or attachment menus moved to the File menu
	5. “Advanced search” removed. Sync and Locate buttons moved to the top-right corner (Locate - temporarily)
	6. Added “Opened tabs” toolbarbutton
	7. Updated tooltips
2. Added a toolbarbutton that reveals collection search field on click. Search field is hidden on blur if empty. Keyboard accessibility via tab/shift-tab.
3. Tab based navigation restructuring. For each component, create a mapping of target ids with desired focus destination for each relevant keyboard event and use that to determine where to move focus next. Fixed bugs with focus wraparound not working when a note or attachment is opened in contextMenu.
4. Make quick-search dropmarker a sibling of the textfield. QuickSearchTextbox does not extend search-textfield anymore. It serves as a container to house dropmarker and textfield as siblings. This is needed to remove focus ring from quick search textbook when focus moves onto the dropmarker.
5. Separate toolbars for item and collection trees. Removed unused code manually setting the width of toolbar section
6. Focusable tabs + keyboard navigation:
	1. Shift-tab from opened tabs menu moves focus to the currently opened tab
	2. When a tab has focus, use left/right arrows to select tabs, or CMD/Ctrl + arrows to move focus between tabs
	3. Enter or Space on a focused tab will select it if needed and move focus to the contentPane of the reader of this tab
	4. Shift-tab from tabs wraps focus around to itemTree or itemPane
7. “New collection” creates collection contextually within currently selected library or collection.
8. Items pane minimum width increase to avoid quicksearch from being squashed
9. Do not move focus to title field of itemBox after itemTypeMenu is closed with ESC.
10. Display all itemTypes without "Show more" submenu in "New Item" meunu. Removed "Store Copy of File" and "Link to File" from "New Item" menu.
2024-01-24 03:42:42 -05:00
Tom Najdek
3f91729141 collections tree redesign
- new icons
- new twisty (also for items tree)
- new mixin focus-states that can be re-used for less boilerplate
- dark/white compatible with tweaks for when tree is focused (these changes also affect items tree)
- removed macOS specific behaviour (blue-ish background, gradient for selected row)
- border-radius on highlight + spacing tweaks
- tweaked colors and fonts
- Support for "compact"/"comfortable"
2024-01-24 03:42:42 -05:00
Tom Najdek
78d82d22cc Fix item type icons broken on 2x screens
Icons preloading introduced in 247755c5 overrides entire background
property, not just background-image. On 2x screens (and anywhere else
where svg icons need to be scaled) icons need property `background-size:
contain` to be displayed correctly. This previously came from
`.icon-css` class but have been overriden by code generated in
`svgicon`, so to fix this, these properties need to be added to the
`svgicon`.
2024-01-24 03:42:42 -05:00
Tom Najdek
c7286194f8 Convert theme to css variables
* Opt-in for light and dark color schemes
* Convert scss variables in _light.scss to css variables
* Add _dark.scss for dark color scheme
* Remove unused, theme-related variables
2024-01-24 03:42:29 -05:00
Tom Najdek
03d10f7de7 Switch to new svg icons for item types 2024-01-24 03:39:09 -05:00
Dan Stillman
4b7a1e8607 Get rid of some console warnings
And some other unused CSS
2023-07-11 05:35:32 -04:00
Abe Jellinek
b7626a1baa Remove min-width/height rules
Not actually necessary to get the sizing right in the dialog.
2023-06-17 02:33:59 -04:00
Abe Jellinek
c37e327330 Fix clicky sizing and appearance
- Set min-width and min-height to width and height so buttons never shrink
- Remove defunct .zotero-clicky-* styles from 2x block in zotero.css
- Include zotero-platform/content/zotero.css in searchDialog.xhtml
   - It seems only the defunct 2x styles from zotero.css were being applied, so
     the buttons would have been unstyled on a non-hiDPI display
2023-06-17 02:33:59 -04:00
Abe Jellinek
fdcb12df92
Tab bar: Make bottom border span the whole window (#3066) 2023-04-08 18:19:46 -04:00
Dan Stillman
a6a69605c6
Mendeley citation relinking tweaks
- Show "More information" link next to relink option
- Automatically check relink option when coming from integration prompt
- Change done message to "[x] items were relinked" instead of "0 items
  were imported"
2023-04-06 17:10:13 +02:00