[TASK] Align configuration module search bar
[Packages/TYPO3.CMS.git] / typo3 / sysext / lowlevel / Resources / Private / Templates / Backend / Configuration.html
index a474f02..63e5a53 100644 (file)
@@ -3,32 +3,55 @@
 
     <h2>{treeName}</h2>
 
-    <div id="lowlevel-config">
-        <div class="form-group">
-            <label for="lowlevel-searchString">
-                <f:translate key="enterSearchPhrase" />
-            </label>
-            <input class="form-control" type="search" id="lowlevel-searchString" name="searchString" value="{searchString}" />
-        </div>
-        <div class="form-group">
-            <div class="form-check">
-                <input type="hidden" name="regexSearch" value="0" />
-                <input
-                    type="checkbox"
-                    class="form-check-input"
-                    name="regexSearch"
-                    id="lowlevel-regexSearch"
-                    value="1"
-                    {f:if(condition:'{regexSearch}', then: ' checked')}
-                >
-                <label for="lowlevel-regexSearch" class="form-check-label">
-                    <f:translate key="useRegExp" />
+    <div id="lowlevel-config" class="row mb-3">
+        <div class="col-md-6">
+            <div class="input-group">
+                <button class="btn btn-default" type="submit" title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search')}">
+                    <core:icon identifier="actions-search" />
+                </button>
+
+                <label for="lowlevel-searchString" class="visually-hidden">
+                    <f:translate key="enterSearchPhrase"/>
                 </label>
+                <input class="form-control"
+                    type="search"
+                    id="lowlevel-searchString"
+                    name="searchString"
+                    value="{searchString}"
+                    placeholder="{f:translate(key: 'enterSearchPhrase')}"
+                />
+
+                <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
+                <div class="dropdown-menu" data-popper-placement="bottom-start">
+                    <div class="row g-3">
+                        <div class="col-12">
+                            <div class="form-check">
+                                <input type="hidden" name="regexSearch" value="0" />
+                                <input type="checkbox"
+                                    class="form-check-input"
+                                    name="regexSearch"
+                                    id="lowlevel-regexSearch"
+                                    value="1"
+                                    {f:if(condition:'{regexSearch}', then: ' checked')}
+                                />
+                                <label for="lowlevel-regexSearch" class="form-check-label">
+                                    <f:translate key="useRegExp" />
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="input-group justify-content-end">
+                                <button type="submit" class="text-right btn btn-default" title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search')}">
+                                    <core:icon identifier="actions-search" />
+                                    <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.search"/>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
             </div>
         </div>
-        <div class="form-group">
-            <input class="btn btn-default" type="submit" name="search" id="search" value="{f:translate(key: 'search')}"/>
-        </div>
     </div>
 
     <div class="nowrap">