diff --git a/l10n b/l10n index b1bf9efa9..48e6a3672 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit b1bf9efa93fac72629659cfdaa67e789205a6a3d +Subproject commit 48e6a3672a11c6c9f4d7fa5a4f08c7c8157e9e07 diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index aede36ce4..2a99cac48 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -10,6 +10,7 @@ + diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 10a2a4487..5859c3513 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -44,6 +44,7 @@ content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css) content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css) content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css) + content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css) content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css) content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css) @@ -56,6 +57,7 @@ # Images content/browser/zen-images/gradient.png (content/zen-images/gradient.png) content/browser/zen-images/gradient-display.png (content/zen-images/gradient-display.png) + content/browser/zen-images/brand-header.svg (content/zen-images/brand-header.svg) content/browser/zen-images/layouts/collapsed.png (content/zen-images/layouts/collapsed.png) content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png) content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png) diff --git a/src/browser/base/content/zen-images/brand-header.svg b/src/browser/base/content/zen-images/brand-header.svg new file mode 100644 index 000000000..813e920d6 --- /dev/null +++ b/src/browser/base/content/zen-images/brand-header.svg @@ -0,0 +1 @@ + diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml index 8c230dacc..b54d0e5f2 100644 --- a/src/browser/base/content/zen-popupset.inc.xhtml +++ b/src/browser/base/content/zen-popupset.inc.xhtml @@ -104,7 +104,11 @@ - + + + + + diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index c1771a603..61aa29b73 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -349,3 +349,21 @@ transform: translateX(-100%) translateY(-50%); } } + +@keyframes zen-jello-animation-with-translate { + 0% { + transform: scale3d(0.8, 0.8, 0.8) translate(-50%, -50%); + transform-origin: 50% 50%; + } + + 60% { + transform: scale3d(1.02, 1.02, 1.02) translate(-50%, -50%); + transform-origin: 50% 50%; + } + + to { + opacity: 1; + transform: scale3d(1, 1, 1) translate(-50%, -50%); + transform-origin: 50% 50%; + } +} diff --git a/src/browser/base/content/zen-styles/zen-rices.css b/src/browser/base/content/zen-styles/zen-rices.css new file mode 100644 index 000000000..618201730 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-rices.css @@ -0,0 +1,108 @@ + +#zen-rice-share-btn { + position: absolute; + top: 5px; + right: 5px; + background: var(--zen-dialog-background); + z-index: 1; + cursor: pointer; +} + +#zen-rice-share-dialog { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--panel-color); + background: var(--arrowpanel-background); + border-radius: var(--zen-panel-radius); + box-shadow: 0 0 1px 1px hsla(0,0%,0%,.2);; + border: var(--zen-appcontent-border); + overflow: hidden; + + animation: zen-jello-animation-with-translate 0.3s ease; + max-width: 400px; + + & .zen-rice-share-content { + padding: 10px; + padding-top: 20px; + border-top: var(--zen-appcontent-border); + background: var(--arrowpanel-background); + + & input[type="text"] { + width: 100%; + padding: 1px 2px; + border: 0; + border-bottom: 1px solid var(--zen-appcontent-border); + background: transparent; + font-style: italic; + font-weight: 600; + } + + & #zen-rice-share-name { + font-style: normal; + font-size: 24px; + margin-left: 1px; + } + + & .indent { + margin-left: 30px; + } + } + + & .zen-rice-share-header { + height: 200px; + margin-bottom: -20px; + } + + & #zen-rice-share-options { + padding: 10px 0; + + max-height: 30px; + overflow: hidden; + transition: max-height 0.3s ease; + &[zen-collapsed="false"] { + max-height: 350px; + } + + & > .options-header { + font-weight: 600; + margin-bottom: 5px; + position: relative; + cursor: pointer; + align-items: center; + + color: inherit; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); + + & label { + width: fit-content; + cursor: pointer; + } + } + + & > .options-header image { + transition: transform 0.3s ease; + width: 15px; + height: 15px; + } + + &[zen-collapsed="false"] > .options-header image { + transform: rotate(90deg); + } + + & > checkbox { + margin-left: 15px; + } + } + + & .panel-footer { + margin: 0; + margin-top: 10px; + + & button { + justify-content: center; + } + } +} diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs index 2328d0326..49270fc87 100644 --- a/src/browser/base/zen-components/ZenGradientGenerator.mjs +++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs @@ -674,6 +674,18 @@ }); } + get riceManager() { + if (!this._riceManager) { + this._riceManager = new window.ZenRiceManager(); + } + return this._riceManager; + } + + shareTheme() { + const manager = this.riceManager; + manager.openShareDialog(); + } + getNativeAccentColor() { return Services.prefs.getStringPref('zen.theme.accent-color'); } diff --git a/src/browser/base/zen-components/ZenRices.mjs b/src/browser/base/zen-components/ZenRices.mjs index b0f57b2b9..f03b6bb78 100644 --- a/src/browser/base/zen-components/ZenRices.mjs +++ b/src/browser/base/zen-components/ZenRices.mjs @@ -113,5 +113,113 @@ } } - window.gZenRiceCollector = new ZenRiceCollector(); + class ZenRiceManager { + constructor() { + this._collector = new ZenRiceCollector(); + } + + async packRice() { + return this._collector.packRice(); + } + + get shareDialog() { + if (this._shareDialog) { + return this._shareDialog; + } + this._shareDialog = window.MozXULElement.parseXULToFragment(` +