Merge pull request #99 from Icinga/provide-standardized-control-layout

Provide standardized control layout
Icinga · Oct 18, 2022 · 77e39b2 · 77e39b2
2 parents 78301ed + e58a61e
commit 77e39b2
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 1 deletion.
diff --git a/asset/css/controls.less b/asset/css/controls.less
@@ -93,3 +93,59 @@
   }
 }
 
+.search-controls {
+  display: flex;
+  min-width: 100%;
+
+  .search-bar {
+    flex: 1 1 auto;
+
+    & ~ .control-button {
+      margin-left: .5em;
+    }
+  }
+}
+
+/**
+ The default layout of list controls in Icinga Web
+
+ ┌────────────────────────────────────────────────────────────────┐
+ │ .pagination-control               .limit-control .sort-control │
+ │ <-------------------- .search-controls ----------------------> │
+ └────────────────────────────────────────────────────────────────┘
+ */
+.controls.default-layout {
+  .box-shadow(0, 0, 0, 1px, @gray-lighter);
+  z-index: 1; // The content may clip, this ensures the separator is always visible
+
+  > .pagination-control {
+    float: left;
+  }
+
+  > .sort-control,
+  > .limit-control {
+    float: right;
+  }
+
+  > .limit-control {
+    margin-right: .5em;
+  }
+
+  > .search-controls {
+    clear: both;
+  }
+
+  > :not(:only-child) {
+    margin-bottom: 0.5em;
+  }
+
+  > .sort-control,
+  > .search-controls > .control-button:last-child {
+    margin-right: -.5em;
+  }
+
+  > .search-controls > .search-bar .search-suggestions {
+    // Suggestions should be kept at a distance from the bottom of the page
+    margin-bottom: 2.5em;
+  }
+}
diff --git a/src/Compat/CompatController.php b/src/Compat/CompatController.php
@@ -132,6 +132,18 @@ protected function addControl(ValidHtml $control)
     {
         $this->controls->add($control);
 
+        if (
+            $control instanceof PaginationControl
+            || $control instanceof LimitControl
+            || $control instanceof SortControl
+            || $control instanceof SearchBar
+        ) {
+            $this->controls->getAttributes()
+                ->get('class')
+                ->removeValue('default-layout')
+                ->addValue('default-layout');
+        }
+
         return $this;
     }
 

diff --git a/src/Compat/SearchControls.php b/src/Compat/SearchControls.php
@@ -3,6 +3,7 @@
 namespace ipl\Web\Compat;
 
 use GuzzleHttp\Psr7\ServerRequest;
+use ipl\Html\Html;
 use ipl\Orm\Exception\InvalidRelationException;
 use ipl\Orm\Query;
 use ipl\Stdlib\Seq;
@@ -74,6 +75,7 @@ public function createSearchBar(Query $query, ...$params): SearchBar
         $searchBar->setRedirectUrl($redirectUrl);
         $searchBar->setAction($redirectUrl->getAbsoluteUrl());
         $searchBar->setIdProtector([$this->getRequest(), 'protectId']);
+        $searchBar->addWrapper(Html::tag('div', ['class' => 'search-controls']));
 
         $moduleName = $this->getRequest()->getModuleName();
         $controllerName = $this->getRequest()->getControllerName();

diff --git a/src/Control/SearchBar.php b/src/Control/SearchBar.php
@@ -516,7 +516,7 @@ protected function assemble()
         // Render the editor container outside of this form. It will contain a form as well later on
         // loaded by XHR and HTML prohibits nested forms. It's style-wise also better...
         $doc = new HtmlDocument();
-        $this->setWrapper($doc);
+        $this->prependWrapper($doc);
         $doc->addHtml($this, ...($editorOpener ? [$editorOpener] : []));
     }
 }