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

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

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

18
scss/elements/_itemPaneSidenav.scss
View file

@ -21,7 +21,21 @@ item-pane-sidenav {
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;
// Disable pointer events here, re-enable on the button, so that :hover styles are only applied
// when the button itself is hovered
@ -64,7 +78,7 @@ item-pane-sidenav {
background-color: var(--fill-quinary);
}
&:active, &.active {
&:active {
background-color: var(--fill-quarternary);
}