$(document).
- on('paste keyup change', 'input.search-folder-contents', function() {
+ on('paste keyup change', 'input[type=text].filterable-control', function() {
var q = new RegExp($(this).val(), 'i');
- $($(this).attr('data-search-target')).find('tbody').
+ $($(this).attr('data-filterable-target')).
+ addClass('filterable-container').
data('q', q).
trigger('refresh');
- }).on('refresh', 'tbody', function() {
+ }).on('refresh', '.filterable-container', function() {
var q = $(this).data('q');
var filters = $(this).data('filters');
- $('tr', this).hide();
- $('tr', this).filter(function() {
+ $('.filterable', this).hide().filter(function() {
var $row = $(this);
var pass = true;
if (q && !$row.text().match(q))
return pass;
}).show();
$('.infinite-scroller').trigger('scroll');
- }).on('change', 'select[data-filter-rows-by]', function() {
+ }).on('change', 'select.filterable-control', function() {
var val = $(this).val();
- var filterby = $(this).attr('data-filter-rows-by');
- var $target = $($(this).attr('data-filter-target'));
+ var filterby = $(this).attr('data-filterable-attribute');
+ var $target = $($(this).attr('data-filterable-target')).
+ addClass('filterable-container');
var filters = $target.data('filters') || {};
filters[filterby] = val;
$target.
data('filters', filters).
trigger('refresh');
}).on('ajax:complete', function() {
- $('input.search-folder-contents').trigger('change');
- $('select[data-filter-rows-by]').trigger('change');
+ $('.filterable-control').trigger('change');
});
background: #d9edf7;
}
.selectable.active,
-.selectable.active a,
+.selectable.active *,
.selectable.active:hover,
-.selectable.active:hover a {
+.selectable.active:hover * {
background: #428bca;
color: #fff;
}
-<div class="modal">
- <div class="modal-dialog">
+<div class="modal arv-choose">
+ <div class="modal-dialog" style="width:80%">
<div class="modal-content">
-
<div class="modal-header">
<button type="button" class="close" onClick="reset_form()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><%= params[:title] || "Choose #{@objects.first.class_for_display}" %></h4>
</div>
-
<div class="modal-body">
- <div class="container-fluid arv-folder-list selectable-container" style="height: 15em; overflow-y: scroll" data-infinite-scroller="#choose-scroll" id="choose-scroll" data-infinite-content-href="<%= @next_page_href %>">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-sm-6">
+ </div>
+ <div class="col-sm-6">
+ <input type="text" class="form-control filterable-control" placeholder="Search" data-filterable-target=".modal.arv-choose .selectable-container"/>
+ </div>
+ </div>
+ </div>
+ <div class="container-fluid arv-filterable-list selectable-container" style="height: 20em; overflow-y: scroll" data-infinite-scroller="#choose-scroll" id="choose-scroll" data-infinite-content-href="<%= @next_page_href %>">
<%= render partial: 'choose_rows', locals: {multiple: multiple} %>
</div>
</div>
<% @name_links.each do |name_link| %>
- <div class="row selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= name_link.uuid %>">
- <div class="col-lg-12" style="overflow-x:hidden">
+ <div class="row filterable selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= name_link.uuid %>">
+ <div class="col-sm-12" style="overflow-x:hidden">
<i class="fa fa-fw fa-archive"></i>
<%= name_link.name %>
</div>
- <div class="col-lg-12 arv-description-in-table">
+ <div class="col-sm-11 col-sm-push-1 arv-description-in-table">
<%= render_controller_partial(
'show_object_description_cell.html',
controller_name: 'collections',
<div class="col-md-4">
<form class="form-inline" role="form">
Show:
- <select class="form-control" data-filter-rows-by="data-kind" data-filter-target="table.arv-index.arv-folder-contents tbody">
+ <select class="form-control filterable-control" data-filterable-attribute="data-kind" data-filterable-target="table.arv-index.arv-folder-contents tbody">
<option value="">Everything</option>
<option value="arvados#collection">Data</option>
<option value="arvados#pipelineInstance arvados#job">Compute jobs</option>
</form>
</div>
<div class="col-md-4">
- <input type="text" class="form-control search-folder-contents" placeholder="Search folder contents" data-search-target=".arv-index.arv-folder-contents"/>
+ <input type="text" class="form-control filterable-control" placeholder="Search folder contents" data-filterable-target="table.arv-index.arv-folder-contents tbody"/>
</div>
</div>
</div>
<% @objects.each do |object| %>
- <div class="row selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= object.uuid %>">
+ <div class="row filterable selectable <%= 'multiple' if multiple %>" data-object-uuid="<%= object.uuid %>">
<div class="col-md-6" style="overflow-x:hidden">
<i class="fa fa-fw fa-gear"></i>
<%= object.name %>