diff --git a/chrome/content/zotero/elements/collapsibleSection.js b/chrome/content/zotero/elements/collapsibleSection.js index 5dc7ca7a46..0d5af71755 100644 --- a/chrome/content/zotero/elements/collapsibleSection.js +++ b/chrome/content/zotero/elements/collapsibleSection.js @@ -98,8 +98,16 @@ this.setAttribute('label', val); } + get summary() { + return this.getAttribute('summary'); + } + + set summary(val) { + this.setAttribute('summary', val); + } + static get observedAttributes() { - return ['open', 'empty', 'label', 'extra-buttons']; + return ['open', 'empty', 'label', 'summary', 'extra-buttons']; } attributeChangedCallback(name) { @@ -126,9 +134,18 @@ this._head.addEventListener('keydown', this._handleKeyDown); this._head.addEventListener('contextmenu', this._handleContextMenu); + let titleBox = document.createElement('div'); + titleBox.className = 'title-box'; + this._title = document.createElement('span'); this._title.className = 'title'; - this._head.append(this._title); + titleBox.append(this._title); + + this._summary = document.createElement('span'); + this._summary.className = 'summary'; + titleBox.append(this._summary); + + this._head.append(titleBox); this._contextMenu = this._buildContextMenu(); if (this._contextMenu) { @@ -403,6 +420,7 @@ this._head.setAttribute('aria-expanded', this.open); this._title.textContent = this.label; + this._summary.textContent = this.summary; this._head.querySelector('.twisty').hidden = this._disableCollapsing; } } diff --git a/scss/elements/_collapsibleSection.scss b/scss/elements/_collapsibleSection.scss index 5e1f16118a..cf9315feb7 100644 --- a/scss/elements/_collapsibleSection.scss +++ b/scss/elements/_collapsibleSection.scss @@ -20,14 +20,35 @@ collapsible-section { display: flex; align-items: center; - .title { + .title-box { flex: 1; - display: flex; align-items: center; - gap: 4px; - color: var(--fill-secondary); - font-weight: 600; + gap: 8px; + + .title { + flex: 0 0 auto; + + display: flex; + align-items: center; + gap: 4px; + color: var(--fill-secondary); + font-weight: 600; + } + + .summary { + flex: 1; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + color: var(--fill-secondary); + text-overflow: ellipsis; + + opacity: 1; + transition: opacity 0.2s ease-in-out; + } } toolbarbutton { @@ -67,6 +88,10 @@ collapsible-section { toolbarbutton.twisty .toolbarbutton-icon { transform: rotate(-180deg); } + + .title-box .summary { + opacity: 0; + } } &[empty] > .head > toolbarbutton.twisty { @@ -75,7 +100,7 @@ collapsible-section { @each $pane, $color in $item-pane-sections { &[data-pane="#{$pane}"] { - & > .head > .title::before { + & > .head .title::before { content: ''; width: 16px; height: 16px;