diff --git a/app/assets/javascripts/columns_selector.js b/app/assets/javascripts/columns_selector.js index 2f680b7c6..888dd2c76 100644 --- a/app/assets/javascripts/columns_selector.js +++ b/app/assets/javascripts/columns_selector.js @@ -33,10 +33,8 @@ $("#js-columns-selector-wrapper").append(item); }); }, - toggleOptions: function(event) { - event.preventDefault(); - $("#js-columns-selector").toggleClass("hollow"); - $("#js-columns-selector-wrapper").toggleClass("hidden"); + toggleOptions: function(button) { + button.attr("aria-expanded", !JSON.parse(button.attr("aria-expanded"))); }, hideAll: function() { $("[data-field]").addClass("hidden"); @@ -73,8 +71,8 @@ App.ColumnsSelector.initChecks(); App.ColumnsSelector.initColumns(); $("#js-columns-selector").on({ - click: function(event) { - App.ColumnsSelector.toggleOptions(event); + click: function() { + App.ColumnsSelector.toggleOptions($(this)); } }); $(".column-selector-item input").on({ diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index a469e7c28..51a554038 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -1165,6 +1165,18 @@ table { span[class^="icon-"] { vertical-align: middle; } + + &[aria-expanded='false'] { + @include hollow-button; + + + .columns-selector-wrapper { + display: none; + } + } + + &[aria-expanded='true'] { + @include regular-button; + } } .columns-selector-wrapper { @@ -1173,10 +1185,6 @@ table { border-radius: 10px; margin-bottom: 1rem; - &.hidden { - display: none; - } - .column-selector-item { display: inline-block; diff --git a/app/views/admin/shared/_columns_selector.html.erb b/app/views/admin/shared/_columns_selector.html.erb index dfae1d808..c440a23cc 100644 --- a/app/views/admin/shared/_columns_selector.html.erb +++ b/app/views/admin/shared/_columns_selector.html.erb @@ -1,9 +1,9 @@ -"> + -