3106: display spinner when modal dialogs are communicating with server.
[arvados.git] / apps / workbench / app / views / application / _choose.html.erb
1 <div class="modal arv-choose modal-with-loading-spinner">
2   <div class="modal-dialog" style="width:80%">
3     <div class="modal-content">
4       <div class="modal-header">
5         <button type="button" class="close" onClick="reset_form()" data-dismiss="modal" aria-hidden="true">&times;</button>
6         <h4 class="modal-title"><%= params[:title] || "Choose #{@objects.first.andand.class_for_display}" %></h4>
7       </div>
8       <div class="modal-body">
9         <div class="spinner spinner-32px spinner-h-center spinner-v-center" hidden="true"></div>
10         <nav class="navbar navbar-default breadcrumbs" role="navigation">
11           <ul class="nav navbar-nav navbar-left">
12             <li class="dropdown">
13             <%= render partial: "projects_tree_menu", locals: {
14                   :project_link_to => Proc.new do |pnode, &block|
15                     link_to "#", {"class" => "chooser-show-project", "data-project-uuid" => pnode[:object].uuid }, &block
16                    end,
17                   :top_button => Proc.new do %>
18                     <% link_to "#", {"class" => "chooser-show-project btn btn-xs btn-default pull-right" } do %>
19                       All <%= controller.model_class.class_for_display.pluralize.downcase %>
20                     <% end %>
21                   <% end %>
22              <% } %>
23             </li>
24             <li class="nav-separator">
25               <i class="fa fa-lg fa-angle-double-right"></i>
26             </li>
27             <li><p class="navbar-text" id="chooser-breadcrumb">All <%= controller.model_class.class_for_display.pluralize.downcase %></span></li>
28           </ul>
29           <div class="navbar-form navbar-right">
30             <input type="text" class="form-control filterable-control" placeholder="Search" data-filterable-target=".modal.arv-choose .selectable-container"/>
31           </div>
32         </nav>
33
34         <div class="row" style="height: 20em">
35           <div class="col-sm-6 container-fluid arv-filterable-list selectable-container"
36                style="height: 100%; overflow-y: scroll"
37                data-infinite-scroller="#choose-scroll"
38                id="choose-scroll"
39                data-infinite-content-href="<%= @next_page_href %>">
40             <%= render partial: 'choose_rows', locals: {multiple: multiple} %>
41           </div>
42           <div class="col-sm-6 modal-dialog-preview-pane" style="height: 100%; overflow-y: scroll">
43           </div>
44         </div>
45
46         <div class="modal-footer">
47           <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
48           <button class="btn btn-primary" aria-hidden="true" data-enable-if-selection disabled><%= raw(params[:action_name]) || 'Select' %></button>
49           <div class="modal-error hide" style="text-align: left; margin-top: 1em;">
50           </div>
51         </div>
52       </div>
53     </div>
54   </div>
55 </div>