improved translation page UX
Some checks failed
PHPUnit / test (push) Has been cancelled

This commit is contained in:
2026-06-12 20:33:52 +02:00
parent d807f753b1
commit cceec525c1
4 changed files with 488 additions and 76 deletions

View File

@ -9,7 +9,7 @@ import {
buildTranslationGroups,
sourceLanguageLabel,
translationListHeaderHTML,
renderGroupedTranslationsHTML,
renderCollapsibleGroupedTranslationsHTML,
escHtml,
} from '../translations-helpers.js';
import {
@ -1726,12 +1726,9 @@ function renderEditorTransList(qnEntries, editable) {
const pct = qnEntries.length ? Math.round(((qnEntries.length - missingCount) / qnEntries.length) * 100) : 0;
const qnGroups = buildTranslationGroups(qnEntries, editorTransLang, 0);
const qnName = transData.questionnaire?.name || questionnaire?.name || 'Questionnaire';
const bodyHtml = `
<div class="trans-qn-block" data-qn="${escHtml(questionnaire.questionnaireID)}">
<h2 class="trans-qn-title">${escHtml(qnName)}</h2>
${renderGroupedTranslationsHTML(qnGroups, editorTransLang, sourceLabel, editable, { showColumnHeader: false })}
</div>`;
const bodyHtml = renderCollapsibleGroupedTranslationsHTML(qnGroups, editorTransLang, sourceLabel, editable, {
openGroupsWithMissing: true,
});
return `
<div class="trans-toolbar">
@ -1743,8 +1740,12 @@ function renderEditorTransList(qnEntries, editable) {
<option value="answer_option">Answer options</option>
</select>
</div>
${translationListHeaderHTML(langLabel, sourceLabel)}
<div id="transGroupedRoot">${bodyHtml}</div>
<div class="trans-sheet">
${translationListHeaderHTML(langLabel, sourceLabel)}
<div id="transGroupedRoot" class="trans-sheet-body">
<div class="trans-scope-block">${bodyHtml}</div>
</div>
</div>
<div class="trans-stats">
<span id="transStats">${missingCount ? `${missingCount} missing · ` : ''}${qnEntries.length} keys</span>
<span class="trans-stats-progress">
@ -1826,11 +1827,11 @@ function bindEditorTransFiltering(entries) {
if (row.dataset.missing === '1') visibleMissing++;
}
});
root.querySelectorAll('.trans-group').forEach(group => {
root.querySelectorAll('.trans-group-details').forEach(group => {
const anyVisible = [...group.querySelectorAll('.trans-list-item')].some(r => !r.classList.contains('trans-row-hidden'));
group.classList.toggle('trans-group-hidden', !anyVisible);
});
root.querySelectorAll('.trans-qn-block').forEach(block => {
root.querySelectorAll('.trans-scope-block').forEach(block => {
const anyVisible = [...block.querySelectorAll('.trans-list-item')].some(r => !r.classList.contains('trans-row-hidden'));
block.classList.toggle('trans-qn-hidden', !anyVisible);
});