Merge pull request #2930 from okriuchykhin/ok_SCI_5129

Implement the toolbar on the Team Projects page [SCI-5129]

app/assets/javascripts/projects/index.js

@@ -372,7 +372,7 @@
     exportProjectsModal = $('#export-projects-modal');
     exportProjectsModalHeader = exportProjectsModal.find('.modal-title');
     exportProjectsModalBody = exportProjectsModal.find('.modal-body');
-    exportProjectsBtn = $('#export-projects-button');
+    exportProjectsBtn = $('.export-projects-btn');
     exportProjectsSubmit = $('#export-projects-modal-submit');
 
     updateSelectedCards();
@@ -385,8 +385,10 @@
     initEditProjectButton($('.panel-project'));
     initArchiveRestoreButton($('.panel-project'));
 
-    $('.project-card-selector').off('click').click(function() {
-      var projectId = $(this).closest('.panel-project').data('id');
+    $('#projects-cards-view').on('click', '.project-card-selector', function() {
+      var projectsToolbar = $('#projectsToolbar');
+      var projectCard = $(this).closest('.panel-project');
+      var projectId = projectCard.data('id');
       // Determine whether ID is in the list of selected project IDs
       var index = $.inArray(projectId, selectedProjects);
 
@@ -395,15 +397,30 @@
         $(this).closest('.panel-project').addClass('selected');
         selectedProjects.push(projectId);
         exportProjectsBtn.removeAttr('disabled');
+        $('projects-actions').addClass('hidden');
       // Otherwise, if checkbox is not checked and ID is in list of selected IDs
       } else if (!this.checked && index !== -1) {
         $(this).closest('.panel-project').removeClass('selected');
         selectedProjects.splice(index, 1);
-
-        if (selectedProjects.length === 0) {
-          exportProjectsBtn.attr('disabled', 'disabled');
-        }
       }
+
+      if (selectedProjects.length === 0) {
+        projectsToolbar.find('.single-project-action, .multiple-projects-action').addClass('hidden');
+        projectsToolbar.find('.new-project-actions').removeClass('hidden');
+      } else if (selectedProjects.length === 1) {
+        projectsToolbar.find('.new-project-actions').addClass('hidden');
+        projectsToolbar.find('.single-project-action, .multiple-projects-action').removeClass('hidden');
+      } else {
+        projectsToolbar.find('.new-project-actions').addClass('hidden');
+        projectsToolbar.find('.single-project-action').addClass('hidden');
+        projectsToolbar.find('.multiple-projects-action').removeClass('hidden');
+      }
+
+      selectedProjects.forEach(function(id) {
+        if ($('#projects-cards-view').find(`.panel-project[data-id="${id}"]`).hasClass('project-folder')) {
+          projectsToolbar.find('.project-only-action').attr('disabled', true);
+        }
+      });
     });
 
     // initialize project tab remote loading

app/assets/stylesheets/themes/scinote.scss

@@ -54,12 +54,12 @@ table {
   margin-left: 15px;
 }
 
-#projects-toolbar {
+.projects-toolbar {
   margin-bottom: 15px;
-}
 
-#projects-toolbar .form-group {
-  width: 100%;
+  .form-group {
+    width: 100%;
+  }
 }
 
 .form-inline {

app/views/projects/index/_toolbar.html.erb

@@ -1,21 +1,61 @@
-<div id="projects-toolbar">
-  <form class="form-inline" action="<%= projects_path %>">
-    <div class="form-group">
-      <% if can_create_projects?(current_team) %>
-        <!-- new project button -->
-        <a class="btn btn-primary new-project-btn">
-          <span class="fas fa-plus" aria-hidden="true"></span>
-          <span class="hidden-xs"><%= t "projects.index.new" %></span>
-        </a>
-      <% end %>
+<div id="projectsToolbar" class="projects-toolbar">
 
-      <!-- project sort -->
-      <div class="dropdown">
-        <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <span><%= t("general.sort.#{@current_sort}_html") %></span>
-          <span class="caret"></span>
-        </button>
-        <ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu">
+  <form class="form-inline" action="<%= projects_path %>">
+
+    <div class="form-group">
+
+      <div class="new-project-actions pull-left">
+        <% if current_team && can_create_projects?(current_team) %>
+        <!-- new project button -->
+          <a href="#" class="btn btn-primary new-project-btn">
+            <span class="fas fa-plus" aria-hidden="true"></span>
+            <span class="hidden-xs"><%= t('projects.index.new') %></span>
+          </a>
+          <!-- new project folder button -->
+          <a href="#" class="btn btn-secondary new-project-folder-btn">
+            <span class="fas fa-folder" aria-hidden="true"></span>
+            <span class="hidden-xs"><%= t('projects.index.new_folder') %></span>
+          </a>
+        <% end %>
+      </div>
+
+      <div class="project-actions pull-left">
+        <a href="#" class="btn btn-secondary edit-project-btn single-project-action hidden">
+          <span class="fas fa-folder" aria-hidden="true"></span>
+          <span class="hidden-xs"><%= t('projects.index.edit_button') %></span>
+        </a>
+        <a href="#" class="btn btn-secondary move-projects-btn multiple-projects-action hidden">
+          <span class="fas fa-arrow-right" aria-hidden="true"></span>
+          <span class="hidden-xs"><%= t('projects.index.move_button') %></span>
+        </a>
+        <a href="#" class="btn btn-secondary archive-projects-btn multiple-projects-action project-only-action hidden">
+          <span class="fas fa-archive" aria-hidden="true"></span>
+          <span class="hidden-xs"><%= t('projects.index.archive_button') %></span>
+        </a>
+        <!-- export projects button -->
+        <a href="#" class="btn btn-secondary export-projects-btn multiple-projects-action project-only-action hidden"
+                    data-export-projects-modal-url="<%= export_projects_modal_team_path(current_team) %>">
+          <span class="fas fa-file-export"></span>
+          <span class="hidden-xs-custom"><%= t('projects.export_projects.export_button') %></span>
+        </a>
+      </div>
+
+      <div class="pull-right">
+        <!-- project search -->
+        <a class="projects-search-btn">
+          <i class="fas fa-search"></i>
+        </a>
+        <!-- project filter -->
+        <a class="projects-filter-btn">
+          <i class="fas fa-filter"></i>
+        </a>
+        <!-- project sort -->
+        <div class="dropdown">
+          <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <span><%= t("general.sort.#{@current_sort}_html") %></span>
+            <span class="caret"></span>
+          </button>
+          <ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu">
           <% ["new", "old", "atoz", "ztoa"].each do |sort| %>
             <li>
               <% if @current_sort != sort %>
@@ -25,17 +65,9 @@
               <% end %>
             </li>
           <% end %>
-        </ul>
+          </ul>
+        </div>
       </div>
-
-      <!-- export projects button -->
-      <button type="button" class="btn btn-secondary pull-right"
-              id="export-projects-button"
-              data-export-projects-modal-url="<%= export_projects_modal_team_path(current_team) %>"
-              disabled>
-        <span class="fas fa-file-export"></span>
-        <span class="hidden-xs-custom"><%= t("projects.export_projects.export_button") %></span>
-      </button>
     </div>
   </form>
 </div>

config/locales/en.yml

@@ -291,6 +291,7 @@ en:
         create_new_button: "New Project"
         no_permission_title: "You don't have permission to create new project. Please contact your team administrator."
       new: "New Project"
+      new_folder: "Create folder"
       visibility_private: "Project is visible to project members only."
       visibility_public: "Project is visible to all team members."
       user_project: "%{user} joined on %{timestamp}."
@@ -318,6 +319,10 @@ en:
       comment_tab: "Comments"
       new_comment: "New comment"
       content_loading: "Loading..."
+      edit_button: "Edit"
+      move_button: "Move"
+      archive_button: "Archive"
+      restore_button: "Restore"
       edit_option: "Edit"
       archive_option: "Archive"
       archive_confirm: "Are you sure you want to archive this project?"
@@ -346,7 +351,7 @@ en:
         invite_users_details: "to team %{team}."
         contact_admins: "To invite additional users to team %{team}, contact its administrator/s."
     export_projects:
-      export_button: "Export projects"
+      export_button: "Export"
       error_title: "Export denied"
       error_text_p1_html: "It looks like you have exceeded your daily export limit. The number of exports is <strong>limited to %{limit} requests per day </strong>- you currently have 0 export requests left."
       error_text_p2_html: "Please repeat the desired action <strong>tomorrow</strong>, when your daily limit will reset back to %{limit} export requests."
@@ -2172,7 +2177,6 @@ en:
     update: "Update"
     edit: "Edit"
     cancel: "Cancel"
-    save: "Save"
     close: "Close"
     create: 'Create'
     change: "Change"
@@ -2182,10 +2186,10 @@ en:
     comment_placeholder_new: "Add new comment…"
     archived: "Archived"
     sort:
-      new_html: "Newest first &#8595;"
-      old_html: "Oldest first &#8593;"
-      atoz_html: "Name &#8595;"
-      ztoa_html: "Name &#8593;"
+      new_html: " <i class=\"fas fa-sort-amount-down\"></i>"
+      old_html: "<i class=\"fas fa-sort-amount-up\"></i>"
+      atoz_html: "<i class=\"fas fa-sort-alpha-up\"></i>"
+      ztoa_html: "<i class=\"fas fa-sort-alpha-down\"></i>"
     sort_new:
       new: "Newest"
       old: "Oldest"