diff --git a/chrome/content/zotero/elements/bubbleInput.js b/chrome/content/zotero/elements/bubbleInput.js index 41a1aaceb7..309562ab76 100644 --- a/chrome/content/zotero/elements/bubbleInput.js +++ b/chrome/content/zotero/elements/bubbleInput.js @@ -74,8 +74,8 @@ allBubbles = this.getAllBubbles(); } // Update bubble string - if (bubbleNode.textContent !== bubbleString) { - bubbleNode.textContent = bubbleString; + if (bubbleNode.querySelector(".text").textContent !== bubbleString) { + bubbleNode.querySelector(".text").textContent = bubbleString; } // Move bubble if it's index does not correspond to the position of the item let expectedIndex = allBubbles.indexOf(bubbleNode); @@ -233,16 +233,10 @@ text.className = "text"; bubble.append(text); - let deleteBtn = document.createElement("div"); - deleteBtn.className = "delete-btn"; - let cross = document.createElement("span"); - cross.className = "icon icon-css icon-x-8 icon-16"; - deleteBtn.addEventListener("click", (event) => { - this._deleteBubble(bubble); - event.stopPropagation(); - }); - deleteBtn.appendChild(cross); - bubble.append(deleteBtn); + // Add a dropmarker to indicate that the bubble is clickable + let dropmarker = document.createElement("span"); + dropmarker.className = "icon icon-css icon-chevron-6 icon-8 dropmarker"; + bubble.append(dropmarker); return bubble; } @@ -397,11 +391,6 @@ }, handleDragStart(event) { - // No drag on X button - if (event.target.closest(".delete-btn")) { - event.preventDefault(); - return; - } this.dragBubble = event.target; event.dataTransfer.setData("text/plain", ''); event.stopPropagation(); diff --git a/scss/elements/_bubbleInput.scss b/scss/elements/_bubbleInput.scss index 8c5699636e..af64a9fefb 100644 --- a/scss/elements/_bubbleInput.scss +++ b/scss/elements/_bubbleInput.scss @@ -77,16 +77,6 @@ bubble-input { &:hover:not(.showingDetails) { background-color: var(--fill-quarternary); - - .delete-btn { - display: flex; - } - - .text { - mask-image: linear-gradient(to left, transparent 14px, var(--fill-primary) 24px); - overflow: hidden; - text-overflow: ellipsis; - } } &.showingDetails { background-color: var(--fill-quarternary) !important; @@ -111,22 +101,8 @@ bubble-input { background-color: var(--accent-blue10); } - .delete-btn { - display: none; - width: 20px; - height: 20px; - align-items: center; - justify-content: center; - border-radius: 5px; - position: absolute; - right: 4px; - color: var(--fill-secondary); - &:hover { - background-color: var(--fill-quarternary); - } - &:active { - background-color: var(--fill-tertiary); - } + .dropmarker { + margin-inline-start: 4px; } } }