[4.0] Fixing searchtools in xtd plugins in frontend (partial fix)

build/build-modules-js/compilecss.es6.js

@@ -44,6 +44,7 @@ module.exports.compile = (options, path) => {
           `${RootPath}/templates/cassiopeia/scss/offline.scss`,
           `${RootPath}/templates/cassiopeia/scss/template.scss`,
           `${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
+          `${RootPath}/templates/cassiopeia/scss/system/searchtools/searchtools.scss`,
           `${RootPath}/administrator/templates/atum/scss/template.scss`,
           `${RootPath}/administrator/templates/atum/scss/template-rtl.scss`,
           `${RootPath}/administrator/templates/atum/scss/system/searchtools/searchtools.scss`,

language/en-GB/joomla.ini

@@ -458,6 +458,9 @@ POSTGRESQL="PostgreSQL"
 SQLITE="SQLite"
 
 ; Search tools
+JFILTER_OPTIONS="Filter Options"
 JSEARCH_TOOLS="Search Tools"
 JSEARCH_TOOLS_DESC="Filter the list items."
 JSEARCH_TOOLS_ORDERING="Order by:"
+JTABLE_OPTIONS="Table Options"
+JTABLE_OPTIONS_ORDERING="Order by:"

templates/cassiopeia/joomla.asset.json

@@ -93,6 +93,11 @@
         "template.cassiopeia.rtl#style",
         "template.cassiopeia#script"
       ]
+    },
+    {
+      "name": "searchtools",
+      "type": "style",
+      "uri": "system/searchtools/searchtools.min.css"
     }
   ]
 }

templates/cassiopeia/scss/_variables.scss

@@ -137,6 +137,18 @@ $list-group-bg:                      $white-offset;
 // Custom form
 $custom-select-bg:                   $white-offset;
 
+// Custom form
+$custom-select-indicator-padding:    3rem;
+$custom-select-bg-size:              116rem;
+$custom-select-indicator:            url(../images/select-bg.svg);
+$custom-select-indicator-rtl:        url(../images/select-bg-rtl.svg);
+$custom-select-indicator-active:     url(../../../images/select-bg.svg);
+$custom-select-indicator-active-rtl: url(../../../images/select-bg-rtl.svg);
+$custom-select-background:           $custom-select-indicator no-repeat right center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background-rtl:       $custom-select-indicator-rtl no-repeat left center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-bg-size-sm:           75rem;
+$custom-select-multiple-padding-y:   .3rem;
+
 // Modals
 $modal-header-height:                46px;
 
@@ -146,3 +158,18 @@ $badge-default-bg:                   #5e7082;
 // Gutter
 $grid-gutter-width:                  15px !default;
 $cassiopeia-grid-gutter:             $grid-gutter-width;
+
+// Z-Index list
+$zindex-negative:                  -1;
+$zindex-actions:                   auto;
+$zindex-toolbar:                   1000;
+$zindex-sidebar:                   1010;
+$zindex-header:                    1020;
+$zindex-alerts:                    1030;
+$zindex-modal-backdrop:            1040;
+$zindex-modal:                     1050;
+$zindex-popover:                   1060;
+$zindex-tooltip:                   1070;
+$zindex-mobile-bottom:             8000;
+$zindex-mobile-toggle:             9999;
+$zindex-mobile-menu:               9000;

templates/cassiopeia/scss/blocks/_form.scss

@@ -62,3 +62,38 @@ td .form-control {
 .form-control-feedback {
   display: block;
 }
+
+// set up hidden tooltip
+[role="tooltip"]:not(.show) {
+  z-index: $zindex-tooltip;
+  display: none;
+  max-width: 100%;
+  padding: .25em;
+  margin: .25em;
+  color: $white;
+  background: $black;
+
+  [dir=ltr] & {
+    text-align: left;
+  }
+
+  [dir=rtl] & {
+    text-align: right;
+  }
+}
+
+// reveal associated tooltip on focus
+:focus + [role="tooltip"],
+:hover + [role="tooltip"] {
+  position: absolute;
+  display: block;
+}
+
+[id="filter[search]-desc"] {
+  bottom: 100%;
+}
+
+.container-popup [id="filter[search]-desc"] {
+  top: 100%;
+  bottom: auto;
+}