Dymas/abogen
1
0
Fork 0
mirror of https://github.com/denizsafak/abogen.git synced 2026-07-18 13:40:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance dashboard and styles for improved layout and accessibility

Browse Source
This commit is contained in:
JB
2025-10-06 11:42:15 -07:00
parent 54bc632b2e
commit 323ab08f38
2 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
abogen/web/static/dashboard.js
+24 -19
View File
@@ -35,14 +35,28 @@ const initDashboard = () => {
return true; return true;
}; };
const applySavedProfile = (option) => {
if (!option) return;
const presetFormula = option.dataset.formula || "";
const profileLang = option.dataset.language || "";
if (formulaInput) {
formulaInput.value = presetFormula;
formulaInput.readOnly = true;
formulaInput.dataset.state = "locked";
}
if (profileLang && languageSelect) {
languageSelect.value = profileLang;
}
};
const updateVoiceControls = () => { const updateVoiceControls = () => {
if (!profileSelect) { if (!profileSelect) {
return; return;
} }
const value = profileSelect.value; const value = profileSelect.value || "__standard";
const isStandard = !value || value === "__standard"; const isStandard = value === "__standard";
const isFormula = value === "__formula"; const isFormula = value === "__formula";
const isSavedProfile = Boolean(value && !isStandard && !isFormula); const isSavedProfile = !isStandard && !isFormula;
if (voiceField) { if (voiceField) {
const showVoice = isStandard; const showVoice = isStandard;
@@ -57,33 +71,24 @@ const initDashboard = () => {
} }
} }
let presetFormula = "";
if (isSavedProfile) { if (isSavedProfile) {
const option = profileSelect.selectedOptions[0]; applySavedProfile(profileSelect.selectedOptions[0] || null);
if (option) { } else if (!isFormula && formulaInput) {
presetFormula = option.dataset.formula || ""; formulaInput.value = "";
const profileLang = option.dataset.language || "";
if (profileLang && languageSelect) {
languageSelect.value = profileLang;
}
}
} }
const showFormula = isFormula;
if (formulaField) { if (formulaField) {
const showFormula = isFormula;
formulaField.hidden = !showFormula; formulaField.hidden = !showFormula;
formulaField.setAttribute("aria-hidden", showFormula ? "false" : "true"); formulaField.setAttribute("aria-hidden", showFormula ? "false" : "true");
} }
if (formulaInput) { if (formulaInput) {
formulaInput.disabled = !showFormula; if (isFormula) {
if (showFormula) { formulaInput.disabled = false;
if (presetFormula && !formulaInput.value) {
formulaInput.value = presetFormula;
}
formulaInput.readOnly = false; formulaInput.readOnly = false;
formulaInput.dataset.state = "editable"; formulaInput.dataset.state = "editable";
} else { } else {
formulaInput.value = formulaInput.value.trim(); formulaInput.disabled = !isSavedProfile;
formulaInput.readOnly = true; formulaInput.readOnly = true;
formulaInput.dataset.state = isSavedProfile ? "locked" : "editable"; formulaInput.dataset.state = isSavedProfile ? "locked" : "editable";
} }
abogen/web/static/styles.css
+6 -1
View File
@@ -1035,12 +1035,15 @@ progress.progress::-moz-progress-bar {
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.35); background: rgba(15, 23, 42, 0.35);
max-width: 460px;
} }
.field--slider { .field--slider {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.65rem; gap: 0.65rem;
align-items: flex-start;
width: min(100%, 420px);
} }
.field--slider label { .field--slider label {
@@ -1086,10 +1089,12 @@ progress.progress::-moz-progress-bar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
justify-content: flex-start;
width: min(100%, 420px);
} }
.voice-preview audio { .voice-preview audio {
width: 100%; width: min(100%, 420px);
border-radius: 12px; border-radius: 12px;
background: rgba(15, 23, 42, 0.45); background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);