Add global search dropdown

This commit is contained in:
ATM john 2019-09-29 18:56:28 +02:00
parent e5f1379ef3
commit cd821261e8
4 changed files with 222 additions and 159 deletions

View File

@ -196,15 +196,13 @@ function printDropdownBookmarksList($aDb, $aLangs)
}
$searchForm = '<!-- form with POST method by default, will be replaced with GET for external link by js -->'."\n";
$searchForm.= '<form id="top-menu-action-bookmark" name="actionbookmark" method="POST" action="">';
$searchForm.= '<input name="bookmark" id="top-bookmark-search-input" class="dropdown-search-input" alt="Bookmarks" placeholder="'.$langs->trans('Bookmarks').'" autocomplete="off" >';
$searchForm.= '<form id="top-menu-action-bookmark" name="actionbookmark" method="POST" action="" onsubmit="return false" >';
$searchForm.= '<input name="bookmark" id="top-bookmark-search-input" class="dropdown-search-input" placeholder="'.$langs->trans('Bookmarks').'" autocomplete="off" >';
$searchForm.= '</form>';
// Url to list bookmark
$listbtn = '<option hidden value="listbookmarks" class="optiongrey" selected rel="'.DOL_URL_ROOT.'/bookmarks/list.php">'.$langs->trans('Bookmarks').'</option>';
$listbtn = '<a class="top-menu-dropdown-link" title="'.$langs->trans('AddThisPageToBookmarks').'" href="'.DOL_URL_ROOT.'/bookmarks/list.php" >';
$listbtn.= '<span class="fa fa-list"></span> '.$langs->trans('Bookmarks').'...</a>';
$listbtn.= '<span class="fa fa-list"></span> '.$langs->trans('Bookmarks').'</a>';
// Url to go on create new bookmark page
$newbtn = '';
@ -213,7 +211,7 @@ function printDropdownBookmarksList($aDb, $aLangs)
//$urltoadd=DOL_URL_ROOT.'/bookmarks/card.php?action=create&amp;urlsource='.urlencode($url).'&amp;url='.urlencode($url);
$urltoadd=DOL_URL_ROOT.'/bookmarks/card.php?action=create&amp;url='.urlencode($url);
$newbtn.= '<a class="top-menu-dropdown-link" title="'.$langs->trans('AddThisPageToBookmarks').'" href="'.dol_escape_htmltag($urltoadd).'" >';
$newbtn.= '<span class="fa fa-star-o"></span> '.dol_escape_htmltag($langs->trans('AddThisPageToBookmarks').'...').'</a>';
$newbtn.= '<span class="fa fa-star-o"></span> '.dol_escape_htmltag($langs->trans('AddThisPageToBookmarks')).'</a>';
}
@ -246,8 +244,8 @@ function printDropdownBookmarksList($aDb, $aLangs)
$html= '';
if (! empty($conf->global->BOOKMARKS_SHOW_IN_MENU)) {
$html.= '
<!-- User image -->
<div class="bookmark-header">
<!-- search input -->
<div class="dropdown-header bookmark-header">
' . $searchForm . '
</div>
';
@ -255,7 +253,7 @@ function printDropdownBookmarksList($aDb, $aLangs)
$html.= '
<!-- Menu Body -->
<div class="bookmark-body">
<div class="bookmark-body dropdown-body">
'.$bookmarkList.'
</div>
';
@ -288,88 +286,4 @@ function printDropdownBookmarksList($aDb, $aLangs)
}
return $html;
if (! empty($conf->use_javascript_ajax)) { // Bookmark autosubmit can't work when javascript is off.
// Menu bookmark
$ret = '<div class="menu_top"></div>'."\n";
$ret.= '<!-- form with POST method by default, will be replaced with GET for external link by js -->'."\n";
$ret.= '<form id="actionbookmark" name="actionbookmark" method="POST" action="">';
$ret.= '<select name="bookmark" id="boxbookmark" class="flat boxcombo vmenusearchselectcombo" alt="Bookmarks">';
$ret.= '<option hidden value="listbookmarks" class="optiongrey" selected rel="'.DOL_URL_ROOT.'/bookmarks/list.php">'.$langs->trans('Bookmarks').'</option>';
$ret.= '<option value="listbookmark" class="optionblue" rel="'.dol_escape_htmltag(DOL_URL_ROOT.'/bookmarks/list.php').'" ';
$ret.= ' data-html="'.dol_escape_htmltag('<span class="fa fa-star-o"></span> '.dol_escape_htmltag($user->rights->bookmark->creer ? $langs->trans('EditBookmarks') : $langs->trans('ListOfBookmarks')).'...').'">';
$ret.= dol_escape_htmltag($user->rights->bookmark->creer ? $langs->trans('EditBookmarks') : $langs->trans('ListOfBookmarks')).'...</option>';
// Menu with all bookmarks
if (! empty($conf->global->BOOKMARKS_SHOW_IN_MENU))
{
$sql = "SELECT rowid, title, url, target FROM ".MAIN_DB_PREFIX."bookmark";
$sql.= " WHERE (fk_user = ".$user->id." OR fk_user is NULL OR fk_user = 0)";
$sql.= " AND entity IN (".getEntity('bookmarks').")";
$sql.= " ORDER BY position";
if ($resql = $db->query($sql) )
{
$i=0;
while ($i < $conf->global->BOOKMARKS_SHOW_IN_MENU && $obj = $db->fetch_object($resql))
{
$ret.='<option name="bookmark'.$obj->rowid.'" value="'.$obj->rowid.'" '.($obj->target == 1?' target="_blank"':'').' rel="'.dol_escape_htmltag($obj->url).'"';
//$ret.=' data-html="'.dol_escape_htmltag('<span class="fa fa-print"></span> '.$obj->title).'"';
$ret.='>';
$ret.=dol_escape_htmltag($obj->title);
$ret.='</option>';
$i++;
}
}
else
{
dol_print_error($db);
}
}
$ret.= '</select>';
$ret.= '</form>';
$ret.=ajax_combobox('boxbookmark');
$ret.='<script>
$(document).ready(function () {';
$ret.=' jQuery("#boxbookmark").change(function() {
var urlselected = jQuery("#boxbookmark option:selected").attr("rel");
if (! urlselected) console.log("Error, failed to get the URL to jump to from the rel attribute");
var urltarget = jQuery("#boxbookmark option:selected").attr("target");
if (! urltarget) { urltarget=""; }
jQuery("form#actionbookmark").attr("target",urltarget);
jQuery("form#actionbookmark").attr("action",urlselected);
console.log("We change select bookmark. We choose urlselected="+urlselected+" with target="+urltarget);
// Method is POST for internal link, GET for external
if (urlselected.startsWith(\'http\'))
{
var newmethod=\'GET\';
jQuery("form#actionbookmark").attr("method", newmethod);
console.log("We change method to newmethod="+newmethod);
jQuery("#actionbookmark").submit();
console.log("We restore method to POST");
jQuery("form#actionbookmark").attr("method", \'POST\');
}
else
{
jQuery("#actionbookmark").submit();
}
});';
$ret.='})</script>';
}
$ret.= '<div class="menu_end"></div>'."\n";
return $ret;
}

View File

@ -18,3 +18,4 @@ SetHereATitleForLink=Set a name for the bookmark
UseAnExternalHttpLinkOrRelativeDolibarrLink=Use an external/absolute link (https://URL) or an internal/relative link (/DOLIBARR_ROOT/htdocs/...)
ChooseIfANewWindowMustBeOpenedOnClickOnBookmark=Choose if the linked page should open in the current tab or a new tab
BookmarksManagement=Bookmarks management
BookmarksMenuShortCut=Ctrl + shift + m

View File

@ -1607,8 +1607,6 @@ function top_menu($head, $title = '', $target = '', $disablejs = 0, $disablehead
print '<div class="login_block usedropdown">'."\n";
// Add bookmark dropdown
$toprightmenu.=top_menu_bookmark($user, $langs);
@ -1619,6 +1617,14 @@ function top_menu($head, $title = '', $target = '', $disablejs = 0, $disablehead
$mode=-1;
$toprightmenu.='<div class="inline-block nowrap"><div class="inline-block login_block_elem login_block_elem_name" style="padding: 0px;">';
// Add search dropdown
$toprightmenu.= top_menu_search($user, $langs);
// Add bookmark dropdown
$toprightmenu.= top_menu_bookmark($user, $langs);
// add user dropdown
$toprightmenu.= top_menu_user($user, $langs);
$toprightmenu.='</div></div>';
@ -1833,12 +1839,10 @@ function top_menu_user(User $user, Translate $langs)
else $appli.=" ".DOL_VERSION;
$btnUser = '<!-- div for user link -->
<div id="topmenu-login-dropdown" class="userimg atoplogin dropdown user user-menu">
<div id="topmenu-login-dropdown" class="userimg atoplogin dropdown user user-menu inline-block">
<a href="'.DOL_URL_ROOT.'/user/card.php?id='.$user->id.'" class="dropdown-toggle login-dropdown-a" data-toggle="dropdown">
'.$userImage.'
<span class="hidden-xs maxwidth200 atoploginusername hideonsmartphone">'.dol_trunc($user->firstname ? $user->firstname : $user->login, 10).'</span>
<span class="fa fa-chevron-down login-dropdown-btn" id="dropdown-icon-down"></span>
<span class="fa fa-chevron-up login-dropdown-btn hidden" id="dropdown-icon-up"></span>
</a>
<div class="dropdown-menu">
<!-- User image -->
@ -1879,16 +1883,12 @@ function top_menu_user(User $user, Translate $langs)
if (!$(event.target).closest("#topmenu-login-dropdown").length) {
// Hide the menus.
$("#topmenu-login-dropdown").removeClass("open");
$("#dropdown-icon-down").show(); // use show/hide instead toggle for avoid conflict
$("#dropdown-icon-up").hide(); // use show/hide instead toggle for avoid conflict
}
});
$("#topmenu-login-dropdown .dropdown-toggle").on("click", function(event) {
event.preventDefault();
$("#topmenu-login-dropdown").toggleClass("open");
$("#dropdown-icon-down").toggle();
$("#dropdown-icon-up").toggle();
});
$("#topmenuloginmoreinfo-btn").on("click", function() {
@ -1925,15 +1925,9 @@ function top_menu_bookmark(User $user, Translate $langs)
include_once DOL_DOCUMENT_ROOT.'/bookmarks/bookmarks.lib.php';
$langs->load("bookmarks");
// Add login user link
$html.='<div class="login_block_user">';
// Login name with photo and tooltip
$html.='<div class="inline-block nowrap"><div class="inline-block login_block_elem login_block_elem_name" style="padding: 0px;">';
$html.= '<!-- div for bookmark link -->
<div id="topmenu-bookmark-dropdown" class="atoplogin dropdown">
<a class="dropdown-toggle login-dropdown-a" data-toggle="dropdown" href="#">
<div id="topmenu-bookmark-dropdown" class="atoplogin dropdown inline-block">
<a class="dropdown-toggle login-dropdown-a" data-toggle="dropdown" href="#" title="'.$langs->trans('Bookmarks').' ('.$langs->trans('BookmarksMenuShortCut').')">
<i class="fa fa-star" ></i>
</a>
<div class="dropdown-menu">
@ -1941,51 +1935,172 @@ function top_menu_bookmark(User $user, Translate $langs)
</div>
</div>';
$html.='</div></div>';
$html.='</div>'."\n";
if (! defined('JS_JQUERY_DISABLE_DROPDOWN')) // This may be set by some pages that use different jquery version to avoid errors
{
$html .= '
<!-- Code to show/hide the user drop-down -->
<script>
$( document ).ready(function() {
$(document).on("click", function(event) {
if (!$(event.target).closest("#topmenu-bookmark-dropdown").length) {
// Hide the menus.
$("#topmenu-bookmark-dropdown").removeClass("open");
}
});
$("#topmenu-bookmark-dropdown .dropdown-toggle").on("click", function(event) {
openBookMarkDropDown();
});
// Key map shortcut
$(document).keydown(function(e){
if( e.which === 77 && e.ctrlKey && e.shiftKey ){
console.log(\'control + shift + m : trigger open bookmark dropdown\');
openBookMarkDropDown();
}
});
var openBookMarkDropDown = function() {
event.preventDefault();
$("#topmenu-bookmark-dropdown").toggleClass("open");
$("#top-bookmark-search-input").focus();
$html .= '
<!-- Code to show/hide the user drop-down -->
<script>
$( document ).ready(function() {
$(document).on("click", function(event) {
if (!$(event.target).closest("#topmenu-bookmark-dropdown").length) {
// Hide the menus.
$("#topmenu-bookmark-dropdown").removeClass("open");
}
});
</script>
';
}
$("#topmenu-bookmark-dropdown .dropdown-toggle").on("click", function(event) {
openBookMarkDropDown();
});
// Key map shortcut
$(document).keydown(function(e){
if( e.which === 77 && e.ctrlKey && e.shiftKey ){
console.log(\'control + shift + m : trigger open bookmark dropdown\');
openBookMarkDropDown();
}
});
var openBookMarkDropDown = function() {
event.preventDefault();
$("#topmenu-bookmark-dropdown").toggleClass("open");
$("#top-bookmark-search-input").focus();
}
});
</script>
';
}
return $html;
}
/**
* Build the tooltip on top menu tsearch
*
* @param user $user User object
* @param Translate $langs Language object
* @return string HTML content
*/
function top_menu_search(User $user, Translate $langs)
{
global $langs, $conf, $db, $hookmanager, $user;
global $menumanager;
$html = '';
$usedbyinclude=1;
$arrayresult=null;
include DOL_DOCUMENT_ROOT.'/core/ajax/selectsearchbox.php'; // This set $arrayresult
$defaultAction = '';
$buttonList='<div class="dropdown-global-search-button-list" >';
// Menu with all bookmarks
foreach ($arrayresult as $keyItem => $item)
{
if(empty($defaultAction)){
$defaultAction= $item['url'];
}
$buttonList.='<button class="dropdown-item global-search-item" data-target="'.dol_escape_htmltag($item['url']).'" >';
$buttonList.= $item['text'];
$buttonList.='</button>';
}
$buttonList.='</div>';
$searchInput = '<input name="sall" id="top-global-search-input" class="dropdown-search-input" placeholder="'.$langs->trans('Search').'" autocomplete="off" >';
$dropDownHtml = '<!-- form with POST method by default, will be replaced with GET for external link by js -->'."\n";
$dropDownHtml.= '<form id="top-menu-action-bookmark" name="actionbookmark" method="POST" action="'.$defaultAction.'" >';
$dropDownHtml.= '
<!-- search input -->
<div class="dropdown-header search-dropdown-header">
' . $searchInput . '
</div>
';
$dropDownHtml.= '
<!-- Menu Body -->
<div class="dropdown-body search-dropdown-body">
'.$buttonList.'
</div>
';
$dropDownHtml.= '</form>';
$html.= '<!-- div for Global Search -->
<div id="topmenu-global-search-dropdown" class="atoplogin dropdown inline-block">
<a class="dropdown-toggle login-dropdown-a" data-toggle="dropdown" href="#" title="'.$langs->trans('Search').' ('.$langs->trans('SearchMenuShortCut').')">
<i class="fa fa-search" ></i>
</a>
<div class="dropdown-menu">
'.$dropDownHtml.'
</div>
</div>';
$html .= '
<!-- Code to show/hide the user drop-down -->
<script>
$( document ).ready(function() {
// prevent submiting form on press ENTER
$("#top-global-search-input").keydown(function (e) {
if (e.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":button");
if (inputs[inputs.index(this) + 1] != null) {
inputs[inputs.index(this) + 1].focus();
}
e.preventDefault();
return false;
}
});
// submit form action
$(".dropdown-global-search-button-list .global-search-item").on("click", function(event) {
$("#top-menu-action-bookmark").attr("action", $(this).data("target"));
$("#top-menu-action-bookmark").submit();
});
// close drop down
$(document).on("click", function(event) {
if (!$(event.target).closest("#topmenu-global-search-dropdown").length) {
// Hide the menus.
$("#topmenu-global-search-dropdown").removeClass("open");
}
});
// Open drop down
$("#topmenu-global-search-dropdown .dropdown-toggle").on("click", function(event) {
openGlobalSearchDropDown();
});
// Key map shortcut
$(document).keydown(function(e){
if( e.which === 70 && e.ctrlKey && e.shiftKey ){
console.log(\'control + shift + f : trigger open global-search dropdown\');
openGlobalSearchDropDown();
}
});
var openGlobalSearchDropDown = function() {
event.preventDefault();
$("#topmenu-global-search-dropdown").toggleClass("open");
$("#top-global-search-input").focus();
}
});
</script>
';
return $html;
}
/**
* Show left menu bar
*
@ -2025,7 +2140,7 @@ function left_menu($menu_array_before, $helppagename = '', $notused = '', $menu_
$selected=-1;
$usedbyinclude=1;
$arrayresult=null;
include_once DOL_DOCUMENT_ROOT.'/core/ajax/selectsearchbox.php'; // This set $arrayresult
include DOL_DOCUMENT_ROOT.'/core/ajax/selectsearchbox.php'; // This set $arrayresult
if ($conf->use_javascript_ajax && empty($conf->global->MAIN_USE_OLD_SEARCH_FORM))
{

View File

@ -5,15 +5,13 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
* Dropdown
*/
.open>.dropdown-menu{ /*, #topmenu-login-dropdown:hover .dropdown-menu*/
.open>.dropdown-menu{
display: block;
}
.dropdown-menu {
box-shadow: none;
border-color: #eee;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
@ -21,7 +19,7 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
padding-left: 5px;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
@ -38,6 +36,34 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
.dropdown-toggle{
text-decoration: none !important;
}
.dropdown-toggle::after {
/* font part */
font-family: "Font Awesome 5 Free";
font-size: 0.7em;
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-align:center;
text-decoration:none;
margin: auto 3px;
display: inline-block;
content: "\f078";
-webkit-transition: -webkit-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.open>.dropdown-toggle::after {
transform: rotate(180deg);
}
/*
* MENU Dropdown
*/
@ -75,12 +101,17 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
}
.side-nav-vert .user-menu .dropdown-menu > .user-header {
height: 175px;
min-height: 175px;
padding: 10px;
text-align: center;
white-space: normal;
}
#topmenu-global-search-dropdown .dropdown-menu{
width: 300px;
max-width: 100%;
}
.dropdown-user-image {
border-radius: 50%;
vertical-align: middle;
@ -98,7 +129,9 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
background: rgb(<?php echo $colorbackhmenu1 ?>);
}
.dropdown-menu > .bookmark-header{
.dropdown-menu .dropdown-header{
padding: 5px 10px 10px 10px;
}
@ -117,18 +150,18 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
}
.dropdown-menu > .user-body, .dropdown-menu > .bookmark-body{
.dropdown-menu > .user-body, .dropdown-body{
padding: 15px;
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #dddddd;
white-space: normal;
}
.dropdown-menu > .bookmark-body{
.dropdown-menu > .bookmark-body, .dropdown-body{
padding: 10px 0;
}
#topmenu-login-dropdown{
#topmenu-login-dropdown, #topmenu-bookmark-dropdown, #topmenu-global-search-dropdown {
padding: 0 5px 0 5px;
}
#topmenu-login-dropdown a:hover{
@ -224,7 +257,7 @@ if (! defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
}
.dropdown-item.active, .dropdown-item:hover {
.dropdown-item.active, .dropdown-item:hover, .dropdown-item:focus {
color: #<?php echo $colortextbackhmenu; ?> !important;
text-decoration: none;
background: rgb(<?php echo $colorbackhmenu1 ?>);