Ticket #3399 - Menus and Live Search.

modules/boonex/artificer/data/template/mod_groups/unit_live_search.html

@@ -0,0 +1,15 @@
+<div class="bx-base-group-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0 bg-white dark:bg-gray-800" data-ts="__ts__">
+    <div class="bx-def-unit-img bx-def-__size__-size">
+        <a class="text-center" href="__content_url__">
+            <bx_if:show_thumb_image>
+                <img class="bx-base-pofile-unit-thumb bx-def-__size__ bx-def-__size__-size" src="__thumb_url__" />
+            </bx_if:show_thumb_image>
+            <bx_if:show_thumb_letter>
+                <p class="bx-base-pofile-unit-thumb bx-def-__size__ bx-def-__size__-size rounded box-border" style="background-color:rgba(__color__)">__letter__</p>
+            </bx_if:show_thumb_letter>
+        </a>
+    </div><div class="bx-def-unit-info flex flex-col pl-2">
+        <div class="bx-def-ui-title"><a href="__content_url__">__title__</a></div>
+        <div class="bx-def-ui-type text-sm text-gray-500 dark:text-gray-400 leading-4">__module_name__</div>
+    </div>
+</div>

modules/boonex/artificer/data/template/mod_notifications/unit_live_search.html

@@ -0,0 +1,8 @@
+<div class="bx-base-notifications-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0 bg-white dark:bg-gray-800" data-ts="__ts__">
+    <bx_if:show_icon><img class="bx-def-thumb bx-def-thumb-size" src="__author_icon__" /></bx_if:show_icon>
+    <bx_if:show_icon_empty><i class="sys-icon user"></i></bx_if:show_icon_empty>
+    <div class="bx-def-unit-info flex flex-col pl-2">
+        <div class="bx-def-ui-title"><a href="__item_url__">__title__</a></div>
+        <div class="bx-def-ui-type text-sm text-gray-500 dark:text-gray-400 leading-4">__module_name__</div>
+    </div>
+</div>

modules/boonex/artificer/data/template/mod_profile/unit_with_cover.html

@@ -1,5 +1,5 @@
 <div class="__class__ p-2 box-border">
-    <div class="bx-base-pofile-unit-cnt bx-def-box rounded ring-1 ring-gray-200 dark:ring-gray-700  overflow-hidden bg-white dark:bg-gray-800 shadow-sm">
+    <div class="bx-base-pofile-unit-cnt bx-def-box rounded ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 shadow-sm">
         <a class="bx-base-pofile-unit-cover text-center" style="background-image:url(__cover_url__);" href="__content_url__" onclick="__content_click__">
             <bx_if:show_thumbnail>
                 <div class="bx-def-unit-img bx-def-__size__-size __class_size__">

modules/boonex/artificer/data/template/mod_text/unit_live_search.html

@@ -0,0 +1,8 @@
+<div class="bx-base-text-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0 bg-white dark:bg-gray-800" data-ts="__ts__">
+    <bx_if:thumb><a href="__content_url__"><div class="bx-def-unit-img bx-def-thumb-size bx-def-box bg-white dark:bg-gray-700 rounded box-border" style="background-image:url(__thumb_url__);"></div></bx_if:thumb>
+    <bx_if:no_thumb><a href="__content_url__"><div class="bx-def-unit-img"><div class="bx-def-unit-img-empty bx-def-thumb-size bx-def-box bg-white dark:bg-gray-700 rounded box-border"><i class="sys-icon __module_icon__"></i></div></div></a></bx_if:no_thumb>
+    <div class="bx-def-unit-info flex flex-col pl-2">
+        <div class="bx-def-ui-title"><a href="__content_url__">__title__</a></div>
+        <div class="bx-def-ui-type text-sm text-gray-500 dark:text-gray-400 leading-4">__module_name__</div>
+    </div>
+</div>

modules/boonex/artificer/data/template/system/_header_js_custom.html

@@ -2,4 +2,36 @@
     $(document).ready(function () {
         bx_activate_anim_icons('#283C50');
     });
