diff --git a/application/views/scripts/layout/menu.phtml b/application/views/scripts/layout/menu.phtml index dfb544d63..de819a279 100644 --- a/application/views/scripts/layout/menu.phtml +++ b/application/views/scripts/layout/menu.phtml @@ -8,6 +8,7 @@ $searchDashboard->setUser($this->Auth()->getUser()); if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?> '; + . $preservedUrl + . '">' + . ''; if ($this->filter->isEmpty()) { $title = t('Filter this list'); diff --git a/library/Icinga/Web/Widget/SingleValueSearchControl.php b/library/Icinga/Web/Widget/SingleValueSearchControl.php index 470518caa..dcc461089 100644 --- a/library/Icinga/Web/Widget/SingleValueSearchControl.php +++ b/library/Icinga/Web/Widget/SingleValueSearchControl.php @@ -10,6 +10,7 @@ use ipl\Html\FormElement\InputElement; use ipl\Html\HtmlElement; use ipl\Web\Control\SearchBar\Suggestions; use ipl\Web\Url; +use ipl\Web\Widget\Icon; class SingleValueSearchControl extends Form { @@ -106,6 +107,8 @@ class SingleValueSearchControl extends Form { $suggestionsId = Icinga::app()->getRequest()->protectId('single-value-suggestions'); + $this->addHtml(new Icon('search', Attributes::create(['class' => 'search-icon']))); + $this->addElement( 'text', $this->searchParameter, diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 01cf1526d..cdadd6195 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -21,35 +21,35 @@ } } +form > .search-icon { + position: absolute; + left: 0.25em; + top: ~"calc(50% - 0.5em)"; + pointer-events: none; + color: @menu-color; + opacity: 0.8; +} + +form:has(> .search-icon) { + position: relative; +} + .controls input.search, input.search { .transition(border 0.3s ease); - .transition(background-image 0.2s ease); - background-image: url(../img/icons/search_white.png); - background-repeat: no-repeat; - background-size: 1em 1em; - background-position: .25em center; outline: none; padding-left: 1.5em; width: 20em; - &:focus { - background-image: url(../img/icons/search_icinga_blue.png); - } - &:focus:not([readonly]) { border-color: @icinga-blue; } } -@light-mode: { - #menu input.search, - .controls input.search, - input.search { - background-image: url(../img/icons/search.png); - } -}; +form:has(input.search:focus) > .search-icon { + color: @icinga-blue; +} .backend-selection, .pagination-control, diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less index 6324190ca..ef1fcef48 100644 --- a/public/css/icinga/menu.less +++ b/public/css/icinga/menu.less @@ -210,9 +210,12 @@ opacity: .6; } +#menu .search-icon { + left: 1em; +} + #menu input.search { - background: transparent url('../img/icons/search_white.png') no-repeat 1em center; - background-size: 1em auto; + background-color: @menu-bg-color; border: none; color: @menu-color; line-height: 2.167em;