Meta search from external form

protected/humhub/widgets/views/searchMenu.php

@@ -8,6 +8,7 @@
 use humhub\assets\SearchAsset;
 use humhub\components\SearchProvider;
 use humhub\libs\Html;
+use humhub\modules\ui\icon\widgets\Icon;
 use humhub\widgets\Button;
 use humhub\widgets\Link;
 use humhub\widgets\SearchProviderWidget;
@@ -27,19 +28,20 @@ SearchAsset::register($this);
         ->options(['data-toggle' => 'dropdown'])
         ->cssClass('dropdown-toggle') ?>
     <div id="dropdown-search" class="dropdown-menu">
-        <ul class="dropdown-search-list">
+        <div class="dropdown-header">
-            <li class="dropdown-header">
             <div class="arrow"></div>
             <?= Yii::t('base', 'Search') ?>
-            </li>
+            <?= Icon::get('close', ['id' => 'dropdown-search-close']) ?>
-            <li class="dropdown-search-form">
+        </div>
+        <div class="dropdown-search-form">
             <?= Button::defaultType()
                 ->icon('search')
                 ->action('search')
                 ->cssClass('dropdown-search-button')
                 ->loader(false) ?>
             <?= Html::input('text', 'keyword', '', ['class' => 'dropdown-search-keyword form-control']) ?>
-            </li>
+        </div>
+        <ul class="dropdown-search-list">
             <?php foreach ($searchProviders as $searchProvider) : ?>
                 <?= SearchProviderWidget::widget(['searchProvider' => $searchProvider]) ?>
             <?php endforeach; ?>

static/js/humhub/humhub.ui.search.js

@@ -11,6 +11,7 @@ humhub.module('ui.search', function(module, require, $) {
         that.selectors = {
             toggler: '#search-menu[data-toggle=dropdown]',
             panel: '#dropdown-search',
+            close: '#dropdown-search-close',
             list: '.dropdown-search-list',
             arrow: '.dropdown-header > .arrow',
             form: '.dropdown-search-form',
@@ -30,6 +31,10 @@ humhub.module('ui.search', function(module, require, $) {
             e.stopPropagation();
         });
 
+        $(document).on('click', that.selectors.close, function () {
+            that.getMenuToggler().dropdown('toggle');
+        });
+
         that.getInput().on('keypress', function (e) {
             if (e.which === 13) {
                 that.search();
@@ -50,6 +55,10 @@ humhub.module('ui.search', function(module, require, $) {
             if (that.getBackdrop().length === 0) {
                 that.$.append('<div class="' + that.selectors.backdrop.replace('.', '') + '">');
             }
+            if (that.getList().is(':visible')) {
+                // refresh NiceScroll after reopen it with searched results
+                that.getList().hide().show();
+            }
         })
 
         that.initAdditionalToggle();
@@ -171,6 +180,8 @@ humhub.module('ui.search', function(module, require, $) {
             return;
         }
 
+        this.getList().show();
+
         this.getProviders().each(function () {
             const provider = $(this);
             provider.addClass('provider-searching').show()

static/less/search.less

@@ -9,12 +9,12 @@
     box-shadow: 0 0 8px #CCC;
     top: 115%;
 
-    .dropdown-search-list {
+    .dropdown-header {
-        list-style: none;
+        font-weight: 600;
+        color: #000;
         padding: 20px;
-        height: 100%;
+        margin: 0;
-    }
+        flex: 0 0 auto;
-
         .arrow {
             position: absolute;
             display: block;
@@ -26,23 +26,44 @@
             right: 10px;
             margin-left: -18px;
             border-top-width: 0;
-        border-bottom-color: #fff;
+            border-bottom-color: #CCC;
             top: -8px;
             z-index: 1035;
+            &:after {
+                position: absolute;
+                border-color: transparent;
+                border-style: solid;
+                border-width: 8px;
+                content: " ";
+                top: 1px;
+                margin-left: -8px;
+                border-top-width: 0;
+                border-bottom-color: #FFF;
+                z-index: 1035;
+            }
+        }
+        #dropdown-search-close {
+            float: right;
+            font-size: 18px;
+            cursor: pointer;
         }
-
-    .dropdown-header {
-        font-weight: 600;
-        color: #000;
-        padding: 0;
     }
 
     .dropdown-search-form {
         position: relative;
+        padding: 0 20px 20px;
+        flex: 0 1 auto;
         .dropdown-search-keyword {
             background: #f8f8f8;
             border-color: #f3f3f3;
             padding-left: 32px;
+            &:-webkit-autofill,
+            &:-webkit-autofill:hover,
+            &:-webkit-autofill:focus,
+            &:-webkit-autofill:active {
+                -webkit-text-fill-color: #777 !important;
+                -webkit-box-shadow: 0 0 0 30px #f8f8f8 inset !important;
+            }
         }
         .dropdown-search-button {
             position: absolute;
@@ -57,6 +78,17 @@
         }
     }
 
+    .dropdown-search-list {
+        list-style: none;
+        padding: 0 20px 20px;
+        display: none;
+        flex: 0 1 auto;
+        > li:first-child {
+            margin-top: 0;
+            padding-top: 0;
+        }
+    }
+
     .dropdown-search-provider {
         display: none;
         padding-top: 20px;
@@ -129,6 +161,10 @@
     }
 }
 
+.open > #dropdown-search.dropdown-menu {
+    display: flex;
+    flex-direction: column;
+}
 
 .dropdown.search-menu {
     .dropdown-backdrop {