+
+    function bx_site_search_complete(oContainer, oData) {
+        if(!oData)
+            return;
+
+        oContainer.show();
+
+        setTimeout(function () {
+            var iWidthPrev = $(window).width();
+            $(window).on('resize.bx-site-search', function () {
+                if($(this).width() == iWidthPrev)
+                    return;
+
+                iWidthPrev = $(this).width();
+                bx_site_search_close_all_opened();
+            });
+ 
+            $(document).on('click.bx-site-search touchend.bx-site-search', function (event) {
+                if ($(event.target).parents('.sys-search-results-quick').length || $(event.target).filter('.sys-search-results-quick').length || e === event.target)
+                    event.stopPropagation();
+                else
+                    bx_site_search_close_all_opened();
+            });
+
+        }, 10);
+    }
+
+    function bx_site_search_close_all_opened() {
+        $('.sys-search-results-quick:visible').each(function () {
+            $(this).hide();
+        });
+    }
 </script>

modules/boonex/artificer/data/template/system/_sub_header.html

@@ -19,16 +19,15 @@
                         <bx_injection:injection_logo_after />
                     </div>
                     <!-- Menu -->
-                    <div class="flex-1 hidden lg:block w-64 ml-6 overflow-hidden">
+                    <div class="bx-toolbar-item bx-ti-menu flex-1 hidden lg:block w-64 ml-6 overflow-hidden">
                         <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
                             <bx_menu:sys_site />
                         </div>
                     </div>
                     <!-- Search -->
-                    <div class="flex flex-grow flex-shrink items-center justify-end ml-6 w-32">
-                        <div class="max-w-none w-full lg:max-w-none">
-                            <label for="search" class="sr-only">Search</label>
-                            <div class="relative">__sys_site_search__</div>
+                    <div class="bx-toolbar-item bx-ti-search flex flex-grow flex-shrink items-center justify-end ml-6 w-32">
+                        <div class="flex items-start w-full">
+                            <div class="relative w-full">__sys_site_search__</div>
                         </div>
                     </div>
                     <!-- Members Toolbar -->

modules/boonex/artificer/data/template/system/css/default.less

@@ -7,6 +7,14 @@
 @base-input-box-sizing: border-box;
 
 
+/*--- Colors ---*/
+.bx-def-color-bg-hl,
+.bx-def-color-bg-hl-even:nth-child(even),
+.bx-def-color-bg-hl-hover:hover {
+    .background-color (transparent);
+}
+
+/*--- Unit ---*/
 .bx-def-unit-alert {
     .font-size(@bx-font-size-small - 2);
 }

modules/boonex/artificer/data/template/system/css/general.css

@@ -3,6 +3,16 @@ import url(../../../../../../../template/css/general.css);
 --*/
 
 
+/*--- Toolbar ---*/
+.bx-toolbar-item.bx-ti-search .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
+    margin-top: 0;
+}
+.bx-toolbar-item.bx-ti-search .sys-search-results-quick {
+    position: absolute;
+    z-index: 10;
+}
+
+
 /*--- Profile Avatar ---*/
 #bx-profile-switcher .bx-def-hr {
     display: none;

modules/boonex/artificer/data/template/system/menu_account_popup.html

@@ -1,4 +1,4 @@
-<div id="bx-sliding-menu-account" class="bx-sliding-menu-main bx-sliding-menu-fullheight bx-def-z-index-nav bg-white box-border bx-search-site" style="display:none; opacity:1;">
+<div id="bx-sliding-menu-account" class="bx-sliding-menu-main bx-sliding-menu-fullheight bx-def-z-index-nav ring-1 ring-gray-200 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 shadow-sm rounded-bl" style="display:none; opacity:1;">
     <div class="bx-sliding-menu-main-cnt">
         <a class="bx-sliding-menu-close mt-2 mr-4 text-3xl" href="javascript:void(0);" onclick="bx_menu_slide_inline('#bx-sliding-menu-account')"><i class="sys-icon times"></i></a>
 

modules/boonex/artificer/data/template/system/menu_custom_item_sys_create_post.html

@@ -1,4 +1,4 @@
 <span class="__class_wrp__ my-1">
