diff --git a/chrome/content/zotero/xpcom/prefs.js b/chrome/content/zotero/xpcom/prefs.js
index df6b6f48ed..d405a23669 100644
--- a/chrome/content/zotero/xpcom/prefs.js
+++ b/chrome/content/zotero/xpcom/prefs.js
@@ -44,7 +44,7 @@ Zotero.Prefs = new function() {
// Process pref version updates
var fromVersion = this.get('prefVersion');
- var toVersion = 11;
+ var toVersion = 12;
if (!fromVersion) {
this.set('prefVersion', toVersion);
}
@@ -138,6 +138,10 @@ Zotero.Prefs = new function() {
case 11:
await Zotero.LocateManager.migrateEngines();
break;
+
+ case 12:
+ Zotero.Prefs.set('firstRunGuidanceShown.z7Banner', false);
+ break;
}
}
this.set('prefVersion', toVersion);
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index baf6d9199d..bf086ed77e 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -114,6 +114,7 @@ var ZoteroPane = new function()
zp.addEventListener('UIPropertiesChanged', () => {
this.collectionsView?.updateFontSize();
this.itemsView?.updateFontSize();
+ this.updatePostUpgradeBanner();
});
Zotero.UIProperties.registerRoot(document.getElementById('zotero-context-pane'));
this.itemPane = document.querySelector("#zotero-item-pane");
@@ -629,6 +630,7 @@ var ZoteroPane = new function()
}
setTimeout(function () {
+ ZoteroPane.showPostUpgradeBanner();
ZoteroPane.showRetractionBanner();
ZoteroPane.showArchitectureWarning();
ZoteroPane.initSyncReminders(true);
@@ -6143,6 +6145,35 @@ var ZoteroPane = new function()
};
+ this.showPostUpgradeBanner = function () {
+ if (Zotero.isBetaBuild || Zotero.Prefs.get('firstRunGuidanceShown.z7Banner')) {
+ return;
+ }
+ document.getElementById('post-upgrade-container').removeAttribute('collapsed');
+ this.updatePostUpgradeBanner();
+ };
+
+
+ this.updatePostUpgradeBanner = function () {
+ document.getElementById('post-upgrade-density').value = Zotero.Prefs.get('uiDensity');
+ };
+
+
+ this.hidePostUpgradeBanner = function (remindMeLater = false) {
+ document.getElementById('post-upgrade-container').setAttribute('collapsed', true);
+ if (remindMeLater) {
+ // The pref should already be false if the banner was showing, but just in case
+ Zotero.Prefs.set('firstRunGuidanceShown.z7Banner', false);
+ setTimeout(() => {
+ this.showPostUpgradeBanner();
+ }, 1000 * 60 * 60 * 24); // 24 hours
+ }
+ else {
+ Zotero.Prefs.set('firstRunGuidanceShown.z7Banner', true);
+ }
+ };
+
+
/**
* Sets the layout to either a three-vertical-pane layout and a layout where itemsPane is above itemPane
*/
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 6cd0cbec0f..49fff6b8d5 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1081,23 +1081,62 @@
onkeyup="ZoteroPane_Local.handleKeyUp(event, this.id)"
onkeypress="ZoteroPane_Local.handleKeyPress(event)">
+
+
+
+
+
+
+ •
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
-
+
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index a42554cf07..7d7ca217c5 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -12,6 +12,7 @@ general-choose-file = Choose File…
general-open-settings = Open Settings
general-help = Help
general-tag = Tag
+general-done = Done
menu-file-show-in-finder =
.label = Show in Finder
@@ -668,3 +669,10 @@ file-type-video = Video
file-type-presentation = Presentation
file-type-document = Document
file-type-ebook = Ebook
+
+post-upgrade-message = Learn about the new features in { -app-name } { $version }
+post-upgrade-density = Choose your preferred layout density:
+post-upgrade-remind-me-later =
+ .label = { general-remind-me-later }
+post-upgrade-done =
+ .label = { general-done }
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 5d7a656027..ea93091dc6 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -333,67 +333,6 @@ TODO: Replace with SVG
height: 16px;
}
-#retracted-items-banner, #sync-reminder-banner {
- display: flex;
- justify-content: center;
- background: #d93425;
- line-height: 2.2em;
- font-weight: 600;
- color: white;
- font-size: 13.5px;
- text-align: center;
- padding: 0 2em;
- position: relative;
- white-space: nowrap;
- overflow: hidden;
-}
-
-#sync-reminder-banner {
- background: rgb(255, 234, 80);
- border-bottom: #a9a9a9 .5px solid;
- color: black;
-}
-
-#retracted-items-message, #sync-reminder-message {
- margin-right: .8em;
-}
-
-#sync-reminder-spacer {
- flex: 1;
-}
-
-#retracted-items-link, .sync-reminder-link, #retracted-items-close, #sync-reminder-close {
- color: inherit;
- border: none;
- margin: 0;
-}
-
-#retracted-items-link {
- margin-left: .3em;
-}
-
-.sync-reminder-link {
- padding-left: 0.5em;
- padding-right: 0.5em;
-}
-
-#retracted-items-link:active {
- color: #f9e8e2;
-}
-
-.sync-reminder-link:active {
- color: #4b4b4b;
-}
-
-#retracted-items-close, #sync-reminder-close {
- text-decoration: none;
- position: absolute;
- cursor: pointer;
- top: -2px;
- right: 9px;
- font-size: 22px;
-}
-
/* Missing in Fx60 */
.autocomplete-richlistbox {
border: 1px solid transparent;
diff --git a/defaults/preferences/zotero.js b/defaults/preferences/zotero.js
index e40cd5637a..3f32080158 100644
--- a/defaults/preferences/zotero.js
+++ b/defaults/preferences/zotero.js
@@ -45,6 +45,7 @@ pref("extensions.zotero.showTrashWhenEmpty", true);
pref("extensions.zotero.trashAutoEmptyDays", 30);
pref("extensions.zotero.viewOnDoubleClick", true);
pref("extensions.zotero.firstRunGuidance", true);
+pref("extensions.zotero.firstRunGuidanceShown.z7Banner", true);
pref("extensions.zotero.showConnectorVersionWarning", true);
pref("extensions.zotero.reopenPanesOnRestart", true);
diff --git a/resource/config.js b/resource/config.js
index 67c3a5760f..756887a2d3 100644
--- a/resource/config.js
+++ b/resource/config.js
@@ -31,6 +31,7 @@ var ZOTERO_CONFIG = {
GET_INVOLVED_URL: 'https://www.zotero.org/getinvolved',
DICTIONARIES_URL: 'https://download.zotero.org/dictionaries/',
PLUGINS_URL: 'https://www.zotero.org/support/plugins',
+ NEW_FEATURES_URL: 'https://www.zotero.org/blog/zotero-7/'
};
if (typeof exports === 'object' && typeof module !== 'undefined') {
diff --git a/scss/_zotero.scss b/scss/_zotero.scss
index 210ee32bcd..525c1b1bd6 100644
--- a/scss/_zotero.scss
+++ b/scss/_zotero.scss
@@ -63,6 +63,7 @@
@import "components/tabsMenu";
@import "components/newCollectionDialog";
@import "components/reader";
+@import "components/banners";
// Elements
// --------------------------------------------------
diff --git a/scss/components/_banners.scss b/scss/components/_banners.scss
new file mode 100644
index 0000000000..58e238db4a
--- /dev/null
+++ b/scss/components/_banners.scss
@@ -0,0 +1,103 @@
+#post-upgrade-banner, #retracted-items-banner, #sync-reminder-banner {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ position: relative;
+ white-space: nowrap;
+ overflow: hidden;
+
+ label[is="text-link"], .link {
+ color: inherit;
+ border: none;
+ margin: 0;
+ }
+}
+
+#post-upgrade-container {
+ background: var(--material-background);
+}
+
+#post-upgrade-banner {
+ background: var(--accent-blue30);
+ color: var(--fill-primary);
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 8px 12px;
+
+ .link {
+ color: var(--accent-blue);
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ #post-upgrade-centered {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 8px;
+ flex: 1 auto;
+ }
+
+ #post-upgrade-new-features-link {
+ font-weight: bold;
+ }
+
+ #post-upgrade-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-inline-start: auto;
+ }
+}
+
+#retracted-items-banner, #sync-reminder-banner {
+ line-height: 2.2em;
+ font-size: 13.5px;
+ padding: 0 2em;
+ font-weight: 600;
+
+ .message {
+ margin-inline-end: .8em;
+ }
+
+ .spacer {
+ flex: 1;
+ }
+
+ .close-link {
+ text-decoration: none;
+ position: absolute;
+ cursor: pointer;
+ top: -2px;
+ inset-inline-end: 9px;
+ font-size: 22px;
+ }
+}
+
+#retracted-items-banner {
+ background: #d93425;
+ color: white;
+
+ label[is="text-link"] {
+ margin-inline-start: 0.3em;
+
+ &:active {
+ color: #f9e8e2;
+ }
+ }
+}
+
+#sync-reminder-banner {
+ background: rgb(255, 234, 80);
+ border-bottom: #a9a9a9 .5px solid;
+ color: black;
+
+ .link {
+ padding-inline: 0.5em;
+
+ &:active {
+ color: #4b4b4b;
+ }
+ }
+}