diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js index 80f029135e..5d5f6c2c79 100644 --- a/chrome/content/zotero/elements/itemBox.js +++ b/chrome/content/zotero/elements/itemBox.js @@ -52,6 +52,7 @@ this._selectField = null; this._selectFieldSelection = null; this._addCreatorRow = false; + this._switchedModeOfCreator = null; } get content() { @@ -64,7 +65,6 @@ - @@ -147,8 +147,6 @@ this._id('zotero-creator-move-to-top').setAttribute('hidden', hideMoveToTop); this._id('zotero-creator-move-up').setAttribute('hidden', hideMoveUp); this._id('zotero-creator-move-down').setAttribute('hidden', hideMoveDown); - var creatorNameBox = row.getElementsByClassName("creator-name-box")[0]; - this._id('creator-transform-switch').setAttribute("label", creatorNameBox.getAttribute("switch-mode-label")); }); // Ensure no button is forced to stay visible once the menu is closed @@ -187,13 +185,6 @@ } this.moveCreator(index, dir); } - else if (event.explicitOriginalTarget.id == "creator-transform-switch") { - // Switch creator field mode action - var creatorNameBox = row.getElementsByClassName("creator-name-box")[0]; - var lastName = creatorNameBox.firstChild; - let fieldMode = parseInt(lastName.getAttribute("fieldMode")); - this.switchCreatorMode(row, fieldMode == 1 ? 0 : 1, false, true, index); - } }); this._id('creator-transform-swap-names').addEventListener('command', @@ -1047,6 +1038,18 @@ } rowData.appendChild(firstlast); + + // Switch creator type button + var switchCreatorModeButton = document.createXULElement('toolbarbutton'); + switchCreatorModeButton.setAttribute("class", "zotero-clicky zotero-clicky-switch-type show-on-hover no-display"); + switchCreatorModeButton.setAttribute('id', `creator-${rowIndex}-switchType`); + switchCreatorModeButton.addEventListener("command", () => { + // Record that this creator is being updated. It is used to avoid flickering during re-render + this._switchedModeOfCreator = rowIndex; + let fieldMode = parseInt(lastNameElem.getAttribute("fieldMode")); + this.switchCreatorMode(row, fieldMode == 1 ? 0 : 1, false, true, rowIndex); + }); + rowData.appendChild(switchCreatorModeButton); // Minus (-) button var removeButton = document.createXULElement('toolbarbutton'); @@ -1094,7 +1097,7 @@ this.handlePopupOpening(e, menupopup); }; rowData.appendChild(optionsButton); - + if (this.editable) { optionsButton.addEventListener("command", triggerPopup); rowData.oncontextmenu = triggerPopup; @@ -1105,6 +1108,17 @@ // Delete existing unsaved creator row if any this.removeUnsavedCreatorRow(); + // If this creator row's type was just switched, remove ".show-on-hover" to avoid buttons appearing + // and then immediately disappearing when the css rule kicks in if the row is hovered. + // Instead, mark it with ".show-without-hover" to just display buttons and add "show-on-hover" back + // on the next tick, which looks less jumpy. + if (this._switchedModeOfCreator == rowIndex) { + this._swapClasses([...rowData.querySelectorAll(".show-on-hover")], "show-on-hover", "show-without-hover"); + this._switchedModeOfCreator = null; + setTimeout(() => { + this._swapClasses([...rowData.querySelectorAll(".show-without-hover")], "show-without-hover", "show-on-hover"); + }); + } let row = this.addDynamicRow(rowLabel, rowData, before); this._ensureButtonsFocusable(); @@ -1243,12 +1257,15 @@ switchCreatorMode(row, fieldMode, initial, updatePref, rowIndex) { // Change if button position changes var creatorNameBox = row.querySelector(".creator-name-box"); + let switchTypeBtn = row.querySelector(".zotero-clicky-switch-type"); var lastName = creatorNameBox.firstChild; var firstName = creatorNameBox.lastChild; // Switch to single-field mode if (fieldMode == 1) { creatorNameBox.setAttribute('switch-mode-label', Zotero.getString('pane.item.switchFieldMode.two')); + switchTypeBtn.setAttribute("type", "single"); + switchTypeBtn.setAttribute("tooltiptext", Zotero.getString('pane.item.switchFieldMode.two')); lastName.setAttribute('fieldMode', '1'); lastName.placeholder = this._defaultFullName; delete lastName.style.width; @@ -1270,6 +1287,8 @@ // Switch to two-field mode else { creatorNameBox.setAttribute('switch-mode-label', Zotero.getString('pane.item.switchFieldMode.one')); + switchTypeBtn.setAttribute("type", "dual"); + switchTypeBtn.setAttribute("tooltiptext", Zotero.getString('pane.item.switchFieldMode.one')); lastName.setAttribute('fieldMode', '0'); lastName.placeholder = this._defaultLastName; @@ -2336,6 +2355,13 @@ popup.openPopup(event.target); } } + + _swapClasses(nodes, classToRemove, classToAdd) { + for (let node of nodes) { + node.classList.add(classToAdd); + node.classList.remove(classToRemove); + } + } /** * Available handlers: diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss index a4bdd0159c..75813464ae 100644 --- a/scss/abstracts/_variables.scss +++ b/scss/abstracts/_variables.scss @@ -110,8 +110,8 @@ $tagColorsLookup: ( $min-width-tabs-deck: 570px; $min-width-collections-pane: 200px; $min-width-items-pane: 370px; -$min-width-item-pane: 300px; -$min-width-context-pane: 300px; +$min-width-item-pane: 320px; +$min-width-context-pane: 320px; $width-sidenav: 37px; $height-toolbar: 41px; diff --git a/scss/components/_clicky.scss b/scss/components/_clicky.scss index dda9667325..dabfcf09a3 100644 --- a/scss/components/_clicky.scss +++ b/scss/components/_clicky.scss @@ -64,6 +64,16 @@ color: var(--fill-secondary); } +.zotero-clicky-switch-type[type=single] { + @include svgicon-menu("input-single", "universal", "16"); + margin: 0; +} + +.zotero-clicky-switch-type[type=dual] { + @include svgicon-menu("input-dual", "universal", "16"); + margin: 0; +} + .zotero-clicky-preview-control { @include svgicon-menu("preview-show", "universal", "16"); &[data-show-preview] { diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss index 2c4855ebe9..8c2456172d 100644 --- a/scss/elements/_itemBox.scss +++ b/scss/elements/_itemBox.scss @@ -113,9 +113,7 @@ item-box { } // Some spacing between creator buttons - .creator-type-value > .zotero-clicky-plus, - .creator-type-value > .zotero-clicky-minus, - .creator-type-value > .zotero-clicky-options { + .creator-type-value > .zotero-clicky { margin-left: 1px; }