-    <a class="__class_link__ group flex items-center px-2 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 text-sm font-medium rounded" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__><bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon><bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image><bx_if:title><span class="ml-2 first:ml-0">__title__</span></bx_if:title></a>
+    <a class="__class_link__ group flex items-center px-2 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-sm font-medium rounded" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__><bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon><bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image><bx_if:title><span class="ml-2 first:ml-0">__title__</span></bx_if:title></a>
     <bx_if:addon>__addon__</bx_if:addon>
 </span>

modules/boonex/artificer/data/template/system/menu_floating_blocks_wide.html

@@ -1,5 +1,5 @@
 <ul class="bx-menu-floating-blocks-wide bx-menu-object-__object__">
-    <bx_repeat:menu_items><li class="bx-menu-item bx-menu-item-__name__ __class_add__ group relative flex justify-between items-center px-2 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 text-sm font-medium rounded">
+    <bx_repeat:menu_items><li class="bx-menu-item bx-menu-item-__name__ __class_add__ group relative flex justify-between items-center px-2 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-sm font-medium rounded">
         <a class="flex items-center" href="__link__" onclick="__onclick__"__attrs__>
             <div class="bx-menu-floating-blocks-icon mr-3 h-5 w-5">
                 <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>

modules/boonex/artificer/data/template/system/menu_main_inline.html

@@ -0,0 +1,3 @@
+<div id="__id__" class="__class__ bx-def-z-index-nav" style="__style__">
+    <div class="bx-inline-menu-main-cnt">__content__</div>
+</div>

modules/boonex/artificer/data/template/system/menu_main_sliding.html

@@ -1,3 +1,3 @@
-<div id="__id__" class="__class__ bx-def-z-index-nav" style="__style__">
+<div id="__id__" class="__class__ bx-def-z-index-nav ring-1 ring-gray-200 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 shadow-sm rounded-bl" style="__style__">
     <div class="bx-sliding-menu-main-cnt">__content__</div>
 </div>

modules/boonex/artificer/data/template/system/scripts/BxTemplFormView.php

@@ -58,18 +58,6 @@ class BxTemplFormView extends BxBaseFormView
         return $this->_updateInputAttrs($aAttrs);
     }
 
