fix: #722 Add the ability to increase the width of the header search …

…bar in datatable (#723)
DominoKit · Oct 15, 2022 · fff5bd1 · fff5bd1
1 parent 59adc1f
commit fff5bd1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/HeaderActionElement.java b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/HeaderActionElement.java
@@ -15,10 +15,12 @@
  */
 package org.dominokit.domino.ui.datatable.plugins;
 
+import elemental2.dom.HTMLElement;
 import elemental2.dom.Node;
 import org.dominokit.domino.ui.datatable.DataTable;
 import org.dominokit.domino.ui.datatable.events.TableEvent;
 import org.dominokit.domino.ui.datatable.events.TableEventListener;
+import org.dominokit.domino.ui.grid.flex.FlexItem;
 
 /**
  * An interface to implement header action elements for the {@link HeaderBarPlugin}
@@ -37,4 +39,11 @@ public interface HeaderActionElement<T> extends TableEventListener {
   /** {@inheritDoc} */
   @Override
   default void handleEvent(TableEvent event) {}
+
+  /**
+   * Customize the styles for this action container
+   *
+   * @param container the flex item parent container of this action
+   */
+  default void applyStyles(FlexItem<? extends HTMLElement> container) {}
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/HeaderBarPlugin.java b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/plugins/HeaderBarPlugin.java
@@ -35,8 +35,6 @@
 import org.dominokit.domino.ui.dropdown.DropDownPosition;
 import org.dominokit.domino.ui.dropdown.DropdownAction;
 import org.dominokit.domino.ui.forms.TextBox;
-import org.dominokit.domino.ui.grid.Column;
-import org.dominokit.domino.ui.grid.Row;
 import org.dominokit.domino.ui.grid.flex.FlexItem;
 import org.dominokit.domino.ui.grid.flex.FlexJustifyContent;
 import org.dominokit.domino.ui.grid.flex.FlexLayout;
@@ -59,19 +57,21 @@
  */
 public class HeaderBarPlugin<T> implements DataTablePlugin<T> {
 
-  private Column titleColumn = Column.span6();
-  private Column actionsBarColumn = Column.span6();
+  private final HTMLHeadingElement title = Style.of(h(2)).setMarginBottom("0px").element();
+  private final FlexLayout actionsBar =
+      FlexLayout.create().setJustifyContent(FlexJustifyContent.END);
 
-  private HTMLHeadingElement title = Style.of(h(2)).setMarginBottom("0px").element();
-  private FlexLayout actionsBar = FlexLayout.create().setJustifyContent(FlexJustifyContent.END);
-
-  private HTMLDivElement element =
+  private final HTMLDivElement element =
       DominoElement.of(div())
-          .add(
-              Row.create()
-                  .appendChild(titleColumn.appendChild(title))
-                  .appendChild(actionsBarColumn.appendChild(actionsBar))
-                  .element())
+          .appendChild(
+              FlexLayout.create()
+                  .setJustifyContent(FlexJustifyContent.SPACE_BETWEEN)
+                  .appendChild(
+                      FlexItem.create().css("header-bar-title-container").appendChild(title))
+                  .appendChild(
+                      FlexItem.create()
+                          .css("header-bar-actions-container")
+                          .appendChild(actionsBar)))
           .css(DataTableStyles.HEADER)
           .style("padding-bottom: 5px;")
           .element();
@@ -98,9 +98,6 @@ public HeaderBarPlugin(String title, String description) {
     if (nonNull(description) && !description.isEmpty()) {
       this.title.appendChild(small().textContent(description).element());
     }
-
-    Style.of(titleColumn).setMarginBottom("0px");
-    Style.of(actionsBarColumn).setMarginBottom("0px");
   }
 
   /** {@inheritDoc} */
@@ -113,6 +110,7 @@ public void onBeforeAddTable(DataTable<T> dataTable) {
                     .addCss(Styles.m_r_5)
                     .addCss(Styles.m_l_5)
                     .appendChild(actionElement.asElement(dataTable))
+                    .apply(actionElement::applyStyles)
                     .element()));
     dataTable.element().appendChild(element);
   }
@@ -412,7 +410,7 @@ public static class SearchTableAction<T> implements HeaderActionElement<T> {
     private String clearSearchToolTip = "Clear search";
 
     private int autoSearchDelay = 200;
-    private HTMLDivElement element = DominoElement.of(div()).css("search-new").element();
+    private final HTMLDivElement element = DominoElement.of(div()).css("search-new").element();
     private DataTable<T> dataTable;
     private final TextBox textBox;
     private boolean autoSearch = true;
@@ -447,7 +445,7 @@ public SearchTableAction() {
               .addRightAddOn(clearIcon)
               .addCss("table-search-box")
               .setMarginBottom("0px")
-              .setMaxWidth("300px")
+              .setWidth("100%")
               .addCss(Styles.pull_right);
 
       clearIcon.addClickListener(evt -> clear());
@@ -548,6 +546,11 @@ public Node asElement(DataTable<T> dataTable) {
       return element;
     }
 
+    @Override
+    public void applyStyles(FlexItem<? extends HTMLElement> self) {
+      self.setFlexGrow(1);
+    }
+
     /**
      * Set the search icon tooltip
      *

diff --git a/...i/src/main/resources/org/dominokit/domino/ui/public/css/datatable/domino-ui-datatable.css b/...i/src/main/resources/org/dominokit/domino/ui/public/css/datatable/domino-ui-datatable.css
@@ -287,6 +287,9 @@ table th[class*="col-"] {
     .table-responsive > .table-bordered > tfoot > tr:last-child > td {
         border-bottom: 0;
     }
+    .table-responsive .table-header > .flex-layout {
+        flex-direction: column;
+    }
 }
 
 .table tbody tr.table-row-filtered {
@@ -565,3 +568,11 @@ table th[class*="col-"] {
 .sticky-col:hover {
     background-color: white !important;
 }
+
+.header-bar-title-container {
+    margin-bottom: 0;
+}
+
+.header-bar-actions-container {
+    margin-bottom: 0;
+}