MDL-69454 core_search: consistent navbar search

moodle · Sep 21, 2020 · 1a2a52d · 1a2a52d
1 parent f852aa8
commit 1a2a52d
Show file tree

Hide file tree

Showing 13 changed files with 354 additions and 177 deletions.
diff --git a/lang/en/moodle.php b/lang/en/moodle.php
@@ -2096,6 +2096,7 @@
 $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.';

diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
@@ -3222,31 +3222,13 @@ public function search_box($id = false) {
             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);
     }
 
     /**

diff --git a/lib/templates/popover_region.mustache b/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}}"

diff --git a/lib/templates/search_input_navbar.mustache b/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}}
diff --git a/message/templates/message_popover.mustache b/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"

diff --git a/search/tests/behat/behat_search.php b/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();');
     }
 
     /**

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -2042,6 +2042,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.

diff --git a/theme/boost/scss/moodle/popover-region.scss b/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;

diff --git a/theme/boost/scss/moodle/search.scss b/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;
     }
 }