mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-05 07:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Zen rices looking sharp!

Browse Source
This commit is contained in:
mr. M
2024-12-26 18:29:33 +01:00
parent 42175496be
commit 48fdde5640
10 changed files with 265 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: b1bf9efa93...48e6a3672a

1
src/browser/base/content/zen-assets.inc.xhtml
View File

@@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-gradient-generator.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-rices.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-panel-ui.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-single-components.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-container.css" />

2
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -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)

1
src/browser/base/content/zen-images/brand-header.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_23_113)"><rect width="1920" height="1080" fill="url(#paint0_linear_23_113)"/><circle cx="960" cy="1080" r="740" stroke="#F2F0E3" stroke-width="120"/><circle cx="960" cy="1080" r="558.095" stroke="#F2F0E3" stroke-width="80"/><circle cx="960" cy="1080" r="386.19" stroke="#F2F0E3" stroke-width="60"/><circle cx="960" cy="1080" r="214.286" stroke="#F2F0E3" stroke-width="40"/></g><defs><linearGradient id="paint0_linear_23_113" x1="960" y1="0" x2="960" y2="1080" gradientUnits="userSpaceOnUse"><stop stop-color="#EA6E54"/><stop offset="1" stop-color="#D9664E"/></linearGradient><clipPath id="clip0_23_113"><rect width="1920" height="1080" fill="white"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 803 B

6
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -104,7 +104,11 @@
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();">
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
<hbox class="zen-theme-picker-gradient"></hbox>
<hbox class="zen-theme-picker-gradient">
<box id="zen-rice-share-btn" class="subviewbutton" onclick="gZenThemePicker.shareTheme();">
<image></image>
</box>
</hbox>
<hbox id="PanelUI-zen-gradient-generator-controls">
<vbox id="PanelUI-zen-gradient-generator-options">
<hbox id="PanelUI-zen-gradient-degrees">

18
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -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%;
}
}

108
src/browser/base/content/zen-styles/zen-rices.css Normal file
View File

@@ -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;
}
}
}

12
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -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');
}

110
src/browser/base/zen-components/ZenRices.mjs
View File

@@ -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(`
<vbox id="zen-rice-share-dialog" hidden="true">
<html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
<vbox class="zen-rice-share-content">
<html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog(this)" />
<hbox class="zen-rice-share-author">
<label data-l10n-id="zen-rice-share-author" />
<html:input type="text" data-l10n-id="zen-rice-share-author-input" id="zen-rice-share-author" />
</hbox>
<vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)">
<hbox class="options-header">
<label data-l10n-id="zen-rice-share-include" />
<image></image>
</hbox>
<checkbox data-l10n-id="zen-rice-share-include-userchrome" id="zen-rice-share-include-userchrome" />
<checkbox data-l10n-id="zen-rice-share-include-usercontent" id="zen-rice-share-include-usercontent" />
<checkbox data-l10n-id="zen-rice-share-include-mods" id="zen-rice-share-include-mods" />
<vbox class="indent">
<checkbox data-l10n-id="zen-rice-share-include-mod-prefs" id="zen-rice-share-include-mod-prefs" />
</vbox>
<checkbox data-l10n-id="zen-rice-share-include-preferences" id="zen-rice-share-include-preferences" />
<checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
</vbox>
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
<button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
</html:moz-button-group>
</vbox>
</vbox>
`);
document.getElementById("zen-main-app-wrapper").appendChild(this._shareDialog);
this._shareDialog = document.getElementById("zen-rice-share-dialog");
return this._shareDialog;
}
toggleOptions(event) {
if (event.originalTarget.closest(".options-header")) {
const options = document.getElementById("zen-rice-share-options");
options.setAttribute("zen-collapsed", options.getAttribute("zen-collapsed") === "true" ? "false" : "true");
}
this.validateShareDialog(document.getElementById("zen-rice-share-name"));
}
openShareDialog() {
window.docShell.treeOwner
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIAppWindow)
.rollupAllPopups();
const dialog = this.shareDialog;
dialog.removeAttribute("hidden");
// Initialize the dialog with the current values
this.validateShareDialog(document.getElementById("zen-rice-share-name"));
}
cancel() {
this.shareDialog.setAttribute("hidden", "true");
document.getElementById("zen-rice-share-name").value = "";
document.getElementById("zen-rice-share-author").value = "";
document.getElementById("zen-rice-share-save").disabled = true;
}
getAllowedRice() {
return {
userChrome: document.getElementById("zen-rice-share-include-userchrome").checked,
userContent: document.getElementById("zen-rice-share-include-usercontent").checked,
mods: document.getElementById("zen-rice-share-include-mods").checked,
modPrefs: document.getElementById("zen-rice-share-include-mod-prefs").checked,
preferences: document.getElementById("zen-rice-share-include-preferences").checked,
workspaceThemes: document.getElementById("zen-rice-share-include-workspace-themes").checked,
};
}
canShareRice() {
const allowedRice = this.getAllowedRice();
const modsPrefs = document.getElementById("zen-rice-share-include-mod-prefs");
// remove "share mod prefs" if mods are not included
if (!allowedRice.mods) {
allowedRice.modPrefs = false;
modsPrefs.disabled = true;
}
modsPrefs.disabled = !allowedRice.mods;
return Object.values(allowedRice).some(v => v);
}
validateShareDialog(input) {
const saveButton = document.getElementById("zen-rice-share-save");
saveButton.disabled = !this.canShareRice() || input.value.trim().length < 3 || input.value.trim().length > 30;
}
async submit() {
}
}
window.ZenRiceManager = ZenRiceManager;
}

8
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -96,6 +96,10 @@
list-style-image: url('chevron.svg') !important;
}
#zen-rice-share-options .options-header {
list-style-image: url('arrow-right.svg');
}
#PanelUI-menu-button > * {
padding: var(--zen-toolbar-button-inner-padding);
}
@@ -500,6 +504,10 @@
list-style-image: url('screen-blocked.svg') !important;
}
#zen-rice-share-btn {
list-style-image: url('share.svg');
}
.popup-notification-icon[popupid='persistent-storage'],
.persistent-storage-icon,
.indexedDB-icon {