[BUGFIX] Fix styling for various Backend items

Due to the Bootstrap Update, some custom functionality by TYPO3 is not needed anymore and can be simplified: * No need for caret in SplitButton anymore (Clipboard, History) * Simplified horizontal filter menu (TSOB, Indexed Search Menu) * Better grid in EXT:forms module * Adjustments to autocomplete / FormEngine suggest field Resolves: #93137 Releases: master Change-Id: Ib7ff72832ea7223d2ba6ae31704c7f33f0e12bc1 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67222 Tested-by: Benjamin Franzke <bfr@qbus.de> Tested-by: Oliver Bartsch <bo@cedev.de> Tested-by: TYPO3com <noreply@typo3.com> Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Benjamin Franzke <bfr@qbus.de> Reviewed-by: Oliver Bartsch <bo@cedev.de> Reviewed-by: Benni Mack <benni@typo3.org>
TYPO3 · Dec 21, 2020 · 5f3463c · 5f3463c
1 parent 5b95312
commit 5f3463c
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 45 deletions.
diff --git a/Build/Sources/Sass/component/_autocomplete.scss b/Build/Sources/Sass/component/_autocomplete.scss
@@ -24,6 +24,7 @@ $autocomplete-suggestion-link-hover-bg: #fafafa;
     position: absolute;
     margin: 5px 0;
     top: 100%;
+    margin-left: 3.5em;
     left: 0;
     border: 1px solid $autocomplete-border;
     border-radius: $autocomplete-border-radius;

