Fix context pane return button and background
* Fix context pane return button and background * Remove unused code * Fix tab notes container background * Fix context pane sections background
This commit is contained in:
windingwind
Dan Stillman
parent
133fb3ad23
commit
b649a1a953
6 changed files with 129 additions and 112 deletions
|
|
@ -23,8 +23,6 @@
|
|||
***** END LICENSE BLOCK *****
|
||||
*/
|
||||
|
||||
var { getCSSItemTypeIcon } = require('components/icons');
|
||||
|
||||
var ZoteroContextPane = new function () {
|
||||
var _tabCover;
|
||||
var _contextPane;
|
||||
|
|
@ -71,7 +69,6 @@ var ZoteroContextPane = new function () {
|
|||
_itemPaneDeck = document.createXULElement('deck');
|
||||
// Notes pane deck
|
||||
_notesPaneDeck = document.createXULElement('deck');
|
||||
_notesPaneDeck.style.backgroundColor = 'white';
|
||||
_notesPaneDeck.setAttribute('flex', 1);
|
||||
_notesPaneDeck.className = 'notes-pane-deck';
|
||||
|
||||
|
|
@ -393,21 +390,27 @@ var ZoteroContextPane = new function () {
|
|||
list.setAttribute('flex', 1);
|
||||
list.className = 'zotero-context-notes-list';
|
||||
|
||||
var noteContainer = document.createXULElement('vbox');
|
||||
var title = document.createXULElement('vbox');
|
||||
let noteContainer = document.createXULElement('vbox');
|
||||
noteContainer.classList.add('zotero-context-note-container');
|
||||
let title = document.createXULElement('vbox');
|
||||
title.className = 'zotero-context-pane-editor-parent-line';
|
||||
var editor = new (customElements.get('note-editor'));
|
||||
let divider = document.createElement("div");
|
||||
divider.classList.add("divider");
|
||||
let editor = new (customElements.get('note-editor'));
|
||||
editor.className = 'zotero-context-pane-pinned-note';
|
||||
editor.setAttribute('flex', 1);
|
||||
noteContainer.append(title, editor);
|
||||
noteContainer.append(title, divider, editor);
|
||||
|
||||
var tabNotesContainer = document.createXULElement('vbox');
|
||||
var title = document.createXULElement('vbox');
|
||||
let tabNotesContainer = document.createXULElement('vbox');
|
||||
tabNotesContainer.classList.add('zotero-context-note-container');
|
||||
title = document.createXULElement('vbox');
|
||||
title.className = 'zotero-context-pane-editor-parent-line';
|
||||
divider = document.createElement("div");
|
||||
divider.classList.add("divider");
|
||||
let tabNotesDeck = document.createXULElement('deck');
|
||||
tabNotesDeck.className = 'zotero-context-pane-tab-notes-deck';
|
||||
tabNotesDeck.setAttribute('flex', 1);
|
||||
tabNotesContainer.append(title, tabNotesDeck);
|
||||
tabNotesContainer.append(title, divider, tabNotesDeck);
|
||||
|
||||
let contextNode = document.createXULElement('deck');
|
||||
contextNode.append(list, noteContainer, tabNotesContainer);
|
||||
|
|
@ -417,11 +420,6 @@ var ZoteroContextPane = new function () {
|
|||
contextNode.setAttribute('data-library-id', libraryID);
|
||||
contextNode.setAttribute('selectedIndex', 0);
|
||||
|
||||
editor.returnHandler = () => {
|
||||
contextNode.setAttribute('selectedIndex', 0);
|
||||
_updateAddToNote();
|
||||
};
|
||||
|
||||
var head = document.createXULElement('hbox');
|
||||
head.style.display = 'flex';
|
||||
|
||||
|
|
@ -762,15 +760,6 @@ var ZoteroContextPane = new function () {
|
|||
editor.mode = readOnly ? 'view' : 'edit';
|
||||
editor.item = item;
|
||||
editor.parentItem = null;
|
||||
editor.returnHandler = () => {
|
||||
// Immediately save note content before vbox with note-editor iframe is destroyed below
|
||||
editor.saveSync();
|
||||
_panesDeck.setAttribute('selectedIndex', 1);
|
||||
_notesPaneDeck.selectedPanel.setAttribute('selectedIndex', 0);
|
||||
vbox.remove();
|
||||
_updateAddToNote();
|
||||
_preventGlobalDeckChange = true;
|
||||
};
|
||||
|
||||
_notesPaneDeck.selectedPanel.setAttribute('selectedIndex', 2);
|
||||
tabNotesDeck.setAttribute('selectedIndex', tabNotesDeck.children.length - 1);
|
||||
|
|
@ -788,18 +777,28 @@ var ZoteroContextPane = new function () {
|
|||
|
||||
editor.focus();
|
||||
|
||||
parentTitleContainer.innerHTML = '';
|
||||
var parentItem = item.parentItem;
|
||||
if (parentItem) {
|
||||
var container = document.createElement('div');
|
||||
var icon = getCSSItemTypeIcon(parentItem.getItemTypeIconName());
|
||||
icon.classList.add('parent-item-type');
|
||||
var title = document.createElement('div');
|
||||
title.append(parentItem.getDisplayTitle());
|
||||
let parentItem = item.parentItem;
|
||||
if (!parentTitleContainer.querySelector(".parent-title-container")) {
|
||||
let container = document.createElement('div');
|
||||
container.classList.add("parent-title-container");
|
||||
let returnBtn = document.createXULElement("toolbarbutton");
|
||||
returnBtn.classList.add("zotero-tb-note-return");
|
||||
returnBtn.addEventListener("command", () => {
|
||||
// Immediately save note content before vbox with note-editor iframe is destroyed below
|
||||
editor.saveSync();
|
||||
_panesDeck.setAttribute('selectedIndex', 1);
|
||||
_notesPaneDeck.selectedPanel.setAttribute('selectedIndex', 0);
|
||||
vbox.remove();
|
||||
_updateAddToNote();
|
||||
_preventGlobalDeckChange = true;
|
||||
});
|
||||
let title = document.createElement('div');
|
||||
title.className = 'parent-title';
|
||||
container.append(icon, title);
|
||||
container.append(returnBtn, title);
|
||||
parentTitleContainer.append(container);
|
||||
}
|
||||
parentTitleContainer.querySelector(".parent-title").textContent
|
||||
= parentItem?.getDisplayTitle() || "";
|
||||
_updateAddToNote();
|
||||
}
|
||||
}
|
||||
|
|
@ -836,7 +835,7 @@ var ZoteroContextPane = new function () {
|
|||
if (!item) {
|
||||
return;
|
||||
}
|
||||
var libraryID = item.libraryID;
|
||||
libraryID = item.libraryID;
|
||||
var readOnly = _isLibraryReadOnly(libraryID);
|
||||
var parentID = item.parentID;
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/standalone.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/contextPane.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/itemPane.css" type="text/css"?>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
#tabs-deck {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
#zotero-context-pane {
|
||||
display: flex;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
#zotero-context-pane.stacked {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#zotero-context-pane .stacked-context-placeholder {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
#zotero-context-pane.standard .stacked-context-placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#zotero-context-splitter-stacked {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#zotero-context-pane-inner {
|
||||
width: 0;
|
||||
background: var(--material-sidepane);
|
||||
font: message-box;
|
||||
font-size: inherit;
|
||||
min-height: 100px;
|
||||
height: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#zotero-item-toolbar {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.zotero-context-notes-list {
|
||||
background-color: var(--material-sidepane);
|
||||
}
|
||||
|
||||
.zotero-context-pane-editor-parent-line {
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.zotero-context-pane-editor-parent-line > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.zotero-context-pane-editor-parent-line .parent-item-type {
|
||||
margin-inline-end: 3px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.zotero-context-pane-editor-parent-line .parent-title {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#zotero-context-pane[collapsed=true] .notes-list-container,
|
||||
#zotero-context-pane-inner[collapsed=true] .notes-list-container,
|
||||
#zotero-context-pane[collapsed=true] .zotero-view-item > tabpanel > *,
|
||||
#zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--material-sidepane);
|
||||
}
|
||||
|
||||
.zotero-view-item {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
@import "components/autosuggest";
|
||||
@import "components/button";
|
||||
@import "components/clicky";
|
||||
@import "components/contextPane";
|
||||
@import "components/collection-tree";
|
||||
@import "components/createParent";
|
||||
@import "components/dictionaryManager";
|
||||
|
|
|
|||
94
scss/components/_contextPane.scss
Normal file
94
scss/components/_contextPane.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
#tabs-deck {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
#zotero-context-pane {
|
||||
display: flex;
|
||||
min-width: 360px;
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid var(--fill-quinary);
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
&.stacked {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.stacked-context-placeholder {
|
||||
min-height: 300px;
|
||||
}
|
||||
&.standard .stacked-context-placeholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#zotero-context-splitter-stacked {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#zotero-context-pane-inner {
|
||||
width: 0;
|
||||
background: var(--material-background);
|
||||
font: message-box;
|
||||
font-size: inherit;
|
||||
min-height: 100px;
|
||||
height: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#zotero-item-toolbar {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.zotero-context-notes-list {
|
||||
background-color: var(--material-sidepane);
|
||||
}
|
||||
|
||||
.zotero-context-note-container {
|
||||
background-color: var(--material-background);
|
||||
}
|
||||
|
||||
.zotero-context-pane-editor-parent-line {
|
||||
height: 40px;
|
||||
|
||||
& .parent-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
& .parent-item-type {
|
||||
margin-inline-end: 3px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
& .parent-title {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.zotero-tb-note-return {
|
||||
@include svgicon-menu("chevron", "universal", "20");
|
||||
rotate: 90deg;
|
||||
padding: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#zotero-context-pane[collapsed=true] .notes-list-container,
|
||||
#zotero-context-pane-inner[collapsed=true] .notes-list-container,
|
||||
#zotero-context-pane[collapsed=true] .zotero-view-item > tabpanel > *,
|
||||
#zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
|
||||
overflow: unset !important;
|
||||
}
|
||||
Loading…
Reference in a new issue