diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js index 0b29509bf..a784e79b1 100644 --- a/app/assets/javascripts/projects/index.js +++ b/app/assets/javascripts/projects/index.js @@ -32,8 +32,6 @@ var exportProjectsBtn = null; var exportProjectsSubmit = null; - var projectsViewMode = 'cards'; - var projectsViewFilter = $('.projects-view-filter.active').data('filter'); var projectsViewSearch; var projectsChanged = false; var projectsViewSort = $('#sortMenuDropdown a.disabled').data('sort'); @@ -545,7 +543,7 @@ type: 'GET', dataType: 'json', data: { - filter: projectsViewFilter, + filter: $('.projects-index').data('mode'), sort: projectsViewSort, search: projectsViewSearch }, @@ -563,28 +561,32 @@ }); } - function initProjectsViewFilter() { - $('.projects-view-filter').click(function(event) { - event.preventDefault(); - event.stopPropagation(); - if ($(this).data('filter') === projectsViewFilter) { - return; - } - $('.projects-view-filter').removeClass('active'); - $(this).addClass('active'); - selectedProjects = []; - projectsViewFilter = $(this).data('filter'); - loadCardsView(); - }); - } - function initProjectsViewModeSwitch() { - $('input[type=radio][name=projects-view-mode-selector]').change(function() { - if (this.value === 'cards') { + let projectsPageSelector = '.projects-index '; + + // list/cards switch + $(projectsPageSelector + '.projects-view-mode').click(function() { + let $btn = $(this); + $('.projects-view-mode').removeClass('active'); + if ($btn.hasClass('view-switch-cards')) { $('#cards-wrapper').removeClass('list'); - } else if (this.value === 'list') { + } else if ($btn.hasClass('view-switch-list')) { $('#cards-wrapper').addClass('list'); } + $btn.addClass('active'); + }); + + // active/archived switch + $(projectsPageSelector + '.archive-switch').click(function() { + let $btn = $(this); + let mode = $btn.data('mode'); + let $projectsPageSelector = $(projectsPageSelector); + if (mode === 'active') { + $projectsPageSelector.removeClass('archived').addClass('active').data('mode', 'active'); + } else { + $projectsPageSelector.removeClass('active').addClass('archived').data('mode', 'archived'); + } + loadCardsView(); }); } @@ -604,11 +606,13 @@ } function initProjectsFilter() { - let $projectsFilter = $('#projectsToolbar .projects-filters'); + let $projectsFilter = $('.projects-index .projects-filters'); let $membersFilter = $('.members-filter', $projectsFilter); let $foldersCB = $('#folder_search', $projectsFilter); - let $createdOnFilter = $('#calendarStartDate', $projectsFilter); - let $dueFilter = $('#calendarDueDate', $projectsFilter); + let $createdOnStartFilter = $('#createdOnStartDate', $projectsFilter); + let $createdOnEndFilter = $('#createdOnEndDate', $projectsFilter); + let $archivedOnStartFilter = $('#archivedOnStartDate', $projectsFilter); + let $archivedOnEndFilter = $('#archivedOnEndDate', $projectsFilter); let $textFilter = $('#textSearchFilterInput', $projectsFilter); dropdownSelector.init($membersFilter, { @@ -682,7 +686,8 @@ } $('.projects-filters').dropdown('toggle'); - refreshCurrentView(); + + loadCardsView(); }); // Clear filters @@ -691,8 +696,10 @@ e.preventDefault(); dropdownSelector.clearData($membersFilter); - if ($createdOnFilter.data('DateTimePicker')) $createdOnFilter.data('DateTimePicker').clear(); - if ($dueFilter.data('DateTimePicker')) $dueFilter.data('DateTimePicker').clear(); + if ($createdOnStartFilter.data('DateTimePicker')) $createdOnStartFilter.data('DateTimePicker').clear(); + if ($createdOnEndFilter.data('DateTimePicker')) $createdOnEndFilter.data('DateTimePicker').clear(); + if ($archivedOnStartFilter.data('DateTimePicker')) $archivedOnStartFilter.data('DateTimePicker').clear(); + if ($archivedOnEndFilter.data('DateTimePicker')) $archivedOnEndFilter.data('DateTimePicker').clear(); $foldersCB.prop('checked', false); $textFilter.val(''); }); @@ -707,7 +714,6 @@ }); } - initProjectsViewFilter(); initProjectsViewModeSwitch(); initSorting(); loadCardsView(); diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 5c6d10fdb..5b7d43b8e 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -661,321 +661,35 @@ li.module-hover { // New projects page -.projects-container { - margin: 35px 20px; - .cards-wrapper { - align-items: center; - display: grid; - grid-auto-rows: 2em; - grid-column-gap: 1em; - grid-row-gap: 1em; - grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); - width: 100%; - - .table-header { - display: none; - } - - .projects-group { - grid-column: 1/-1; - margin: 0; - } - - .card { - background-color: $color-white; - color: $color-volcano; - display: flex; - flex-wrap: wrap; - height: 100%; - padding: .5em 1em; - position: relative; - width: 100%; - grid-row: span 4; - - .checkbox-cell { - align-items: center; - display: flex; - height: 2em; - justify-content: center; - left: .5em; - position: absolute; - top: .5em; - width: 2em; - } - - .user-cell { - .global-avatar-container { - height: 28px; - margin-right: .25em; - width: 28px; - } - - .value { - display: flex; - flex-wrap: wrap; - } - - } - - &.folder-card { - text-align: center; - - .icon-folder { - color: $brand-primary-light; - font-size: 5em; - width: 100%; - } - - .name { - color: $color-volcano; - font-weight: bold; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; - } - - .description { - color: $color-volcano; - width: 100%; - } - } - - &.project-card { - border-radius: 4px; - box-shadow: $flyout-shadow; - - .project-name-cell { - align-items: center; - display: flex; - height: 2em; - margin: 0 1.75em; - overflow: hidden; - - a { - color: inherit; - overflow: hidden; - white-space: nowrap; - } - - .name { - line-height: 2em; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .actions { - position: absolute; - right: .2em; - top: .2em; - - .project-actions-menu { - a { - @include font-button; - padding: .5em 1em; - - .fas { - margin-right: .4em; - } - } - - &.new-comments::after { - @include red-dot; - right: .4em; - top: .4em; - } - - &.new-comments { - .fa-comment { - position: relative; - - &::after { - @include red-dot; - right: -.4em; - top: -.3em; - } - } - } - } - } - - .data-row { - @include font-button; - align-items: center; - color: $color-black; - display: flex; - flex-basis: 100%; - line-height: 2em; - - .card-label { - color: $color-volcano; - width: 5em; - } - - .new-user { - align-items: center; - background: $color-concrete; - border-radius: 50%; - cursor: pointer; - display: flex; - height: 2em; - justify-content: center; - width: 2em; - - fas.fa-plus { - color: $color-silver-chalice; - } - } - } - } - } - - &.list { - grid-auto-flow: dense; - grid-auto-rows: 2em 1px; - grid-row-gap: .5em; - grid-template-columns: max-content 1fr 1fr 1fr 1fr max-content; - margin: 40px 0 0 6px; - - - .projects-group { - display: contents; - - .projects-breadcrumbs { - grid-column: inherit; - } - - &::after { - background: $color-concrete; - content: ""; - display: inline-block; - grid-column: inherit; - height: 1px; - } - } - - .card { - display: contents; - - // Border element - &:after { - background: $color-concrete; - content: ""; - display: inline-block; - grid-column: 1/-1; - height: 1px; - } - - .card-label { - display: none; - } - - .name { - @include font-button; - color: $brand-primary-light; - font-weight: normal; - } - - .checkbox-cell { - position: initial; - } - - &.folder-card { - text-align: left; - - .icon-folder { - display: none; - font-size: 2em; - margin: 0; - } - - .name { - grid-column: 5 span; - - &:before { - @include font-awesome; - content: "\f07b"; - margin-right: .25em; - } - } - - .description { - display: none; - } - } - - &.project-card { - .start-date-row { - display: contents; - } - - .checkbox-cell { - grid-column: 1; - } - - .project-name-cell { - grid-column: 2; - margin: 0; - - a:hover { - color: $brand-primary-light; - } - } - - .start-date-cell { - grid-column: 3; - } - - .visibility-cell { - grid-column: 4; - } - - .user-cell { - grid-column: 5; - } - - .actions-cell { - grid-column: 6; - position: initial; - } - } - } - - .table-header { - display: contents; - - &::after { - content: ""; - grid-column: 1/-1; - } - - .table-header-cell { - align-items: center; - border: 1px solid $color-white; - display: flex; - height: 3em; - margin-left: -.5em; - padding: 0 .5em; - width: calc(100% + 1em); - - &.select-all-checkboxes { - justify-content: center; - position: relative; - } - } - - & > * { - background-color: $color-concrete; - } - } +.projects-index { + &.active { + [data-view-mode="archived"] { + display: none !important; } } -} -.projects-toolbar { + &.archived { + [data-view-mode="active"] { + display: none !important; + } + } + + .projects-view-mode { + &.active::after { + @include font-awesome; + content: "\f00c"; + position: absolute; + right: 1em; + } + } + + .header-actions { + align-items: center; + display: flex; + margin-left: auto; + } + .filter-container { .projects-filters { padding: 0; @@ -1105,4 +819,318 @@ li.module-hover { } } } + + .projects-container { + margin: 35px 20px; + + .cards-wrapper { + align-items: center; + display: grid; + grid-auto-rows: 2em; + grid-column-gap: 1em; + grid-row-gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + width: 100%; + + .table-header { + display: none; + } + + .projects-group { + grid-column: 1/-1; + margin: 0; + } + + .card { + background-color: $color-white; + color: $color-volcano; + display: flex; + flex-wrap: wrap; + grid-row: span 4; + height: 100%; + padding: .5em 1em; + position: relative; + width: 100%; + + .checkbox-cell { + align-items: center; + display: flex; + height: 2em; + justify-content: center; + left: .5em; + position: absolute; + top: .5em; + width: 2em; + } + + .user-cell { + .global-avatar-container { + height: 28px; + margin-right: .25em; + width: 28px; + } + + .value { + display: flex; + flex-wrap: wrap; + } + + } + + &.folder-card { + text-align: center; + + .icon-folder { + color: $brand-primary-light; + font-size: 5em; + width: 100%; + } + + .name { + color: $color-volcano; + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + } + + .description { + color: $color-volcano; + width: 100%; + } + } + + &.project-card { + border-radius: 4px; + box-shadow: $flyout-shadow; + + .project-name-cell { + align-items: center; + display: flex; + height: 2em; + margin: 0 1.75em; + overflow: hidden; + + a { + color: inherit; + overflow: hidden; + white-space: nowrap; + } + + .name { + line-height: 2em; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .actions { + position: absolute; + right: .2em; + top: .2em; + + .project-actions-menu { + a { + @include font-button; + padding: .5em 1em; + + .fas { + margin-right: .4em; + } + } + + &.new-comments::after { + @include red-dot; + right: .4em; + top: .4em; + } + + &.new-comments { + .fa-comment { + position: relative; + + &::after { + @include red-dot; + right: -.4em; + top: -.3em; + } + } + } + } + } + + .data-row { + @include font-button; + align-items: center; + color: $color-black; + display: flex; + flex-basis: 100%; + line-height: 2em; + + .card-label { + color: $color-volcano; + width: 5em; + } + + .new-user { + align-items: center; + background: $color-concrete; + border-radius: 50%; + cursor: pointer; + display: flex; + height: 2em; + justify-content: center; + width: 2em; + + fas.fa-plus { + color: $color-silver-chalice; + } + } + } + } + } + + &.list { + grid-auto-flow: dense; + grid-auto-rows: 2em 1px; + grid-row-gap: .5em; + grid-template-columns: max-content 1fr 1fr 1fr 1fr max-content; + margin: 40px 0 0 6px; + + + .projects-group { + display: contents; + + .projects-breadcrumbs { + grid-column: inherit; + } + + &::after { + background: $color-concrete; + content: ""; + display: inline-block; + grid-column: inherit; + height: 1px; + } + } + + .card { + display: contents; + + // Border element + &:after { + background: $color-concrete; + content: ""; + display: inline-block; + grid-column: 1/-1; + height: 1px; + } + + .card-label { + display: none; + } + + .name { + @include font-button; + color: $brand-primary-light; + font-weight: normal; + } + + .checkbox-cell { + position: initial; + } + + &.folder-card { + text-align: left; + + .icon-folder { + display: none; + font-size: 2em; + margin: 0; + } + + .name { + grid-column: 5 span; + + &:before { + @include font-awesome; + content: "\f07b"; + margin-right: .25em; + } + } + + .description { + display: none; + } + } + + &.project-card { + .start-date-row { + display: contents; + } + + .checkbox-cell { + grid-column: 1; + } + + .project-name-cell { + grid-column: 2; + margin: 0; + + a:hover { + color: $brand-primary-light; + } + } + + .start-date-cell { + grid-column: 3; + } + + .visibility-cell { + grid-column: 4; + } + + .user-cell { + grid-column: 5; + } + + .actions-cell { + grid-column: 6; + position: initial; + } + } + } + + .table-header { + display: contents; + + &::after { + content: ""; + grid-column: 1/-1; + } + + .table-header-cell { + align-items: center; + border: 1px solid $color-white; + display: flex; + height: 3em; + margin-left: -.5em; + padding: 0 .5em; + width: calc(100% + 1em); + + &.select-all-checkboxes { + justify-content: center; + position: relative; + } + } + + & > * { + background-color: $color-concrete; + } + } + } + } + } } diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index 74803c885..abfe71ac3 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -1,15 +1,20 @@ <% provide(:head_title, t("projects.index.head_title")) %> <% provide(:sidebar_title, t("projects.index.navigation_title")) %> <% provide(:sidebar_url, sidebar_team_path(current_team, project_folder_id: @current_folder&.id)) %> +<% provide(:container_class, 'no-second-nav-container') %> +<% mode = params[:archived] ? :archived : :active %> + +<%= content_for :sidebar do %> + <%= render partial: 'shared/sidebar/projects', locals: { team: current_team } if current_team %> +<% end %> + +<% content_for :breadcrumbs do %> + <%= render partial: 'projects/index/breadcrumbs' if @current_folder %> +<% end %> + +
+ <%= render partial: 'projects/index/header' %> -<% if current_team %> - <%= content_for :sidebar do %> - <%= render partial: 'shared/sidebar/projects', locals: { team: current_team } %> - <% end %> - <% content_for :breadcrumbs do %> - <%= render partial: "projects/index/breadcrumbs" if @current_folder %> - <% end %> - <%= render partial: "shared/secondary_navigation" %> <%= render partial: 'projects/index/modals/new_project' %> @@ -35,6 +40,6 @@
-<% end %> + <%= javascript_include_tag "projects/index" %> diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb new file mode 100644 index 000000000..042ba4e73 --- /dev/null +++ b/app/views/projects/index/_header.html.erb @@ -0,0 +1,164 @@ +
+

<%= t('projects.index.head_title') %>

+

 <%= t('projects.index.head_title') %>

+ +
+
+
+
+ +
+
+
+
+ + +
+
+ <%= render layout: "shared/view_switch", locals: { disabled: false } do %> +
  • + <%= "Cards" %> +
    • + +
  • + <%= "Table" %> +
    • + +
  • + <%= "Go to Active projects" %> +
    • + +
  • + <%= "Go to Archived projects" %> +
    • + <% end %> +
    +
    diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb index 0cf8c9740..c19d32b39 100644 --- a/app/views/projects/index/_toolbar.html.erb +++ b/app/views/projects/index/_toolbar.html.erb @@ -7,7 +7,7 @@
    <% if current_team && can_create_projects?(current_team) %> - + @@ -24,15 +24,15 @@
    - - - @@ -43,112 +43,6 @@ <%= t('projects.export_projects.export_button') %>
    - -
    - -
    -
    - -
    - - -
    - - -
    -
    diff --git a/config/locales/en.yml b/config/locales/en.yml index 52df87431..b8a3ac66a 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -385,6 +385,10 @@ en: label: "Created on" from_placeholder: "From" to_placeholder: "To" + archived_on: + label: "Archived on" + from_placeholder: "From" + to_placeholder: "To" members: label: "Members" placeholder: "Select members of a project" @@ -397,6 +401,13 @@ en: none: "No results" one: "Show result" clear_btn: "Clear" + sort: + new: "Started last" + old: "Started first" + atoz: "Name A - Z" + ztoa: "Name Z - A" + archived_first: "Archived first" + archived_last: "Archived last" export_projects: export_button: "Export"