diff --git a/typo3/sysext/backend/Resources/Private/Partials/Clipboard/CopymodeSelector.html b/typo3/sysext/backend/Resources/Private/Partials/Clipboard/CopymodeSelector.html
@@ -8,10 +8,9 @@
                 {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:moveElements')}
             </f:else>
         </f:if>
-        <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" aria-labelledby="copymodeSelector">
-        <li><a href="{actionCopyModeUrl}">{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:moveElements')}</a></li>
-        <li><a href="{actionCopyModeUrl1}">{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:copyElements')}</a></li>
+        <li><a class="dropdown-item" href="{actionCopyModeUrl}">{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:moveElements')}</a></li>
+        <li><a class="dropdown-item" href="{actionCopyModeUrl1}">{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_misc.xlf:copyElements')}</a></li>
     </ul>
 </div>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/Clipboard/MenuSelector.html b/typo3/sysext/backend/Resources/Private/Partials/Clipboard/MenuSelector.html
@@ -2,12 +2,11 @@
     <button class="btn btn-default dropdown-toggle" type="button" id="menuSelector" data-bs-toggle="dropdown"
                     aria-haspopup="true" aria-expanded="true">
         {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:rm.menu')}
-        <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" aria-labelledby="menuSelector">
         <f:for each="{optionArray}" as="option" key="key">
             <li>
-                <f:link.external uri="{option.uri}" data="{option.data}" additionalAttributes="{option.additionalAttributes}" defaultScheme="">{option.label}</f:link.external>
+                <f:link.external uri="{option.uri}" data="{option.data}" additionalAttributes="{option.additionalAttributes}" class="dropdown-item" defaultScheme="">{option.label}</f:link.external>
             </li>
         </f:for>
     </ul>

diff --git a/typo3/sysext/backend/Resources/Private/Partials/RecordHistory/Settings.html b/typo3/sysext/backend/Resources/Private/Partials/RecordHistory/Settings.html
@@ -50,11 +50,10 @@ <h3>{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_show
                                                     </f:then>
                                                 </f:if>
                                             </f:for>
-                                            <span class="caret"></span>
                                         </button>
                                         <ul class="dropdown-menu" aria-labelledby="copymodeSelector">
                                             <f:for each="{values}" as="singleValue" key="singleKey">
-                                                <li><a href="{singleValue.scriptUrl}">
+                                                <li><a href="{singleValue.scriptUrl}" class="dropdown-item">
                                                     <f:if condition="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_show_rechis.xlf:{singleValue.value}')}">
                                                         <f:then>{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_show_rechis.xlf:{singleValue.value}')}</f:then>
                                                         <f:else>{singleValue.value}</f:else>

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
diff --git a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Modals/InsertElements.html b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Modals/InsertElements.html
@@ -3,20 +3,17 @@
     <div class="t3-form-x-component-inner-wrapper">
         <f:for each="{insertRenderablesPanelConfiguration}" as="insertRenderablePanelConfiguration">
             <f:if condition="{insertRenderablePanelConfiguration.key} != 'page'">
-                <div class="row media">
+                <div class="row">
                     <div class="col-sm-12">
                         <h4 class="t3-form-group-{insertRenderablePanelConfiguration.key}">
                             <span>{insertRenderablePanelConfiguration.label}</span>
                         </h4>
                     </div>
                     <f:for each="{insertRenderablePanelConfiguration.elements}" as="element">
-                        <div class="col-sm-4 form-group">
-                            <a class="t3-form-group-{insertRenderablePanelConfiguration.key} t3-form-type-{element.cssKey} btn btn-default btn-block" title="{element.key}" data-element-type="{element.key}">
-                                <span class="pull-left">
-                                    <core:icon identifier="{element.iconIdentifier}" alternativeMarkupIdentifier="inline" />
-                                    <span>{element.label}</span>
-                                </span>
-                                <span class="clearfix"></span>
+                        <div class="col-4 mb-3">
+                            <a class="text-start t3-form-group-{insertRenderablePanelConfiguration.key} t3-form-type-{element.cssKey} btn btn-default btn-block" title="{element.key}" data-element-type="{element.key}">
+                                <core:icon identifier="{element.iconIdentifier}" alternativeMarkupIdentifier="inline" />
+                                <span>{element.label}</span>
                             </a>
                         </div>
                     </f:for>

diff --git a/typo3/sysext/indexed_search/Resources/Private/Templates/Administration/Statistic.html b/typo3/sysext/indexed_search/Resources/Private/Templates/Administration/Statistic.html
@@ -5,13 +5,15 @@
     <f:if condition="{tree}">
         <f:then>
             <f:form name="statistic" action="statistic" class="form-horizontal" arguments="{id:pageUid}">
-                <div class="form-group">
-                    <div class="col-sm-12">
-                        <f:form.select name="mode" options="{
+                <div class="row row-cols-auto justify-content-start mb-3">
+                    <div class="col-auto">
+                        <f:form.select class="form-select" name="mode" options="{
                             overview:'{f:translate(key:\'administration.statistics.view.overview\')}',
                             content:'{f:translate(key:\'administration.statistics.view.content\')}'
                             }" value="{mode}" additionalAttributes="{data-global-event='change', data-action-submit: '$form'}" />
-                        <f:form.select name="depth" options="{levelTranslations}" value="{depth}" additionalAttributes="{data-global-event='change', data-action-submit: '$form'}" />
+                    </div>
+                    <div class="col-auto">
+                        <f:form.select class="form-select" name="depth" options="{levelTranslations}" value="{depth}" additionalAttributes="{data-global-event='change', data-action-submit: '$form'}" />
                     </div>
                 </div>
             </f:form>

diff --git a/typo3/sysext/tstemplate/Resources/Private/Templates/TemplateObjectBrowserModuleFunction.html b/typo3/sysext/tstemplate/Resources/Private/Templates/TemplateObjectBrowserModuleFunction.html
@@ -108,36 +108,39 @@ <h3>
     <f:else>
         <f:be.pageRenderer includeRequireJsModules="{0: 'TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser'}"/>
         <div class="tsob-menu">
-            <div class="form-inline">
+            <div class="row">
                 <f:if condition="{hasTsBrowserTypes}">
-                    <div class="form-group">
-                        <label class="control-label">
+                    <div class="col-auto">
+                        <label class="col-form-label">
                             <f:translate key="{LLPrefix}browse"/>
                         </label>
                         <f:format.raw>{browserTypeDropdownMenu}</f:format.raw>
                     </div>
                 </f:if>
                 <f:if condition="{hasTopLevelInObjectList}">
-                    <div class="form-group">
-                        <label class="control-label" for="ts_browser_toplevel_{tsBrowserType}">
+                    <div class="col-auto">
+                        <label class="col-form-label" for="ts_browser_toplevel_{tsBrowserType}">
                             <f:translate key="{LLPrefix}objectList"/>
                         </label>
                         <f:format.raw>{objectListDropdownMenu}</f:format.raw>
                     </div>
                 </f:if>
-                <div class="form-group">
-                    <label class="control-label" for="search_field">
+                <div class="col-auto">
+                    <label class="col-form-label" for="search_field">
                         <f:translate key="{LLPrefix}search"/>
                     </label>
-                    <div class="form-group"><input class="form-control" type="search" name="search_field" id="search_field"
-                                                                                value="{postSearchField}"/></div>
+                    <div class="form-group">
+                        <input class="form-control" type="search" name="search_field" id="search_field" value="{postSearchField}"/>
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <label class="col-form-label">&nbsp;</label>
+                    <input class="btn btn-default form-control tsob-search-submit" type="submit" name="search" value="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:search')}"/>
                 </div>
-                <input class="btn btn-default tsob-search-submit" type="submit" name="search"
-                            value="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:search')}"/>
             </div>
-            <div class="checkbox">
-                <label for="checkTs_browser_regexsearch">
-                    <f:format.raw>{regexSearchCheckbox}</f:format.raw>
+            <div class="form-check">
+                <f:format.raw>{regexSearchCheckbox}</f:format.raw>
+                <label class="form-check-label" for="checkTs_browser_regexsearch">
                     <f:translate key="{LLPrefix}regExp"/>
                 </label>
             </div>
@@ -178,16 +181,16 @@ <h3>
         </div>
         <div>
             <h2><f:translate key="{LLPrefix}displayOptions" /></h2>
-            <div class="typo3-listOptions">
-                <div class="checkbox">
-                    <label for="checkTs_browser_showComments">
-                        <f:format.raw>{checkBoxShowComments}</f:format.raw>
+            <div class="mb-3">
+                <div class="form-check">
+                    <f:format.raw>{checkBoxShowComments}</f:format.raw>
+                    <label class="form-check-label" for="checkTs_browser_showComments">
                         <f:translate key="{LLPrefix}displayComments" />
                     </label>
                 </div>
-                <div class="checkbox">
-                    <label for="checkTs_browser_alphaSort">
-                        <f:format.raw>{checkBoxAlphaSort}</f:format.raw>
+                <div class="form-check">
+                    <f:format.raw>{checkBoxAlphaSort}</f:format.raw>
+                    <label class="form-check-label" for="checkTs_browser_alphaSort">
                         <f:translate key="{LLPrefix}sortAlphabetically" />
                     </label>
                 </div>
@@ -200,11 +203,11 @@ <h2><f:translate key="{LLPrefix}displayOptions" /></h2>
             </f:if>
             <f:if condition="{hasConditions}">
                 <h2><f:translate key="{LLPrefix}conditions" /></h2>
-                <div class="typo3-listOptions">
+                <div class="mb-3">
                     <f:for each="{tsConditions}" as="condition">
-                        <div class="checkbox">
-                            <label for="check{condition.key}">
-                                <f:form.checkbox class="checkbox" name="conditions[{condition.key}]" id="check{condition.key}" value="{condition.value}" checked="{condition.isSet}" />
+                        <div class="form-check">
+                            <f:form.checkbox class="checkbox" name="conditions[{condition.key}]" id="check{condition.key}" value="{condition.value}" checked="{condition.isSet}" />
+                            <label class="form-check-label" for="check{condition.key}">
                                 <f:format.raw>{condition.label}</f:format.raw>
                             </label>
                         </div>