Commit d8e57f02 authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-59828 autocomplete: Sizing issues on themes

We want to avoid page jumps wherever possible. This change uses the original select element as a "proxy" to reserve the space
in the DOM for the enhanced auto-complete when the JS runs.

It uses visibility: hidden to make the select not rendered - but still take up space.

The exact sizing for the CSS was determined by testing and reverse engineering the bootstrap calculations.

The size of user pictures in selectors was reduced to avoid flicker when switching between no selection and a selected user. I
could have reserved a larger amount of space, but it looks worse for pickers with no pictures.
parent f3625f47
......@@ -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>
......
......@@ -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>
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -758,8 +758,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 = {
......@@ -795,10 +796,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.
......
......@@ -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>')
......
......@@ -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] {
......
......@@ -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>
......@@ -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;
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -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}}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment