fix: better looking placeholder text for ACP search

public/language/en-GB/admin/menu.json

@@ -76,7 +76,7 @@
 	"logout": "Log out",
 	"view-forum": "View Forum",
 
-	"search.placeholder": "Press "/" to search for settings",
+	"search.placeholder": "Search settings",
 	"search.no-results": "No results...",
 	"search.search-forum": "Search the forum for <strong></strong>",
 	"search.keep-typing": "Type more to see results...",

public/less/admin/header.less

@@ -86,6 +86,36 @@
 			}
 		}
 
+		.dropdown:not(.open) {
+			&:before {
+				content: '/';
+				border: 1px solid @gray;
+				border-radius: 5px;
+				padding: 0px 6px;
+				font-size: 12px;
+				font-weight: 600;
+				pointer-events: none;
+
+				position: absolute;
+				top: 10px;
+				left: 1em;
+			}
+
+			&:after {
+				content: attr(data-text);
+				position: absolute;
+				top: 10px;
+				left: 3em;
+				font-size: small;
+				font-weight: 600;
+				pointer-events: none;
+			}
+
+			input {
+				color: transparent;
+			}
+		}
+
 		.search-match {
 			font-weight: 700;
 			color: black;

public/src/admin/modules/search.js

@@ -63,6 +63,7 @@ define('admin/modules/search', ['mousetrap', 'alerts'], function (mousetrap, ale
 		const dropdown = $('#acp-search .dropdown');
 		const menu = $('#acp-search .dropdown-menu');
 		const input = $('#acp-search input');
+		const placeholderText = dropdown.attr('data-text');
 
 		if (!config.searchEnabled) {
 			menu.addClass('search-disabled');
@@ -73,17 +74,19 @@ define('admin/modules/search', ['mousetrap', 'alerts'], function (mousetrap, ale
 		});
 
 		$('#acp-search').parents('form').on('submit', function (ev) {
+			const query = input.val();
 			let selected = menu.find('li.result > a.focus').attr('href');
 			if (!selected.length) {
 				selected = menu.find('li.result > a').first().attr('href');
 			}
-			const href = selected || config.relative_path + '/search?in=titlesposts&term=' + escape(input.val());
+			const href = selected || config.relative_path + '/search?in=titlesposts&term=' + escape(query);
 
 			ajaxify.go(href.replace(/^\//, ''));
 
 			setTimeout(function () {
 				dropdown.removeClass('open');
 				input.blur();
+				dropdown.attr('data-text', query || placeholderText);
 			}, 150);
 
 			ev.preventDefault();

src/views/admin/partials/menu.tpl

@@ -139,8 +139,8 @@
 			{{{ if user.privileges.admin:settings }}}
 			<form role="search">
 				<div id="acp-search" >
-					<div class="dropdown">
+					<div class="dropdown" data-text="[[admin/menu:search.placeholder]]">
-						<input type="text" data-toggle="dropdown" class="form-control" placeholder="[[admin/menu:search.placeholder]]">
+						<input type="text" data-toggle="dropdown" class="form-control">
 						<ul class="dropdown-menu dropdown-menu-right state-start-typing" role="menu">
 							<li role="presentation" class="no-results">
 								<a>[[admin/menu:search.no-results]]</a>