mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

itemBox redesign

Browse source 
- 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.
This commit is contained in:
Bogdan Abaev 2023-12-21 15:10:04 -05:00 • committed by Dan Stillman
parent 553d1f6b3c
commit 13de06cd52
13 changed files with 1099 additions and 1093 deletions
Download patch file Download diff file Expand all files Collapse all files

78
test/tests/itemPaneTest.js
View file

@ -16,14 +16,14 @@ describe("Item pane", function () {
var id = yield item.saveTx();
var itemBox = doc.getElementById('zotero-editpane-item-box');
var label = itemBox.querySelectorAll('[fieldname="title"]')[1];
assert.equal(label.textContent, '');
var label = itemBox.querySelectorAll('[fieldname="series"]')[1];
assert.equal(label.value, '');
item.setField('title', 'Test');
item.setField('series', 'Test');
yield item.saveTx();
label = itemBox.querySelectorAll('[fieldname="title"]')[1];
assert.equal(label.textContent, 'Test');
label = itemBox.querySelectorAll('[fieldname="series"]')[1];
assert.equal(label.value, 'Test');
yield Zotero.Items.erase(id);
})
@ -41,10 +41,10 @@ describe("Item pane", function () {
await item.saveTx();
var itemBox = doc.getElementById('zotero-editpane-item-box');
var label = itemBox.querySelector('[fieldname="creator-0-lastName"]')
var parent = label.parentNode;
var lastName = itemBox.querySelector('#itembox-field-value-creator-0-lastName');
var parent = lastName.closest(".creator-type-value");
assert.property(parent, 'oncontextmenu');
assert.isFunction(label.parentNode.oncontextmenu);
assert.isFunction(parent.oncontextmenu);
var menupopup = itemBox.querySelector('#zotero-creator-transform-menu');
// Fake a right-click
@ -73,13 +73,61 @@ describe("Item pane", function () {
await item.saveTx();
var itemBox = doc.getElementById('zotero-editpane-item-box');
var label = itemBox.querySelector('[fieldname="creator-0-lastName"]')
var firstlast = label.closest('.creator-name-box');
firstlast.oncontextmenu(new MouseEvent('click', { bubbles: true, button: 2 }));
var label = itemBox.querySelector('#itembox-field-value-creator-0-lastName');
var firstlast = label.closest('.creator-type-value');
firstlast.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, button: 2 }));
var menuitem = doc.getElementById('creator-transform-swap-names');
assert.isTrue(menuitem.hidden);
});
it("should reorder creators", async function () {
var item = new Zotero.Item('book');
item.setCreators([
{
lastName: "One",
creatorType: "author"
},
{
lastName: "Two",
creatorType: "author"
},
{
lastName: "Three",
creatorType: "author"
}
]);
await item.saveTx();
var itemBox = doc.getElementById('zotero-editpane-item-box');
// Move One to the last spot
itemBox.moveCreator(0, null, 3);
await waitForItemEvent('modify');
let thirdLastName = itemBox.querySelector("[fieldname='creator-2-lastName']").value;
assert.equal(thirdLastName, "One");
// Move One to the second spot
itemBox.moveCreator(2, null, 1);
await waitForItemEvent('modify');
let secondLastname = itemBox.querySelector("[fieldname='creator-1-lastName']").value;
assert.equal(secondLastname, "One");
// Move Two down
itemBox.moveCreator(0, 'down');
await waitForItemEvent('modify');
secondLastname = itemBox.querySelector("[fieldname='creator-1-lastName']").value;
let firstLastName = itemBox.querySelector("[fieldname='creator-0-lastName']").value;
assert.equal(secondLastname, "Two");
assert.equal(firstLastName, "One");
// Move Three up
itemBox.moveCreator(2, 'up');
await waitForItemEvent('modify');
secondLastname = itemBox.querySelector("[fieldname='creator-1-lastName']").value;
thirdLastName = itemBox.querySelector("[fieldname='creator-2-lastName']").value;
assert.equal(secondLastname, "Three");
assert.equal(thirdLastName, "Two");
});
// Note: This issue applies to all context menus in the item box (text transform, name swap),
@ -119,9 +167,7 @@ describe("Item pane", function () {
var item = await createDataObject('item');
var itemBox = doc.getElementById('zotero-editpane-item-box');
var label = itemBox.querySelector('div[fieldname="accessDate"].zotero-clicky');
label.click();
var textbox = itemBox.querySelector('input[fieldname="accessDate"]');
var textbox = itemBox.querySelector('[fieldname="accessDate"]');
textbox.value = 'now';
// Blur events don't necessarily trigger if window doesn't have focus
itemBox.hideEditor(textbox);
@ -148,11 +194,11 @@ describe("Item pane", function () {
let itemBox = doc.getElementById('zotero-editpane-item-box');
itemBox.querySelector('div[fieldname="creator-0-lastName"]').click();
itemBox.querySelector('[fieldname="creator-0-lastName"]').click();
itemBox.hideEditor(itemBox.querySelector('input[fieldname="creator-0-lastName"]'));
assert.equal(
itemBox.querySelector('div[fieldname="creator-0-lastName"]').getAttribute('fieldMode'),
itemBox.querySelector('[fieldname="creator-0-lastName"]').getAttribute('fieldMode'),
'1'
);
});