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

Add highlight to show whether notes or item pane is active

Browse source
This commit is contained in:
Abe Jellinek 2024-01-04 02:51:02 -08:00 committed by Dan Stillman
parent 87d344e5f8
commit a2e8294389
2 changed files with 64 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
chrome/content/zotero/elements/itemPaneSidenav.js
View file

@ -28,48 +28,52 @@
{ {
class ItemPaneSidenav extends XULElementBase { class ItemPaneSidenav extends XULElementBase {
content = MozXULElement.parseXULToFragment(` content = MozXULElement.parseXULToFragment(`
<html:div class="toolbarbutton-container"> <html:div class="pin-wrapper">
<toolbarbutton <toolbarbutton
data-pane="toggle-collapse"/> data-pane="toggle-collapse"/>
</html:div> </html:div>
<html:div class="divider"/> <html:div class="divider"/>
<html:div class="toolbarbutton-container"> <html:div class="inherit-flex highlight-notes-inactive">
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-info" <toolbarbutton
data-pane="info"/> data-l10n-id="sidenav-info"
</html:div> data-pane="info"/>
<html:div class="toolbarbutton-container"> </html:div>
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-abstract" <toolbarbutton
data-pane="abstract"/> data-l10n-id="sidenav-abstract"
</html:div> data-pane="abstract"/>
<html:div class="toolbarbutton-container"> </html:div>
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-attachments" <toolbarbutton
data-pane="attachments"/> data-l10n-id="sidenav-attachments"
</html:div> data-pane="attachments"/>
<html:div class="toolbarbutton-container"> </html:div>
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-notes" <toolbarbutton
data-pane="notes"/> data-l10n-id="sidenav-notes"
</html:div> data-pane="notes"/>
<html:div class="toolbarbutton-container"> </html:div>
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-libraries-collections" <toolbarbutton
data-pane="libraries-collections"/> data-l10n-id="sidenav-libraries-collections"
</html:div> data-pane="libraries-collections"/>
<html:div class="toolbarbutton-container"> </html:div>
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-tags" <toolbarbutton
data-pane="tags"/> data-l10n-id="sidenav-tags"
</html:div> data-pane="tags"/>
<html:div class="toolbarbutton-container"> </html:div>
<toolbarbutton <html:div class="pin-wrapper">
data-l10n-id="sidenav-related" <toolbarbutton
data-pane="related"/> data-l10n-id="sidenav-related"
data-pane="related"/>
</html:div>
</html:div> </html:div>
<html:div class="divider"/> <html:div class="divider"/>
<html:div class="toolbarbutton-container">
<html:div class="pin-wrapper highlight-notes-active">
<toolbarbutton <toolbarbutton
data-l10n-id="sidenav-notes" data-l10n-id="sidenav-notes"
data-pane="context-notes"/> data-pane="context-notes"/>
@ -134,6 +138,7 @@
get _contextNotesPaneVisible() { get _contextNotesPaneVisible() {
return this._contextNotesPane return this._contextNotesPane
&& !this._collapsed
&& this._contextNotesPane.parentElement.selectedPanel == this._contextNotesPane; && this._contextNotesPane.parentElement.selectedPanel == this._contextNotesPane;
} }
@ -339,19 +344,19 @@
} }
render() { render() {
let contextNotesPaneVisible = this._contextNotesPaneVisible;
let pinnedPane = this.pinnedPane; let pinnedPane = this.pinnedPane;
for (let toolbarbutton of this.querySelectorAll('toolbarbutton')) { for (let toolbarbutton of this.querySelectorAll('toolbarbutton')) {
let pane = toolbarbutton.dataset.pane; let pane = toolbarbutton.dataset.pane;
if (pane == 'context-notes') { if (pane == 'context-notes') {
let hidden = !this._contextNotesPane; let hidden = !this._contextNotesPane;
let selected = this._contextNotesPaneVisible; let selected = contextNotesPaneVisible;
toolbarbutton.parentElement.hidden = hidden; toolbarbutton.parentElement.hidden = hidden;
toolbarbutton.parentElement.previousElementSibling.hidden = hidden; // Divider toolbarbutton.parentElement.previousElementSibling.hidden = hidden; // Divider
toolbarbutton.setAttribute('aria-selected', selected); toolbarbutton.setAttribute('aria-selected', selected);
toolbarbutton.classList.toggle('active', selected);
continue; continue;
} }
@ -367,13 +372,16 @@
continue; continue;
} }
toolbarbutton.setAttribute('aria-selected', toolbarbutton.setAttribute('aria-selected', !contextNotesPaneVisible && pane == pinnedPane);
!this._contextNotesPaneVisible && pane == pinnedPane);
toolbarbutton.parentElement.hidden = !this.getPane(pane); toolbarbutton.parentElement.hidden = !this.getPane(pane);
// Set .pinned on the container, for pin styling // Set .pinned on the container, for pin styling
toolbarbutton.parentElement.classList.toggle('pinned', pane == pinnedPane); toolbarbutton.parentElement.classList.toggle('pinned', pane == pinnedPane);
} }
this.querySelector('.highlight-notes-active').classList.toggle('highlight', contextNotesPaneVisible);
this.querySelector('.highlight-notes-inactive').classList.toggle('highlight',
this._contextNotesPane && !contextNotesPaneVisible);
} }
} }
customElements.define("item-pane-sidenav", ItemPaneSidenav); customElements.define("item-pane-sidenav", ItemPaneSidenav);

18
scss/elements/_itemPaneSidenav.scss
View file

@ -21,7 +21,21 @@ item-pane-sidenav {
padding-block: 4px; padding-block: 4px;
} }
.toolbarbutton-container { .inherit-flex {
display: flex;
flex-direction: inherit;
flex-wrap: inherit;
align-items: inherit;
justify-content: inherit;
gap: inherit;
}
.highlight {
border-radius: 5px;
background-color: var(--fill-quinary);
}
.pin-wrapper {
position: relative; position: relative;
// Disable pointer events here, re-enable on the button, so that :hover styles are only applied // Disable pointer events here, re-enable on the button, so that :hover styles are only applied
// when the button itself is hovered // when the button itself is hovered
@ -64,7 +78,7 @@ item-pane-sidenav {
background-color: var(--fill-quinary); background-color: var(--fill-quinary);
} }
&:active, &.active { &:active {
background-color: var(--fill-quarternary); background-color: var(--fill-quarternary);
} }