Fix spacing of TableBlock fields

pull/10318/head
Thibaud Colas 2023-04-14 23:40:34 +01:00
rodzic aa7ce61cef
commit a13af28aac
2 zmienionych plików z 18 dodań i 18 usunięć

Wyświetl plik

@ -2,35 +2,35 @@
exports[`telepath: wagtail.widgets.TableInput it renders correctly 1`] = `
"<div>
<div classname=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<label class=\\"w-field__label\\" for=\\"the-id-handsontable-header\\">Row header</label>
<div class=\\"w-field w-field--boolean_field w-field--checkbox_input\\" data-field=\\"\\">
<div class=\\"w-field__help\\" id=\\"the-id-handsontable-header-helptext\\" data-field-help=\\"\\">
<div class=\\"help\\">Display the first row as a header.</div>
</div>
<div classname=\\"w-field__input\\" data-field-input=\\"\\">
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-header\\" name=\\"handsontable-header\\" aria-describedby=\\"the-id-handsontable-header-helptext\\">
</div>
</div>
</div>
<div classname=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<label class=\\"w-field__label\\" for=\\"the-id-handsontable-col-header\\">Column header</label>
<div class=\\"w-field w-field--boolean_field w-field--checkbox_input\\" data-field=\\"\\">
<div class=\\"w-field__help\\" id=\\"the-id-handsontable-col-header-helptext\\" data-field-help=\\"\\">
<div class=\\"help\\">Display the first column as a header.</div>
</div>
<div classname=\\"w-field__input\\" data-field-input=\\"\\">
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-col-header\\" name=\\"handsontable-col-header\\" aria-describedby=\\"the-id-handsontable-col-header-helptext\\">
</div>
</div>
</div>
<div classname=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<label class=\\"w-field__label\\" for=\\"the-id-handsontable-col-caption\\">Table caption</label>
<div class=\\"w-field w-field--char_field w-field--text_input\\" data-field=\\"\\">
<div class=\\"w-field__help\\" id=\\"the-id-handsontable-col-caption-helptext\\" data-field-help=\\"\\">
<div class=\\"help\\">A heading that identifies the overall topic of the table, and is useful for screen reader users</div>
</div>
<div classname=\\"w-field__input\\" data-field-input=\\"\\">
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<input type=\\"text\\" id=\\"the-id-handsontable-col-caption\\" name=\\"handsontable-col-caption\\" aria-describedby=\\"the-id-handsontable-col-caption-helptext\\">
</div>
</div>
@ -42,35 +42,35 @@ exports[`telepath: wagtail.widgets.TableInput it renders correctly 1`] = `
exports[`telepath: wagtail.widgets.TableInput translation 1`] = `
"<div>
<div classname=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<label class=\\"w-field__label\\" for=\\"the-id-handsontable-header\\">En-tête de ligne</label>
<div class=\\"w-field w-field--boolean_field w-field--checkbox_input\\" data-field=\\"\\">
<div class=\\"w-field__help\\" id=\\"the-id-handsontable-header-helptext\\" data-field-help=\\"\\">
<div class=\\"help\\">Affichez la première ligne sous forme d'en-tête.</div>
</div>
<div classname=\\"w-field__input\\" data-field-input=\\"\\">
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-header\\" name=\\"handsontable-header\\" aria-describedby=\\"the-id-handsontable-header-helptext\\">
</div>
</div>
</div>
<div classname=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<label class=\\"w-field__label\\" for=\\"the-id-handsontable-col-header\\">En-tête de colonne</label>
<div class=\\"w-field w-field--boolean_field w-field--checkbox_input\\" data-field=\\"\\">
<div class=\\"w-field__help\\" id=\\"the-id-handsontable-col-header-helptext\\" data-field-help=\\"\\">
<div class=\\"help\\">Affichez la première colonne sous forme d'en-tête.</div>
</div>
<div classname=\\"w-field__input\\" data-field-input=\\"\\">
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-col-header\\" name=\\"handsontable-col-header\\" aria-describedby=\\"the-id-handsontable-col-header-helptext\\">
</div>
</div>
</div>
<div classname=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<label class=\\"w-field__label\\" for=\\"the-id-handsontable-col-caption\\">Légende du tableau</label>
<div class=\\"w-field w-field--char_field w-field--text_input\\" data-field=\\"\\">
<div class=\\"w-field__help\\" id=\\"the-id-handsontable-col-caption-helptext\\" data-field-help=\\"\\">
<div class=\\"help\\">Un en-tête qui identifie le sujet général du tableau et qui est utile pour les utilisateurs de lecteurs d'écran</div>
</div>
<div classname=\\"w-field__input\\" data-field-input=\\"\\">
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<input type=\\"text\\" id=\\"the-id-handsontable-col-caption\\" name=\\"handsontable-col-caption\\" aria-describedby=\\"the-id-handsontable-col-caption-helptext\\">
</div>
</div>

Wyświetl plik

@ -188,35 +188,35 @@ class TableInput {
render(placeholder, name, id, initialState) {
const container = document.createElement('div');
container.innerHTML = `
<div className="w-field__wrapper" data-field-wrapper>
<div class="w-field__wrapper" data-field-wrapper>
<label class="w-field__label" for="${id}-handsontable-header">${this.strings['Row header']}</label>
<div class="w-field w-field--boolean_field w-field--checkbox_input" data-field>
<div class="w-field__help" id="${id}-handsontable-header-helptext" data-field-help>
<div class="help">${this.strings['Display the first row as a header.']}</div>
</div>
<div className="w-field__input" data-field-input>
<div class="w-field__input" data-field-input>
<input type="checkbox" id="${id}-handsontable-header" name="handsontable-header" aria-describedby="${id}-handsontable-header-helptext" />
</div>
</div>
</div>
<div className="w-field__wrapper" data-field-wrapper>
<div class="w-field__wrapper" data-field-wrapper>
<label class="w-field__label" for="${id}-handsontable-col-header">${this.strings['Column header']}</label>
<div class="w-field w-field--boolean_field w-field--checkbox_input" data-field>
<div class="w-field__help" id="${id}-handsontable-col-header-helptext" data-field-help>
<div class="help">${this.strings['Display the first column as a header.']}</div>
</div>
<div className="w-field__input" data-field-input>
<div class="w-field__input" data-field-input>
<input type="checkbox" id="${id}-handsontable-col-header" name="handsontable-col-header" aria-describedby="${id}-handsontable-col-header-helptext" />
</div>
</div>
</div>
<div className="w-field__wrapper" data-field-wrapper>
<div class="w-field__wrapper" data-field-wrapper>
<label class="w-field__label" for="${id}-handsontable-col-caption">${this.strings['Table caption']}</label>
<div class="w-field w-field--char_field w-field--text_input" data-field>
<div class="w-field__help" id="${id}-handsontable-col-caption-helptext" data-field-help>
<div class="help">${this.strings['A heading that identifies the overall topic of the table, and is useful for screen reader users']}</div>
</div>
<div className="w-field__input" data-field-input>
<div class="w-field__input" data-field-input>
<input type="text" id="${id}-handsontable-col-caption" name="handsontable-col-caption" aria-describedby="${id}-handsontable-col-caption-helptext" />
</div>
</div>