Commit 651bdca2 authored by Tobias Siegler's avatar Tobias Siegler Committed by waldhacker
Browse files

[TASK] Improvement of the delete button in the form inspector

Adds a label to the delete button and improves the styling.

Exceptions are the delete buttons in the validators and in the
form finishers. As part of an upcoming patch the finishers will
be expanded and the styling of the delete buttons will be adapted
to the layout.

Resolves: #97487
Releases: main
Change-Id: I3d068cc883c7b74c3ceed1ab7a1d205ea795c53a
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/74472

Tested-by: Björn Jacob's avatarBjörn Jacob <bjoern.jacob@tritum.de>
Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: default avatarAndreas Steiger <typo3@andreassteiger.de>
Tested-by: waldhacker's avatarwaldhacker <hello@waldhacker.dev>
Reviewed-by: Björn Jacob's avatarBjörn Jacob <bjoern.jacob@tritum.de>
Reviewed-by: default avatarAndreas Steiger <typo3@andreassteiger.de>
Reviewed-by: waldhacker's avatarwaldhacker <hello@waldhacker.dev>
parent c36447f2
......@@ -91,6 +91,10 @@ $tree-line-height: 20px;
.table {
margin: 0;
}
.help-block {
margin-bottom: 0;
}
}
.form-check.form-switch {
......@@ -381,10 +385,29 @@ $tree-line-height: 20px;
line-height: 13px;
}
.t3-form-remove-element-button {
position: absolute;
top: 25px;
right: 2.5em;
> .t3-form-remove-element-button {
padding-top: 1rem;
border-top: 1px solid $module-docheader-border;
.btn {
width: 100%;
}
}
&-validators.sortable + .t3-form-remove-element-button {
margin-top: 0.25rem;
}
.t3-form-inspector-finishers-editor-removeButton,
.t3-form-inspector-validators-editor-removeButton {
.btn {
padding: 0.25rem 0.5rem;
font-size: 0.65625rem;
}
.t3-form-remove-element-button-label {
display: none;
}
}
.t3-form-control-group,
......@@ -538,6 +561,7 @@ $tree-line-height: 20px;
.btn {
background-color: $btn-default-bg;
border-color: $btn-default-border;
font-size: 0.9em;
}
}
......
......@@ -26,7 +26,7 @@
</span>
</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<div class="btn-group" 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">
<core:icon identifier="actions-delete" />
</button>
......@@ -35,7 +35,7 @@
</tr>
<tr data-identifier="addRowItem">
<td>
<div class="btn-group btn-group-sm" role="group">
<div class="btn-group" role="group">
<button data-random-id data-random-id-attribute="id" data-random-id-number="1" class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.inspector.editor.grid.add')}" data-identifier="addRow">
<core:icon identifier="actions-add" />
</button>
......
<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="t3-form-control-group form-group btn-group-sm">
<div class="t3-form-control-group t3-form-remove-element-button form-group">
<button class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.inspector.editor.formelement.remove')}">
<core:icon identifier="actions-delete" alternativeMarkupIdentifier="inline" />
<core:icon identifier="actions-delete" alternativeMarkupIdentifier="inline" /> <span class="t3-form-remove-element-button-label">{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.inspector.editor.formelement.remove')}</span>
</button>
</div>
</html>
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