Merge branch 'MDL-59828-master' of git://github.com/damyon/moodle

admin/tool/lp/templates/form-user-selector-suggestion.mustache

@@ -49,7 +49,7 @@
     }
 }}
 <span>
-    <img height="18" src="{{profileimageurlsmall}}" alt="" role="presentation">
+    <img height="12" src="{{profileimageurlsmall}}" alt="" role="presentation">
     <span>{{fullname}}</span>
     {{#hasidentity}}
     <span><small>{{identity}}</small></span>

enrol/manual/templates/form-user-selector-suggestion.mustache

@@ -49,7 +49,7 @@
     }
 }}
 <span>
-    <img height="18" src="{{profileimageurlsmall}}" alt="" role="presentation">
+    <img height="12" src="{{profileimageurlsmall}}" alt="" role="presentation">
     <span>{{fullname}}</span>
     {{#hasidentity}}
     <span><small>{{identity}}</small></span>

lib/amd/src/form-autocomplete.js

@@ -779,8 +779,9 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 return false;
             }
 
+            originalSelect.css('visibility', 'hidden').attr('aria-hidden', true);
+
             // Hide the original select.
-            originalSelect.hide().attr('aria-hidden', true);
 
             // Find or generate some ids.
             var state = {
@@ -816,10 +817,11 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             var renderSelection = templates.render('core/form_autocomplete_selection', context);
 
             return $.when(renderInput, renderDatalist, renderSelection).then(function(input, suggestions, selection) {
-                // Add our new UI elements to the page.
+                originalSelect.hide();
                 originalSelect.after(suggestions);
                 originalSelect.after(input);
                 originalSelect.after(selection);
+
                 // Update the form label to point to the text input.
                 originalLabel.attr('for', state.inputId);
                 // Add the event handlers.

lib/amd/src/inplace_editable.js

@@ -171,7 +171,7 @@ define(['jquery',
 
         var turnEditingOnSelect = function(el, options) {
             var i,
-                inputelement = $('<select></select>').
+                inputelement = $('<select class="form-autocomplete-original-select"></select>').
                     attr('id', uniqueId('id_inplacevalue_', 20)).
                     addClass('custom-select'),
                 lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>')

theme/boost/scss/moodle/forms.scss

@@ -241,9 +241,24 @@ fieldset.coursesearchbox label {
 }
 
 /* Custom styles for autocomplete form element */
+/* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
+[data-fieldtype=autocomplete] select,
+[data-fieldtype=tags] select,
+.form-autocomplete-original-select {
+    visibility: hidden;
+    overflow: hidden;
+    width: 15rem;
+    height: 44px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    margin-top: $font-size-base * $line-height-base + $tag-padding-y;
+    vertical-align: bottom;
+}
 .form-autocomplete-selection {
-    margin: 0.2em;
-    min-height: 21px;
+    margin: $tag-padding-y;
+    // Padding top and bottom, plus m-b-1 and the 100% lineheight.
+    min-height: 2 * $tag-padding-y + 2 * $font-size-base;
 }
 
 .form-autocomplete-multiple [role=listitem] {

theme/boost/templates/core/form_autocomplete_selection.mustache

@@ -40,11 +40,11 @@
 <div class="form-autocomplete-selection {{#multiple}}form-autocomplete-multiple{{/multiple}}" id="{{selectionId}}" role="list" aria-atomic="true" {{#multiple}}tabindex="0" aria-multiselectable="true"{{/multiple}}>
 <span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
     {{#items}}
-        <span role="listitem" data-value="{{value}}" aria-selected="true" class="tag tag-info m-b-1 m-r-1" style="font-size: larger">
+        <span role="listitem" data-value="{{value}}" aria-selected="true" class="tag tag-info m-b-1 m-r-1" style="font-size: 100%">
             {{#multiple}}<span aria-hidden="true">× </span>{{/multiple}}{{{label}}}
         </span>
     {{/items}}
     {{^items}}
-        <span>{{noSelectionString}}</span>
+        <span class="m-b-1 m-r-1">{{noSelectionString}}</span>
     {{/items}}
 </div>

theme/bootstrapbase/less/moodle/forms.less

@@ -445,9 +445,27 @@ input[size] {
 }
 
 /* Custom styles for autocomplete form element */
+
+[data-fieldtype=autocomplete] select,
+[data-fieldtype=tags] select,
+select.form-autocomplete-original-select {
+    visibility: hidden;
+    overflow: hidden;
+    width: 15rem;
+    height: 3 * @baseLineHeight + @baseFontSize / 2;
+    margin: 0;
+    margin-bottom: 0.2em;
+    padding: 0;
+    border: 0;
+    vertical-align: top;
+}
+.form-autocomplete-container {
+    display: inline-block;
+    min-height: 4.2rem;
+}
 .form-autocomplete-selection {
     margin: 0.2em;
-    min-height: 21px;
+    min-height: @baseLineHeight + @baseFontSize / 2;
 }
 .form-autocomplete-multiple [role=listitem] {
     cursor: pointer;

theme/bootstrapbase/style/moodle.css

@@ -16902,9 +16902,26 @@ input[size] {
   width: auto;
 }
 /* Custom styles for autocomplete form element */
+[data-fieldtype=autocomplete] select,
+[data-fieldtype=tags] select,
+select.form-autocomplete-original-select {
+  visibility: hidden;
+  overflow: hidden;
+  width: 15rem;
+  height: 67px;
+  margin: 0;
+  margin-bottom: 0.2em;
+  padding: 0;
+  border: 0;
+  vertical-align: top;
+}
+.form-autocomplete-container {
+  display: inline-block;
+  min-height: 4.2rem;
+}
 .form-autocomplete-selection {
   margin: 0.2em;
-  min-height: 21px;
+  min-height: 27px;
 }
 .form-autocomplete-multiple [role=listitem] {
   cursor: pointer;

user/templates/unified_filter.mustache

@@ -51,9 +51,9 @@
         ]
     }
 }}
-<form method="post" action="{{action}}" class="form-inline m-b-2" role="search">
+<form method="post" action="{{action}}" class="m-b-1" role="search">
     <label for="unified-filters" class="sr-only">{{#str}}filters{{/str}}</label>
-    <select name="unified-filters[]" id="unified-filters" multiple="multiple" data-originaloptionsjson="{{originaloptionsjson}}">
+    <select name="unified-filters[]" id="unified-filters" multiple="multiple" data-originaloptionsjson="{{originaloptionsjson}}" class="form-autocomplete-original-select">
         {{#filteroptions}}
             <option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option>
         {{/filteroptions}}