Merge branch 'MDL-69454-master' of git://github.com/bmbrands/moodle into master

admin/admin_settings_search_form.php

@@ -1,48 +0,0 @@
-<?php
-// This file is part of Moodle - http://moodle.org/
-//
-// Moodle is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// Moodle is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
-
-/**
- * Admin settings search form
- *
- * @package    admin
- * @copyright  2016 Damyon Wiese
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- */
-
-defined('MOODLE_INTERNAL') || die();
-
-require_once $CFG->libdir.'/formslib.php';
-
-/**
- * Admin settings search form
- *
- * @package    admin
- * @copyright  2016 Damyon Wiese
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- */
-class admin_settings_search_form extends moodleform {
-    function definition () {
-        $mform = $this->_form;
-
-        //$mform->addElement('header', 'settingsheader', get_string('search', 'admin'));
-        $elements = [];
-        $elements[] = $mform->createElement('text', 'query', get_string('query', 'admin'));
-        $elements[] = $mform->createElement('submit', 'search', get_string('search'));
-        $mform->addGroup($elements);
-        $mform->setType('query', PARAM_RAW);
-        $mform->setDefault('query', optional_param('query', '', PARAM_RAW));
-    }
-}

admin/search.php

@@ -68,9 +68,16 @@ if ($errormsg !== '') {
 $showsettingslinks = true;
 
 if ($hassiteconfig) {
-    require_once("admin_settings_search_form.php");
-    $form = new admin_settings_search_form();
-    $form->display();
+    $data = [
+        'action' => new moodle_url('/admin/search.php'),
+        'btnclass' => 'btn-primary',
+        'inputname' => 'query',
+        'searchstring' => get_string('search'),
+        'query' => $query,
+        'extraclasses' => 'd-flex justify-content-center'
+    ];
+    echo $OUTPUT->render_from_template('core/search_input', $data);
+
     echo '<hr>';
     if ($query) {
         echo admin_search_settings_html($query);

admin/tests/behat/behat_admin.php

@@ -56,7 +56,7 @@ class behat_admin extends behat_base {
             $this->execute('behat_navigation::i_select_from_flat_navigation_drawer', [get_string('administrationsite')]);
 
             // Search by label.
-            $this->execute('behat_forms::i_set_the_field_to', [get_string('query', 'admin'), $label]);
+            $this->execute('behat_forms::i_set_the_field_to', [get_string('search'), $label]);
             $this->execute("behat_forms::press_button", get_string('search', 'admin'));
 
             // Admin settings does not use the same DOM structure than other moodle forms

admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-debug.js

@@ -53,6 +53,13 @@ SEARCH.prototype = {
      * @protected
      */
     button: null,
+    /**
+     * The cancel button for the form.
+     * @property button
+     * @type Node
+     * @protected
+     */
+    cancel: null,
     /**
      * The last search node if there is one.
      * If there is a last search node then the last search term will be persisted between requests.
@@ -76,17 +83,28 @@ SEARCH.prototype = {
         this.button = this.form.all('input[type=submit]');
         this.lastsearch = this.form.one('input[name=search]');
 
-        var div = Y.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),
-            label = Y.Node.create('<label for="capabilitysearch">' + this.get('strsearch') + '</label>');
-        this.input = Y.Node.create('<input type="text" id="capabilitysearch" />');
+        var div = Y.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"' +
+            'data-fieldtype="text"></div>'),
+            label = Y.Node.create('<label for="capabilitysearch"><span class="sr-only"' +
+                this.get('strsearch') + '</span></label>');
+        this.cancel = Y.Node.create('<a class="btn btn-clear d-none icon-no-margin">' +
+                '<i class="icon fa fa-times fa-fw " aria-hidden="true"></i>' +
+                '</a>');
+        this.input = Y.Node.create('<input type="text" class="form-control withclear" placeholder="' +
+            this.get('strsearch') + '"id="capabilitysearch" />');
 
-        div.append(label).append(this.input);
+        div.append(label).append(this.input).append(this.cancel);
 
         this.select.insert(div, 'before');
 
         this.input.on('keyup', this.typed, this);
         this.select.on('change', this.validate, this);
 
+        this.cancel.on('click', function() {
+            this.input.set('value', '');
+            this.typed();
+        }, this);
+
         if (this.lastsearch) {
             this.input.set('value', this.lastsearch.get('value'));
             this.typed();
@@ -133,6 +151,11 @@ SEARCH.prototype = {
                 last.set('selected', true);
             }
         }
+        if (search !== '') {
+            this.cancel.removeClass("d-none");
+        } else {
+            this.cancel.addClass("d-none");
+        }
         this.validate();
     }
 };

admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-min.js

@@ -1 +1 @@
-YUI.add("moodle-tool_capability-search",function(i,t){var e=function(){e.superclass.constructor.apply(this,arguments)};e.prototype={form:null,select:null,selectoptions:{},input:null,button:null,lastsearch:null,initializer:function(){this.form=i.one("#capability-overview-form"),this.select=this.form.one("select[data-search=capability]"),this.select.setStyle("minWidth",this.select.get("offsetWidth")),this.select.get("options").each(function(t){var e=t.get("value");this.selectoptions[e]=t},this),this.button=this.form.all("input[type=submit]"),this.lastsearch=this.form.one("input[name=search]");var t=i.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),e=i.Node.create('<label for="capabilitysearch">'+this.get("strsearch")+"</label>");this.input=i.Node.create('<input type="text" id="capabilitysearch" />'),t.append(e).append(this.input),this.select.insert(t,"before"),this.input.on("keyup",this.typed,this),this.select.on("change",this.validate,this),this.lastsearch&&(this.input.set("value",this.lastsearch.get("value")),this.typed(),this.select.one("option[selected]")&&this.select.set("scrollTop",this.select.one("option[selected]").get("getX"))),this.validate()},validate:function(){this.button.set("disabled",""===this.select.get("value"))},typed:function(){var t,e=this.input.get("value"),i=0,s=null;for(t in this.lastsearch&&this.lastsearch.set("value",e),this.select.all("option").remove(),this.selectoptions)0<=t.indexOf(e)&&(i++,s=this.selectoptions[t],this.select.append(this.selectoptions[t]));0===i?this.input.addClass("error"):(this.input.removeClass("error"),1===i&&s.set("selected",!0)),this.validate()}},i.extend(e,i.Base,e.prototype,{NAME:"tool_capability-search",ATTRS:{strsearch:{}}}),M.tool_capability=M.tool_capability||{},M.tool_capability.init_capability_search=function(t){new e(t)}},"@VERSION@",{requires:["base","node"]});
+YUI.add("moodle-tool_capability-search",function(s,t){var e=function(){e.superclass.constructor.apply(this,arguments)};e.prototype={form:null,select:null,selectoptions:{},input:null,button:null,cancel:null,lastsearch:null,initializer:function(){this.form=s.one("#capability-overview-form"),this.select=this.form.one("select[data-search=capability]"),this.select.setStyle("minWidth",this.select.get("offsetWidth")),this.select.get("options").each(function(t){var e=t.get("value");this.selectoptions[e]=t},this),this.button=this.form.all("input[type=submit]"),this.lastsearch=this.form.one("input[name=search]");var t=s.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"data-fieldtype="text"></div>'),e=s.Node.create('<label for="capabilitysearch"><span class="sr-only"'+this.get("strsearch")+"</span></label>");this.cancel=s.Node.create('<a class="btn btn-clear d-none icon-no-margin"><i class="icon fa fa-times fa-fw " aria-hidden="true"></i></a>'),this.input=s.Node.create('<input type="text" class="form-control withclear" placeholder="'+this.get("strsearch")+'"id="capabilitysearch" />'),t.append(e).append(this.input).append(this.cancel),this.select.insert(t,"before"),this.input.on("keyup",this.typed,this),this.select.on("change",this.validate,this),this.cancel.on("click",function(){this.input.set("value",""),this.typed()},this),this.lastsearch&&(this.input.set("value",this.lastsearch.get("value")),this.typed(),this.select.one("option[selected]")&&this.select.set("scrollTop",this.select.one("option[selected]").get("getX"))),this.validate()},validate:function(){this.button.set("disabled",""===this.select.get("value"))},typed:function(){var t,e=this.input.get("value"),s=0,i=null;for(t in this.lastsearch&&this.lastsearch.set("value",e),this.select.all("option").remove(),this.selectoptions)0<=t.indexOf(e)&&(s++,i=this.selectoptions[t],this.select.append(this.selectoptions[t]));0===s?this.input.addClass("error"):(this.input.removeClass("error"),1===s&&i.set("selected",!0)),""!==e?this.cancel.removeClass("d-none"):this.cancel.addClass("d-none"),this.validate()}},s.extend(e,s.Base,e.prototype,{NAME:"tool_capability-search",ATTRS:{strsearch:{}}}),M.tool_capability=M.tool_capability||{},M.tool_capability.init_capability_search=function(t){new e(t)}},"@VERSION@",{requires:["base","node"]});

admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search.js

@@ -53,6 +53,13 @@ SEARCH.prototype = {
      * @protected
      */
     button: null,
+    /**
+     * The cancel button for the form.
+     * @property button
+     * @type Node
+     * @protected
+     */
+    cancel: null,
     /**
      * The last search node if there is one.
      * If there is a last search node then the last search term will be persisted between requests.
@@ -76,17 +83,28 @@ SEARCH.prototype = {
         this.button = this.form.all('input[type=submit]');
         this.lastsearch = this.form.one('input[name=search]');
 
-        var div = Y.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),
-            label = Y.Node.create('<label for="capabilitysearch">' + this.get('strsearch') + '</label>');
-        this.input = Y.Node.create('<input type="text" id="capabilitysearch" />');
+        var div = Y.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"' +
+            'data-fieldtype="text"></div>'),
+            label = Y.Node.create('<label for="capabilitysearch"><span class="sr-only"' +
+                this.get('strsearch') + '</span></label>');
+        this.cancel = Y.Node.create('<a class="btn btn-clear d-none icon-no-margin">' +
+                '<i class="icon fa fa-times fa-fw " aria-hidden="true"></i>' +
+                '</a>');
+        this.input = Y.Node.create('<input type="text" class="form-control withclear" placeholder="' +
+            this.get('strsearch') + '"id="capabilitysearch" />');
 
-        div.append(label).append(this.input);
+        div.append(label).append(this.input).append(this.cancel);
 
         this.select.insert(div, 'before');
 
         this.input.on('keyup', this.typed, this);
         this.select.on('change', this.validate, this);
 
+        this.cancel.on('click', function() {
+            this.input.set('value', '');
+            this.typed();
+        }, this);
+
         if (this.lastsearch) {
             this.input.set('value', this.lastsearch.get('value'));
             this.typed();
@@ -133,6 +151,11 @@ SEARCH.prototype = {
                 last.set('selected', true);
             }
         }
+        if (search !== '') {
+            this.cancel.removeClass("d-none");
+        } else {
+            this.cancel.addClass("d-none");
+        }
         this.validate();
     }
 };

admin/tool/capability/yui/src/search/js/search.js

@@ -51,6 +51,13 @@ SEARCH.prototype = {
      * @protected
      */
     button: null,
+    /**
+     * The cancel button for the form.
+     * @property button
+     * @type Node
+     * @protected
+     */
+    cancel: null,
     /**
      * The last search node if there is one.
      * If there is a last search node then the last search term will be persisted between requests.
@@ -74,17 +81,28 @@ SEARCH.prototype = {
         this.button = this.form.all('input[type=submit]');
         this.lastsearch = this.form.one('input[name=search]');
 
-        var div = Y.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),
-            label = Y.Node.create('<label for="capabilitysearch">' + this.get('strsearch') + '</label>');
-        this.input = Y.Node.create('<input type="text" id="capabilitysearch" />');
+        var div = Y.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"' +
+            'data-fieldtype="text"></div>'),
+            label = Y.Node.create('<label for="capabilitysearch"><span class="sr-only"' +
+                this.get('strsearch') + '</span></label>');
+        this.cancel = Y.Node.create('<a class="btn btn-clear d-none icon-no-margin">' +
+                '<i class="icon fa fa-times fa-fw " aria-hidden="true"></i>' +
+                '</a>');
+        this.input = Y.Node.create('<input type="text" class="form-control withclear" placeholder="' +
+            this.get('strsearch') + '"id="capabilitysearch" />');
 
-        div.append(label).append(this.input);
+        div.append(label).append(this.input).append(this.cancel);
 
         this.select.insert(div, 'before');
 
         this.input.on('keyup', this.typed, this);
         this.select.on('change', this.validate, this);
 
+        this.cancel.on('click', function() {
+            this.input.set('value', '');
+            this.typed();
+        }, this);
+
         if (this.lastsearch) {
             this.input.set('value', this.lastsearch.get('value'));
             this.typed();
@@ -131,6 +149,11 @@ SEARCH.prototype = {
                 last.set('selected', true);
             }
         }
+        if (search !== '') {
+            this.cancel.removeClass("d-none");
+        } else {
+            this.cancel.addClass("d-none");
+        }
         this.validate();
     }
 };

admin/tool/templatelibrary/amd/build/search.min.js

@@ -1,2 +1,2 @@
-define ("tool_templatelibrary/search",["jquery","core/ajax","core/log","core/notification","core/templates","core/config"],function(a,b,c,d,e,f){var g=function(b){e.render("tool_templatelibrary/search_results",{templates:b}).done(function(b,c){e.replaceNode(a("[data-region=\"searchresults\"]"),b,c)}).fail(d.exception)},h=function(c){var e=a("[data-field=\"component\"]").val(),f=a("[data-field=\"search\"]").val();document.location.hash=f;b.call([{methodname:"tool_templatelibrary_list_templates",args:{component:e,search:f,themename:c},done:g,fail:d.exception}],!0,!1)},i=null,j=function(a,b){if(null!==i){window.clearTimeout(i)}i=window.setTimeout(function(){a();i=null},b)},k=function(){j(h.bind(this,f.theme),400)};a("[data-region=\"list-templates\"]").on("change","[data-field=\"component\"]",k);a("[data-region=\"list-templates\"]").on("input","[data-field=\"search\"]",k);a("[data-field=\"search\"]").val(document.location.hash.replace("#",""));h(f.theme);return{}});
+define ("tool_templatelibrary/search",["jquery","core/ajax","core/log","core/notification","core/templates","core/config"],function(a,b,c,d,e,f){var g=function(b){e.render("tool_templatelibrary/search_results",{templates:b}).done(function(b,c){e.replaceNode(a("[data-region=\"searchresults\"]"),b,c)}).fail(d.exception)},h=function(c){var e=a("[data-field=\"component\"]").val(),f=a("[data-region=\"list-templates\"] [data-region=\"input\"]").val();if(""!==f){a("[data-region=\"list-templates\"] [data-action=\"clearsearch\"]").removeClass("d-none")}else{a("[data-region=\"list-templates\"] [data-action=\"clearsearch\"]").addClass("d-none")}document.location.hash=f;b.call([{methodname:"tool_templatelibrary_list_templates",args:{component:e,search:f,themename:c},done:g,fail:d.exception}],!0,!1)},i=null,j=function(a,b){if(null!==i){window.clearTimeout(i)}i=window.setTimeout(function(){a();i=null},b)},k=function(){j(h.bind(this,f.theme),400)};a("[data-region=\"list-templates\"]").on("change","[data-field=\"component\"]",k);a("[data-region=\"list-templates\"]").on("input","[data-region=\"input\"]",k);a("[data-action=\"clearsearch\"]").on("click",function(){a("[data-region=\"input\"]").val("");h(f.theme);a(this).addClass("d-none")});a("[data-region=\"input\"]").val(document.location.hash.replace("#",""));h(f.theme);return{}});
 //# sourceMappingURL=search.min.js.map

admin/tool/templatelibrary/amd/src/search.js

@@ -45,8 +45,13 @@ define(['jquery', 'core/ajax', 'core/log', 'core/notification', 'core/templates'
      */
     var refreshSearch = function(themename) {
         var componentStr = $('[data-field="component"]').val();
-        var searchStr = $('[data-field="search"]').val();
+        var searchStr = $('[data-region="list-templates"] [data-region="input"]').val();
 
+        if (searchStr !== '') {
+            $('[data-region="list-templates"] [data-action="clearsearch"]').removeClass('d-none');
+        } else {
+            $('[data-region="list-templates"] [data-action="clearsearch"]').addClass('d-none');
+        }
         // Trigger the search.
         document.location.hash = searchStr;
 
@@ -84,9 +89,14 @@ define(['jquery', 'core/ajax', 'core/log', 'core/notification', 'core/templates'
     };
     // Add change handlers to refresh the list.
     $('[data-region="list-templates"]').on('change', '[data-field="component"]', changeHandler);
-    $('[data-region="list-templates"]').on('input', '[data-field="search"]', changeHandler);
+    $('[data-region="list-templates"]').on('input', '[data-region="input"]', changeHandler);
+    $('[data-action="clearsearch"]').on('click', function() {
+        $('[data-region="input"]').val('');
+        refreshSearch(config.theme);
+        $(this).addClass('d-none');
+    });
 
-    $('[data-field="search"]').val(document.location.hash.replace('#', ''));
+    $('[data-region="input"]').val(document.location.hash.replace('#', ''));
     refreshSearch(config.theme);
     return {};
 });

admin/tool/templatelibrary/templates/list_templates_page.mustache

@@ -30,26 +30,67 @@
     Context variables required for this template:
     * allcomponents - array of components containing templates. Each component has a name and a component attribute.
 
+}}
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template tool_templatelibrary/list_templates_page
+
+    Moodle template to the template library
+
+    The purpose of this template is build the entire page for the template library (by including smaller templates).
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-region, data-field
+
+    Context variables required for this template:
+    * allcomponents - array of components containing templates. Each component has a name and a component attribute.
+
 }}
 <div data-region="list-templates">
     <form class="form-horizontal">
-        <div class="control-group">
-            <label for="selectcomponent" class="control-label">{{#str}}component, tool_templatelibrary{{/str}}</label>
-            <div class="controls">
-                <select id="selectcomponent" data-field="component">
-                    <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
-                    {{#allcomponents}}
-                        <option value="{{component}}">{{name}}</option>
-                    {{/allcomponents}}
-                </select>
-            </div>
-        </div>
-        <div class="control-group">
-            <label for="search" class="control-label">{{#str}}search, tool_templatelibrary{{/str}}</label>
-            <div class="controls">
-                <input type="text" id="search" data-field="search"/>
-            </div>
-        </div>
+    {{< core_form/element-template }}
+        {{$label}}
+            <div class="col-form-label">{{#str}}component, tool_templatelibrary{{/str}}</div>
+        {{/label}}
+
+        {{$element}}
+            <select id="selectcomponent" class="form-control" data-field="component">
+                <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
+                {{#allcomponents}}
+                    <option value="{{component}}">{{name}}</option>
+                {{/allcomponents}}
+            </select>
+        {{/element}}
+    {{/ core_form/element-template }}
+
+    {{< core_form/element-template }}
+        {{$element}}
+            {{< core/search_input_auto }}
+                {{$label}}{{{ searchstring }}}{{/label}}
+                {{$placeholder}}{{#str}}
+                    search, core
+                {{/str}}{{/placeholder}}
+            {{/ core/search_input_auto }}
+        {{/element}}
+    {{/ core_form/element-template }}
     </form>
     <hr/>
     {{> tool_templatelibrary/search_results }}

backup/util/ui/renderer.php

@@ -720,7 +720,7 @@ class core_backup_renderer extends plugin_renderer_base {
     public function render_restore_course_search(restore_course_search $component) {
         $url = $component->get_url();
 
-        $output = html_writer::start_tag('div', array('class' => 'restore-course-search form-inline mb-1'));
+        $output = html_writer::start_tag('div', array('class' => 'restore-course-search mb-1'));
         $output .= html_writer::start_tag('div', array('class' => 'rcs-results table-sm w-75'));
 
         $table = new html_table();
@@ -759,22 +759,14 @@ class core_backup_renderer extends plugin_renderer_base {
         $output .= html_writer::table($table);
         $output .= html_writer::end_tag('div');
 
-        $output .= html_writer::start_tag('div', array('class' => 'rcs-search'));
-        $attrs = array(
-            'type' => 'text',
-            'name' => restore_course_search::$VAR_SEARCH,
-            'value' => $component->get_search(),
-            'class' => 'form-control'
-        );
-        $output .= html_writer::empty_tag('input', $attrs);
-        $attrs = array(
-            'type' => 'submit',
-            'name' => 'searchcourses',
-            'value' => get_string('search'),
-            'class' => 'btn btn-secondary'
-        );
-        $output .= html_writer::empty_tag('input', $attrs);
-        $output .= html_writer::end_tag('div');
+        $data = [
+            'inform' => true,
+            'extraclasses' => 'rcs-search mb-3 w-25',
+            'inputname' => restore_course_search::$VAR_SEARCH,
+            'searchstring' => get_string('searchcourses'),
+            'query' => $component->get_search(),
+        ];
+        $output .= $this->output->render_from_template('core/search_input', $data);
 
         $output .= html_writer::end_tag('div');
         return $output;
@@ -880,7 +872,7 @@ class core_backup_renderer extends plugin_renderer_base {
     public function render_restore_category_search(restore_category_search $component) {
         $url = $component->get_url();
 
-        $output = html_writer::start_tag('div', array('class' => 'restore-course-search form-inline mb-1'));
+        $output = html_writer::start_tag('div', array('class' => 'restore-course-search mb-1'));
         $output .= html_writer::start_tag('div', array('class' => 'rcs-results table-sm w-75'));
 
         $table = new html_table();
@@ -922,22 +914,14 @@ class core_backup_renderer extends plugin_renderer_base {
         $output .= html_writer::table($table);
         $output .= html_writer::end_tag('div');
 
-        $output .= html_writer::start_tag('div', array('class' => 'rcs-search'));
-        $attrs = array(
-            'type' => 'text',
-            'name' => restore_category_search::$VAR_SEARCH,
-            'value' => $component->get_search(),
-            'class' => 'form-control'
-        );
-        $output .= html_writer::empty_tag('input', $attrs);
-        $attrs = array(
-            'type' => 'submit',
-            'name' => 'searchcourses',
-            'value' => get_string('search'),
-            'class' => 'btn btn-secondary'
-        );
-        $output .= html_writer::empty_tag('input', $attrs);
-        $output .= html_writer::end_tag('div');
+        $data = [
+            'inform' => true,
+            'extraclasses' => 'rcs-search mb-3 w-25',
+            'inputname' => restore_category_search::$VAR_SEARCH,
+            'searchstring' => get_string('search'),
+            'query' => $component->get_search(),
+        ];
+        $output .= $this->output->render_from_template('core/search_input', $data);
 
         $output .= html_writer::end_tag('div');
         return $output;

blocks/blog_menu/block_blog_menu.php

@@ -50,7 +50,7 @@ class block_blog_menu extends block_base {
     }
 
     function get_content() {
-        global $CFG;
+        global $CFG, $OUTPUT;
 
         // detect if blog enabled
         if ($this->content !== NULL) {
@@ -98,15 +98,14 @@ class block_blog_menu extends block_base {
 
         // Prepare the footer for this block
         if (has_capability('moodle/blog:search', context_system::instance())) {
-            // Full-text search field
-            $form  = html_writer::tag('label', get_string('search', 'admin'), array('for' => 'blogsearchquery',
-                'class' => 'accesshide'));
-            $form .= html_writer::empty_tag('input', array('id' => 'blogsearchquery', 'class' => 'form-control mr-1',
-                'type' => 'text', 'name' => 'search'));
-            $form .= html_writer::empty_tag('input', array('type' => 'submit', 'class' => 'btn btn-secondary',
-                'value' => get_string('search')));
-            $this->content->footer = html_writer::tag('form', html_writer::tag('div', $form), array(
-                'class' => 'blogsearchform form-inline', 'method' => 'get', 'action' => new moodle_url('/blog/index.php')));
+
+            $data = [
+                'action' => new moodle_url('/blog/index.php'),
+                'inputname' => 'search',
+                'searchstring' => get_string('search', 'admin'),
+                'extraclasses' => 'mt-3'
+            ];
+            $this->content->footer = $OUTPUT->render_from_template('core/search_input', $data);
         } else {
             // No footer to display
             $this->content->footer = '';

blocks/blog_menu/tests/behat/block_blog_menu_activity.feature

@@ -206,7 +206,7 @@ Feature: Enable Block blog menu in an activity
     When I log in as "teacher1"
     And I am on "Course 1" course homepage
     And I follow "Test assignment 1"
-    And I set the field "blogsearchquery" to "First"
+    And I set the field "Search" to "First"
     And I press "Search"
     Then I should see "S1 First Blog"
     And I should see "S2 First Blog"

blocks/blog_menu/tests/behat/block_blog_menu_course.feature

@@ -183,7 +183,7 @@ Feature: Students can use block blog menu in a course
     And I log out
     When I log in as "teacher1"
     And I am on "Course 1" course homepage
-    And I set the field "blogsearchquery" to "First"
+    And I set the field "Search" to "First"
     And I press "Search"
     Then I should see "S1 First Blog"
     And I should see "S2 First Blog"

blocks/globalsearch/block_globalsearch.php

@@ -64,32 +64,17 @@ class block_globalsearch extends block_base {
             return $this->content;
         }
 
-        $url = new moodle_url('/search/index.php');
-        $this->content->footer .= html_writer::link($url, get_string('advancedsearch', 'search'));
+        $data = [
+            'action' => new moodle_url('/search/index.php'),
+            'inputname' => 'q',
+            'searchstring' => get_string('search'),
+        ];
 
-        $this->content->text  = html_writer::start_tag('div', array('class' => 'searchform'));
-        $this->content->text .= html_writer::start_tag('form', array('action' => $url->out()));
-        $this->content->text .= html_writer::start_tag('fieldset', array('action' => 'invisiblefieldset'));
-
-        // Input.
-        $this->content->text .= html_writer::tag('label', get_string('search', 'search'),
-            array('for' => 'searchform_search', 'class' => 'accesshide'));
-        $inputoptions = array('id' => 'searchform_search', 'name' => 'q', 'class' => 'form-control',
-            'type' => 'text', 'size' => '15');
-        $this->content->text .= html_writer::empty_tag('input', $inputoptions);
-
-        // Context id.
         if ($this->page->context && $this->page->context->contextlevel !== CONTEXT_SYSTEM) {
-            $this->content->text .= html_writer::empty_tag('input', ['type' => 'hidden',
-                    'name' => 'context', 'value' => $this->page->context->id]);
+            $data['hiddenfields'] = (object) ['name' => 'context', 'value' => $this->page->context->id];
         }
 
-        // Search button.
-        $this->content->text .= html_writer::tag('button', get_string('search', 'search'),
-            array('id' => 'searchform_button', 'type' => 'submit', 'title' => 'globalsearch', 'class' => 'btn btn-secondary'));
-        $this->content->text .= html_writer::end_tag('fieldset');
-        $this->content->text .= html_writer::end_tag('form');
-        $this->content->text .= html_writer::end_tag('div');
+        $this->content->text = $OUTPUT->render_from_template('core/search_input', $data);
 
         return $this->content;
     }

blocks/search_forums/classes/output/search_form.php

@@ -44,8 +44,6 @@ class search_form implements renderable, templatable {
     protected $courseid;
     /** @var moodle_url The form action URL. */
     protected $actionurl;
-    /** @var moodle_url The advanced search URL. */
-    protected $advancedsearchurl;
     /** @var help_icon The help icon. */
     protected $helpicon;
 
@@ -56,17 +54,17 @@ class search_form implements renderable, templatable {
      */
     public function __construct($courseid) {
         $this->courseid = $courseid;
-        $this->actionurl = new moodle_url('/mod/forum/search.php');
-        $this->advancedsearchurl = new moodle_url('/mod/forum/search.php', ['id' => $this->courseid]);
+        $this->actionurl = new moodle_url('/mod/forum/search.php', ['id' => $courseid]);
         $this->helpicon = new help_icon('search', 'core');
     }
 
     public function export_for_template(renderer_base $output) {
         $data = [
-            'actionurl' => $this->actionurl->out(false),
-            'courseid' => $this->courseid,
-            'advancedsearchurl' => $this->advancedsearchurl->out(false),
+            'action' => $this->actionurl,
             'helpicon' => $this->helpicon->export_for_template($output),
+            'hiddenfields' => (object) ['name' => 'id', 'value' => $this->courseid],
+            'inputname' => 'search',
+            'searchstring' => get_string('search')
         ];
         return $data;
     }

blocks/search_forums/templates/search_form.mustache

@@ -21,25 +21,23 @@
 
     Example context (json):
     {
-        "actionurl": "https://domain.example/mod/forum/search.php",
-        "courseid": "2",
-        "advancedsearchurl": "https://domain.example/mod/forum/search.php?id=2",
+        "action": "https://moodle.local/admin/search.php",
+        "inputname": "search",
+        "searchstring": "Search settings",
+        "value": "policy",
+        "hiddenfields": [
+            {
+                "name": "course",
+                "value": "11"
+            }
+        ],
         "helpicon": "<a class='btn'><i class='icon fa fa-question-circle'></i></a>"
     }
 }}
 <div class="searchform">
-    <form action="{{actionurl}}" class="form-inline">
-        <input type="hidden" name="id" value="{{courseid}}">
-        <div class="input-group w-100">
-            <label class="sr-only" for="searchform_search">{{#str}}search{{/str}}</label>
-            <input id="searchform_search" name="search" type="text" class="form-control" size="10">
-            <div class="input-group-append">
-                <button class="btn btn-secondary" id="searchform_button" type="submit">{{#str}}go{{/str}}</button>
-            </div>
-        </div>
-    </form>
+    {{>core/search_input}}
     <div class="mt-3">
-        <a href="{{advancedsearchurl}}">{{#str}}advancedsearch, block_search_forums{{/str}}</a>
+        <a href="{{action}}">{{#str}}advancedsearch, block_search_forums{{/str}}</a>
         {{#helpicon}}
             {{>core/help_icon}}
         {{/helpicon}}

blocks/search_forums/tests/behat/block_search_forums_course.feature

@@ -29,9 +29,8 @@ Feature: The search forums block allows users to search for forum posts on cours
   Scenario: Use the search forum block in a course without any forum posts
     Given I log in as "student1"
     And I am on "Course 1" course homepage
-    When I set the following fields to these values:
-      | searchform_search | Moodle |
-    And I press "Go"
+    When I set the field "Search" to "Moodle"
+    And I press "Search"
     Then I should see "No posts"
 
   Scenario: Use the search forum block in a course with a hidden forum and search for posts
@@ -50,9 +49,8 @@ Feature: The search forums block allows users to search for forum posts on cours
     When I log in as "student1"
     And I am on "Course 1" course homepage
     And "Search forums" "block" should exist
-    And I set the following fields to these values:
-      | searchform_search | message |
-    And I press "Go"
+    When I set the field "Search" to "message"
+    And I press "Search"
     Then I should see "No posts"
 
   Scenario: Use the search forum block in a course and search for posts
@@ -65,7 +63,6 @@ Feature: The search forums block allows users to search for forum posts on cours
     When I log in as "student1"
     And I am on "Course 1" course homepage
     And "Search forums" "block" should exist
-    And I set the following fields to these values:
-      | searchform_search | message |
-    And I press "Go"
+    When I set the field "Search" to "message"
+    And I press "Search"
     Then I should see "My subject"

blocks/search_forums/tests/behat/block_search_forums_frontpage.feature

@@ -17,15 +17,13 @@ Feature: The search forums block allows users to search for forum posts on front
   Scenario: Use the search forum block on the frontpage and search for posts as a user
     Given I log in as "student1"
     And I am on site homepage
-    When I set the following fields to these values:
-      | searchform_search | Moodle |
-    And I press "Go"
+    When I set the field "Search" to "Moodle"
+    And I press "Search"
     Then I should see "No posts"
 
   Scenario: Use the search forum block on the frontpage and search for posts as a guest
     Given I log in as "guest"
     And I am on site homepage
-    When I set the following fields to these values:
-      | searchform_search | Moodle |
-    And I press "Go"
+    When I set the field "Search" to "Moodle"
+    And I press "Search"
     Then I should see "No posts"

blocks/settings/renderer.php

@@ -144,11 +144,12 @@ class block_settings_renderer extends plugin_renderer_base {
 
     public function search_form(moodle_url $formtarget, $searchvalue) {
         $data = [
-                'action' => $formtarget->out(false),
-                'label' => get_string('searchinsettings', 'admin'),
-                'searchvalue' => $searchvalue
+            'action' => $formtarget,
+            'inputname' => 'query',
+            'searchstring' => get_string('searchinsettings', 'admin'),
+            'query' => $searchvalue
         ];
-        return $this->render_from_template('block_settings/search_form', $data);
+        return $this->render_from_template('core/search_input', $data);
     }
 
 }

cohort/index.php

@@ -103,19 +103,21 @@ if ($editcontrols = cohort_edit_controls($context, $baseurl)) {
 }
 
 // Add search form.
-$search  = html_writer::start_tag('form', array('id'=>'searchcohortquery', 'method'=>'get', 'class' => 'form-inline search-cohort'));
-$search .= html_writer::start_div('mb-1');
-$search .= html_writer::label(get_string('searchcohort', 'cohort'), 'cohort_search_q', true,
-        array('class' => 'mr-1')); // No : in form labels!
-$search .= html_writer::empty_tag('input', array('id' => 'cohort_search_q', 'type' => 'text', 'name' => 'search',
-        'value' => $searchquery, 'class' => 'form-control mr-1'));
-$search .= html_writer::empty_tag('input', array('type' => 'submit', 'value' => get_string('search', 'cohort'),
-        'class' => 'btn btn-secondary'));
-$search .= html_writer::empty_tag('input', array('type'=>'hidden', 'name'=>'contextid', 'value'=>$contextid));
-$search .= html_writer::empty_tag('input', array('type'=>'hidden', 'name'=>'showall', 'value'=>$showall));
-$search .= html_writer::end_div();
-$search .= html_writer::end_tag('form');
-echo $search;
+$hiddenfields = [
+    (object) ['name' => 'contextid', 'value' => $contextid],
+    (object) ['name' => 'showall', 'value' => $showall]
+];
+
+$data = [
+    'action' => new moodle_url('/cohort/index.php'),
+    'inputname' => 'search',
+    'searchstring' => get_string('search', 'cohort'),
+    'query' => $searchquery,
+    'hiddenfields' => $hiddenfields,
+    'extraclasses' => 'mb-3'
+];
+
+echo $OUTPUT->render_from_template('core/search_input', $data);
 
 // Output pagination bar.
 echo $OUTPUT->paging_bar($cohorts['totalcohorts'], $page, 25, $baseurl);

contentbank/amd/build/search.min.js

@@ -1,2 +1,2 @@
-define ("core_contentbank/search",["exports","jquery","core_contentbank/selectors","core/str","core/pending","core/utils"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);c=g(c);e=g(e);function g(a){return a&&a.__esModule?a:{default:a}}function h(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function i(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var i=a.apply(b,c);function f(a){h(i,d,e,f,g,"next",a)}function g(a){h(i,d,e,f,g,"throw",a)}f(void 0)})}}var j=function(){var a=new e.default,d=(0,b.default)(c.default.regions.contentbank);k(d);a.resolve()};a.init=j;var k=function(a){var b=a.find(c.default.elements.searchinput)[0];a.on("click",c.default.actions.search,function(c){c.preventDefault();l(a,b.value)});a.on("click",c.default.actions.clearSearch,function(c){c.preventDefault();b.value="";b.focus();l(a,b.value)});b.addEventListener("input",(0,f.debounce)(function(){l(a,b.value)},300))},l=function(){var a=i(regeneratorRuntime.mark(function a(b,e){var f,g,h,i,j;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:f=b.find(c.default.elements.clearsearch)[0];g=b.find(c.default.elements.searchicon)[0];h=b.find(c.default.elements.cbnavbarbreadcrumb)[0];i=b.find(c.default.elements.cbnavbartotalsearch)[0];j=m(b,e);if(!(0<e.length)){a.next=15;break}g.classList.add("d-none");f.classList.remove("d-none");h.classList.add("d-none");a.next=11;return(0,d.get_string)("itemsfound","core_contentbank",j.length);case 11:i.innerHTML=a.sent;i.classList.remove("d-none");a.next=19;break;case 15:f.classList.add("d-none");g.classList.remove("d-none");h.classList.remove("d-none");i.classList.add("d-none");case 19:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),m=function(a,b){var d=Array.from(a.find(c.default.elements.listitem)),e=[];d.forEach(function(a){var d=a.getAttribute("data-name");if(""===b||d.toLowerCase().includes(b.toLowerCase())){e.push(a);var f=a.querySelector(c.default.regions.cbcontentname);f.innerHTML=n(d,b);a.classList.remove("d-none")}else{a.classList.add("d-none")}});return e},n=function(a,b){var c=a;if(""!==b){var d=a.toLowerCase().indexOf(b.toLowerCase());if(-1<d){c=a.substr(0,d)+"<span class=\"matchtext\">"+a.substr(d,b.length)+"</span>"+a.substr(d+b.length)}}return c}});
+define ("core_contentbank/search",["exports","jquery","core_contentbank/selectors","core/str","core/pending","core/utils"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);c=g(c);e=g(e);function g(a){return a&&a.__esModule?a:{default:a}}function h(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function i(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var i=a.apply(b,c);function f(a){h(i,d,e,f,g,"next",a)}function g(a){h(i,d,e,f,g,"throw",a)}f(void 0)})}}var j=function(){var a=new e.default,d=(0,b.default)(c.default.regions.contentbank);k(d);a.resolve()};a.init=j;var k=function(a){var b=a.find(c.default.elements.searchinput)[0];a.on("click",c.default.actions.search,function(c){c.preventDefault();l(a,b.value)});a.on("click",c.default.actions.clearSearch,function(c){c.preventDefault();b.value="";b.focus();l(a,b.value)});b.addEventListener("input",(0,f.debounce)(function(){l(a,b.value)},300))},l=function(){var a=i(regeneratorRuntime.mark(function a(b,e){var f,g,h,i;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:f=b.find(c.default.actions.clearSearch)[0];g=b.find(c.default.elements.cbnavbarbreadcrumb)[0];h=b.find(c.default.elements.cbnavbartotalsearch)[0];i=m(b,e);if(!(0<e.length)){a.next=13;break}f.classList.remove("d-none");g.classList.add("d-none");a.next=9;return(0,d.get_string)("itemsfound","core_contentbank",i.length);case 9:h.innerHTML=a.sent;h.classList.remove("d-none");a.next=16;break;case 13:f.classList.add("d-none");g.classList.remove("d-none");h.classList.add("d-none");case 16:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),m=function(a,b){var d=Array.from(a.find(c.default.elements.listitem)),e=[];d.forEach(function(a){var d=a.getAttribute("data-name");if(""===b||d.toLowerCase().includes(b.toLowerCase())){e.push(a);var f=a.querySelector(c.default.regions.cbcontentname);f.innerHTML=n(d,b);a.classList.remove("d-none")}else{a.classList.add("d-none")}});return e},n=function(a,b){var c=a;if(""!==b){var d=a.toLowerCase().indexOf(b.toLowerCase());if(-1<d){c=a.substr(0,d)+"<span class=\"matchtext\">"+a.substr(d,b.length)+"</span>"+a.substr(d+b.length)}}return c}});
 //# sourceMappingURL=search.min.js.map

contentbank/amd/build/selectors.min.js

@@ -1,2 +1,2 @@
-define ("core_contentbank/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var b=function(a,b){return"[data-".concat(a,"=\"").concat(b,"\"]")},c={regions:{cbcontentname:b("region","cb-content-name"),contentbank:b("region","contentbank"),filearea:b("region","filearea")},actions:{search:b("action","searchcontent"),clearSearch:b("action","clearsearchcontent"),viewgrid:b("action","viewgrid"),viewlist:b("action","viewlist"),sortname:b("action","sortname"),sortdate:b("action","sortdate"),sortsize:b("action","sortsize"),sorttype:b("action","sorttype"),sortauthor:b("action","sortauthor")},elements:{listitem:".cb-listitem",cbnavbarbreadcrumb:".cb-navbar-breadbrumb",cbnavbartotalsearch:".cb-navbar-totalsearch",clearsearch:".input-group-append .clear-icon",searchicon:".input-group-append .search-icon",searchinput:"#searchinput",sortbutton:".cb-btnsort"}};a.default=c;return a.default});
+define ("core_contentbank/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var b=function(a,b){return"[data-".concat(a,"=\"").concat(b,"\"]")},c={regions:{cbcontentname:b("region","cb-content-name"),contentbank:b("region","contentbank"),filearea:b("region","filearea")},actions:{search:b("action","searchcontent"),clearSearch:b("action","clearsearch"),viewgrid:b("action","viewgrid"),viewlist:b("action","viewlist"),sortname:b("action","sortname"),sortdate:b("action","sortdate"),sortsize:b("action","sortsize"),sorttype:b("action","sorttype"),sortauthor:b("action","sortauthor")},elements:{listitem:".cb-listitem",cbnavbarbreadcrumb:".cb-navbar-breadbrumb",cbnavbartotalsearch:".cb-navbar-totalsearch",searchinput:"#searchinput",sortbutton:".cb-btnsort"}};a.default=c;return a.default});
 //# sourceMappingURL=selectors.min.js.map

contentbank/amd/build/selectors.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/selectors.js"],"names":["getDataSelector","name","value","regions","cbcontentname","contentbank","filearea","actions","search","clearSearch","viewgrid","viewlist","sortname","sortdate","sortsize","sorttype","sortauthor","elements","listitem","cbnavbarbreadcrumb","cbnavbartotalsearch","clearsearch","searchicon","searchinput","sortbutton"],"mappings":"+IAgCMA,CAAAA,CAAe,CAAG,SAACC,CAAD,CAAOC,CAAP,CAAiB,CACrC,sBAAgBD,CAAhB,eAAyBC,CAAzB,OACH,C,GAEc,CACXC,OAAO,CAAE,CACLC,aAAa,CAAEJ,CAAe,CAAC,QAAD,CAAW,iBAAX,CADzB,CAELK,WAAW,CAAEL,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLM,QAAQ,CAAEN,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CADE,CAMXO,OAAO,CAAE,CACLC,MAAM,CAAER,CAAe,CAAC,QAAD,CAAW,eAAX,CADlB,CAELS,WAAW,CAAET,CAAe,CAAC,QAAD,CAAW,oBAAX,CAFvB,CAGLU,QAAQ,CAAEV,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CAILW,QAAQ,CAAEX,CAAe,CAAC,QAAD,CAAW,UAAX,CAJpB,CAKLY,QAAQ,CAAEZ,CAAe,CAAC,QAAD,CAAW,UAAX,CALpB,CAMLa,QAAQ,CAAEb,CAAe,CAAC,QAAD,CAAW,UAAX,CANpB,CAOLc,QAAQ,CAAEd,CAAe,CAAC,QAAD,CAAW,UAAX,CAPpB,CAQLe,QAAQ,CAAEf,CAAe,CAAC,QAAD,CAAW,UAAX,CARpB,CASLgB,UAAU,CAAEhB,CAAe,CAAC,QAAD,CAAW,YAAX,CATtB,CANE,CAiBXiB,QAAQ,CAAE,CACNC,QAAQ,CAAE,cADJ,CAENC,kBAAkB,CAAE,uBAFd,CAGNC,mBAAmB,CAAE,wBAHf,CAINC,WAAW,CAAE,iCAJP,CAKNC,UAAU,CAAE,kCALN,CAMNC,WAAW,CAAE,cANP,CAONC,UAAU,CAAE,aAPN,CAjBC,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the contentbank interface.\n *\n * @module     core_contentbank/selectors\n * @package    core_contentbank\n * @copyright  2020 Sara Arjona <[email protected]>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * A small helper function to build queryable data selectors.\n *\n * @method getDataSelector\n * @param {String} name\n * @param {String} value\n * @return {string}\n */\nconst getDataSelector = (name, value) => {\n    return `[data-${name}=\"${value}\"]`;\n};\n\nexport default {\n    regions: {\n        cbcontentname: getDataSelector('region', 'cb-content-name'),\n        contentbank: getDataSelector('region', 'contentbank'),\n        filearea: getDataSelector('region', 'filearea')\n    },\n    actions: {\n        search: getDataSelector('action', 'searchcontent'),\n        clearSearch: getDataSelector('action', 'clearsearchcontent'),\n        viewgrid: getDataSelector('action', 'viewgrid'),\n        viewlist: getDataSelector('action', 'viewlist'),\n        sortname: getDataSelector('action', 'sortname'),\n        sortdate: getDataSelector('action', 'sortdate'),\n        sortsize: getDataSelector('action', 'sortsize'),\n        sorttype: getDataSelector('action', 'sorttype'),\n        sortauthor: getDataSelector('action', 'sortauthor'),\n    },\n    elements: {\n        listitem: '.cb-listitem',\n        cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',\n        cbnavbartotalsearch: '.cb-navbar-totalsearch',\n        clearsearch: '.input-group-append .clear-icon',\n        searchicon: '.input-group-append .search-icon',\n        searchinput: '#searchinput',\n        sortbutton: '.cb-btnsort'\n    },\n};\n"],"file":"selectors.min.js"}
+{"version":3,"sources":["../src/selectors.js"],"names":["getDataSelector","name","value","regions","cbcontentname","contentbank","filearea","actions","search","clearSearch","viewgrid","viewlist","sortname","sortdate","sortsize","sorttype","sortauthor","elements","listitem","cbnavbarbreadcrumb","cbnavbartotalsearch","searchinput","sortbutton"],"mappings":"+IAgCMA,CAAAA,CAAe,CAAG,SAACC,CAAD,CAAOC,CAAP,CAAiB,CACrC,sBAAgBD,CAAhB,eAAyBC,CAAzB,OACH,C,GAEc,CACXC,OAAO,CAAE,CACLC,aAAa,CAAEJ,CAAe,CAAC,QAAD,CAAW,iBAAX,CADzB,CAELK,WAAW,CAAEL,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLM,QAAQ,CAAEN,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CADE,CAMXO,OAAO,CAAE,CACLC,MAAM,CAAER,CAAe,CAAC,QAAD,CAAW,eAAX,CADlB,CAELS,WAAW,CAAET,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLU,QAAQ,CAAEV,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CAILW,QAAQ,CAAEX,CAAe,CAAC,QAAD,CAAW,UAAX,CAJpB,CAKLY,QAAQ,CAAEZ,CAAe,CAAC,QAAD,CAAW,UAAX,CALpB,CAMLa,QAAQ,CAAEb,CAAe,CAAC,QAAD,CAAW,UAAX,CANpB,CAOLc,QAAQ,CAAEd,CAAe,CAAC,QAAD,CAAW,UAAX,CAPpB,CAQLe,QAAQ,CAAEf,CAAe,CAAC,QAAD,CAAW,UAAX,CARpB,CASLgB,UAAU,CAAEhB,CAAe,CAAC,QAAD,CAAW,YAAX,CATtB,CANE,CAiBXiB,QAAQ,CAAE,CACNC,QAAQ,CAAE,cADJ,CAENC,kBAAkB,CAAE,uBAFd,CAGNC,mBAAmB,CAAE,wBAHf,CAINC,WAAW,CAAE,cAJP,CAKNC,UAAU,CAAE,aALN,CAjBC,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the contentbank interface.\n *\n * @module     core_contentbank/selectors\n * @package    core_contentbank\n * @copyright  2020 Sara Arjona <[email protected]>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * A small helper function to build queryable data selectors.\n *\n * @method getDataSelector\n * @param {String} name\n * @param {String} value\n * @return {string}\n */\nconst getDataSelector = (name, value) => {\n    return `[data-${name}=\"${value}\"]`;\n};\n\nexport default {\n    regions: {\n        cbcontentname: getDataSelector('region', 'cb-content-name'),\n        contentbank: getDataSelector('region', 'contentbank'),\n        filearea: getDataSelector('region', 'filearea')\n    },\n    actions: {\n        search: getDataSelector('action', 'searchcontent'),\n        clearSearch: getDataSelector('action', 'clearsearch'),\n        viewgrid: getDataSelector('action', 'viewgrid'),\n        viewlist: getDataSelector('action', 'viewlist'),\n        sortname: getDataSelector('action', 'sortname'),\n        sortdate: getDataSelector('action', 'sortdate'),\n        sortsize: getDataSelector('action', 'sortsize'),\n        sorttype: getDataSelector('action', 'sorttype'),\n        sortauthor: getDataSelector('action', 'sortauthor'),\n    },\n    elements: {\n        listitem: '.cb-listitem',\n        cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',\n        cbnavbartotalsearch: '.cb-navbar-totalsearch',\n        searchinput: '#searchinput',\n        sortbutton: '.cb-btnsort'\n    },\n};\n"],"file":"selectors.min.js"}

contentbank/amd/src/search.js

@@ -80,8 +80,7 @@ const registerListenerEvents = (root) => {
  * @param {String} searchQuery The search query.
  */
 const toggleSearchResultsView = async(body, searchQuery) => {
-    const clearSearchButton = body.find(selectors.elements.clearsearch)[0];
-    const searchIcon = body.find(selectors.elements.searchicon)[0];
+    const clearSearchButton = body.find(selectors.actions.clearSearch)[0];
 
     const navbarBreadcrumb = body.find(selectors.elements.cbnavbarbreadcrumb)[0];
     const navbarTotal = body.find(selectors.elements.cbnavbartotalsearch)[0];
@@ -91,7 +90,6 @@ const toggleSearchResultsView = async(body, searchQuery) => {
         // As the search query is present, search results should be displayed.
 
         // Display the "clear" search button in the activity chooser search bar.
-        searchIcon.classList.add('d-none');
         clearSearchButton.classList.remove('d-none');
 
         // Change the cb-navbar to display total items found.
@@ -103,7 +101,6 @@ const toggleSearchResultsView = async(body, searchQuery) => {
 
         // Hide the "clear" search button in the activity chooser search bar.
         clearSearchButton.classList.add('d-none');
-        searchIcon.classList.remove('d-none');
 
         // Display again the breadcrumb in the navbar.
         navbarBreadcrumb.classList.remove('d-none');

contentbank/amd/src/selectors.js

@@ -42,7 +42,7 @@ export default {
     },
     actions: {
         search: getDataSelector('action', 'searchcontent'),
-        clearSearch: getDataSelector('action', 'clearsearchcontent'),
+        clearSearch: getDataSelector('action', 'clearsearch'),
         viewgrid: getDataSelector('action', 'viewgrid'),
         viewlist: getDataSelector('action', 'viewlist'),
         sortname: getDataSelector('action', 'sortname'),
@@ -55,8 +55,6 @@ export default {
         listitem: '.cb-listitem',
         cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',
         cbnavbartotalsearch: '.cb-navbar-totalsearch',
-        clearsearch: '.input-group-append .clear-icon',
-        searchicon: '.input-group-append .search-icon',
         searchinput: '#searchinput',
         sortbutton: '.cb-btnsort'
     },

contentbank/templates/bankcontent/search.mustache

@@ -18,34 +18,16 @@
     @template core_contentbank/bankcontent/search
 
     Example context (json):
-    {}
+    {
+    }
 
 }}
-<div class="searchbar input-group" role="search">
-    <label for="searchinput">
-        <span class="sr-only">{{#str}} searchcontentbankbyname, contentbank {{/str}}</span>
-    </label>
-    <input type="text"
-           id="searchinput"
-           class="form-control searchinput border-right-0"
-           placeholder="{{#str}} search, core {{/str}}"
-           name="search"
-           autocomplete="off"
-    >
-    <div class="input-group-append">
-        <div class="input-group-text bg-transparent">
-            <div class="search-icon">
-                <button class="btn p-0 align-baseline icon-no-margin" data-action="searchcontent"
-                    aria-label="{{#str}} search, core {{/str}}">
-                    <span class="d-flex" aria-hidden="true">{{#pix}} a/search, core {{/pix}}</span>
-                </button>
-            </div>
-            <div class="clear-icon d-none">
-                <button class="btn p-0 align-baseline icon-no-margin" data-action="clearsearchcontent"
-                    aria-label="{{#str}} clearsearch, core {{/str}}">
-                    <span class="d-flex" aria-hidden="true">{{#pix}} e/cancel_solid_circle, core {{/pix}}</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
+
+{{< core/search_input_auto }}
+    {{$label}}{{#str}}
+        searchcontentbankbyname, contentbank
+    {{/str}}{{/label}}
+    {{$placeholder}}{{#str}}
+        search, core
+    {{/str}}{{/placeholder}}
+{{/ core/search_input_auto }}

course/amd/build/local/activitychooser/selectors.min.js

@@ -1,2 +1,2 @@
-define ("core_course/local/activitychooser/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var b=function(a,b){return"[data-".concat(a,"=\"").concat(b,"\"]")},c={regions:{chooser:b("region","chooser-container"),getSectionChooserOptions:function getSectionChooserOptions(a){return"".concat(a," ").concat(b("region","chooser-options-container"))},chooserOption:{container:b("region","chooser-option-container"),actions:b("region","chooser-option-actions-container"),info:b("region","chooser-option-info-container")},chooserSummary:{container:b("region","chooser-option-summary-container"),content:b("region","chooser-option-summary-content-container"),header:b("region","summary-header"),actions:b("region","chooser-option-summary-actions-container")},carousel:b("region","carousel"),help:b("region","help"),modules:b("region","modules"),favouriteTabNav:b("region","favourite-tab-nav"),recommendedTabNav:b("region","recommended-tab-nav"),defaultTabNav:b("region","default-tab-nav"),activityTabNav:b("region","activity-tab-nav"),resourceTabNav:b("region","resources-tab-nav"),favouriteTab:b("region","favourites"),recommendedTab:b("region","recommended"),defaultTab:b("region","default"),activityTab:b("region","activity"),resourceTab:b("region","resources"),getModuleSelector:function getModuleSelector(a){return"[role=\"menuitem\"][data-modname=\"".concat(a,"\"]")},searchResults:b("region","search-results-container"),searchResultItems:b("region","search-result-items-container")},actions:{optionActions:{showSummary:b("action","show-option-summary"),manageFavourite:b("action","manage-module-favourite")},addChooser:b("action","add-chooser-option"),closeOption:b("action","close-chooser-option-summary"),hide:b("action","hide"),search:b("action","search"),clearSearch:b("action","clearsearch")},render:{favourites:b("render","favourites-area")},elements:{section:".section",sectionmodchooser:"button.section-modchooser-link",sitemenu:".block_site_main_menu",sitetopic:"div.sitetopic",tab:"a[data-toggle=\"tab\"]",activetab:"a[data-toggle=\"tab\"][aria-selected=\"true\"]",visibletabs:"a[data-toggle=\"tab\"]:not(.d-none)",searchicon:".input-group-append .search-icon",clearsearch:".input-group-append .clear"}};a.default=c;return a.default});
+define ("core_course/local/activitychooser/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var b=function(a,b){return"[data-".concat(a,"=\"").concat(b,"\"]")},c={regions:{chooser:b("region","chooser-container"),getSectionChooserOptions:function getSectionChooserOptions(a){return"".concat(a," ").concat(b("region","chooser-options-container"))},chooserOption:{container:b("region","chooser-option-container"),actions:b("region","chooser-option-actions-container"),info:b("region","chooser-option-info-container")},chooserSummary:{container:b("region","chooser-option-summary-container"),content:b("region","chooser-option-summary-content-container"),header:b("region","summary-header"),actions:b("region","chooser-option-summary-actions-container")},carousel:b("region","carousel"),help:b("region","help"),modules:b("region","modules"),favouriteTabNav:b("region","favourite-tab-nav"),recommendedTabNav:b("region","recommended-tab-nav"),defaultTabNav:b("region","default-tab-nav"),activityTabNav:b("region","activity-tab-nav"),resourceTabNav:b("region","resources-tab-nav"),favouriteTab:b("region","favourites"),recommendedTab:b("region","recommended"),defaultTab:b("region","default"),activityTab:b("region","activity"),resourceTab:b("region","resources"),getModuleSelector:function getModuleSelector(a){return"[role=\"menuitem\"][data-modname=\"".concat(a,"\"]")},searchResults:b("region","search-results-container"),searchResultItems:b("region","search-result-items-container")},actions:{optionActions:{showSummary:b("action","show-option-summary"),manageFavourite:b("action","manage-module-favourite")},addChooser:b("action","add-chooser-option"),closeOption:b("action","close-chooser-option-summary"),hide:b("action","hide"),search:b("action","search"),clearSearch:b("action","clearsearch")},render:{favourites:b("render","favourites-area")},elements:{section:".section",sectionmodchooser:"button.section-modchooser-link",sitemenu:".block_site_main_menu",sitetopic:"div.sitetopic",tab:"a[data-toggle=\"tab\"]",activetab:"a[data-toggle=\"tab\"][aria-selected=\"true\"]",visibletabs:"a[data-toggle=\"tab\"]:not(.d-none)"}};a.default=c;return a.default});
 //# sourceMappingURL=selectors.min.js.map

course/amd/src/local/activitychooser/dialogue.js

@@ -466,8 +466,7 @@ const toggleSearchResultsView = async(modal, mappedModules, searchQuery) => {
     const modalBody = modal.getBody()[0];
     const searchResultsContainer = modalBody.querySelector(selectors.regions.searchResults);
     const chooserContainer = modalBody.querySelector(selectors.regions.chooser);
-    const clearSearchButton = modalBody.querySelector(selectors.elements.clearsearch);
-    const searchIcon = modalBody.querySelector(selectors.elements.searchicon);
+    const clearSearchButton = modalBody.querySelector(selectors.actions.clearSearch);
 
     if (searchQuery.length > 0) { // Search query is present.
         const searchResultsData = searchModules(mappedModules, searchQuery);
@@ -481,7 +480,6 @@ const toggleSearchResultsView = async(modal, mappedModules, searchQuery) => {
             initChooserOptionsKeyboardNavigation(modalBody, mappedModules, searchResultItemsContainer, modal);
         }
         // Display the "clear" search button in the activity chooser search bar.
-        searchIcon.classList.add('d-none');
         clearSearchButton.classList.remove('d-none');
         // Hide the default chooser options container.
         chooserContainer.setAttribute('hidden', 'hidden');
@@ -490,7 +488,6 @@ const toggleSearchResultsView = async(modal, mappedModules, searchQuery) => {
     } else { // Search query is not present.
         // Hide the "clear" search button in the activity chooser search bar.
         clearSearchButton.classList.add('d-none');
-        searchIcon.classList.remove('d-none');
         // Hide the search results container.
         searchResultsContainer.setAttribute('hidden', 'hidden');
         // Display the default chooser options container.

course/amd/src/local/activitychooser/selectors.js

@@ -86,8 +86,6 @@ export default {
         sitetopic: 'div.sitetopic',
         tab: 'a[data-toggle="tab"]',
         activetab: 'a[data-toggle="tab"][aria-selected="true"]',
-        visibletabs: 'a[data-toggle="tab"]:not(.d-none)',
-        searchicon: '.input-group-append .search-icon',
-        clearsearch: '.input-group-append .clear'
+        visibletabs: 'a[data-toggle="tab"]:not(.d-none)'
     },
 };

course/classes/management_renderer.php

@@ -1291,56 +1291,19 @@ class core_course_management_renderer extends plugin_renderer_base {
      * Renders html to display a course search form
      *
      * @param string $value default value to populate the search field
-     * @param string $format display format - 'plain' (default), 'short' or 'navbar'
      * @return string
      */
-    public function course_search_form($value = '', $format = 'plain') {
-        static $count = 0;
-        $formid = 'coursesearch';
-        if ((++$count) > 1) {
-            $formid .= $count;
-        }
+    public function course_search_form($value = '') {
 
-        switch ($format) {
-            case 'navbar' :
-                $formid = 'coursesearchnavbar';
-                $inputid = 'navsearchbox';
-                $inputsize = 20;
-                break;
-            case 'short' :
-                $inputid = 'shortsearchbox';
-                $inputsize = 12;
-                break;
-            default :
-                $inputid = 'coursesearchbox';
-                $inputsize = 30;
-        }
-
-        $strsearchcourses = get_string("searchcourses");
-        $searchurl = new moodle_url('/course/management.php');
-
-        $output = html_writer::start_div('row');
-        $output .= html_writer::start_div('col-md-12');
-        $output .= html_writer::start_tag('form', array('class' => 'card', 'id' => $formid,
-                'action' => $searchurl, 'method' => 'get'));
-        $output .= html_writer::start_tag('fieldset', array('class' => 'coursesearchbox invisiblefieldset'));
-        $output .= html_writer::tag('legend', $this->output->heading($strsearchcourses.': ', 2, 'm-0'),
-                array('class' => 'card-header'));
-        $output .= html_writer::start_div('card-body');
-        $output .= html_writer::start_div('input-group col-sm-6 col-lg-4 m-auto');
-        $output .= html_writer::empty_tag('input', array('class' => 'form-control', 'type' => 'text', 'id' => $inputid,
-                'size' => $inputsize, 'name' => 'search', 'value' => s($value), 'aria-label' => get_string('searchcourses')));
-        $output .= html_writer::start_tag('span', array('class' => 'input-group-btn'));
-        $output .= html_writer::tag('button', get_string('go'), array('class' => 'btn btn-primary', 'type' => 'submit'));
-        $output .= html_writer::end_tag('span');
-        $output .= html_writer::end_div();
-        $output .= html_writer::end_div();
-        $output .= html_writer::end_tag('fieldset');
-        $output .= html_writer::end_tag('form');
-        $output .= html_writer::end_div();
-        $output .= html_writer::end_div();
-
-        return $output;
+        $data = [
+            'action' => new moodle_url('/course/management.php'),
+            'btnclass' => 'btn-primary',
+            'extraclasses' => 'my-3 d-flex justify-content-center',
+            'inputname' => 'search',
+            'searchstring' => get_string('searchcourses'),
+            'value' => $value
+        ];
+        return $this->render_from_template('core/search_input', $data);
     }
 
     /**

course/management.php

@@ -487,6 +487,9 @@ if (count($notificationsfail) > 0) {
 }
 
 // Start the management form.
+
+echo $renderer->course_search_form($search);
+
 echo $renderer->management_form_start();
 
 echo $renderer->accessible_skipto_links($displaycategorylisting, $displaycourselisting, $displaycoursedetail);
@@ -518,6 +521,5 @@ echo $renderer->grid_end();
 
 // End of the management form.
 echo $renderer->management_form_end();
-echo $renderer->course_search_form($search);
 
 echo $renderer->footer();

course/renderer.php

@@ -399,48 +399,22 @@ class core_course_renderer extends plugin_renderer_base {
     }
 
     /**
-     * Renders html to display a course search form.
+     * Renders html to display a course search form
      *
      * @param string $value default value to populate the search field
-     * @param string $format display format - 'plain' (default), 'short' or 'navbar'
      * @return string
      */
-    public function course_search_form($value = '', $format = 'plain') {
-        static $count = 0;
-        $formid = 'coursesearch';
-        if ((++$count) > 1) {
-            $formid .= $count;
-        }
+    public function course_search_form($value = '') {
 
-        switch ($format) {
-            case 'navbar' :
-                $formid = 'coursesearchnavbar';
-                $inputid = 'navsearchbox';
-                $inputsize = 20;
-                break;
-            case 'short' :
-                $inputid = 'shortsearchbox';
-                $inputsize = 12;
-                break;
-            default :
-                $inputid = 'coursesearchbox';
-                $inputsize = 30;
-        }
-
-        $data = new stdClass();
-        $data->searchurl = \core_search\manager::get_course_search_url()->out(false);
-        $data->id = $formid;
-        $data->inputid = $inputid;
-        $data->inputsize = $inputsize;
-        $data->value = $value;
-        $data->areaids = 'core_course-course';
-
-        if ($format != 'navbar') {
-            $helpicon = new \help_icon('coursesearch', 'core');
-            $data->helpicon = $helpicon->export_for_template($this);
-        }
-
-        return $this->render_from_template('core_course/course_search_form', $data);
+        $data = [
+            'action' => \core_search\manager::get_course_search_url(),
+            'btnclass' => 'btn-primary',
+            'inputname' => 'q',
+            'searchstring' => get_string('searchcourses'),
+            'hiddenfields' => (object) ['name' => 'areaids', 'value' => 'core_course-course'],
+            'query' => $value
+        ];
+        return $this->render_from_template('core/search_input', $data);
     }
 
     /**
@@ -1890,6 +1864,13 @@ class core_course_renderer extends plugin_renderer_base {
     public function search_courses($searchcriteria) {
         global $CFG;
         $content = '';
+
+        $search = '';
+        if (!empty($searchcriteria['search'])) {
+            $search = $searchcriteria['search'];
+        }
+        $content .= $this->course_search_form($search);
+
         if (!empty($searchcriteria)) {
             // print search results
 
@@ -1931,18 +1912,6 @@ class core_course_renderer extends plugin_renderer_base {
                 $content .= $this->heading(get_string('searchresults'). ": $totalcount");
                 $content .= $courseslist;
             }
-
-            if (!empty($searchcriteria['search'])) {
-                // print search form only if there was a search by search string, otherwise it is confusing
-                $content .= $this->box_start('generalbox mdl-align');
-                $content .= $this->course_search_form($searchcriteria['search']);
-                $content .= $this->box_end();
-            }
-        } else {
-            // just print search form
-            $content .= $this->box_start('generalbox mdl-align');
-            $content .= $this->course_search_form();
-            $content .= $this->box_end();
         }
         return $content;
     }
@@ -2464,7 +2433,7 @@ class core_course_renderer extends plugin_renderer_base {
                     break;
 
                 case FRONTPAGECOURSESEARCH:
-                    $output .= $this->box($this->course_search_form('', 'short'), 'mdl-align');
+                    $output .= $this->box($this->course_search_form(''), 'd-flex justify-content-center');
                     break;
 
             }

course/search.php

@@ -95,7 +95,7 @@ if (empty($searchcriteria)) {
         $aurl = new moodle_url('/course/management.php', $searchcriteria);
         $searchform = $OUTPUT->single_button($aurl, get_string('managecourses'), 'get');
     } else {
-        $searchform = $courserenderer->course_search_form($search, 'navbar');
+        $searchform = $courserenderer->course_search_form($search);
     }
     $PAGE->set_button($searchform);
 

course/templates/local/activitychooser/search.mustache

@@ -22,31 +22,14 @@
     Example context (json):
     {}
 }}
-<div class="searchbar input-group" role="search">
-    <label for="searchinput">
-        <span class="sr-only">{{#str}} searchactivities, core {{/str}}</span>
-    </label>
-    <input type="text"
-           data-action="search"
-           id="searchinput"
-           class="form-control searchinput h-auto border-right-0 rounded-left px-3 py-2"
-           placeholder="{{#str}} search, core {{/str}}"
-           name="search"
-           autocomplete="off"
-    >
-    <div class="input-group-append">
-        <div class="input-group-text border-left-0 rounded-right bg-transparent px-3 py-2">
-            <div class="search-icon">
-                {{#pix}} a/search, core {{/pix}}
-            </div>
-            <div class="clear d-none">
-                <button class="btn p-0" data-action="clearsearch">
-                    <span class="d-flex" aria-hidden="true">{{#pix}} e/cancel_solid_circle, core {{/pix}}</span>
-                    <span class="sr-only">{{#str}} clearsearch, core {{/str}}</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
+{{< core/search_input_auto }}
+    {{$label}}{{#str}}
+        searchactivities, core
+    {{/str}}{{/label}}
+    {{$placeholder}}{{#str}}
+        search, core
+    {{/str}}{{/placeholder}}
+{{/ core/search_input_auto }}
+
 <div class="searchresultscontainer" data-region="search-results-container" hidden="hidden" aria-live="polite">
 </div>

course/tests/behat/course_search.feature

@@ -20,8 +20,8 @@ Feature: Courses can be searched for and moved in bulk.
   Scenario: Search courses finds correct results
     Given I log in as "admin"
     And I go to the courses management page
-    When I set the field "coursesearchbox" to "Biology"
-    And I press "Go"
+    When I set the field "Search" to "Biology"
+    And I press "Search"
     Then I should see "Biology Y1"
     And I should see "Biology Y2"
     And I should not see "English Y1"
@@ -31,8 +31,8 @@ Feature: Courses can be searched for and moved in bulk.
   Scenario: Search courses and move results in bulk
     Given I log in as "admin"
     And I go to the courses management page
-    And I set the field "coursesearchbox" to "Biology"
-    And I press "Go"
+    And I set the field "Search" to "Biology"
+    And I press "Search"
     When I select course "Biology Y1" in the management interface
     And I select course "Biology Y2" in the management interface
     And I set the field "menumovecoursesto" to "Science"

lang/en/moodle.php

@@ -2096,6 +2096,7 @@ $string['today'] = 'Today';
 $string['todaylogs'] = 'Today\'s logs';
 $string['toeveryone'] = 'to everyone';
 $string['toggleemojipicker'] = 'Toggle emoji picker';
+$string['togglesearch'] = 'Toggle search input';
 $string['toomanybounces'] = 'That email address has had too many bounces. You <b>must</b> change it to continue.';
 $string['toomanytags'] = 'This search included too many tags; some will have been ignored.';
 $string['toomanytoshow'] = 'There are too many users to show.';

lib/amd/build/search-input.min.js

@@ -1,2 +0,0 @@
-define ("core/search-input",["jquery"],function(a){var b=null,c=function(a){if(b.hasClass("expanded")){e()}else{d(a)}},d=function(c){var d=a(document).width();if("keydown"===c.type&&13!==c.keyCode&&32!==c.keyCode){return}if(767>=d&&("click"===c.type||"keydown"===c.type)){f();return}else if(767>=d){return}if("keydown"===c.type){c.preventDefault()}b.addClass("expanded");b.find("form").addClass("expanded");b.find("input").focus()},e=function(){b.removeClass("expanded");b.find("form").removeClass("expanded")},f=function(){b.find("form").submit()};return{init:function init(d){b=a("#"+d);b.on("click mouseover keydown","div",c)}}});
-//# sourceMappingURL=search-input.min.js.map

lib/amd/src/search-input.js

@@ -1,122 +0,0 @@
-// This file is part of Moodle - http://moodle.org/
-//
-// Moodle is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// Moodle is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
-
-/**
- * Search box.
- *
- * @module     core/search-input
- * @class      search-input
- * @package    core
- * @copyright  2016 David Monllao {@link http://www.davidmonllao.com}
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- * @since      Moodle 3.1
- */
-define(['jquery'], function($) {
-
-    /**
-     * This search box div node.
-     *
-     * @private
-     */
-    var wrapper = null;
-
-    /**
-     * Toggles the form visibility.
-     *
-     * @param {Event} ev
-     * @method toggleForm
-     * @private
-     */
-    var toggleForm = function(ev) {
-
-        if (wrapper.hasClass('expanded')) {
-            hideForm();
-        } else {
-            showForm(ev);
-        }
-    };
-
-    /**
-     * Shows the form or submits it depending on the window size.
-     *
-     * @param {Event} ev
-     * @method showForm
-     * @private
-     */
-    var showForm = function(ev) {
-
-        var windowWidth = $(document).width();
-
-        // We are only interested in enter and space keys (accessibility).
-        if (ev.type === 'keydown' && ev.keyCode !== 13 && ev.keyCode !== 32) {
-            return;
-        }
-
-        if (windowWidth <= 767 && (ev.type === 'click' || ev.type === 'keydown')) {
-            // Move to the search page when using small window sizes as the input requires too much space.
-            submitForm();
-            return;
-        } else if (windowWidth <= 767) {
-            // Ignore mousedown events in while using small window sizes.
-            return;
-        }
-
-        if (ev.type === 'keydown') {
-            // We don't want to submit the form unless the user hits enter.
-            ev.preventDefault();
-        }
-
-        wrapper.addClass('expanded');
-        wrapper.find('form').addClass('expanded');
-        wrapper.find('input').focus();
-    };
-
-    /**
-     * Hides the form.
-     *
-     * @method hideForm
-     * @private
-     */
-    var hideForm = function() {
-        wrapper.removeClass('expanded');
-        wrapper.find('form').removeClass('expanded');
-    };
-
-    /**
-     * Submits the form.
-     *
-     * @param {Event} ev
-     * @method submitForm
-     * @private
-     */
-    var submitForm = function() {
-        wrapper.find('form').submit();
-    };
-
-    return /** @alias module:core/search-input */ {
-        // Public variables and functions.
-
-        /**
-         * Assigns listeners to the requested select box.
-         *
-         * @method init
-         * @param {Number} id The search wrapper div id
-         */
-        init: function(id) {
-            wrapper = $('#' + id);
-            wrapper.on('click mouseover keydown', 'div', toggleForm);
-        }
-    };
-});

lib/outputrenderers.php

@@ -3222,31 +3222,13 @@ EOD;
             return '';
         }
 
-        if ($id == false) {
-            $id = uniqid();
-        } else {
-            // Needs to be cleaned, we use it for the input id.
-            $id = clean_param($id, PARAM_ALPHANUMEXT);
-        }
-
-        // JS to animate the form.
-        $this->page->requires->js_call_amd('core/search-input', 'init', array($id));
-
-        $searchicon = html_writer::tag('div', $this->pix_icon('a/search', get_string('search', 'search'), 'moodle'),
-            array('role' => 'button', 'tabindex' => 0));
-        $formattrs = array('class' => 'search-input-form', 'action' => $CFG->wwwroot . '/search/index.php');
-        $inputattrs = array('type' => 'text', 'name' => 'q', 'placeholder' => get_string('search', 'search'),
-            'size' => 13, 'tabindex' => -1, 'id' => 'id_q_' . $id, 'class' => 'form-control');
-
-        $contents = html_writer::tag('label', get_string('enteryoursearchquery', 'search'),
-            array('for' => 'id_q_' . $id, 'class' => 'accesshide')) . html_writer::empty_tag('input', $inputattrs);
-        if ($this->page->context && $this->page->context->contextlevel !== CONTEXT_SYSTEM) {
-            $contents .= html_writer::empty_tag('input', ['type' => 'hidden',
-                    'name' => 'context', 'value' => $this->page->context->id]);
-        }
-        $searchinput = html_writer::tag('form', $contents, $formattrs);
-
-        return html_writer::tag('div', $searchicon . $searchinput, array('class' => 'search-input-wrapper nav-link', 'id' => $id));
+        $data = [
+            'action' => new moodle_url('/search/index.php'),
+            'hiddenfields' => (object) ['name' => 'context', 'value' => $this->page->context->id],
+            'inputname' => 'q',
+            'searchstring' => get_string('search'),
+            ];
+        return $this->render_from_template('core/search_input_navbar', $data);
     }
 
     /**

lib/templates/checkbox.mustache

@@ -15,22 +15,20 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template block_settings/search_form
+    @template core/checkbox
 
-    This template renders the search form.
+    Chooser search template.
 
     Example context (json):
     {
-        "action": "https://domain.example/admin/search.php",
-        "label": "Search in settings",
-        "searchvalue": "Find this setting",
-        "quote": "Search"
+        "name": "fullsearch",
+        "id": "fullsearch",
+        "checked": true,
+        "value": "1",
+        "label": "Reset options"
     }
 }}
-<form method="get" action="{{action}}" class="adminsearchform form-inline" role="search">
-    <div class="form-group">
-        <label class="sr-only" for="adminsearchquery">{{label}}</label>
-        <input class="form-control" type="text" name="query" value="{{searchvalue}}" id="adminsearchquery" size="10">
-    </div>
-    <input type="submit" class="btn btn-secondary" value={{#quote}}{{#str}}search{{/str}}{{/quote}}>
-</form>
+<div class="custom-control custom-checkbox">
+  <input type="checkbox" name={{{ name }}} class="custom-control-input" value={{{ value }}} id="{{{ id }}}" {{#checked}} checked="checked" {{/checked}}>
+  <label class="custom-control-label" for="{{{ id }}}">{{{ label }}}</label>
+</div>

lib/templates/popover_region.mustache

@@ -36,7 +36,7 @@
 <div class="popover-region collapsed {{$classes}}{{/classes}}"
     {{$attributes}}{{/attributes}}
     data-region="popover-region">
-    <div class="popover-region-toggle nav-link"
+    <div class="popover-region-toggle nav-link icon-no-margin"
         data-region="popover-region-toggle"
         role="button"
         aria-controls="popover-region-container-{{uniqid}}"

lib/templates/search_input.mustache

@@ -0,0 +1,75 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/search_input
+
+    Simple search input.
+
+    Example context (json):
+    {
+        "action": "https://moodle.local/admin/search.php",
+        "extraclasses": "my-2",
+        "inputname": "search",
+        "inform": false,
+        "searchstring": "Search settings",
+        "value": "policy",
+        "btnclass": "primary",
+        "query": "themedesigner",
+        "hiddenfields": [
+            {
+                "name": "context",
+                "value": "11"
+            }
+        ]
+    }
+}}
+<div class="simplesearchform {{{ extraclasses }}}">
+    {{^inform}}
+    <form autocomplete="off" action="{{{ action }}}" method="get" accept-charset="utf-8" class="mform form-inline simplesearchform">
+    {{/inform}}
+    {{#hiddenfields}}
+        <input type="hidden" name="{{ name }}" value="{{ value }}">
+    {{/hiddenfields}}
+    <div class="input-group">
+        <label for="searchinput-{{uniqid}}">
+            <span class="sr-only">{{{ searchstring }}}</span>
+        </label>
+        <input type="text"
+           id="searchinput-{{uniqid}}"
+           class="form-control"
+           placeholder="{{{ searchstring }}}"
+           aria-label="{{{ searchstring }}}"
+           name="{{{ inputname }}}"
+           data-region="input"
+           autocomplete="off"
+           value="{{{ query }}}"
+        >
+        <div class="input-group-append">
+            <button type="submit" class="btn {{^btnclass}}btn-submit{{/btnclass}} {{{ btnclass }}} search-icon">
+                {{#pix}} a/search, core {{/pix}}
+                <span class="sr-only">{{{ searchstring }}}</span>
+            </button>
+        </div>
+
+    </div>
+    {{#otherfields}}
+        <div  class="ml-2">{{{ otherfields }}}</div>
+    {{/otherfields}}
+{{^inform}}
+    </form>
+{{/inform}}
+</div>

lib/templates/search_input_auto.mustache

@@ -0,0 +1,63 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/search_input_auto
+
+    Search input that auto searches.
+
+    Example context (json):
+    {
+        "action": "https://moodle.local/admin/search.php",
+        "extraclasses": "my-2",
+        "inputname": "search",
+        "searchstring": "Search settings",
+        "sesskey": "sesskey",
+        "value": "policy",
+        "btnclass": "primary",
+        "hiddenfields": [
+            {
+                "name": "course",
+                "value": "11"
+            }
+        ]
+    }
+}}
+<div id="searchform-auto-{{uniqid}}" class="form-inline simplesearchform">
+    <div class="input-group searchbar" role="search">
+        <label for="searchinput">
+            <span class="sr-only">{{$label}}{{#str}} search, core {{/str}}{{/label}}</span>
+        </label>
+        <input
+           type="text"
+           data-region="input"
+           data-action="search"
+           id="searchinput"
+           class="form-control withclear"
+           placeholder="{{$placeholder}}{{#str}} search, core {{/str}}{{/placeholder}}"
+           name="search"
+           autocomplete="off"
+        >
+        <button
+            class="btn btn-clear d-none"
+            data-action="clearsearch"
+            type="button"
+        >
+           {{#pix}} e/cancel, core {{/pix}}
+            <span class="sr-only">{{#str}} clearsearch, core {{/str}}</span>
+        </button>
+    </div>
+</div>

lib/templates/search_input_navbar.mustache

@@ -0,0 +1,116 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/search_input_navbar
+
+    Navbar search input template.
+
+    Example context (json):
+    {
+        "action": "https://moodle.local/admin/search.php",
+        "inputname": "search",
+        "searchstring": "Search",
+        "hiddenfields": [
+            {
+                "name": "cmid",
+                "value": "11"
+            }
+        ]
+    }
+}}
+<div id="searchinput-navbar-{{uniqid}}" class="simplesearchform">
+    <div class="collapse" id="searchform-navbar">
+        <form autocomplete="off" action="{{{ action }}}" method="get" accept-charset="utf-8" class="mform form-inline searchform-navbar">
+            {{#hiddenfields}}
+                <input type="hidden" name="{{ name }}" value="{{ value }}">
+            {{/hiddenfields}}
+            <div class="input-group">
+                <label for="searchinput-{{uniqid}}">
+                    <span class="sr-only">{{{ searchstring }}}</span>
+                </label>
+                    <input type="text"
+                       id="searchinput-{{uniqid}}"
+                       class="form-control withclear"
+                       placeholder="{{{ searchstring }}}"
+                       aria-label="{{{ searchstring }}}"
+                       name="{{{ inputname }}}"
+                       data-region="input"
+                       autocomplete="off"
+                    >
+                    <a class="btn btn-close"
+                        data-action="closesearch"
+                        data-toggle="collapse"
+                        href="#searchform-navbar"
+                        role="button"
+                    >
+                        {{#pix}} e/cancel, core {{/pix}}
+                        <span class="sr-only">{{#str}} closebuttontitle {{/str}}</span>
+                    </a>
+                <div class="input-group-append">
+                    <button type="submit" class="btn btn-submit" data-action="submit">
+                        {{#pix}} a/search, core {{/pix}}
+                        <span class="sr-only">{{{ searchstring }}}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <a
+        class="btn btn-open"
+        data-toggle="collapse"
+        data-action="opensearch"
+        href="#searchform-navbar"
+        role="button"
+        aria-expanded="false"
+        aria-controls="searchform-navbar"
+    >
+        <i class="icon fa fa-search fa-fw " aria-hidden="true"></i>
+        <span class="sr-only">{{#str}} togglesearch {{/str}}</span>
+    </a>
+</div>
+
+{{#js}}
+require(
+[
+    'jquery',
+],
+function(
+    $
+) {
+    var uniqid = "{{uniqid}}";
+    var container = $('#searchinput-navbar-' + uniqid);
+    var opensearch = container.find('[data-action="opensearch"]');
+    var input = container.find('[data-region="input"]');
+    var submit = container.find('[data-action="submit"');
+
+    submit.on('click', function(e) {
+        if (input.val() === '') {
+            e.preventDefault();
+        }
+    });
+    container.on('hidden.bs.collapse', function() {
+        opensearch.removeClass('d-none');
+        input.val('');
+    });
+    container.on('show.bs.collapse', function() {
+        opensearch.addClass('d-none');
+    });
+    container.on('shown.bs.collapse', function() {
+        input.focus();
+    });
+});
+{{/js}}

message/templates/message_drawer_view_overview_header.mustache

@@ -35,19 +35,19 @@
 }}
 <div class="border-bottom  p-1 px-sm-2 py-sm-3" aria-hidden="false" {{^isdrawer}}data-in-panel="true"{{/isdrawer}} data-region="view-overview">
     <div class="d-flex align-items-center">
-        <div class="input-group">
-            <div class="input-group-prepend">
-                <span class="input-group-text pr-2 bg-white">
-                    {{#pix}} a/search, core {{/pix}}
-                </span>
-            </div>
+        <div class="input-group simplesearchform">
             <input
                 type="text"
-                class="form-control border-left-0"
+                class="form-control"
                 placeholder="{{#str}} search, core_search {{/str}}"
                 aria-label="{{#str}} search, core_search {{/str}}"
                 data-region="view-overview-search-input"
             >
+            <div class="input-group-append">
+                <span class="icon-no-margin btn btn-submit">
+                    {{#pix}} a/search, core {{/pix}}
+                </span>
+            </div>
         </div>
         <div class="ml-2">
             <a

message/templates/message_drawer_view_search_header.mustache

@@ -45,7 +45,7 @@
         >
             {{> core_message/message_drawer_icon_back }}
         </a>
-        <div class="input-group">
+        <div class="input-group simplesearchform">
             <input
                 type="text"
                 class="form-control"
@@ -55,7 +55,7 @@
             >
             <div class="input-group-append">
                 <button
-                    class="btn btn-outline-secondary"
+                    class="btn btn-submit icon-no-margin"
                     type="button"
                     data-action="search"
                     aria-label="{{#str}} search, core_search {{/str}}"

message/templates/message_popover.mustache

@@ -36,7 +36,7 @@
 
 }}
 <div class="popover-region collapsed" data-region="popover-region-messages">
-    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative" href="#"
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative icon-no-margin" href="#"
             role="button">
         {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"

mod/forum/classes/output/quick_search_form.php

@@ -63,11 +63,16 @@ class quick_search_form implements renderable, templatable {
     }
 
     public function export_for_template(renderer_base $output) {
+        $hiddenfields = [
+            (object) ['name' => 'id', 'value' => $this->courseid],
+        ];
         $data = [
-            'actionurl' => $this->actionurl->out(false),
-            'courseid' => $this->courseid,
+            'action' => $this->actionurl->out(false),
+            'hiddenfields' => $hiddenfields,
             'query' => $this->query,
             'helpicon' => $this->helpicon->export_for_template($output),
+            'inputname' => 'search',
+            'searchstring' => get_string('searchforums', 'mod_forum')
         ];
         return $data;
     }

mod/forum/templates/quick_search_form.mustache

@@ -21,27 +21,14 @@
 
     Example context (json):
     {
-        "actionurl": "https://domain.example/mod/forum/search.php",
-        "courseid": "2",
+        "action": "https://domain.example/mod/forum/search.php",
         "helpicon": "<a class='btn'><i class='icon fa fa-question-circle'></i></a>",
-        "query": "find this post"
+        "query": "find this post",
+        "inputname": "search"
     }
 }}
-<div class="forumsearch">
-    <form action="{{actionurl}}" class="form-inline">
-        <input type="hidden" name="id" value="{{courseid}}">
-        <div class="input-group">
-            <div class="input-group-prepend">
-            {{#helpicon}}
-                {{>core/help_icon}}
-            {{/helpicon}}
-            </div>
-            <label class="sr-only" for="search">{{#str}}search, forum{{/str}}</label>
-            <input id="search" name="search" type="text" class="form-control" value="{{query}}">
-            <div class="input-group-append">
-                <button class="btn btn-secondary" id="searchforums" type="submit">{{#str}}searchforums, mod_forum{{/str}}</button>
-            </div>
-        </div>
-
-    </form>
-</div>
+{{#helpicon}}
+    {{>core/help_icon}}
+{{/helpicon}}
+{{< core/search_input }}
+{{/ core/search_input }}

mod/glossary/view.php

@@ -380,27 +380,35 @@ if ($glossary->intro && $showcommonelements) {
 
 /// Search box
 if ($showcommonelements ) {
-    echo '<form method="post" class="form form-inline mb-1" action="' . $CFG->wwwroot . '/mod/glossary/view.php">';
-
-
-    if ($mode == 'search') {
-        echo '<input type="text" name="hook" size="20" value="'.s($hook).'" alt="'.$strsearch.'" class="form-control"/> ';
-    } else {
-        echo '<input type="text" name="hook" size="20" value="" alt="'.$strsearch.'" class="form-control"/> ';
-    }
-    echo '<input type="submit" value="'.$strsearch.'" name="searchbutton" class="btn btn-secondary mr-1"/> ';
+    $fullsearchchecked = false;
     if ($fullsearch || $mode != 'search') {
-        $fullsearchchecked = 'checked="checked"';
-    } else {
-        $fullsearchchecked = '';
+        $fullsearchchecked = true;
     }
-    echo '<span class="checkbox"><label for="fullsearch">';
-    echo ' <input type="checkbox" name="fullsearch" id="fullsearch" value="1" '.$fullsearchchecked.'/> ';
-    echo '<input type="hidden" name="mode" value="search" />';
-    echo '<input type="hidden" name="id" value="'.$cm->id.'" />';
-    echo $strsearchindefinition.'</label></span>';
 
-    echo '</form>';
+    $check = [
+        'name' => 'fullsearch',
+        'id' => 'fullsearch',
+        'value' => '1',
+        'checked' => $fullsearchchecked,
+        'label' => $strsearchindefinition
+    ];
+
+    $checkbox = $OUTPUT->render_from_template('core/checkbox', $check);
+
+    $hiddenfields = [
+        (object) ['name' => 'id', 'value' => $cm->id],
+        (object) ['name' => 'mode', 'value' => 'search'],
+    ];
+    $data = [
+        'action' => new moodle_url('/mod/glossary/view.php'),
+        'hiddenfields' => $hiddenfields,
+        'otherfields' => $checkbox,
+        'inputname' => 'hook',
+        'query' => ($mode == 'search') ? s($hook) : '',
+        'searchstring' => get_string('search'),
+        'extraclasses' => 'my-2'
+    ];
+    echo $OUTPUT->render_from_template('core/search_input', $data);
 }
 
 /// Show the add entry button if allowed

mod/wiki/lib.php

@@ -441,28 +441,36 @@ function wiki_pluginfile($course, $cm, $context, $filearea, $args, $forcedownloa
     }
 }
 
+/**
+ * Search for wiki
+ *
+ * @param stdClass $cm course module object
+ * @param string $search searchword.
+ * @param stdClass $subwiki Optional Subwiki.
+ * @return Search wiki input form
+ */
 function wiki_search_form($cm, $search = '', $subwiki = null) {
-    global $CFG, $OUTPUT;
+    global $OUTPUT;
 
-    $output = '<div class="wikisearch">';
-    $output .= '<form method="post" action="' . $CFG->wwwroot . '/mod/wiki/search.php" style="display:inline">';
-    $output .= '<fieldset class="invisiblefieldset">';
-    $output .= '<legend class="accesshide">'. get_string('searchwikis', 'wiki') .'</legend>';
-    $output .= '<label class="accesshide" for="searchwiki">' . get_string("searchterms", "wiki") . '</label>';
-    $output .= '<input id="searchwiki" name="searchstring" type="text" size="18" value="' . s($search, true) . '" alt="search" />';
-    $output .= '<input name="courseid" type="hidden" value="' . $cm->course . '" />';
-    $output .= '<input name="cmid" type="hidden" value="' . $cm->id . '" />';
+    $hiddenfields = [
+        (object) ['type' => 'hidden', 'name' => 'courseid', 'value' => $cm->course],
+        (object) ['type' => 'hidden', 'name' => 'cmid', 'value' => $cm->id],
+        (object) ['type' => 'hidden', 'name' => 'searchwikicontent', 'value' => 1],
+    ];
     if (!empty($subwiki->id)) {
-        $output .= '<input name="subwikiid" type="hidden" value="' . $subwiki->id . '" />';
+        $hiddenfields[] = (object) ['type' => 'hidden', 'name' => 'subwikiid', 'value' => $subwiki->id];
     }
-    $output .= '<input name="searchwikicontent" type="hidden" value="1" />';
-    $output .= '<input value="' . get_string('searchwikis', 'wiki') . '" class="btn btn-secondary" type="submit" />';
-    $output .= '</fieldset>';
-    $output .= '</form>';
-    $output .= '</div>';
-
-    return $output;
+    $data = [
+        'action' => new moodle_url('/mod/wiki/search.php'),
+        'hiddenfields' => $hiddenfields,
+        'inputname' => 'searchstring',
+        'query' => s($search, true),
+        'searchstring' => get_string('searchwikis', 'wiki'),
+        'extraclasses' => 'mt-2'
+    ];
+    return $OUTPUT->render_from_template('core/search_input', $data);
 }
+
 function wiki_extend_navigation(navigation_node $navref, $course, $module, $cm) {
     global $CFG, $PAGE, $USER;
 

search/tests/behat/behat_search.php

@@ -44,14 +44,14 @@ class behat_search extends behat_base {
      * @param string $query Query to search for
      */
     public function i_search_for_using_the_header_global_search_box($query) {
-        // Hover over the search icon.
-        $this->execute('behat_general::i_hover', ['.icon[title=Search]', 'css_element']);
+        // Click the search icon.
+        $this->execute("behat_general::i_click_on", [get_string('togglesearch', 'core'), 'button']);
 
         // Set the field.
         $this->execute('behat_forms::i_set_the_field_to', ['q', $query]);
 
         // Submit the form.
-        $this->execute_script('return document.querySelector(".search-input-form.expanded").submit();');
+        $this->execute_script('return document.querySelector(".searchform-navbar").submit();');
     }
 
     /**

tag/manage.php

@@ -206,17 +206,27 @@ if (!$tagcoll) {
 // Tag collection is specified. Manage tags in this collection.
 echo $OUTPUT->heading(core_tag_collection::display_name($tagcoll));
 
-// Form to filter tags.
-print('<form class="tag-filter-form" method="get" action="'.$CFG->wwwroot.'/tag/manage.php">');
-print('<div class="tag-management-form generalbox"><label class="accesshide" for="id_tagfilter">'. get_string('search') .'</label>'.
-    '<input type="hidden" name="tc" value="'.$tagcollid.'" />'.
-    '<input type="hidden" name="perpage" value="'.$perpage.'" />'.
-    '<input id="id_tagfilter" name="filter" type="text" value="' . s($filter) . '">'.
-    '<input value="'. s(get_string('search')) .'" type="submit" class="btn btn-secondary"> '.
-    ($filter !== '' ? html_writer::link(new moodle_url($PAGE->url, array('filter' => null)),
-        get_string('resetfilter', 'tag'), array('class' => 'resetfilterlink')) : '').
-    '</div>');
-print('</form>');
+$hiddenfields = [
+    (object) ['type' => 'hidden', 'name' => 'tc', 'value' => $tagcollid],
+    (object) ['type' => 'hidden', 'name' => 'perpage', 'value' => $perpage]
+];
+
+$otherfields = '';
+if ($filter !== '') {
+    $otherfields = html_writer::link(new moodle_url($PAGE->url, ['filter' => null]),
+        get_string('resetfilter', 'tag'));
+}
+
+$data = [
+    'action' => new moodle_url('/tag/manage.php'),
+    'hiddenfields' => $hiddenfields,
+    'inputname' => 'filter',
+    'searchstring' => get_string('search'),
+    'query' => s($filter),
+    'extraclasses' => 'mb-2',
+    'otherfields' => $otherfields
+];
+echo $OUTPUT->render_from_template('core/search_input', $data);
 
 // Link to add an standard tags.
 $img = $OUTPUT->pix_icon('t/add', '');

theme/boost/scss/moodle/core.scss

@@ -1642,6 +1642,9 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     .carousel-item .loading-icon .icon {
         margin: 1em auto;
     }
+    .searchbar {
+        width: 100%;
+    }
 }
 
 .modchooser .modal-footer {
@@ -1660,19 +1663,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     overflow-y: hidden;
 }
 
-.modchooser .searchcontainer .searchbar .input-group-append {
-    align-items: center;
-
-    i {
-        color: #868e96;
-        margin: 0;
-        vertical-align: middle;
-        font-size: 20px;
-        height: 20px;
-        width: 20px;
-    }
-}
-
 .modchoosercontainer .optionscontainer,
 .modchoosercontainer .searchresultitemscontainer {
     overflow-x: hidden;
@@ -2042,6 +2032,15 @@ nav.navbar .logo img {
     max-height: 35px;
 }
 
+.nav.usernav {
+    .nav-item {
+        display: flex;
+    }
+    .usermenu .dropdown-toggle {
+        padding: 0 0.5rem;
+    }
+}
+
 /** Header-bar styles **/
 .page-context-header {
     // We need to be explicit about the height of the header.

theme/boost/scss/moodle/popover-region.scss

@@ -1,4 +1,3 @@
-$toggle-width: 25px;
 $standard-border: 1px solid #ddd;
 $region-container-height: 500px;
 $region-container-width: 380px;
@@ -176,9 +175,6 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
 
 .navbar {
     .popover-region {
-        float: left;
-        margin-right: 10px;
-
         &.collapsed {
             .popover-region-container {
                 @include invisible();
@@ -190,10 +186,6 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
         }
     }
 
-    .popover-region-toggle {
-        width: $toggle-width;
-    }
-
     .count-container {
         padding: 2px;
         border-radius: 2px;

theme/boost/scss/moodle/search.scss

@@ -11,54 +11,70 @@
     font-style: italic;
 }
 
-.search-input-wrapper {
-    margin: 0 $spacer 0 0;
-    overflow: hidden;
-    float: right;
-    width: 24px;
-    transition: width 0.5s ease, left 0.5s ease;
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.search-input-wrapper > div {
-    float: left;
-    margin: 0;
-
-    .icon {
-        margin-right: 0;
-        margin-top: 10px;
+.simplesearchform {
+    .btn {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+    .btn .icon {
+        margin: 0;
+    }
+    .btn-submit {
+        border-color: $input-border-color;
+        color: $gray-600;
+    }
+    .btn-close,
+    .btn-clear {
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: $gray-600;
+        z-index: 4;
+    }
+    .btn-close {
+        right: 2.2rem;
+    }
+    .btn-submit {
+        background-color: $gray-100;
+    }
+    .withclear {
+        padding-right: 2rem;
+    }
+    .searchinput {
+        display: flex;
+        flex: 1 1 auto;
+    }
+    .collapsing {
+        height: inherit;
+        transition: none;
+        width: inherit;
     }
 }
 
-.search-input-wrapper > form {
-    opacity: 0;
-    margin-left: 25px;
-    transition: opacity 0.5s ease-in-out;
-}
-
-.search-input-wrapper > form > input {
-    margin: 0;
-}
-
-.search-input-wrapper form.expanded {
-    opacity: 1;
-}
-
-.search-input-wrapper.expanded {
-    width: 162px;
-}
-
-@include media-breakpoint-down(xs) {
-    .search-input-wrapper {
-        > div {
-            margin: 0;
+@include media-breakpoint-down(md) {
+    .simplesearchform .collapse.show,
+    .simplesearchform .collapsing {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        display: flex;
+        background-color: $white;
+        z-index: $zindex-popover;
+        height: $navbar-height;
+        .form-inline {
+            width: auto;
+            margin-left: auto;
+            margin-right: auto;
         }
-
-        > form {
-            display: none;
+    }
+}
+.navbar.navbar-light {
+    .simplesearchform .btn-open {
+        color: $navbar-light-color;
+        &:hover {
+            color: $navbar-light-hover-color;
         }
-        margin: 0 $spacer 0 0;
     }
 }
 

theme/boost/style/moodle.css

@@ -11000,6 +11000,8 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
       width: 1em; }
   .modchooser .modal-body .carousel-item .loading-icon .icon {
     margin: 1em auto; }
+  .modchooser .modal-body .searchbar {
+    width: 100%; }
 
 .modchooser .modal-footer {
   height: 70px;
@@ -11012,16 +11014,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
 .modchoosercontainer.noscroll {
   overflow-y: hidden; }
 
-.modchooser .searchcontainer .searchbar .input-group-append {
-  align-items: center; }
-  .modchooser .searchcontainer .searchbar .input-group-append i {
-    color: #868e96;
-    margin: 0;
-    vertical-align: middle;
-    font-size: 20px;
-    height: 20px;
-    width: 20px; }
-
 .modchoosercontainer .optionscontainer,
 .modchoosercontainer .searchresultitemscontainer {
   overflow-x: hidden; }
@@ -11308,6 +11300,12 @@ img#persona_signin {
 nav.navbar .logo img {
   max-height: 35px; }
 
+.nav.usernav .nav-item {
+  display: flex; }
+
+.nav.usernav .usermenu .dropdown-toggle {
+  padding: 0 0.5rem; }
+
 /** Header-bar styles **/
 .page-context-header {
   overflow: hidden;
@@ -16196,43 +16194,64 @@ body.path-question-type .mform fieldset.hidden {
 .search-results .result .filename {
   font-style: italic; }
 
-.search-input-wrapper {
-  margin: 0 1rem 0 0;
-  overflow: hidden;
-  float: right;
-  width: 24px;
-  transition: width 0.5s ease, left 0.5s ease;
-  padding-top: 0;
-  padding-bottom: 0; }
+.simplesearchform .btn {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem; }
 
-.search-input-wrapper > div {
-  float: left;
-  margin: 0; }
-  .search-input-wrapper > div .icon {
-    margin-right: 0;
-    margin-top: 10px; }
-
-.search-input-wrapper > form {
-  opacity: 0;
-  margin-left: 25px;
-  transition: opacity 0.5s ease-in-out; }
-
-.search-input-wrapper > form > input {
+.simplesearchform .btn .icon {
   margin: 0; }
 
-.search-input-wrapper form.expanded {
-  opacity: 1; }
+.simplesearchform .btn-submit {
+  border-color: #8f959e;
+  color: #6c757d; }
 
-.search-input-wrapper.expanded {
-  width: 162px; }
+.simplesearchform .btn-close,
+.simplesearchform .btn-clear {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #6c757d;
+  z-index: 4; }
 
-@media (max-width: 575.98px) {
-  .search-input-wrapper {
-    margin: 0 1rem 0 0; }
-    .search-input-wrapper > div {
-      margin: 0; }
-    .search-input-wrapper > form {
-      display: none; } }
+.simplesearchform .btn-close {
+  right: 2.2rem; }
+
+.simplesearchform .btn-submit {
+  background-color: #f8f9fa; }
+
+.simplesearchform .withclear {
+  padding-right: 2rem; }
+
+.simplesearchform .searchinput {
+  display: flex;
+  flex: 1 1 auto; }
+
+.simplesearchform .collapsing {
+  height: inherit;
+  transition: none;
+  width: inherit; }
+
+@media (max-width: 991.98px) {
+  .simplesearchform .collapse.show,
+  .simplesearchform .collapsing {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    display: flex;
+    background-color: #fff;
+    z-index: 1060;
+    height: 50px; }
+    .simplesearchform .collapse.show .form-inline,
+    .simplesearchform .collapsing .form-inline {
+      width: auto;
+      margin-left: auto;
+      margin-right: auto; } }
+
+.navbar.navbar-light .simplesearchform .btn-open {
+  color: rgba(0, 0, 0, 0.6); }
+  .navbar.navbar-light .simplesearchform .btn-open:hover {
+    color: rgba(0, 0, 0, 0.9); }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -18745,18 +18764,12 @@ body {
   .popover-region-content-container.loading .empty-message {
     display: none; }
 
-.navbar .popover-region {
-  float: left;
-  margin-right: 10px; }
-  .navbar .popover-region.collapsed .popover-region-container {
-    opacity: 0;
-    visibility: hidden;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
-
-.navbar .popover-region-toggle {
-  width: 25px; }
+.navbar .popover-region.collapsed .popover-region-container {
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
 
 .navbar .count-container {
   padding: 2px;

theme/boost/templates/navbar.mustache

@@ -15,7 +15,27 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    Page navbar.
+
+    @template theme_boost/navbar
+
+    This template renders the top navbar.
+
+    Example context (json):
+    {
+        "output": {
+            "should_display_navbar_logo": true,
+            "get_compact_logo_url": "http://placekitten.com/50/50",
+            "custom_menu": "<li>..</li>",
+            "page_heading_menu": "<li>..</li>",
+            "search_box": "<div><input type='text'></div>",
+            "navbar_plugin_output": "<div class='dropdown'>Messaging</div>",
+            "user_menu": "<div class='dropdown'>John Doe</div>"
+        },
+        "config": {
+            "wwwroot": "#"
+        },
+        "sitename": "Moodle Site"
+    }
 }}
 <nav class="fixed-top navbar navbar-light bg-white navbar-expand moodle-has-zindex" aria-label="{{#str}}sitemenubar, admin{{/str}}">
 
@@ -42,19 +62,18 @@
             <!-- page_heading_menu -->
             {{{ output.page_heading_menu }}}
         </ul>
-        <ul class="nav navbar-nav ml-auto">
-            <li class="d-none d-lg-block">
-                {{{ output.search_box }}}
-            </li>
+        <div class="ml-auto">
+            {{{ output.search_box }}}
+        </div>
+        <ul class="nav navbar-nav usernav">
             <!-- navbar_plugin_output -->
             <li class="nav-item">
                 {{{ output.navbar_plugin_output }}}
             </li>
             <!-- user_menu -->
-            <li class="nav-item d-flex align-items-center">
+            <li class="nav-item align-items-center pl-2">
                 {{{ output.user_menu }}}
             </li>
         </ul>
         <!-- search_box -->
 </nav>
-

theme/classic/style/moodle.css

@@ -11206,6 +11206,8 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
       width: 1em; }
   .modchooser .modal-body .carousel-item .loading-icon .icon {
     margin: 1em auto; }
+  .modchooser .modal-body .searchbar {
+    width: 100%; }
 
 .modchooser .modal-footer {
   height: 70px;
@@ -11218,16 +11220,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
 .modchoosercontainer.noscroll {
   overflow-y: hidden; }
 
-.modchooser .searchcontainer .searchbar .input-group-append {
-  align-items: center; }
-  .modchooser .searchcontainer .searchbar .input-group-append i {
-    color: #868e96;
-    margin: 0;
-    vertical-align: middle;
-    font-size: 20px;
-    height: 20px;
-    width: 20px; }
-
 .modchoosercontainer .optionscontainer,
 .modchoosercontainer .searchresultitemscontainer {
   overflow-x: hidden; }
@@ -11518,6 +11510,12 @@ img#persona_signin {
 nav.navbar .logo img {
   max-height: 35px; }
 
+.nav.usernav .nav-item {
+  display: flex; }
+
+.nav.usernav .usermenu .dropdown-toggle {
+  padding: 0 0.5rem; }
+
 /** Header-bar styles **/
 .page-context-header {
   overflow: hidden;
@@ -16421,43 +16419,64 @@ body.path-question-type .mform fieldset.hidden {
 .search-results .result .filename {
   font-style: italic; }
 
-.search-input-wrapper {
-  margin: 0 1rem 0 0;
-  overflow: hidden;
-  float: right;
-  width: 24px;
-  transition: width 0.5s ease, left 0.5s ease;
-  padding-top: 0;
-  padding-bottom: 0; }
+.simplesearchform .btn {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem; }
 
-.search-input-wrapper > div {
-  float: left;
-  margin: 0; }
-  .search-input-wrapper > div .icon {
-    margin-right: 0;
-    margin-top: 10px; }
-
-.search-input-wrapper > form {
-  opacity: 0;
-  margin-left: 25px;
-  transition: opacity 0.5s ease-in-out; }
-
-.search-input-wrapper > form > input {
+.simplesearchform .btn .icon {
   margin: 0; }
 
-.search-input-wrapper form.expanded {
-  opacity: 1; }
+.simplesearchform .btn-submit {
+  border-color: #8f959e;
+  color: #6c757d; }
 
-.search-input-wrapper.expanded {
-  width: 162px; }
+.simplesearchform .btn-close,
+.simplesearchform .btn-clear {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #6c757d;
+  z-index: 4; }
 
-@media (max-width: 575.98px) {
-  .search-input-wrapper {
-    margin: 0 1rem 0 0; }
-    .search-input-wrapper > div {
-      margin: 0; }
-    .search-input-wrapper > form {
-      display: none; } }
+.simplesearchform .btn-close {
+  right: 2.2rem; }
+
+.simplesearchform .btn-submit {
+  background-color: #f8f9fa; }
+
+.simplesearchform .withclear {
+  padding-right: 2rem; }
+
+.simplesearchform .searchinput {
+  display: flex;
+  flex: 1 1 auto; }
+
+.simplesearchform .collapsing {
+  height: inherit;
+  transition: none;
+  width: inherit; }
+
+@media (max-width: 991.98px) {
+  .simplesearchform .collapse.show,
+  .simplesearchform .collapsing {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    display: flex;
+    background-color: #fff;
+    z-index: 1060;
+    height: 50px; }
+    .simplesearchform .collapse.show .form-inline,
+    .simplesearchform .collapsing .form-inline {
+      width: auto;
+      margin-left: auto;
+      margin-right: auto; } }
+
+.navbar.navbar-light .simplesearchform .btn-open {
+  color: rgba(0, 0, 0, 0.6); }
+  .navbar.navbar-light .simplesearchform .btn-open:hover {
+    color: rgba(0, 0, 0, 0.9); }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -18926,18 +18945,12 @@ body {
   .popover-region-content-container.loading .empty-message {
     display: none; }
 
-.navbar .popover-region {
-  float: left;
-  margin-right: 10px; }
-  .navbar .popover-region.collapsed .popover-region-container {
-    opacity: 0;
-    visibility: hidden;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
-
-.navbar .popover-region-toggle {
-  width: 25px; }
+.navbar .popover-region.collapsed .popover-region-container {
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
 
 .navbar .count-container {
   padding: 2px;

theme/classic/templates/navbar.mustache

@@ -57,16 +57,16 @@
             <!-- page_heading_menu -->
             {{{ output.page_heading_menu }}}
         </ul>
-        <ul class="nav navbar-nav ml-auto">
-            <li class="d-none d-lg-block">
-                {{{ output.search_box }}}
-            </li>
+        <div class="ml-auto">
+            {{{ output.search_box }}}
+        </div>
+        <ul class="nav navbar-nav usernav">
             <!-- navbar_plugin_output -->
             <li class="nav-item">
                 {{{ output.navbar_plugin_output }}}
             </li>
             <!-- user_menu -->
-            <li class="nav-item d-flex align-items-center">
+            <li class="nav-item align-items-center">
                 {{{ output.user_menu }}}
             </li>
         </ul>