fx115: Citation dialog fixes (#3889)
- css tweaks for proper sizing and minor cleanup of unused classes and properties - added flip="none" for the panels to not bounce around window's edges - removed dialog's marginBottom on macOS - it doesn't seem needed anymore - close and reopen panel when window's height changes on all platforms. It used to only happen on windows but now the panel remains at it's original location on macOS as well, so we'll always reopen the panel so that is is positioned close to the dialog - try to postion the panel in the middle on windows - fix progress meter not appearing * improved qf window drag - not using old windowDraggingUtils since it causes issues on windows with the mouse outrunning the window. - instead, set -moz-window-drag: drag on dialog when the mouse is over the red border - added chromeutils param to the window. These are required for dragging to work on windows and their values are important because wrong values will cause the window to shrink and basically disappear. 0,0,15,0 seems to work most reliably though the reason why other values (e.g. 0,2,2,2 as on the ZoteroPane window) break window is not clear - added margins around the dialog on windows. moz-window-drag doesn't seem to properly work for mouse clicks very close to the window's edge - with fx115, the <panel> does not follow the window when it is dragged, so we have to hide the panel during dragging. Unfortunately, mouseup/down events don't fire on the dialog when moz-window-drag: drag is set on windows. Without these events, as a workaround, we check window's position periodically and hide/display the reference panel based on that. - removed initial window.resizeTo() right when the content is loaded. It's not needed and sometimes causes rendering issues when the dialog appears shrunk. * fx115 linux css edits - try to make the dialog look like dialogs on other platforms. Red background, no chrome etc. The actual window's background can't seem to be transparant, so no round borders - minor edits to sizing on linux
This commit is contained in:
abaevbog
GitHub
parent
09eb9b4e77
commit
5f076dfeea
10 changed files with 105 additions and 180 deletions
|
|
@ -7,7 +7,6 @@ window.citation-dialog {
|
|||
background: transparent;
|
||||
-moz-appearance: none;
|
||||
padding: 0;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.citation-dialog.progress-bar .citation-dialog.deck {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
body {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
window.citation-dialog {
|
||||
-moz-appearance: none;
|
||||
padding: 5px;
|
||||
background: -moz-linear-gradient(-90deg, rgb(243,123,119) 0, rgb(180,47,38) 50%, rgb(156,36,27) 50%);
|
||||
}
|
||||
|
||||
window.citation-dialog.note-dialog {
|
||||
background: -moz-linear-gradient(-90deg, rgb(249, 231, 179) 0, rgb(228, 193, 94) 50%, rgb(221, 184, 81) 50%);
|
||||
}
|
||||
|
||||
.citation-dialog.entry {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -8,6 +8,9 @@ window.citation-dialog {
|
|||
.citation-dialog.entry {
|
||||
background: -moz-linear-gradient(-90deg, rgb(243,123,119) 0, rgb(180,47,38) 50%, rgb(156,36,27) 50%);
|
||||
padding: 10px;
|
||||
/* mouse events on win don't fire right at the edge of the window. The dialog has a gap
|
||||
before the window edges to ensure the window can be dragged from any point of the dialog */
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
.note-dialog .citation-dialog.entry {
|
||||
|
|
@ -17,13 +20,4 @@ window.citation-dialog {
|
|||
.citation-dialog.entry:not([square="true"]) {
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
line-height: 1.65em;
|
||||
}
|
||||
|
||||
body[multiline="true"] {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
|
@ -44,7 +44,6 @@
|
|||
onunload="Zotero_QuickFormat.onUnload()">
|
||||
|
||||
<script src="../include.js"/>
|
||||
<script src="windowDraggingUtils.js" type="text/javascript"/>
|
||||
<script src="quickFormat.js" type="text/javascript"/>
|
||||
<script src="insertNoteDialog.js" type="text/javascript"/>
|
||||
|
||||
|
|
@ -62,7 +61,7 @@
|
|||
</deck>
|
||||
</box>
|
||||
<panel class="citation-dialog reference-panel" noautofocus="true" norestorefocus="true"
|
||||
height="0" width="0">
|
||||
height="0" width="0" flip="none">
|
||||
<richlistbox class="citation-dialog reference-list" flex="1"/>
|
||||
</panel>
|
||||
</window>
|
||||
|
|
|
|||
|
|
@ -46,17 +46,8 @@ var Zotero_ProgressBar = new function () {
|
|||
if(Zotero.isMac) {
|
||||
document.documentElement.setAttribute("drawintitlebar", true);
|
||||
} else if(Zotero.isWin) {
|
||||
document.documentElement.setAttribute("hidechrome", true);
|
||||
document.documentElement.setAttribute("chromemargin", '0,0,15,0');
|
||||
}
|
||||
|
||||
new WindowDraggingElement(document.querySelector(".citation-dialog"), window);
|
||||
|
||||
// With fx60 and drawintitlebar=true Firefox calculates the minHeight
|
||||
// as titlebar+maincontent, so we have hack around that here.
|
||||
if (Zotero.isMac) {
|
||||
document.querySelector(".citation-dialog.entry").style.marginBottom = "-28px";
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
persist="screenX screenY">
|
||||
|
||||
<script src="../include.js"/>
|
||||
<script src="windowDraggingUtils.js" type="text/javascript"/>
|
||||
<script src="progressBar.js" type="text/javascript"/>
|
||||
|
||||
<box orient="horizontal" class="citation-dialog entry">
|
||||
|
|
|
|||
|
|
@ -70,7 +70,18 @@ var Zotero_QuickFormat = new function () {
|
|||
// Only hide chrome on Windows or Mac
|
||||
if(Zotero.isMac) {
|
||||
document.documentElement.setAttribute("drawintitlebar", true);
|
||||
} else if(Zotero.isWin) {
|
||||
}
|
||||
|
||||
// Required for dragging to work on windows.
|
||||
// These values are important and changing them may affect how the dialog
|
||||
// is rendered
|
||||
if (Zotero.isWin) {
|
||||
document.documentElement.setAttribute('chromemargin', '0,0,15,0');
|
||||
}
|
||||
|
||||
// Hide chrome on linux and explcitly make window unresizable
|
||||
if (Zotero.isLinux) {
|
||||
document.documentElement.setAttribute("resizable", false);
|
||||
document.documentElement.setAttribute("hidechrome", true);
|
||||
}
|
||||
|
||||
|
|
@ -80,8 +91,6 @@ var Zotero_QuickFormat = new function () {
|
|||
qf && qf.setAttribute('about', qf.getAttribute('about') + "Mac");
|
||||
}
|
||||
|
||||
new WindowDraggingElement(document.querySelector("window.citation-dialog"), window);
|
||||
|
||||
dialog = document.querySelector(".citation-dialog.entry");
|
||||
editor = document.querySelector(".citation-dialog.editor");
|
||||
_resizeEditor();
|
||||
|
|
@ -142,11 +151,6 @@ var Zotero_QuickFormat = new function () {
|
|||
dialog.setAttribute("square", "true");
|
||||
}
|
||||
}
|
||||
// With fx60 and drawintitlebar=true Firefox calculates the minHeight
|
||||
// as titlebar+maincontent, so we have hack around that here.
|
||||
else if (Zotero.isMac) {
|
||||
dialog.style.marginBottom = "-28px";
|
||||
}
|
||||
|
||||
keepSorted = document.getElementById("keep-sorted");
|
||||
showEditor = document.getElementById("show-editor");
|
||||
|
|
@ -235,7 +239,6 @@ var Zotero_QuickFormat = new function () {
|
|||
screenX = window.screenX;
|
||||
screenY = window.screenY;
|
||||
}
|
||||
window.resizeTo(window.outerWidth, dialog.clientHeight);
|
||||
var xRange = [window.screen.availLeft, window.screen.left + window.screen.width - window.outerWidth];
|
||||
var yRange = [window.screen.availTop, window.screen.top + window.screen.height - window.outerHeight];
|
||||
if (screenX < xRange[0] || screenX > xRange[1] || screenY < yRange[0] || screenY > yRange[1]) {
|
||||
|
|
@ -257,6 +260,7 @@ var Zotero_QuickFormat = new function () {
|
|||
_updateItemList({ citedItems: [] });
|
||||
});
|
||||
refocusInput();
|
||||
_initWindowDragTracker();
|
||||
}
|
||||
catch (e) {
|
||||
Zotero.logError(e);
|
||||
|
|
@ -1182,6 +1186,46 @@ var Zotero_QuickFormat = new function () {
|
|||
e.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* FX115.
|
||||
* Keep track when the window is being dragged and if so - hide reference panel.
|
||||
* Reopen it when the window stops being dragged.
|
||||
* This is to handle the <panel> not following the window as it is moved across the screen.
|
||||
* -moz-window-drag interferes with mouseup/down events on windows, so this is an alternative
|
||||
* to those listeners.
|
||||
*/
|
||||
function _initWindowDragTracker() {
|
||||
const CHECK_FREQUENCY = 100;
|
||||
let windowTop = window.screenTop;
|
||||
let windowLeft = window.screenLeft;
|
||||
let checksWithoutMovement = 0;
|
||||
let checkWindowsPosition = () => {
|
||||
// Don't let the counter increase indefinitely
|
||||
if (checksWithoutMovement > 1000000) {
|
||||
checksWithoutMovement = 10;
|
||||
}
|
||||
setTimeout(() => {
|
||||
// If the window's positioning changed, the window is being dragged. Hide the reference panel
|
||||
if (windowTop !== window.screenTop || windowLeft !== window.screenLeft) {
|
||||
referencePanel.hidePopup();
|
||||
windowTop = window.screenTop;
|
||||
windowLeft = window.screenLeft;
|
||||
checksWithoutMovement = 0;
|
||||
checkWindowsPosition();
|
||||
return;
|
||||
}
|
||||
// If the position hasn't changed for a while, make sure the panel is reopened.
|
||||
if (checksWithoutMovement == 2 && isInput(document.activeElement) && referencePanel.state !== "open") {
|
||||
_resizeReferencePanel();
|
||||
}
|
||||
checksWithoutMovement += 1;
|
||||
// Keep checking every once in a while
|
||||
checkWindowsPosition();
|
||||
}, CHECK_FREQUENCY);
|
||||
};
|
||||
checkWindowsPosition();
|
||||
}
|
||||
|
||||
// Set the editor's width so that it fills up all remaining space in the window.
|
||||
// It should be window.width - padding - icon wrappers width. The is needed to be explicitly set
|
||||
// so that the editor's height expands/shrinks vertically without going outside of the
|
||||
|
|
@ -1201,26 +1245,31 @@ var Zotero_QuickFormat = new function () {
|
|||
function _resizeWindow() {
|
||||
let box = document.querySelector(".citation-dialog.entry");
|
||||
let contentHeight = box.getBoundingClientRect().height;
|
||||
if (Zotero.isLinux) {
|
||||
contentHeight += 10;
|
||||
// Resized so that outerHeight=contentHeight
|
||||
let outerHeightAdjustment = Math.max(window.outerHeight - window.innerHeight, 0);
|
||||
let width = WINDOW_WIDTH;
|
||||
let height = contentHeight + outerHeightAdjustment;
|
||||
// On windows, there is a 10px margin around the dialog. It's required for dragging
|
||||
// to be picked up at the edges of the dialog, otherwise it will be ignored and only
|
||||
// inner half of the dialog can be used to drag the window.
|
||||
if (Zotero.isWin) {
|
||||
width += 10 * 2;
|
||||
height += 10 * 2;
|
||||
}
|
||||
if (Math.abs(contentHeight - window.innerHeight) < 5) {
|
||||
if (Math.abs(height - window.innerHeight) < 5) {
|
||||
// Do not do anything if the difference is just a few pixels
|
||||
return;
|
||||
}
|
||||
// Resized so that outerHeight=contentHeight
|
||||
let outerHeightAdjustment = Math.max(window.outerHeight - window.innerHeight, 0);
|
||||
window.resizeTo(WINDOW_WIDTH, contentHeight + outerHeightAdjustment);
|
||||
if (Zotero.isWin) {
|
||||
// On windows, if the editor height changes, the panel will remain where it was.
|
||||
// Check if the panel is not next to the dialog, and if so - close and reopen it
|
||||
// to position references panel properly
|
||||
let dialogBottom = dialog.getBoundingClientRect().bottom;
|
||||
let panelTop = referencePanel.getBoundingClientRect().top;
|
||||
if (Math.abs(dialogBottom - panelTop) > 5) {
|
||||
referencePanel.hidePopup();
|
||||
_openReferencePanel();
|
||||
}
|
||||
window.resizeTo(width, height);
|
||||
// If the editor height changes, the panel will remain where it was.
|
||||
// Check if the panel is not next to the dialog, and if so - close and reopen it
|
||||
// to position references panel properly
|
||||
let dialogBottom = dialog.getBoundingClientRect().bottom;
|
||||
let panelTop = referencePanel.getBoundingClientRect().top;
|
||||
if (Math.abs(dialogBottom - panelTop) > 5) {
|
||||
referencePanel.hidePopup();
|
||||
// Skip a tick, otherwise the panel may just remain open where it was
|
||||
setTimeout(_openReferencePanel);
|
||||
}
|
||||
if (Zotero.isMac && Zotero.platformMajorVersion >= 60) {
|
||||
document.children[0].setAttribute('drawintitlebar', 'false');
|
||||
|
|
@ -1302,8 +1351,9 @@ var Zotero_QuickFormat = new function () {
|
|||
referencePanel.setAttribute("noautohide", "true");
|
||||
}, false);
|
||||
}
|
||||
|
||||
referencePanel.openPopup(dialog, "after_start", 15, 0, false, false, null);
|
||||
// Try to make the panel appear right in the center on windows
|
||||
let leftMargin = Zotero.isWin ? 5 : 15;
|
||||
referencePanel.openPopup(dialog, "after_start", leftMargin, 0, false, false, null);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1652,7 +1702,7 @@ var Zotero_QuickFormat = new function () {
|
|||
}
|
||||
return { lastBubble: lastBubble, startOfTheLine: startOfTheLine };
|
||||
}
|
||||
|
||||
|
||||
function _onQuickSearchClick(event) {
|
||||
if (qfGuidance) qfGuidance.hide();
|
||||
if (!event.target.classList.contains("editor")) {
|
||||
|
|
|
|||
|
|
@ -40,11 +40,10 @@
|
|||
xmlns:html="http://www.w3.org/1999/xhtml"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
persist="screenX screenY"
|
||||
width="800"
|
||||
onkeypress="Zotero_QuickFormat.onWindowKeyPress(event)"
|
||||
onunload="Zotero_QuickFormat.onUnload()">
|
||||
onunload="Zotero_QuickFormat.onUnload()"
|
||||
style="width: 800px;">
|
||||
<script src="../include.js"/>
|
||||
<script src="windowDraggingUtils.js" type="text/javascript"/>
|
||||
<script src="quickFormat.js" type="text/javascript"/>
|
||||
|
||||
<linkset>
|
||||
|
|
@ -83,7 +82,7 @@
|
|||
<html:div id="input-description" class="aria-hidden" role="tooltip" data-l10n-id="quickformat-aria-input"></html:div>
|
||||
<html:div id="item-description" class="aria-hidden" role="tooltip" data-l10n-id="quickformat-aria-item"></html:div>
|
||||
<panel class="citation-dialog reference-panel" noautofocus="true" norestorefocus="true"
|
||||
height="0" width="0">
|
||||
height="0" width="0" flip="none">
|
||||
<richlistbox class="citation-dialog reference-list" flex="1"/>
|
||||
</panel>
|
||||
<panel id="citation-properties" type="arrow" orient="vertical"
|
||||
|
|
|
|||
|
|
@ -1,118 +0,0 @@
|
|||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is mozilla.org Code.
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* Markus Stange <mstange@themasta.com>.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2008
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
let EXPORTED_SYMBOLS = [ "WindowDraggingElement" ];
|
||||
|
||||
function WindowDraggingElement(elem, window) {
|
||||
this._elem = elem;
|
||||
this._window = window;
|
||||
this._elem.addEventListener("mousedown", this, false);
|
||||
}
|
||||
|
||||
WindowDraggingElement.prototype = {
|
||||
mouseDownCheck: function(e) { return true; },
|
||||
dragTags: ["box", "hbox", "vbox", "spacer", "label", "statusbarpanel", "stack",
|
||||
"toolbaritem", "toolbarseparator", "toolbarspring", "toolbarspacer",
|
||||
"radiogroup", "deck", "scrollbox", "arrowscrollbox", "tabs"],
|
||||
shouldDrag: function(aEvent) {
|
||||
if (aEvent.button != 0 ||
|
||||
this._window.fullScreen ||
|
||||
!this.mouseDownCheck.call(this._elem, aEvent) ||
|
||||
aEvent.defaultPrevented)
|
||||
return false;
|
||||
|
||||
let target = aEvent.originalTarget, parent = aEvent.originalTarget;
|
||||
|
||||
// The target may be inside an embedded iframe or browser. (bug 615152)
|
||||
if (target.ownerDocument.defaultView != this._window)
|
||||
return false;
|
||||
|
||||
while (parent != this._elem) {
|
||||
let mousethrough = parent.getAttribute("mousethrough");
|
||||
if (mousethrough == "always")
|
||||
target = parent.parentNode;
|
||||
else if (mousethrough == "never")
|
||||
break;
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
while (target != this._elem) {
|
||||
if (this.dragTags.indexOf(target.localName) == -1)
|
||||
return false;
|
||||
target = target.parentNode;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
isPanel : function() {
|
||||
return this._elem instanceof XULElement &&
|
||||
this._elem.localName == "panel";
|
||||
},
|
||||
handleEvent: function(aEvent) {
|
||||
let isPanel = this.isPanel();
|
||||
|
||||
switch (aEvent.type) {
|
||||
case "mousedown":
|
||||
if (!this.shouldDrag(aEvent))
|
||||
return;
|
||||
|
||||
if (isPanel) {
|
||||
let screenRect = this._elem.getOuterScreenRect();
|
||||
this._deltaX = aEvent.screenX - screenRect.left;
|
||||
this._deltaY = aEvent.screenY - screenRect.top;
|
||||
}
|
||||
else {
|
||||
this._deltaX = aEvent.screenX - this._window.screenX;
|
||||
this._deltaY = aEvent.screenY - this._window.screenY;
|
||||
}
|
||||
this._draggingWindow = true;
|
||||
this._window.addEventListener("mousemove", this, false);
|
||||
this._window.addEventListener("mouseup", this, false);
|
||||
break;
|
||||
case "mousemove":
|
||||
if (this._draggingWindow) {
|
||||
let toDrag = this.isPanel() ? this._elem : this._window;
|
||||
toDrag.moveTo(aEvent.screenX - this._deltaX, aEvent.screenY - this._deltaY);
|
||||
}
|
||||
break;
|
||||
case "mouseup":
|
||||
if (this._draggingWindow) {
|
||||
this._draggingWindow = false;
|
||||
this._window.removeEventListener("mousemove", this, false);
|
||||
this._window.removeEventListener("mouseup", this, false);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -180,13 +180,12 @@
|
|||
}
|
||||
|
||||
.citation-dialog.editor {
|
||||
padding: 0 2px 0px 2px;
|
||||
margin: 0;
|
||||
font: -moz-field;
|
||||
outline: none;
|
||||
line-height: 2em;
|
||||
width: 700px; /* initial editor width - adjusted after dom load */
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
font-size: 13px;
|
||||
background: white;
|
||||
color: black;
|
||||
|
|
@ -208,6 +207,15 @@
|
|||
.citation-dialog.entry {
|
||||
max-width: 800px;
|
||||
min-width: 800px;
|
||||
-moz-window-dragging: drag;
|
||||
}
|
||||
|
||||
.citation-dialog.deck {
|
||||
-moz-window-dragging: no-drag;
|
||||
}
|
||||
|
||||
.citation-dialog.progress-meter[value] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.citation-dialog .accept-button {
|
||||
|
|
|
|||
Loading…
Reference in a new issue