jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

jquery-ui: fix autocomplete menu styling (#3671).

Browse Source 
* Wrap menu items in a div.
* Replace ui-state-focus with ui-state-active.
* Make active items have a grey background.

ref: http://jqueryui.com/upgrade-guide/1.12/#require-wrappers-for-each-menu-item
ref: http://jqueryui.com/upgrade-guide/1.12/#use-consistent-styling-for-focused-and-active-items
This commit is contained in:
evazion
2018-04-26 23:18:00 -05:00
parent a11dbb9186
commit dd2abeb180
4 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/autocomplete.js.erb
View File

@@ -344,7 +344,7 @@
return; return;
} }
if ($autocomplete_menu.has(".ui-state-focus").length === 0) { if ($autocomplete_menu.has(".ui-state-active").length === 0) {
var $first_item = $autocomplete_menu.find(".ui-menu-item").first(); var $first_item = $autocomplete_menu.find(".ui-menu-item").first();
var completion = $first_item.data().uiAutocompleteItem.value; var completion = $first_item.data().uiAutocompleteItem.value;
@@ -358,6 +358,7 @@
Danbooru.Autocomplete.render_item = function(list, item) { Danbooru.Autocomplete.render_item = function(list, item) {
var $link = $("<a/>"); var $link = $("<a/>");
var $menu_item = $("<div/>").append($link);
if (item.antecedent) { if (item.antecedent) {
var antecedent = item.antecedent.replace(/_/g, " "); var antecedent = item.antecedent.replace(/_/g, " ");
@@ -396,7 +397,7 @@
$link.addClass("pool-category-" + item.category); $link.addClass("pool-category-" + item.category);
} }
return $("<li/>").data("item.autocomplete", item).append($link).appendTo(list); return $("<li/>").data("item.autocomplete", item).append($menu_item).appendTo(list);
}; };
Danbooru.Autocomplete.static_metatags = { Danbooru.Autocomplete.static_metatags = {

9
app/assets/stylesheets/common/autocomplete.scss
View File

@@ -1,6 +1,13 @@
.ui-autocomplete { .ui-autocomplete {
font-size: 0.9em; font-size: 0.9em;
z-index: 1000;
.ui-state-active {
border: none;
margin: 0 -1px;
background-color: #F0F0F0;
border-left: 1px solid #C5C5C5;
border-right: 1px solid #C5C5C5;
}
.ui-menu-item a { .ui-menu-item a {
padding: 1px .2em; padding: 1px .2em;

4
app/assets/stylesheets/common/erb/tags.scss.erb
View File

@@ -1,5 +1,5 @@
<% TagCategory.css_mapping.each do |category,cssmap| %> <% TagCategory.css_mapping.each do |category,cssmap| %>
.category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-focus a.tag-type-<%= category %> { .category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-active a.tag-type-<%= category %> {
color: <%= cssmap["color"] %>; color: <%= cssmap["color"] %>;
&:hover { &:hover {
@@ -8,7 +8,7 @@
} }
<% end %> <% end %>
.category-banned a, a.tag-type-banned, .ui-state-focus a.tag-type-banned { .category-banned a, a.tag-type-banned, .ui-state-active a.tag-type-banned {
color: black; color: black;
background-color: red; background-color: red;
} }

4
app/assets/stylesheets/common/jquery_ui_custom.scss
View File

@@ -57,3 +57,7 @@ div.ui-dialog {
background: linear-gradient(#fefefe, #f0f0f0); background: linear-gradient(#fefefe, #f0f0f0);
} }
} }
.ui-front {
z-index: 1000;
}