Add the ability to search projects dropdown list

Fixes #5731

core/constant_inc.php

@@ -627,7 +627,8 @@
 define( 'CHARTJSBUNDLE_HASH', 'sha256-OBi9RJU9sFk/2JEV23eSQSqe/eUK4km5NxGgo/XMiqY=' );
 
 # List JS
-define( 'LISTJS_VERSION', '1.4.0' );
+define( 'LISTJS_VERSION', '1.4.1' );
+define( 'LISTJS_HASH', 'sha256-lFOz0Sg8djWQPKOfRce9A9EcYSWhFMsYo+ulRYVnjrw=' );
 
 
 # Byte Order Markers

core/layout_api.php

@@ -322,15 +322,19 @@ function layout_body_javascript() {
 		html_javascript_cdn_link( 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/' . DATETIME_PICKER_VERSION . '/js/bootstrap-datetimepicker.min.js', DATETIME_PICKER_HASH );
 
 		# listjs
-		html_javascript_cdn_link( 'https://cdnjs.cloudflare.com/ajax/libs/list.js/' . LISTJS_VERSION . '/list.min.js' );
+		html_javascript_cdn_link( 'https://cdnjs.cloudflare.com/ajax/libs/list.js/' . LISTJS_VERSION . '/list.min.js', LISTJS_HASH );
 	} else {
 		# bootstrap
 		html_javascript_link( 'bootstrap-' . BOOTSTRAP_VERSION . '.min.js' );
 
 		# moment & datetimepicker
 		html_javascript_link( 'moment-with-locales-' . MOMENT_VERSION . '.min.js' );
 		html_javascript_link( 'bootstrap-datetimepicker-' . DATETIME_PICKER_VERSION . '.min.js' );
-	}
+
+		# listjs
+        html_javascript_link( 'list-' . LISTJS_VERSION . '.min.js' );
+
+    }
 
 	# theme scripts
 	html_javascript_link( 'ace-extra.min.js' );
@@ -617,31 +621,34 @@ function layout_navbar_projects_list( $p_project_id = null, $p_include_all_proje
 		if( $p_project_id !== null ) {
 			check_selected( $p_project_id, ALL_PROJECTS, false );
 		}
-		echo '> ' . lang_get( 'all_projects' ) . ' </a></li>' . "\n";
+		echo '> ' . lang_get( 'all_projects' ) . ' </a></li>' . " \n";
 		echo '<li class="divider"></li>' . "\n";
 	}
-	
+
 	echo '<li>';
-	echo '<div id="projcts-dropdown">';
-	echo '<input class="search" placeholder="Search" />';
+	echo '<div id="projects-list">';
+	echo '<div class="searchbox">';
+    echo '<input class="search form-control input-sm margin-left-8 margin-right-8" placeholder="' . lang_get( 'search' ) . '" />';
+    echo '</div>';
+    echo '<ul class="list dropdown-yellow no-margin">';
 
-    echo '<ul class="list">';
 	foreach( $t_project_ids as $t_id ) {
 		if( $p_can_report_only ) {
 			$t_report_bug_threshold = config_get( 'report_bug_threshold', null, $t_user_id, $t_id );
 			$t_can_report = access_has_project_level( $t_report_bug_threshold, $t_id, $t_user_id );
 		}
 
-		echo 0 == strcmp( $t_id, $p_project_id ) ? '<li class="project-name active">' : '<li>';
+		echo 0 == strcmp( $t_id, $p_project_id ) ? '<li class="active">' : '<li>';
 		echo '<a href="' . helper_mantis_url( 'set_project.php' ) . '?project_id=' . $t_id . '"';
 		check_selected( $p_project_id, $t_id, false );
 		check_disabled( $t_id == $p_filter_project_id || !$t_can_report );
-		echo ' class="project-name"> ' . string_attribute( project_get_field( $t_id, 'name' ) ) . ' </a></li>' . "\n";
-		#layout_navbar_subproject_option_list( $t_id, $p_project_id, $p_filter_project_id, $p_trace, $p_can_report_only );
+		echo ' class="project-link"> ' . string_attribute( project_get_field( $t_id, 'name' ) ) . ' </a></li>' . "\n";
+		layout_navbar_subproject_option_list( $t_id, $p_project_id, $p_filter_project_id, $p_trace, $p_can_report_only );
 	}
+
 	echo '</ul>';
 	echo '</div>';
-	echo '</li>';
+    echo '</li>';
 }
 
 /**
@@ -677,7 +684,7 @@ function layout_navbar_subproject_option_list( $p_parent_id, $p_project_id = nul
 		echo '<a href="' . helper_mantis_url( 'set_project.php' ) . '?project_id=' . $t_full_id . '"';
 		check_selected( $p_project_id, $t_full_id, false );
 		check_disabled( $t_id == $p_filter_project_id || !$t_can_report );
-		echo '> ' . str_repeat( '&#160;', count( $p_parents ) * 4 );
+		echo ' class="project-link"> ' . str_repeat( '&#160;', count( $p_parents ) * 4 );
 		echo string_attribute( project_get_field( $t_id, 'name' ) ) . '</a></li>' . "\n";
 
 		layout_navbar_subproject_option_list( $t_id, $p_project_id, $p_filter_project_id, $p_trace, $p_can_report_only, $p_parents );

css/ace-mantis.css

@@ -294,6 +294,21 @@ i.datetimepicker {
     color: #333333;
 }
 
+.dropdown-menu .divider {
+    margin: 2px 0;
+}
+
+.list > li > a {
+    display: block;
+    line-height: 1.4;
+    padding: 3px 11px;
+    white-space: nowrap;
+    margin: 1px 0;
+    color: #333;
+    font-weight: 400;
+    text-decoration: none;
+}
+
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
     .page-content {

js/common.js

@@ -49,13 +49,12 @@ $(document).ready( function() {
     });
 
 	var options = {
-		valueNames: [ { name: 'project-name', attr: 'href' }  ]
+        valueNames: [ 'project-link' ]
 	};
-
-	$(".dropdown-toggle").click(function(e) {
-		var projectsList = new List('projects-dropdown', options);
-	});
-
+    var list = new List('projects-list', options);
+    if(list.items.length <= 10 ) {
+    	$('#projects-list .searchbox').hide();
+	}
 
     $('.widget-box').on('shown.ace.widget' , function(event) {
        var t_id = $(this).attr('id');