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">
+        <div class="dropdown-header">
+            <div class="arrow"></div>
+            <?= Yii::t('base', 'Search') ?>
+            <?= Icon::get('close', ['id' => 'dropdown-search-close']) ?>
+        </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']) ?>
+        </div>
         <ul class="dropdown-search-list">
-            <li class="dropdown-header">
-                <div class="arrow"></div>
-                <?= Yii::t('base', 'Search') ?>
-            </li>
-            <li 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>
             <?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,40 +9,61 @@
     box-shadow: 0 0 8px #CCC;
     top: 115%;
 
-    .dropdown-search-list {
-        list-style: none;
-        padding: 20px;
-        height: 100%;
-    }
-
-    .arrow {
-        position: absolute;
-        display: block;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-        border-width: 8px;
-        right: 10px;
-        margin-left: -18px;
-        border-top-width: 0;
-        border-bottom-color: #fff;
-        top: -8px;
-        z-index: 1035;
-    }
-
     .dropdown-header {
         font-weight: 600;
         color: #000;
-        padding: 0;
+        padding: 20px;
+        margin: 0;
+        flex: 0 0 auto;
+        .arrow {
+            position: absolute;
+            display: block;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+            border-width: 8px;
+            right: 10px;
+            margin-left: -18px;
+            border-top-width: 0;
+            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-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 {