Skip to content

Commit 7cd5d74

Browse files
muhammadarnaldomuhammadarnaldo
committed
MDL-87834 theme_boost: Inline global search field
1 parent 99f1850 commit 7cd5d74

7 files changed

Lines changed: 205 additions & 4 deletions

File tree

‎public/lib/templates/search_input_navbar_inline.mustache‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{{!
2+
This file is part of Moodle - http://moodle.org/
3+
4+
Moodle is free software: you can redistribute it and/or modify
5+
it under the terms of the GNU General Public License as published by
6+
the Free Software Foundation, either version 3 of the License, or
7+
(at your option) any later version.
8+
9+
Moodle is distributed in the hope that it will be useful,
10+
but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
GNU General Public License for more details.
13+
14+
You should have received a copy of the GNU General Public License
15+
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
16+
}}
17+
{{!
18+
@template core/search_input_navbar_inline
19+
20+
Inline navbar search input for desktop. Always visible, no collapse or toggle.
21+
22+
Example context (json):
23+
{
24+
"action": "https://moodle.local/search/index.php",
25+
"inputname": "q",
26+
"searchstring": "Search",
27+
"grouplabel": "Site-wide search",
28+
"hiddenfields": [
29+
{
30+
"name": "context",
31+
"value": "1"
32+
}
33+
]
34+
}
35+
}}
36+
<div id="searchinput-navbar-{{uniqid}}" class="search-input-inline">
37+
<form role="search"
38+
{{#grouplabel}}aria-label="{{{ grouplabel }}}"{{/grouplabel}}
39+
autocomplete="off"
40+
action="{{{ action }}}"
41+
method="get"
42+
accept-charset="utf-8"
43+
class="searchform-navbar">
44+
{{#hiddenfields}}
45+
<input type="hidden" name="{{ name }}" value="{{ value }}">
46+
{{/hiddenfields}}
47+
<label for="searchinput-{{uniqid}}" class="visually-hidden">{{{ searchstring }}}</label>
48+
<div class="input-group">
49+
<button type="submit" class="input-group-text border-0 pe-0">
50+
{{#pix}} a/search, core {{/pix}}
51+
<span class="visually-hidden">{{#str}} performsearch, search {{/str}}</span>
52+
</button>
53+
<input type="text"
54+
id="searchinput-{{uniqid}}"
55+
class="form-control border-0 ps-1"
56+
placeholder="{{{ searchstring }}}"
57+
name="{{{ inputname }}}"
58+
data-region="input"
59+
autocomplete="off">
60+
</div>
61+
</form>
62+
</div>
63+
64+
{{#js}}
65+
require([], function() {
66+
const wrapper = document.getElementById('searchinput-navbar-{{uniqid}}');
67+
const form = wrapper.querySelector('.searchform-navbar');
68+
const input = wrapper.querySelector('[data-region="input"]');
69+
70+
form.addEventListener('submit', (e) => {
71+
if (input.value.trim() === '') {
72+
e.preventDefault();
73+
}
74+
});
75+
});
76+
{{/js}}

‎public/search/tests/behat/behat_search.php‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,14 @@ class behat_search extends behat_base {
4545
* @param string $query Query to search for
4646
*/
4747
public function i_search_for_using_the_header_global_search_box($query) {
48-
// Click the search icon.
49-
$this->execute("behat_general::i_click_on", [get_string('togglesearch', 'core'), 'button']);
48+
// In boost the toggle button lives inside the mobile-only wrapper and is hidden on desktop.
49+
// Classic always shows it. Check visibility before clicking to handle both cases.
50+
$togglelabel = get_string('togglesearch', 'core');
51+
$toggle = $this->getSession()->getPage()->find('named', ['button', $togglelabel]);
52+
if ($toggle && $toggle->isVisible()) {
53+
$this->execute("behat_general::i_click_on", [$togglelabel, 'button']);
54+
}
5055

51-
// Set the field.
5256
$this->execute('behat_forms::i_set_the_field_to', ['q', $query]);
5357

5458
// Submit the form.

‎public/theme/boost/classes/output/core_renderer.php‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
namespace theme_boost\output;
1818

1919
use context_course;
20+
use context_system;
2021
use moodle_url;
2122
use html_writer;
2223
use get_string;
@@ -31,6 +32,35 @@
3132
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
3233
*/
3334
class core_renderer extends \core_renderer {
35+
/**
36+
* Returns an inline search box permanently visible in the top navigation.
37+
*
38+
* @param string $id Passed to parent::search_box() for the mobile fallback.
39+
* @return string HTML for the inline and mobile search forms, or empty string.
40+
*/
41+
public function search_box($id = false) {
42+
global $CFG;
43+
44+
if (empty($CFG->enableglobalsearch) || !has_capability('moodle/search:query', context_system::instance())) {
45+
return '';
46+
}
47+
48+
$data = [
49+
'action' => new moodle_url('/search/index.php'),
50+
'hiddenfields' => (object) ['name' => 'context', 'value' => $this->page->context->id],
51+
'inputname' => 'q',
52+
'searchstring' => get_string('search'),
53+
'grouplabel' => get_string('sitewidesearch', 'search'),
54+
];
55+
56+
// Desktop (md+): new inline, always-visible form.
57+
$desktop = $this->render_from_template('core/search_input_navbar_inline', $data);
58+
59+
// Mobile (< md): keep the original toggle + collapse pattern.
60+
$mobile = html_writer::div(parent::search_box($id), 'd-flex d-md-none');
61+
62+
return $desktop . $mobile;
63+
}
3464

3565
/**
3666
* Returns HTML to display a "Turn editing on/off" button in a form.

‎public/theme/boost/scss/moodle/navbar.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,14 @@
135135
height: 100%;
136136
display: flex;
137137
}
138+
.editmode-switch-form {
139+
.input-group {
140+
flex-wrap: nowrap;
141+
}
142+
.input-group > label {
143+
white-space: nowrap;
144+
}
145+
}
138146
}
139147
.dir-rtl .navbar.fixed-top {
140148
.usermenu {
@@ -170,3 +178,29 @@
170178
:root {
171179
--navbar-height: #{$navbar-height};
172180
}
181+
182+
// Inline search form.
183+
.navbar.fixed-top #usernavigation .search-input-inline {
184+
display: none;
185+
186+
@include media-breakpoint-up(md) {
187+
display: flex;
188+
align-items: center;
189+
height: 100%;
190+
padding: 0 $primary-nav-padding-x;
191+
}
192+
193+
.searchform-navbar {
194+
.input-group {
195+
width: 256px;
196+
}
197+
.input-group-text,
198+
.form-control {
199+
background-color: $gray-200;
200+
}
201+
.input-group-text,
202+
.form-control::placeholder {
203+
color: $gray-700;
204+
}
205+
}
206+
}

‎public/theme/boost/style/moodle.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40342,6 +40342,12 @@ div.editor_atto_toolbar button .icon {
4034240342
height: 100%;
4034340343
display: flex;
4034440344
}
40345+
.navbar.fixed-top .editmode-switch-form .input-group {
40346+
flex-wrap: nowrap;
40347+
}
40348+
.navbar.fixed-top .editmode-switch-form .input-group > label {
40349+
white-space: nowrap;
40350+
}
4034540351

4034640352
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after {
4034740353
font: var(--fa-font-solid);
@@ -40370,6 +40376,29 @@ div.editor_atto_toolbar button .icon {
4037040376
--navbar-height: 60px;
4037140377
}
4037240378

40379+
.navbar.fixed-top #usernavigation .search-input-inline {
40380+
display: none;
40381+
}
40382+
@media (min-width: 768px) {
40383+
.navbar.fixed-top #usernavigation .search-input-inline {
40384+
display: flex;
40385+
align-items: center;
40386+
height: 100%;
40387+
padding: 0 0.5rem;
40388+
}
40389+
}
40390+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .input-group {
40391+
width: 256px;
40392+
}
40393+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .input-group-text,
40394+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .form-control {
40395+
background-color: #e9ecef;
40396+
}
40397+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .input-group-text,
40398+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .form-control::placeholder {
40399+
color: #495057;
40400+
}
40401+
4037340402
/**
4037440403
* Reportbuilder styles.
4037540404
*/

‎public/theme/boost/templates/navbar.mustache‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@
8787
<div id="usernavigation" class="navbar-nav ms-auto h-100">
8888
{{# output.search_box }}
8989
{{{ output.search_box }}}
90-
<div class="divider border-start h-75 align-self-center mx-1"></div>
9190
{{/output.search_box}}
9291
{{#langmenu}}
9392
{{> theme_boost/language_menu }}

‎public/theme/classic/style/moodle.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40276,6 +40276,12 @@ div.editor_atto_toolbar button .icon {
4027640276
height: 100%;
4027740277
display: flex;
4027840278
}
40279+
.navbar.fixed-top .editmode-switch-form .input-group {
40280+
flex-wrap: nowrap;
40281+
}
40282+
.navbar.fixed-top .editmode-switch-form .input-group > label {
40283+
white-space: nowrap;
40284+
}
4027940285

4028040286
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after {
4028140287
font: var(--fa-font-solid);
@@ -40304,6 +40310,29 @@ div.editor_atto_toolbar button .icon {
4030440310
--navbar-height: 50px;
4030540311
}
4030640312

40313+
.navbar.fixed-top #usernavigation .search-input-inline {
40314+
display: none;
40315+
}
40316+
@media (min-width: 768px) {
40317+
.navbar.fixed-top #usernavigation .search-input-inline {
40318+
display: flex;
40319+
align-items: center;
40320+
height: 100%;
40321+
padding: 0 0.5rem;
40322+
}
40323+
}
40324+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .input-group {
40325+
width: 256px;
40326+
}
40327+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .input-group-text,
40328+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .form-control {
40329+
background-color: #e9ecef;
40330+
}
40331+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .input-group-text,
40332+
.navbar.fixed-top #usernavigation .search-input-inline .searchform-navbar .form-control::placeholder {
40333+
color: #495057;
40334+
}
40335+
4030740336
/**
4030840337
* Reportbuilder styles.
4030940338
*/

0 commit comments

Comments
 (0)