fixes #2225 redesign quick search help popin

admin/include/batch_manager_filters.inc.php

@@ -137,3 +137,5 @@ SELECT
 }
 
 $template->assign('associated_categories', $associated_categories);
+
+load_language('help_quick_search.lang');

admin/themes/default/js/batchManagerFilter.js

@@ -129,5 +129,13 @@ $(document).ready(function () {
       }
     }
   });
+
+  $('.help-popin-search').on('click', function() {
+    $('#modalQuickSearch').fadeIn();
+  });
+
+  $('#closeModalQuickSearch').on('click', function() {
+    $('#modalQuickSearch').fadeOut();
+  });
 })
 

admin/themes/default/template/batch_manager_global.tpl

@@ -73,8 +73,6 @@ const str_add_alb_associate = "{"Add Album"|@translate}";
 const str_select_alb_associate = "{"Select an album"|@translate}";
 
 $(document).ready(function() {
-  jQuery('.help-popin-search').colorbox({ width:"600px" });
-
   function checkPermitAction() {
     var nbSelected = 0;
     if ($("input[name=setSelected]").is(':checked')) {

admin/themes/default/template/include/batch_manager_filter.inc.tpl

@@ -209,7 +209,10 @@ let errorFilters = '';
       <p>{'Search'|@translate}</p>
       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
       <input name="q" size=40 value="{if isset($filter.search)} {$filter.search.q|stripslashes|htmlspecialchars}{/if}">
-      <a href="admin/popuphelp.php?page=quick_search&amp;output=content_only" title="{'Help'|@translate}" class="help-popin-search"><span class="icon-help-circled">{'Search tips'|translate}</span></a>
+      <p title="{'Help'|@translate}" class="help-popin-search">
+        <i class="icon-help-circled"></i>
+        <span>{'Search tips'|translate}</span>
+      </p>
       {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
 {if (isset($no_search_results))}
 <div>{'No results for'|@translate} :
@@ -265,4 +268,22 @@ let errorFilters = '';
   </div>
 </div>
 </fieldset>
+
+<div class="bg-modal" id="modalQuickSearch">
+  <div class="modal-content">
+    <a class="icon-cancel close-modal" id="closeModalQuickSearch"></a>
+
+    <div class="quick-search-content">
+      <div class="quick-search-header">
+        <div class="AddIconContainer">
+          <span class="AddIcon icon-blue icon-search"></span>
+        </div>
+      </div>
+      <div class="quick-search-syntax">
+        {assign var=is_dark_mode value=$themeconf.colorscheme == 'dark'}
+        {include file='themes/default/template/help/quick_search.tpl' dark_mode=$is_dark_mode}
+      </div>
+    </div>
+  </div>
+</div>
 {include file='include/album_selector.inc.tpl'}

admin/themes/default/theme.css

@@ -4028,6 +4028,42 @@ LEGEND SPAN {
   opacity: 0.5;
 }
 
+.help-popin-search {
+  cursor: pointer;
+  font-weight: normal !important;
+}
+
+.help-popin-search:hover span,
+.help-popin-search:hover .icon-help-circled::before {
+  color: #3C3C3C !important;
+}
+
+#modalQuickSearch p {
+  margin: 0;
+}
+
+#modalQuickSearch .modal-content {
+  max-height: 400px;
+  height: 100%;
+  width: 500px;
+  gap:20px;
+}
+
+.quick-search-content {
+  height: 100%;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.quick-search-header {
+  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 #order_filters a.removeFilter {font-weight:normal;}
 #order_filters span.property span.filter:first-child a.removeFilter {display:none;} /* can't delete the first field */
 #order_filters span.filter {display:block;margin-left:20px;}
@@ -8177,7 +8213,7 @@ color:#FF7B00;
 .bg-modal {
   display: none;
   position: fixed;
-  z-index: 100;
+  z-index: 999;
   left: 0;
   top: 0;
   width: 100%;

admin/themes/roma/theme.css

@@ -1156,6 +1156,11 @@ li.plupload_delete a.remove-format:hover{color: #c0c0c0;}
 #batchManagerGlobal .ui-slider .ui-slider-range {background-color: #aaaaaa;}
 #batchManagerGlobal .ui-slider-range.ui-widget-header.ui-corner-all {border: 1px solid #ffaf58; background-color: #ffaf58;}
 
+.help-popin-search:hover span,
+.help-popin-search:hover .icon-help-circled::before {
+  color: #ededed !important;
+}
+
 .selected-associate-item {
   background-color: #333;
   box-shadow: 0px 2px #000000AA;