mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-20 00:31:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust max-height in animations and refactor share dialog validation logic in Zen Rices component

Browse Source
This commit is contained in:
mr. M
2024-12-27 16:41:22 +01:00
parent e9f03a5455
commit 255f8f8fbd
2 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -367,7 +367,7 @@
99% { 99% {
transform: translateX(-100%); transform: translateX(-100%);
opacity: 0; opacity: 0;
max-height: 50px; max-height: 15px;
position: relative; position: relative;
} }

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

@@ -141,10 +141,10 @@
<html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" /> <html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
<hbox class="zen-rice-share-content"> <hbox class="zen-rice-share-content">
<vbox id="zen-rice-share-first-form"> <vbox id="zen-rice-share-first-form">
<html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog(this)" /> <html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog()" />
<hbox class="zen-rice-share-author"> <hbox class="zen-rice-share-author">
<label data-l10n-id="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" /> <html:input type="text" data-l10n-id="zen-rice-share-author-input" id="zen-rice-share-author" oninput="gZenThemePicker.riceManager.validateShareDialog();" />
</hbox> </hbox>
<vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)"> <vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)">
<hbox class="options-header"> <hbox class="options-header">
@@ -194,7 +194,7 @@
const options = document.getElementById("zen-rice-share-options"); const options = document.getElementById("zen-rice-share-options");
options.setAttribute("zen-collapsed", options.getAttribute("zen-collapsed") === "true" ? "false" : "true"); options.setAttribute("zen-collapsed", options.getAttribute("zen-collapsed") === "true" ? "false" : "true");
} }
this.validateShareDialog(document.getElementById("zen-rice-share-name")); this.validateShareDialog();
} }
openShareDialog() { openShareDialog() {
@@ -206,8 +206,10 @@
const dialog = this.shareDialog; const dialog = this.shareDialog;
dialog.removeAttribute("hidden"); dialog.removeAttribute("hidden");
document.getElementById("zen-rice-share-name").focus();
// Initialize the dialog with the current values // Initialize the dialog with the current values
this.validateShareDialog(document.getElementById("zen-rice-share-name")); this.validateShareDialog();
} }
resetShareDialog() { resetShareDialog() {
@@ -255,9 +257,12 @@
return Object.values(allowedRice).some(v => v); return Object.values(allowedRice).some(v => v);
} }
validateShareDialog(input) { validateShareDialog() {
const saveButton = document.getElementById("zen-rice-share-save"); const saveButton = document.getElementById("zen-rice-share-save");
saveButton.disabled = !this.canShareRice() || input.value.trim().length < 3 || input.value.trim().length > 30; const authorInput = document.getElementById("zen-rice-share-author");
const input = document.getElementById("zen-rice-share-name");
saveButton.disabled = !this.canShareRice() || input.value.trim().length < 3 || input.value.trim().length > 30
|| authorInput.value.trim().length < 3 || authorInput.value.trim().length > 15;
} }
async submit() { async submit() {
@@ -310,7 +315,6 @@
console.error(json); console.error(json);
return null; return null;
} }
return json; return json;
} }
@@ -321,13 +325,14 @@
} }
showSuccessDialog(riceInfo) { showSuccessDialog(riceInfo) {
const { id } = riceInfo; const { slug, token } = riceInfo;
// 'token' is like some sort of password to edit the rice, do NOT expose it
setTimeout(() => { setTimeout(() => {
const successBox = document.getElementById("zen-rice-share-success"); const successBox = document.getElementById("zen-rice-share-success");
document.getElementById("zen-rice-share-second-form").setAttribute("fade-out", "true"); document.getElementById("zen-rice-share-second-form").setAttribute("fade-out", "true");
successBox.removeAttribute("hidden"); successBox.removeAttribute("hidden");
const link = document.getElementById("zen-rice-share-success-link"); const link = document.getElementById("zen-rice-share-success-link");
link.value = `${ZEN_RICE_API}${id}`; link.value = `${ZEN_RICE_API}/${slug}`;
}, 2000); }, 2000);
} }
} }