Commit 9717fe4c authored by 11ND11's avatar 11ND11 Committed by waldhacker
Browse files

[TASK] Streamline checkboxes of form editor

Change browser default checkboxes to TYPO3
toggle buttons or TYPO3 checkboxes in the form editor.

Resolves: #95086
Releases: main
Change-Id: I94fe1c3930a640fdf180f239d2c9a60b38b2f3ba
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/73720

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Björn Jacob's avatarBjörn Jacob <bjoern.jacob@tritum.de>
Tested-by: waldhacker's avatarwaldhacker <hello@waldhacker.dev>
Reviewed-by: Björn Jacob's avatarBjörn Jacob <bjoern.jacob@tritum.de>
Reviewed-by: waldhacker's avatarwaldhacker <hello@waldhacker.dev>
parent 9910291a
......@@ -93,6 +93,11 @@ $tree-line-height: 20px;
}
}
.form-check.form-switch {
margin-bottom: 0;
padding-bottom: 0.5rem;
}
.form-group-select {
padding-bottom: 0.5rem;
......@@ -552,6 +557,10 @@ $tree-line-height: 20px;
border-right: 1px solid $module-docheader-border !important;
outline-offset: -5px !important;
}
.form-check {
padding-left: 3.2em;
}
}
//
......
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="form-editor">
<div class="t3-form-control-group form-group">
<label data-random-id data-random-id-attribute="for" data-random-id-number="1">
<label class="t3js-formengine-label data-random-id data-random-id-attribute="for" data-random-id-number="1">
<span data-template-property="label"></span>
</label>
<div class="formengine-field-item">
<span data-template-property="fieldExplanationText" class="formengine-field-item-description text-muted"></span>
<div class="form-control-wrap">
<div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
<input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="checkbox" />
</div>
</div>
<div class="form-check form-switch" data-identifier="inspectorEditorControlsWrapper">
<input class="form-check-input" data-random-id data-random-id-attribute="id" data-random-id-number="1" type="checkbox" />
<label class="form-check-label" data-random-id data-random-id-attribute="for" data-random-id-number="1">
<span class="form-check-label-text"></span>
</label>
</div>
</div>
</div>
......
......@@ -20,7 +20,11 @@
<td><span class="sort-row-field" data-identifier="sortRow"><core:icon identifier="actions-move-move" /></span></td>
<td data-identifier="column" data-column="label"><input type="text" class="form-control" value="" data-identifier="label" /></td>
<td data-identifier="column" data-column="value"><input type="text" class="form-control" value="" data-identifier="value" /></td>
<td data-identifier="column" data-column="selected"><input type="checkbox" data-identifier="selectValue" /></td>
<td data-identifier="column" data-column="selected">
<span class="form-check form-toggle">
<input class="form-check-input t3js-multi-record-selection-check" data-identifier="selectValue" type="checkbox" />
</span>
</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.inspector.editor.grid.remove')}" data-identifier="deleteRow">
......
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="form-editor">
<div class="t3-form-control-group form-group" data-identifier="editorWrapper">
<label data-random-id data-random-id-attribute="for" data-random-id-number="1">
<label class="t3js-formengine-label" data-random-id data-random-id-attribute="for" data-random-id-number="1">
<span data-template-property="label"></span>
</label>
<div class="formengine-field-item">
<div class="form-control-wrap">
<div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
<input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="checkbox" />
</div>
</div>
<div class="form-check form-switch" data-identifier="inspectorEditorControlsWrapper">
<input class="form-check-input" data-random-id data-random-id-attribute="id" data-random-id-number="1" type="checkbox" />
<label class="form-check-label" data-random-id data-random-id-attribute="for" data-random-id-number="1">
<span class="form-check-label-text"></span>
</label>
</div>
</div>
<div class="t3-form-control-group form-group" data-template-property="validationErrorMessage">
......
......@@ -775,7 +775,7 @@
<source>Description</source>
</trans-unit>
<trans-unit id="formEditor.elements.FormElement.editor.requiredValidator.label" resname="formEditor.elements.FormElement.editor.requiredValidator.label" xml:space="preserve">
<source>Required field</source>
<source>Field required</source>
</trans-unit>
<trans-unit id="formEditor.elements.FormElement.editor.requiredValidator.validationErrorMessage.label" resname="formEditor.elements.FormElement.editor.requiredValidator.validationErrorMessage.label" xml:space="preserve">
<source>Custom error message</source>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment