mirror of
https://github.com/denizsafak/abogen.git
synced 2026-07-18 13:40:27 +02:00
feat: Update voice field visibility and enhance CSS for improved layout and accessibility
This commit is contained in:
@@ -58,10 +58,11 @@ const initDashboard = () => {
|
|||||||
const isFormula = value === "__formula";
|
const isFormula = value === "__formula";
|
||||||
const isSavedProfile = !isStandard && !isFormula;
|
const isSavedProfile = !isStandard && !isFormula;
|
||||||
|
|
||||||
|
const showVoiceField = isStandard;
|
||||||
if (voiceField) {
|
if (voiceField) {
|
||||||
const showVoice = isStandard;
|
voiceField.hidden = !showVoiceField;
|
||||||
voiceField.hidden = !showVoice;
|
voiceField.setAttribute("aria-hidden", showVoiceField ? "false" : "true");
|
||||||
voiceField.setAttribute("aria-hidden", showVoice ? "false" : "true");
|
voiceField.dataset.state = showVoiceField ? "visible" : "hidden";
|
||||||
}
|
}
|
||||||
if (voiceSelect) {
|
if (voiceSelect) {
|
||||||
voiceSelect.disabled = !isStandard;
|
voiceSelect.disabled = !isStandard;
|
||||||
@@ -77,20 +78,27 @@ const initDashboard = () => {
|
|||||||
formulaInput.value = "";
|
formulaInput.value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const showFormulaField = isFormula;
|
||||||
if (formulaField) {
|
if (formulaField) {
|
||||||
const showFormula = isFormula;
|
const shouldShow = showFormulaField;
|
||||||
formulaField.hidden = !showFormula;
|
formulaField.hidden = !shouldShow;
|
||||||
formulaField.setAttribute("aria-hidden", showFormula ? "false" : "true");
|
formulaField.setAttribute("aria-hidden", shouldShow ? "false" : "true");
|
||||||
|
formulaField.dataset.state = shouldShow ? "visible" : "hidden";
|
||||||
}
|
}
|
||||||
if (formulaInput) {
|
if (formulaInput) {
|
||||||
if (isFormula) {
|
if (isFormula) {
|
||||||
formulaInput.disabled = false;
|
formulaInput.disabled = false;
|
||||||
formulaInput.readOnly = false;
|
formulaInput.readOnly = false;
|
||||||
formulaInput.dataset.state = "editable";
|
formulaInput.dataset.state = "editable";
|
||||||
} else {
|
} else if (isSavedProfile) {
|
||||||
formulaInput.disabled = !isSavedProfile;
|
formulaInput.disabled = false;
|
||||||
formulaInput.readOnly = true;
|
formulaInput.readOnly = true;
|
||||||
formulaInput.dataset.state = isSavedProfile ? "locked" : "editable";
|
formulaInput.dataset.state = "locked";
|
||||||
|
} else {
|
||||||
|
formulaInput.disabled = true;
|
||||||
|
formulaInput.readOnly = true;
|
||||||
|
formulaInput.value = "";
|
||||||
|
formulaInput.dataset.state = "editable";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -183,6 +183,11 @@ body {
|
|||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.field[hidden],
|
||||||
|
.field[data-state="hidden"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.field--full {
|
.field--full {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
@@ -224,6 +229,14 @@ body {
|
|||||||
width: min(100%, 420px);
|
width: min(100%, 420px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.field input[type="range"] {
|
||||||
|
max-width: 420px;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
padding: 0;
|
||||||
|
margin-inline: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
.field input[type="number"] {
|
.field input[type="number"] {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user