-    protected function _genInputButtonAttrs(&$aInput)
-    {
-        $aAttrs = parent::_genInputButtonAttrs($aInput);
-        
-        if(!isset($aAttrs['class']))
-            $aAttrs['class'] = '';
-
-        $aAttrs['class'] .= ' group block px-4 py-2 bg-white ring-1 ring-gray-200 dark:ring-gray-800 dark:bg-gray-900 dark:hover:bg-gray-700 shadow-sm text-gray-900 dark:text-white flex items-center text-sm font-normal rounded';
-
-        return $aAttrs;
-    }
-
     protected function _genCustomInputUsernamesSuggestionsAttrs (&$aInput, $bDisabled = false)
     {
         $aAttrs = parent::_genCustomInputUsernamesSuggestionsAttrs($aInput, $bDisabled);

modules/boonex/artificer/data/template/system/scripts/BxTemplFunctions.php

@@ -30,7 +30,7 @@ class BxTemplFunctions extends BxBaseFunctions
             case 'sys_site_search':
                 $oSearch = new BxTemplSearch();
                 $oSearch->setLiveSearch(true);
-                return $oSearch->getForm(BX_DB_CONTENT_ONLY) . $oSearch->getResultsContainer();
+                return $oSearch->getForm(BX_DB_PADDING_DEF, false, true) . $oSearch->getResultsContainer();
 
             default:
                 return parent::TemplPageAddComponent($sKey);

modules/boonex/artificer/data/template/system/scripts/BxTemplMenuSite.php

@@ -31,15 +31,17 @@ class BxTemplMenuSite extends BxTemplMenuMoreAuto
 
     public function getCode ()
     {
+        $sTemplate = 'menu_main_sliding.html';
         $sClass = 'bx-sliding-menu-main';
         $sStyle = 'display:none';
         if($this->_bSiteMenu) {
-            $sClass = 'bx-sliding-smenu-main';
+            $sTemplate = 'menu_main_inline.html';
+            $sClass = 'bx-inline-smenu-main';
             $sStyle = '';
         }
 
         $this->_oModule->_oTemplate->addJs(array('menu_site.js'));
-        return $this->_oModule->_oTemplate->parseHtmlByName('menu_main_sliding.html', array(
+        return $this->_oModule->_oTemplate->parseHtmlByName($sTemplate, array(
             'id' => 'bx-sliding-menu-' . $this->_sObject,
             'class' => $sClass . ' ' . str_replace('_', '-', $this->_sObject),
             'style' => $sStyle,

modules/boonex/artificer/data/template/system/scripts/BxTemplSearch.php

@@ -12,6 +12,28 @@ class BxTemplSearch extends BxBaseSearch
     public function __construct ($aChoice = '', $oTemplate = false)
     {
         parent::__construct ($aChoice, $oTemplate);
+        
+        $this->_sSearchFunctionParams .= ", bx_site_search_complete";
+    }
+
+    public function setLiveSearch($bLiveSearch)
+    {
+        parent::setLiveSearch($bLiveSearch);
+
+        if($this->_bLiveSearch) 
+            $this->_sIdLoading = $this->_sIdForm;
+    }
+
+    public function getResultsContainer($sCode = '')
+    {
+        $sResult = parent::getResultsContainer($sCode);
+
+        return $this->_oTemplate->parseHtmlByContent($sResult, [
+            'bx_if:show_hidden' => [
+                'condition' => empty($sCode),
+                'content' => []
+            ]
+        ]);
     }
 }
 

modules/boonex/artificer/data/template/system/search_pages_results_live.html

@@ -0,0 +1,7 @@
+<div class="bx-base-general-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0 bg-white dark:bg-gray-800" data-ts="__ts__">
+    <a href="__content_url__"><div class="bx-def-unit-img"><div class="bx-def-unit-img-empty bx-def-thumb-size bx-def-round-corners bx-def-box bg-white dark:bg-gray-700 rounded box-border"><i class="sys-icon __icon__"></i></div></div></a>
+    <div class="bx-def-unit-info flex flex-col pl-2">
+        <div class="bx-def-ui-title"><a href="__content_url__">__title__</a></div>
+        <div class="bx-def-ui-type text-sm text-gray-500 dark:text-gray-400 leading-4">__module_name__</div>
+    </div>
+</div>

modules/boonex/artificer/data/template/system/search_result.html

@@ -0,0 +1 @@
+<div id="__html_id__" class="__class__ relative p-2 md:p-4 lg:p-6 ring-1 ring-gray-200 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 shadow-sm rounded-b box-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__content__</div>

modules/boonex/artificer/js/tailwind.config.js

@@ -5,7 +5,10 @@ module.exports = {
     extend: {},
   },
   variants: {
-    extend: {},
+    extend: {
+        margin: ['first', 'last'],
+        padding: ['first', 'last'],
+    },
   },
   plugins: [],
 }

modules/boonex/artificer/template/css/tailwind.css

@@ -4,7 +4,20 @@
 @tailwind utilities;
 
 @layer components {
-  .bx-btn {
-    @apply group block w-min px-4 py-2 bg-white ring-1 ring-gray-200 dark:ring-gray-800 dark:bg-gray-900 dark:hover:bg-gray-700 shadow-sm text-gray-900 dark:text-white flex items-center text-sm font-normal whitespace-nowrap rounded;
-  }
+    .bx-btn {
+        @apply group block flex items-center box-border w-min h-8 px-4 rounded ring-1 ring-gray-200 dark:ring-gray-800 bg-white dark:bg-gray-900 dark:hover:bg-gray-700 shadow-sm text-gray-900 dark:text-white leading-8 text-base font-normal whitespace-nowrap;
+    }
+
+    .bx-btn i, 
+    .bx-btn u {
+        @apply inline-block align-top;
+    }
+
+    .bx-btn u {
+        @apply ml-2;
+    }
+
+    .bx-btn.bx-btn-small {
+        @apply group block flex items-center box-border w-min h-7 px-2 rounded ring-1 ring-gray-200 dark:ring-gray-800 bg-white dark:bg-gray-900 dark:hover:bg-gray-700 shadow-sm text-gray-900 dark:text-white leading-7 text-xs font-normal whitespace-nowrap;
+    }
 }