Guidance panel fixes

- Fix missing styling in Quick Format dialog
- Fix Book Section panel being immediately hidden
- Remove low-res Zotero icon
- Increase font size and tweak padding
This commit is contained in:
Dan Stillman 2023-07-07 07:03:31 -04:00
parent 94cd2f6e92
commit 4a8935eefd
4 changed files with 32 additions and 26 deletions

View file

@ -29,22 +29,24 @@
class GuidancePanel extends XULElementBase { class GuidancePanel extends XULElementBase {
content = MozXULElement.parseXULToFragment(` content = MozXULElement.parseXULToFragment(`
<panel type="arrow" align="top"> <panel type="arrow" align="top">
<stack> <html:div class="panel-container">
<hbox align="center"> <html:div class="panel-text"></html:div>
<image src="chrome://zotero/skin/zotero-new-z-48px.png" style="margin-right: 10px; width: 48px; height: 48px;"></image> </html:div>
<label id="panel-description" flex="1"></label>
</hbox>
<hbox id="close-button-box">
<toolbarbutton id="close-button" class="close-icon" hidden="true"></toolbarbutton>
</hbox>
<hbox id="nav-buttons">
<toolbarbutton id="back-button" hidden="true"></toolbarbutton>
<toolbarbutton id="forward-button" hidden="true"></toolbarbutton>
</hbox>
</stack>
</panel> </panel>
`); `);
/*
Unused:
<hbox id="close-button-box">
<toolbarbutton id="close-button" class="close-icon" hidden="true"></toolbarbutton>
</hbox>
<hbox id="nav-buttons">
<toolbarbutton id="back-button" hidden="true"></toolbarbutton>
<toolbarbutton id="forward-button" hidden="true"></toolbarbutton>
</hbox>
*/
get panel() { get panel() {
return this.querySelector('panel'); return this.querySelector('panel');
} }
@ -113,7 +115,7 @@
text = Zotero.getString("firstRunGuidance." + about); text = Zotero.getString("firstRunGuidance." + about);
} }
text = text.split("\n"); text = text.split("\n");
var descriptionNode = this.id('panel-description'); var descriptionNode = document.querySelector('.panel-text');
while (descriptionNode.hasChildNodes()) { while (descriptionNode.hasChildNodes()) {
descriptionNode.removeChild(descriptionNode.firstChild); descriptionNode.removeChild(descriptionNode.firstChild);

View file

@ -778,6 +778,14 @@
this._focusNextField(this._lastTabIndex); this._focusNextField(this._lastTabIndex);
} }
if (this._showCreatorTypeGuidance) {
let creatorTypeLabels = this.querySelectorAll(".creator-type-label");
this._id("zotero-author-guidance").show({
forEl: creatorTypeLabels[creatorTypeLabels.length - 1]
});
this._showCreatorTypeGuidance = false;
}
this._refreshed = true; this._refreshed = true;
} }
@ -1985,10 +1993,7 @@
newVal = val; newVal = val;
if (Zotero.ItemTypes.getName(this.item.itemTypeID) === "bookSection") { if (Zotero.ItemTypes.getName(this.item.itemTypeID) === "bookSection") {
var creatorTypeLabels = this.querySelectorAll(".creator-type-label"); this._showCreatorTypeGuidance = true;
this._id("zotero-author-guidance").show({
forEl: creatorTypeLabels[creatorTypeLabels.length - 1]
});
} }
} }

View file

@ -26,6 +26,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://global/skin/browser.css" type="text/css"?> <?xml-stylesheet href="chrome://global/skin/browser.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?> <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<?xml-stylesheet href="chrome://zotero/skin/integration.css" type="text/css"?> <?xml-stylesheet href="chrome://zotero/skin/integration.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/integration.css" type="text/css"?> <?xml-stylesheet href="chrome://zotero-platform/content/integration.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform-version/content/style.css" type="text/css"?> <?xml-stylesheet href="chrome://zotero-platform-version/content/style.css" type="text/css"?>

View file

@ -1,12 +1,10 @@
guidance-panel { guidance-panel {
panel { .panel-container {
min-width: none;
}
stack {
width: 400px; width: 400px;
margin: 0; display: flex;
padding: 0; align-items: center;
font-size: 1.1em;
padding: 8px 0;
} }
#nav-buttons { #nav-buttons {