Commit 5f3463c2 authored by Benni Mack's avatar Benni Mack
Browse files

[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's avatarBenjamin Franzke <bfr@qbus.de>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 5b953128
......@@ -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;
......
......@@ -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>
......@@ -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>
......
......@@ -50,11 +50,10 @@
</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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -108,36 +108,39 @@
<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 @@
</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 @@
</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>
......
Markdown is supported
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