MDL-69454 core_search: consistent activity chooser search

diff --git a/course/amd/build/local/activitychooser/dialogue.min.js b/course/amd/build/local/activitychooser/dialogue.min.js
index dbb33f4..d517d5b 100644 (file)
Binary files a/course/amd/build/local/activitychooser/dialogue.min.js and b/course/amd/build/local/activitychooser/dialogue.min.js differ

diff --git a/course/amd/build/local/activitychooser/dialogue.min.js.map b/course/amd/build/local/activitychooser/dialogue.min.js.map
index 5c2bb8f..740fe3f 100644 (file)
Binary files a/course/amd/build/local/activitychooser/dialogue.min.js.map and b/course/amd/build/local/activitychooser/dialogue.min.js.map differ

diff --git a/course/amd/build/local/activitychooser/selectors.min.js b/course/amd/build/local/activitychooser/selectors.min.js
index 0b4a6ed..45f8f4f 100644 (file)
Binary files a/course/amd/build/local/activitychooser/selectors.min.js and b/course/amd/build/local/activitychooser/selectors.min.js differ

diff --git a/course/amd/build/local/activitychooser/selectors.min.js.map b/course/amd/build/local/activitychooser/selectors.min.js.map
index 177b53e..13f9e9f 100644 (file)
Binary files a/course/amd/build/local/activitychooser/selectors.min.js.map and b/course/amd/build/local/activitychooser/selectors.min.js.map differ

diff --git a/course/amd/src/local/activitychooser/dialogue.js b/course/amd/src/local/activitychooser/dialogue.js
index cd045a3..a3bde76 100644 (file)
--- a/course/amd/src/local/activitychooser/dialogue.js
+++ b/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.

diff --git a/course/amd/src/local/activitychooser/selectors.js b/course/amd/src/local/activitychooser/selectors.js
index 6b54bbc..dd20e75 100644 (file)
--- a/course/amd/src/local/activitychooser/selectors.js
+++ b/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)'
     },
 };

diff --git a/course/templates/local/activitychooser/search.mustache b/course/templates/local/activitychooser/search.mustache
index 9283980..70dfac6 100644 (file)
--- a/course/templates/local/activitychooser/search.mustache
+++ b/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>

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index c3c8ab2..e49aaae 100644 (file)
--- a/theme/boost/scss/moodle/core.scss
+++ b/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;

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index f545b2c..ffa370d 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/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; }

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 9c588a8..ff04b5e 100644 (file)
--- a/theme/classic/style/moodle.css
+++ b/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; }