Item pane improvements for contextual/pinned modes
- Show item title at top of item pane in contextual mode not in a library tab - Show "All Notes" at top of standalone notes pane - Add background color when clicking notes in standalone notes list - Clean up back buttons Mode button is still a placeholder but uses emoji to show the mode
This commit is contained in:
parent
de5206d926
commit
ab04468342
8 changed files with 122 additions and 62 deletions
|
@ -129,7 +129,7 @@ input {
|
||||||
|
|
||||||
.zotero-editpane-tabs {
|
.zotero-editpane-tabs {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
background: -moz-linear-gradient(top, #ededed, #cccccc);
|
/*background: -moz-linear-gradient(top, #ededed, #cccccc);*/
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0 0 1px 0;
|
border-width: 0 0 1px 0;
|
||||||
border-color: #bdbdbd;
|
border-color: #bdbdbd;
|
||||||
|
|
|
@ -29,6 +29,8 @@ import TagsBoxContainer from 'containers/tagsBoxContainer';
|
||||||
import NotesList from 'components/itemPane/notesList';
|
import NotesList from 'components/itemPane/notesList';
|
||||||
|
|
||||||
var ZoteroItemPane = new function() {
|
var ZoteroItemPane = new function() {
|
||||||
|
const HTML_NS = 'http://www.w3.org/1999/xhtml';
|
||||||
|
|
||||||
var _lastItem, _itemBox, _notesLabel, _notesButton, _notesList, _tagsBox, _relatedBox;
|
var _lastItem, _itemBox, _notesLabel, _notesButton, _notesList, _tagsBox, _relatedBox;
|
||||||
var _selectedNoteID;
|
var _selectedNoteID;
|
||||||
var _translationTarget;
|
var _translationTarget;
|
||||||
|
@ -113,6 +115,8 @@ var ZoteroItemPane = new function() {
|
||||||
|
|
||||||
_lastItem = item;
|
_lastItem = item;
|
||||||
|
|
||||||
|
_updateTitle();
|
||||||
|
|
||||||
var viewBox = document.getElementById('zotero-view-item');
|
var viewBox = document.getElementById('zotero-view-item');
|
||||||
viewBox.classList.remove('no-tabs');
|
viewBox.classList.remove('no-tabs');
|
||||||
|
|
||||||
|
@ -476,6 +480,11 @@ var ZoteroItemPane = new function() {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function _updateTitle() {
|
||||||
|
document.getElementById('item-pane-title').textContent = _lastItem.getDisplayTitle();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function _updateNoteCount() {
|
function _updateNoteCount() {
|
||||||
var c = _notesList.childNodes.length;
|
var c = _notesList.childNodes.length;
|
||||||
|
|
||||||
|
@ -516,6 +525,7 @@ var ZoteroItemPane = new function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.togglePane = function (forceItem) {
|
this.togglePane = function (forceItem) {
|
||||||
|
var pane = document.getElementById('zotero-item-pane');
|
||||||
let mainDeck = document.getElementById('zotero-item-pane-main-deck');
|
let mainDeck = document.getElementById('zotero-item-pane-main-deck');
|
||||||
let value;
|
let value;
|
||||||
if (forceItem !== undefined) {
|
if (forceItem !== undefined) {
|
||||||
|
@ -525,15 +535,15 @@ var ZoteroItemPane = new function() {
|
||||||
value = mainDeck.selectedIndex == 0 ? 1 : 0;
|
value = mainDeck.selectedIndex == 0 ? 1 : 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('temp-toggle-1').firstChild.remove();
|
|
||||||
document.getElementById('temp-toggle-2').firstChild.remove();
|
|
||||||
if (value == 0) {
|
if (value == 0) {
|
||||||
document.getElementById('temp-toggle-1').append('■ □');
|
pane.setAttribute('data-mode', 'item');
|
||||||
document.getElementById('temp-toggle-2').append('■ □');
|
document.getElementById('temp-toggle-1').innerHTML = '[📄] 📒';
|
||||||
|
document.getElementById('temp-toggle-2').innerHTML = '[📄] 📒';
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
document.getElementById('temp-toggle-1').append('□ ■');
|
pane.setAttribute('data-mode', 'notes');
|
||||||
document.getElementById('temp-toggle-2').append('□ ■');
|
document.getElementById('temp-toggle-1').innerHTML = '📄 [📒]';
|
||||||
|
document.getElementById('temp-toggle-2').innerHTML = '📄 [📒]';
|
||||||
}
|
}
|
||||||
|
|
||||||
mainDeck.selectedIndex = value;
|
mainDeck.selectedIndex = value;
|
||||||
|
@ -553,35 +563,33 @@ var ZoteroItemPane = new function() {
|
||||||
inner.setAttribute('flex', 1);
|
inner.setAttribute('flex', 1);
|
||||||
container.appendChild(inner);
|
container.appendChild(inner);
|
||||||
|
|
||||||
let returnButton = document.createElement('toolbarbutton');
|
var listLabel = document.createElementNS(HTML_NS, 'div');
|
||||||
returnButton.className = 'zotero-tb-button';
|
listLabel.className = 'notes-list-label';
|
||||||
returnButton.id = 'zotero-tb-return';
|
listLabel.textContent = Zotero.getString('pane.item.notes.allNotes');
|
||||||
returnButton.style.listStyleImage = 'url(\'chrome://zotero/skin/citation-delete.png\')'
|
|
||||||
returnButton.addEventListener('click', () => {
|
|
||||||
inner.setAttribute('selectedIndex', 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
bar.append(returnButton, 'Standalone Notes');
|
|
||||||
bar.style.overflowX = 'hidden';
|
|
||||||
bar.style.textOverflow = 'ellipsis';
|
|
||||||
bar.style.fontWeight = 'bold';
|
|
||||||
|
|
||||||
|
|
||||||
let list = document.createElement('vbox');
|
let list = document.createElement('vbox');
|
||||||
list.setAttribute('flex', 1);
|
list.setAttribute('flex', 1);
|
||||||
list.className = 'zotero-box';
|
list.className = 'zotero-box';
|
||||||
|
|
||||||
|
list.appendChild(listLabel);
|
||||||
|
|
||||||
|
var noteContainer = document.createElement('vbox');
|
||||||
|
var backButton = document.createElementNS(HTML_NS, 'div');
|
||||||
|
backButton.className = 'item-pane-back-button';
|
||||||
|
backButton.textContent = (Zotero.dir == 'ltr' ? '←' : '→') + ' '
|
||||||
|
+ Zotero.getString('general.back');
|
||||||
|
backButton.addEventListener('click', () => {
|
||||||
|
inner.setAttribute('selectedIndex', 0);
|
||||||
|
});
|
||||||
let note = document.createElement('zoteronoteeditor');
|
let note = document.createElement('zoteronoteeditor');
|
||||||
note.id = 'zotero-item-pane-pinned-note';
|
note.id = 'zotero-item-pane-pinned-note';
|
||||||
note.setAttribute('flex', 1);
|
note.setAttribute('flex', 1);
|
||||||
inner.appendChild(list);
|
noteContainer.appendChild(backButton);
|
||||||
inner.appendChild(note);
|
noteContainer.appendChild(note);
|
||||||
|
|
||||||
|
inner.append(list, noteContainer);
|
||||||
inner.setAttribute('selectedIndex', 0);
|
inner.setAttribute('selectedIndex', 0);
|
||||||
|
|
||||||
|
|
||||||
let head = document.createElement('hbox');
|
let head = document.createElement('hbox');
|
||||||
let label = document.createElement('label');
|
let label = document.createElement('label');
|
||||||
let button = document.createElement('button');
|
let button = document.createElement('button');
|
||||||
|
@ -625,7 +633,6 @@ var ZoteroItemPane = new function() {
|
||||||
listBox.style.display = 'flex';
|
listBox.style.display = 'flex';
|
||||||
listBox.setAttribute('flex', '1')
|
listBox.setAttribute('flex', '1')
|
||||||
|
|
||||||
const HTML_NS = 'http://www.w3.org/1999/xhtml';
|
|
||||||
var listInner = document.createElementNS(HTML_NS, 'div');
|
var listInner = document.createElementNS(HTML_NS, 'div');
|
||||||
listInner.className = 'notes-list-container';
|
listInner.className = 'notes-list-container';
|
||||||
list.append(head, listBox);
|
list.append(head, listBox);
|
||||||
|
@ -753,6 +760,9 @@ var ZoteroItemPane = new function() {
|
||||||
};
|
};
|
||||||
|
|
||||||
this.selectTabContext = function (tabID, type) {
|
this.selectTabContext = function (tabID, type) {
|
||||||
|
var pane = document.getElementById('zotero-item-pane');
|
||||||
|
pane.setAttribute('data-type', type);
|
||||||
|
|
||||||
let contextualDeck = document.getElementById('zotero-item-pane-contextual-deck');
|
let contextualDeck = document.getElementById('zotero-item-pane-contextual-deck');
|
||||||
let prevIndex = contextualDeck.selectedIndex;
|
let prevIndex = contextualDeck.selectedIndex;
|
||||||
contextualDeck.selectedIndex = Array.from(contextualDeck.children).findIndex(x => x.id == tabID + '-context');
|
contextualDeck.selectedIndex = Array.from(contextualDeck.children).findIndex(x => x.id == tabID + '-context');
|
||||||
|
@ -778,16 +788,16 @@ var ZoteroItemPane = new function() {
|
||||||
|
|
||||||
let state = contextualDeck.children[contextualDeck.selectedIndex].getAttribute('state');
|
let state = contextualDeck.children[contextualDeck.selectedIndex].getAttribute('state');
|
||||||
let mainDeck = document.getElementById('zotero-item-pane-main-deck');
|
let mainDeck = document.getElementById('zotero-item-pane-main-deck');
|
||||||
document.getElementById('temp-toggle-1').firstChild.remove();
|
|
||||||
document.getElementById('temp-toggle-2').firstChild.remove();
|
|
||||||
if (state == 0) {
|
if (state == 0) {
|
||||||
document.getElementById('temp-toggle-1').append('■ □');
|
pane.setAttribute('data-mode', 'item');
|
||||||
document.getElementById('temp-toggle-2').append('■ □');
|
document.getElementById('temp-toggle-1').innerHTML = '[📄] 📒';
|
||||||
|
document.getElementById('temp-toggle-2').innerHTML = '[📄] 📒';
|
||||||
mainDeck.selectedIndex = state;
|
mainDeck.selectedIndex = state;
|
||||||
}
|
}
|
||||||
else if (state == 1) {
|
else if (state == 1) {
|
||||||
document.getElementById('temp-toggle-1').append('□ ■');
|
pane.setAttribute('data-mode', 'notes');
|
||||||
document.getElementById('temp-toggle-2').append('□ ■');
|
document.getElementById('temp-toggle-1').innerHTML = '📄 [📒]';
|
||||||
|
document.getElementById('temp-toggle-2').innerHTML = '📄 [📒]';
|
||||||
mainDeck.selectedIndex = state;
|
mainDeck.selectedIndex = state;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -859,26 +869,18 @@ var ZoteroItemPane = new function() {
|
||||||
|
|
||||||
var vbox2 = document.createElement('vbox');
|
var vbox2 = document.createElement('vbox');
|
||||||
|
|
||||||
|
var backButton = document.createElementNS(HTML_NS, 'div');
|
||||||
let returnButton = document.createElement('toolbarbutton');
|
backButton.className = 'item-pane-back-button';
|
||||||
returnButton.className = 'zotero-tb-button';
|
backButton.textContent = (Zotero.dir == 'ltr' ? '←' : '→') + ' '
|
||||||
returnButton.id = 'zotero-tb-return';
|
+ Zotero.getString('general.back');
|
||||||
returnButton.style.listStyleImage = 'url(\'chrome://zotero/skin/citation-delete.png\')'
|
backButton.addEventListener('click', () => {
|
||||||
returnButton.addEventListener('click', () => {
|
|
||||||
deck.setAttribute('selectedIndex', 0);
|
deck.setAttribute('selectedIndex', 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
var bar = document.createElement('hbox')
|
|
||||||
bar.append(returnButton, 'Child Notes');
|
|
||||||
bar.style.overflowX = 'hidden';
|
|
||||||
bar.style.textOverflow = 'ellipsis';
|
|
||||||
bar.style.fontWeight = 'bold';
|
|
||||||
|
|
||||||
let note = document.createElement('zoteronoteeditor');
|
let note = document.createElement('zoteronoteeditor');
|
||||||
|
|
||||||
note.setAttribute('flex', 1);
|
note.setAttribute('flex', 1);
|
||||||
|
|
||||||
vbox2.append(bar, note);
|
vbox2.append(backButton, note);
|
||||||
|
|
||||||
|
|
||||||
var vbox = document.createElement('vbox');
|
var vbox = document.createElement('vbox');
|
||||||
|
@ -929,7 +931,7 @@ var ZoteroItemPane = new function() {
|
||||||
panelTags.setAttribute('context', 'tags-context-menu');
|
panelTags.setAttribute('context', 'tags-context-menu');
|
||||||
panelTags.className = 'tags-pane';
|
panelTags.className = 'tags-pane';
|
||||||
panelTags.style.display = 'flex';
|
panelTags.style.display = 'flex';
|
||||||
const HTML_NS = 'http://www.w3.org/1999/xhtml';
|
|
||||||
var div = document.createElementNS(HTML_NS, 'div');
|
var div = document.createElementNS(HTML_NS, 'div');
|
||||||
div.className = 'tags-box-container';
|
div.className = 'tags-box-container';
|
||||||
div.style.display = 'flex';
|
div.style.display = 'flex';
|
||||||
|
|
|
@ -34,11 +34,17 @@
|
||||||
<script src="include.js"/>
|
<script src="include.js"/>
|
||||||
<script src="itemPane.js"></script>
|
<script src="itemPane.js"></script>
|
||||||
|
|
||||||
<vbox id="zotero-item-pane" zotero-persist="width height">
|
<vbox id="zotero-item-pane"
|
||||||
|
zotero-persist="width height"
|
||||||
|
data-type="library"
|
||||||
|
data-mode="item"
|
||||||
|
>
|
||||||
<hbox id="zotero-item-pane-padding-top" height="32" hidden="true" align="right">
|
<hbox id="zotero-item-pane-padding-top" height="32" hidden="true" align="right">
|
||||||
<button id="temp-toggle-2" style="min-width: 37px; font-size: 16px;">■ □</button>
|
<button id="temp-toggle-2" style="min-width: 37px; padding: 2px; font-size: 13px;">[📄] 📒</button>
|
||||||
</hbox>
|
</hbox>
|
||||||
|
|
||||||
|
<html:div id="item-pane-title"/>
|
||||||
|
|
||||||
<deck id="zotero-item-pane-main-deck" flex="1" selectedIndex="0">
|
<deck id="zotero-item-pane-main-deck" flex="1" selectedIndex="0">
|
||||||
<deck id="zotero-item-pane-contextual-deck" selectedIndex="0">
|
<deck id="zotero-item-pane-contextual-deck" selectedIndex="0">
|
||||||
<vbox id="zotero-pane-context">
|
<vbox id="zotero-pane-context">
|
||||||
|
|
|
@ -214,7 +214,7 @@
|
||||||
<div xmlns="http://www.w3.org/1999/xhtml" class="sync-button-tooltip-messages"/>
|
<div xmlns="http://www.w3.org/1999/xhtml" class="sync-button-tooltip-messages"/>
|
||||||
</tooltip>
|
</tooltip>
|
||||||
</toolbarbutton>
|
</toolbarbutton>
|
||||||
<button id="temp-toggle-1" style="min-width: 37px; font-size: 16px;">■ □</button>
|
<button id="temp-toggle-1" style="min-width: 37px; padding: 2px; font-size: 13px;">[📄] 📒</button>
|
||||||
</hbox>
|
</hbox>
|
||||||
</toolbar>
|
</toolbar>
|
||||||
|
|
||||||
|
|
|
@ -77,6 +77,7 @@ general.describeProblem = Briefly describe the problem:
|
||||||
general.nMegabytes = %S MB
|
general.nMegabytes = %S MB
|
||||||
general.item = Item
|
general.item = Item
|
||||||
general.pdf = PDF
|
general.pdf = PDF
|
||||||
|
general.back = Back
|
||||||
|
|
||||||
general.operationInProgress = A Zotero operation is currently in progress.
|
general.operationInProgress = A Zotero operation is currently in progress.
|
||||||
general.operationInProgress.waitUntilFinished = Please wait until it has finished.
|
general.operationInProgress.waitUntilFinished = Please wait until it has finished.
|
||||||
|
@ -364,6 +365,7 @@ pane.item.switchFieldMode.two = Switch to two fields
|
||||||
pane.item.creator.moveToTop = Move to Top
|
pane.item.creator.moveToTop = Move to Top
|
||||||
pane.item.creator.moveUp = Move Up
|
pane.item.creator.moveUp = Move Up
|
||||||
pane.item.creator.moveDown = Move Down
|
pane.item.creator.moveDown = Move Down
|
||||||
|
pane.item.notes.allNotes = All Notes
|
||||||
pane.item.notes.untitled = Untitled Note
|
pane.item.notes.untitled = Untitled Note
|
||||||
pane.item.notes.delete.confirm = Are you sure you want to delete this note?
|
pane.item.notes.delete.confirm = Are you sure you want to delete this note?
|
||||||
pane.item.notes.count.zero = %S notes:
|
pane.item.notes.count.zero = %S notes:
|
||||||
|
|
|
@ -45,6 +45,52 @@
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#zotero-item-pane[data-type='library'] #item-pane-title,
|
||||||
|
#zotero-item-pane[data-mode='notes'] #item-pane-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#item-pane-title {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0 10px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zotero-item-pane-contextual-deck .item-pane-back-button {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 4px 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zotero-item-pane-pin-deck .item-pane-back-button {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 7px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zotero-item-pane-padding-top {
|
||||||
|
/*border-bottom: 1px solid lightgray;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#zotero-item-pane-pinned-note {
|
||||||
|
border-top: 1px solid #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zotero-editpane-tabs {
|
||||||
|
background: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
#temp-toggle-1.mode-item, #temp-toggle-2.mode-item {
|
||||||
|
list-style-image: url(chrome://zotero/skin/treeitem.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
#temp-toggle-1.mode-notes, #temp-toggle-2.mode-notes {
|
||||||
|
list-style-image: url(chrome://zotero/skin/treeitem-note.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-list-label {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 8px 10px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
#retraction-box {
|
#retraction-box {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
|
@ -710,7 +710,7 @@
|
||||||
|
|
||||||
|
|
||||||
.zotero-box {
|
.zotero-box {
|
||||||
margin-left: 5px;
|
/*margin-left: 5px;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.zotero-box-icon {
|
.zotero-box-icon {
|
||||||
|
|
|
@ -13,12 +13,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-row {
|
.note-row {
|
||||||
padding: 8px 0;
|
padding: 8px 12px;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
border-bottom: 1px solid $shade-3;
|
border-bottom: 1px solid $shade-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #e2e2e2;
|
||||||
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
.first-line {
|
.first-line {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in a new issue