improve itemBox creator names visibility
- do not display creator buttons until hovered - make last name have flex-grow priority over first name - removed inline margins of rows - removed extra padding from icons This makes it more likely that the creator name will be displayed fully without ellipsis until it is hovered. When the buttons are displayed on focus or hover, the last name tries to remain unellipsized as long as the first name is still visible after buttons appear. If the first name is too short, both names will be ellipsized.
This commit is contained in:
abaevbog
Dan Stillman
parent
75b1747d1d
commit
7d68f75d03
2 changed files with 19 additions and 15 deletions
|
|
@ -162,7 +162,8 @@
|
|||
this.querySelector('#zotero-creator-transform-menu').addEventListener('popuphidden', (_) => {
|
||||
let row = document.popupNode.closest('.meta-row');
|
||||
for (let node of row.querySelectorAll('toolbarbutton.show-on-hover')) {
|
||||
node.style.visibility = '';
|
||||
node.style.removeProperty('visibility');
|
||||
node.style.removeProperty('display');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1000,7 +1001,7 @@
|
|||
|
||||
// Minus (-) button
|
||||
var removeButton = document.createXULElement('toolbarbutton');
|
||||
removeButton.setAttribute("class", "zotero-clicky zotero-clicky-minus show-on-hover");
|
||||
removeButton.setAttribute("class", "zotero-clicky zotero-clicky-minus show-on-hover no-display");
|
||||
removeButton.setAttribute('ztabindex', ++this._ztabindex);
|
||||
removeButton.setAttribute('aria-label', Zotero.getString('general.delete'));
|
||||
// If default first row, don't let user remove it
|
||||
|
|
@ -1016,7 +1017,7 @@
|
|||
|
||||
// Plus (+) button
|
||||
var addButton = document.createXULElement('toolbarbutton');
|
||||
addButton.setAttribute("class", "zotero-clicky zotero-clicky-plus show-on-hover");
|
||||
addButton.setAttribute("class", "zotero-clicky zotero-clicky-plus show-on-hover no-display");
|
||||
addButton.setAttribute('ztabindex', ++this._ztabindex);
|
||||
// If row isn't saved, don't let user add more
|
||||
if (unsaved || !this.editable) {
|
||||
|
|
@ -1036,7 +1037,7 @@
|
|||
optionsButton.style.visibility = "hidden";
|
||||
this.disableButton(optionsButton);
|
||||
}
|
||||
optionsButton.className = "zotero-clicky zotero-clicky-options show-on-hover";
|
||||
optionsButton.className = "zotero-clicky zotero-clicky-options show-on-hover no-display";
|
||||
optionsButton.setAttribute('ztabindex', ++this._ztabindex);
|
||||
optionsButton.setAttribute('data-l10n-id', "itembox-button-options");
|
||||
let triggerPopup = (e) => {
|
||||
|
|
@ -2329,9 +2330,11 @@
|
|||
|
||||
// Ensure the node is visible
|
||||
next.style.visibility = "visible";
|
||||
next.style.display = "block";
|
||||
next.focus();
|
||||
|
||||
next.style.visibility = "";
|
||||
next.style.removeProperty("visibility");
|
||||
next.style.removeProperty("display");
|
||||
// 1) next.parentNode is always null for some reason
|
||||
// 2) For some reason it's necessary to scroll to the next element when
|
||||
// moving forward for the target element to be fully in view
|
||||
|
|
@ -2367,6 +2370,7 @@
|
|||
let isRightClick = event.type == 'contextmenu';
|
||||
if (!isRightClick) {
|
||||
event.target.style.visibility = "visible";
|
||||
event.target.style.display = "block";
|
||||
}
|
||||
// On click, we have x/y coordinates so use that
|
||||
// On keyboard click, open it next to the target
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@ item-box {
|
|||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: span 2;
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 8px;
|
||||
|
||||
.meta-data {
|
||||
width: 0;
|
||||
|
|
@ -70,12 +68,7 @@ item-box {
|
|||
|
||||
// needed to have the outline appear on all platforms
|
||||
-moz-appearance: none;
|
||||
|
||||
align-self: center;
|
||||
// Make all buttons tigher to not stretch the rows
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,6 +79,9 @@ item-box {
|
|||
// All icons that are by default hidden
|
||||
#info-table .show-on-hover {
|
||||
visibility: hidden;
|
||||
&.no-display {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-hidden-creator {
|
||||
|
|
@ -96,6 +92,7 @@ item-box {
|
|||
#info-table .meta-row:not(.noHover):hover .show-on-hover,
|
||||
#info-table .meta-row:focus-within .show-on-hover {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#item-type-menu {
|
||||
|
|
@ -173,9 +170,11 @@ item-box {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.creator-type-value > .zotero-clicky {
|
||||
// Some spacing between creator buttons
|
||||
margin-right: 2px;
|
||||
// Some spacing between creator buttons
|
||||
.creator-type-value > .zotero-clicky-plus,
|
||||
.creator-type-value > .zotero-clicky-minus,
|
||||
.creator-type-value > .zotero-clicky-options {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.creator-name-box {
|
||||
|
|
@ -188,6 +187,7 @@ item-box {
|
|||
// Margin adjusted by inline padding to have 4px between first and last name
|
||||
*[fieldMode="0"]:first-child {
|
||||
margin-inline-end: calc(max(0px, 4px - var(--editable-text-padding-inline)));
|
||||
flex-grow: 3; // last name should have priority to expand over first name
|
||||
}
|
||||
// Add comma when the last name is not focused
|
||||
*[fieldMode="0"]:first-child {
|
||||
|
|
|
|||
Loading…
Reference in a new issue