From 258c57870f92f8d7a844fbb8237ab0586c3aba28 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Mon, 2 Nov 2020 13:27:06 +0100 Subject: [PATCH 1/2] Implement the toolbar on the Team Projects page [SCI-5129] --- app/assets/javascripts/projects/index.js | 31 ++++++-- app/assets/stylesheets/themes/scinote.scss | 4 +- app/views/projects/index/_project.html.erb | 2 +- app/views/projects/index/_toolbar.html.erb | 86 +++++++++++++++------- config/locales/en.yml | 16 ++-- 5 files changed, 96 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js index c7e027c5c..3c9ceb7f8 100644 --- a/app/assets/javascripts/projects/index.js +++ b/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 diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 9b23d2c13..a2703a503 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -54,11 +54,11 @@ table { margin-left: 15px; } -#projects-toolbar { +#projectsToolbar { margin-bottom: 15px; } -#projects-toolbar .form-group { +#projectsToolbar .form-group { width: 100%; } diff --git a/app/views/projects/index/_project.html.erb b/app/views/projects/index/_project.html.erb index 19858df23..eee45c311 100644 --- a/app/views/projects/index/_project.html.erb +++ b/app/views/projects/index/_project.html.erb @@ -55,7 +55,7 @@
  • diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb index 8ed1b6fa1..e82d77883 100644 --- a/app/views/projects/index/_toolbar.html.erb +++ b/app/views/projects/index/_toolbar.html.erb @@ -1,21 +1,61 @@ -
    -
    -
    - <% if can_create_projects?(current_team) %> - - - - - - <% end %> +
    - -
    - - +
    - - -
    diff --git a/config/locales/en.yml b/config/locales/en.yml index dc7909e60..4880fcac6 100644 --- a/config/locales/en.yml +++ b/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 limited to %{limit} requests per day - you currently have 0 export requests left." error_text_p2_html: "Please repeat the desired action tomorrow, 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 ↓" - old_html: "Oldest first ↑" - atoz_html: "Name ↓" - ztoa_html: "Name ↑" + new_html: " " + old_html: "" + atoz_html: "" + ztoa_html: "" sort_new: new: "Newest" old: "Oldest" From 327baafcd728cd6861ffdb4c29143781764ff282 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Wed, 4 Nov 2020 16:10:40 +0100 Subject: [PATCH 2/2] Improve CSS structure for project toolbar [SCI-5129] --- app/assets/stylesheets/themes/scinote.scss | 8 ++++---- app/views/projects/index/_toolbar.html.erb | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index a2703a503..081227295 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -54,12 +54,12 @@ table { margin-left: 15px; } -#projectsToolbar { +.projects-toolbar { margin-bottom: 15px; -} -#projectsToolbar .form-group { - width: 100%; + .form-group { + width: 100%; + } } .form-inline { diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb index e82d77883..a1b6d4365 100644 --- a/app/views/projects/index/_toolbar.html.erb +++ b/app/views/projects/index/_toolbar.html.erb @@ -1,4 +1,4 @@ -
    +