scinote-web/app/views/projects/index/_toolbar.html.erb

<div id="projectsToolbar" class="projects-toolbar">
  <div class="form-inline">
    <div class="project-actions">
      <span class="left">
        <!-- new project button -->
        <% if current_team && can_create_projects?(current_team) %>
          <%= link_to new_project_path(project_folder_id: current_folder),
                      class: 'btn btn-primary new-project-btn',
                      title: t('projects.index.new_tooltip'),
                      data: { view_mode: 'active' },
                      remote: true do %>
            <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
            <span class="hidden-xs"><%= t('projects.index.new') %></span>
          <% end %>
        <% end %>
        <!-- new project folder button -->
        <% if current_team && can_create_project_folders?(current_team) %>
          <%= link_to new_project_folder_path(project_folder_id: current_folder, view_mode: projects_view_mode),
                      class: 'btn btn-light new-project-folder-btn',
                      title: t('projects.index.new_folder_tooltip'),
                      remote: true do %>
            <span class="sn-icon sn-icon-folder" aria-hidden="true"></span>
            <span class="hidden-xs"><%= t('projects.index.new_folder') %></span>
          <% end %>
        <% end %>
      </span>

      <span class="middle">
        <%= render layout: 'shared/view_switch', locals: { disabled: false, name: t("toolbar.#{@current_view_type}_view") } do %>
          <li class="view-switch-list cards-switch form-dropdown-item">
            <%= button_to(view_type_projects_path(format: :json),
                          method: :put,
                          remote: true,
                          class: "btn btn-light justify-start button-to #{ @current_view_type == 'table' ? 'selected' : ''} prevent-shrink",
                          form_class: 'change-projects-view-type-form',
                          params: { projects: { view_type: 'table' } }) do %>
              <span class="view-switch-list-span table-switch"><%= t('toolbar.table_view') %></span>
            <% end %>
          </li>
          <li class="view-switch-list cards-switch form-dropdown-item">
            <%= button_to(view_type_projects_path(format: :json),
                          method: :put,
                          remote: true,
                          class: "btn btn-light justify-start button-to #{ @current_view_type == 'cards' ? 'selected' : ''} prevent-shrink",
                          form_class: 'change-projects-view-type-form',
                          params: { projects: { view_type: 'cards' } }) do %>
              <span class="view-switch-list-span cards-switch"><%= t('toolbar.cards_view') %></span>
            <% end %>
          </li>
        <% end %>
        <%= render partial: 'shared/state_view_switch', locals: {
          disabled: false,
          switchable: true,
          archived: params[:view_mode] =='archived',
          active_url: projects_path(view_mode: :active),
          archived_url: projects_path(view_mode: :archived),
        } %>
      </span>

      <span class="right">
        <%= render layout: 'shared/filter_dropdown', locals: {
          container_class: 'projects-filters',
          dropdown_title: t("filters_modal.title"),
          search_field_history_key: 'project_filters_per_team'
        } do %>
          <%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: ''} %>
          <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'created-on-filter', label: t("filters_modal.created_on.label"), view_mode: nil } %>
          <div class="select-block">
            <label><%= t("projects.index.filters_modal.members.label") %></label>
            <select class="members-filter"
                    data-ajax-url="<%= users_filter_projects_path %>"
                    data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
            </select>
          </div>
          <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: t("filters_modal.archived_on.label"), view_mode: 'archived' } %>
          <div class="select-block folders">
            <span class="sci-checkbox-container">
              <%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
              <span class="sci-checkbox-label"></span>
            </span>
            <span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
            <div class="dropdown folder-search-info">
              <a class="sn-icon sn-icon-info" id="folderSearchInfoBtn" data-toggle="dropdown"></a>
              <div id="folderSearchInfo" class="dropdown-menu folder-search-popover" aria-labelledby="folderSearchInfo">
                <%= t("projects.index.filters_modal.folders.popover_html") %>
              </div>
            </div>
          <% end %>
        </div>
        <div class="dropdown sort-menu" title="<%= t("general.sort.title") %>">
          <button class="btn btn-light btn-black icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span><i class="sn-icon sn-icon-sort-down"></i></span>
          </button>
          <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
            <% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
              <% if i.even? && i.positive? %>
                <li class="divider" <%= i == 2 ? 'data-view-mode=archived' : '' %>></li>
              <% end %>
              <li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
                <a class="<%= 'selected' if @current_sort == sort %>"
                  data-sort="<%= sort %>" >
                  <%= t("general.sort.#{sort}_html") %>
                </a>
              </li>
            <% end %>
          </ul>
        </div>
      </span>
    </div>
  </div>
</div>