mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-26 17:51:13 +08:00
Add archived mode for Projects
[SCI-5266]
This commit is contained in:
Urban Rotnik
parent
6a44e23697
commit
152990b4d6
6 changed files with 566 additions and 458 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
||||
<div class="content-pane flexible <%= mode %> projects-index" data-mode="<%= mode %>">
|
||||
<%= 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" %>
|
||||
<span style="display: none;" data-hook="projects-index-html"></span>
|
||||
|
||||
<%= render partial: 'projects/index/modals/new_project' %>
|
||||
|
|
@ -35,6 +40,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= javascript_include_tag "projects/index" %>
|
||||
|
|
|
|||
164
app/views/projects/index/_header.html.erb
Normal file
164
app/views/projects/index/_header.html.erb
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<div class="content-header">
|
||||
<h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
|
||||
<h1 data-view-mode="archived"><i class="fas fa-archive"></i> <%= t('projects.index.head_title') %></h1>
|
||||
|
||||
<div class="header-actions">
|
||||
<div>
|
||||
<div class="filter-container dropdown project-filters-dropdown">
|
||||
<div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
|
||||
<div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
|
||||
<div class="header">
|
||||
<div class="title"><%= t("projects.index.filters_modal.title") %></div>
|
||||
<div class="btn btn-light clear-button">
|
||||
<i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
|
||||
</div>
|
||||
|
||||
<div class="select-block dropdown-selector-container">
|
||||
<label><%= t('projects.index.filters_modal.text.label') %></label>
|
||||
<div class="input-field dropdown">
|
||||
<input id="textSearchFilterInput"
|
||||
class="dropdown-toggle search-field"
|
||||
type="text"
|
||||
name="search"
|
||||
autocomplete=åoffå"
|
||||
data-toggle="dropdown"
|
||||
data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
|
||||
</div>
|
||||
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2">
|
||||
<label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.created_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="createdOnStartDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="createdOnEndDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="select-block" data-view-mode="archived">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.archived_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="archivedOnStartDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="archivedOnEndDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<i class="fas fa-info-circle" title="<%= t("projects.index.filters_modal.folders.tooltip") %>"></i>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<% %w(new old atoz ztoa archived_first archived_last).each do |sort| %>
|
||||
<li <%= %w(archived_first archived_last).include?(sort) ? 'data-view-mode=archived' : '' %>>
|
||||
<% if @current_sort != sort %>
|
||||
<a href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a>
|
||||
<% else %>
|
||||
<a class="disabled" href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<%= render layout: "shared/view_switch", locals: { disabled: false } do %>
|
||||
<li class="view-switch-cards projects-view-mode active">
|
||||
<i class="fas fa-th-large button-icon"></i> <%= "Cards" %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-list projects-view-mode ">
|
||||
<i class="fas fa-list button-icon"></i> <%= "Table" %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-active archive-switch" data-view-mode="archived" data-mode="active">
|
||||
<i class="fas fa-rocket button-icon"></i> <%= "Go to Active projects" %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-archived archive-switch" data-view-mode="active" data-mode="archived">
|
||||
<i class="fas fa-archive button-icon"></i> <%= "Go to Archived projects" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="new-project-actions pull-left">
|
||||
<!-- new project button -->
|
||||
<% if current_team && can_create_projects?(current_team) %>
|
||||
<a href="#" class="btn btn-primary new-project-btn">
|
||||
<a href="#" class="btn btn-primary new-project-btn" data-view-mode="active">
|
||||
<span class="fas fa-plus" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.new') %></span>
|
||||
</a>
|
||||
|
|
@ -24,15 +24,15 @@
|
|||
</div>
|
||||
|
||||
<div class="project-actions pull-left">
|
||||
<a href="#" class="btn btn-secondary edit-project-btn single-project-action hidden">
|
||||
<a href="#" class="btn btn-secondary edit-project-btn single-project-action hidden" data-view-mode="active">
|
||||
<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">
|
||||
<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">
|
||||
<a href="#" class="btn btn-secondary archive-projects-btn multiple-projects-action project-only-action hidden" data-view-mode="active">
|
||||
<span class="fas fa-archive" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.archive_button') %></span>
|
||||
</a>
|
||||
|
|
@ -43,112 +43,6 @@
|
|||
<span class="hidden-xs-custom"><%= t('projects.export_projects.export_button') %></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
<!-- project filter -->
|
||||
<div class="filter-container dropdown project-filters-dropdown">
|
||||
<div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
|
||||
<div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
|
||||
<div class="header">
|
||||
<div class="title"><%= t("projects.index.filters_modal.title") %></div>
|
||||
<div class="btn btn-light clear-button">
|
||||
<i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
|
||||
</div>
|
||||
|
||||
<div class="select-block dropdown-selector-container">
|
||||
<label><%= t('projects.index.filters_modal.text.label') %></label>
|
||||
<div class="input-field dropdown">
|
||||
<input id="textSearchFilterInput"
|
||||
class="dropdown-toggle search-field"
|
||||
type="text"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
data-toggle="dropdown"
|
||||
data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
|
||||
</div>
|
||||
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2">
|
||||
<label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.created_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="calendarStartDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="calendarDueDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<i class="fas fa-info-circle" title="<%= t("projects.index.filters_modal.folders.tooltip") %>"></i>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 %>
|
||||
<a href="#" data-sort="<%= sort %>"><%= t("general.sort.#{sort}_html") %></a>
|
||||
<% else %>
|
||||
<a class="disabled" href="#" data-sort="<%= sort %>"><%= t("general.sort.#{sort}_html") %></a>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue