mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Revamp of (top) toolbar - projects [SCI-8303]
This commit is contained in:
Giga Chubinidze
parent
07f20e0e61
commit
a0d863e230
|
|
@ -478,6 +478,7 @@ var ProjectsIndex = (function() {
|
|||
$('#breadcrumbsWrapper').html(data.breadcrumbs_html);
|
||||
$(projectsWrapper).find('.projects-title').html(data.title_html);
|
||||
$(toolbarWrapper).html(data.toolbar_html);
|
||||
initProjectsViewModeSwitch();
|
||||
viewContainer.data('projects-cards-url', data.projects_cards_url);
|
||||
viewContainer.removeClass('no-results');
|
||||
viewContainer.find('.card, .projects-group, .no-results-container').remove();
|
||||
|
|
|
|||
|
|
@ -639,6 +639,27 @@ li.module-hover {
|
|||
}
|
||||
|
||||
.projects-toolbar {
|
||||
.project-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
margin-right: .25em;
|
||||
}
|
||||
.left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.middle {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
align-self: flex-end;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
.form-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,16 +25,10 @@ class ProjectsController < ApplicationController
|
|||
before_action :set_folder_inline_name_editing, only: %i(index cards)
|
||||
before_action :set_breadcrumbs_items, only: %i(index show)
|
||||
before_action :set_navigator, only: %i(index show)
|
||||
|
||||
before_action :set_current_projects_view_type, only: %i(index cards)
|
||||
layout 'fluid'
|
||||
|
||||
def index
|
||||
if current_team
|
||||
view_state = current_team.current_view_state(current_user)
|
||||
@current_sort = view_state.state.dig('projects', projects_view_mode, 'sort') || 'atoz'
|
||||
@current_view_type = view_state.state.dig('projects', 'view_type')
|
||||
end
|
||||
end
|
||||
def index; end
|
||||
|
||||
def cards
|
||||
overview_service = ProjectsOverviewService.new(current_team, current_user, current_folder, params)
|
||||
|
|
@ -484,4 +478,12 @@ class ProjectsController < ApplicationController
|
|||
def set_navigator
|
||||
@navigator = true
|
||||
end
|
||||
|
||||
def set_current_projects_view_type
|
||||
if current_team
|
||||
view_state = current_team.current_view_state(current_user)
|
||||
@current_sort = view_state.state.dig('projects', projects_view_mode, 'sort') || 'atoz'
|
||||
@current_view_type = view_state.state.dig('projects', 'view_type')
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -18,96 +18,6 @@
|
|||
<i class="fas fa-archive"></i>
|
||||
<span class="projects-title name-readonly-placeholder"><%= current_folder&.name || t('projects.index.head_title_archived') %></span>
|
||||
</h1>
|
||||
|
||||
<div class="sci-btn-group header-actions">
|
||||
<%= 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 button-to #{ @current_view_type == 'table' ? 'selected' : ''}",
|
||||
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 button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
|
||||
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 layout: 'shared/state_view_switch', locals: { disabled: false } do %>
|
||||
<li class="view-switch-list cards-switch form-dropdown-item">
|
||||
<%= button_tag class: "btn btn-#{params[:view_mode] ? 'light' : 'primary'} state-view-switch archive-switch", data: { url: projects_path } do %>
|
||||
<span class="<%= params[:view_mode] ? 'text-dark' : 'text-light' %>">
|
||||
<%= t('toolbar.active_state') %>
|
||||
</span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="view-switch-list cards-switch form-dropdown-item">
|
||||
<%= button_tag class: "btn btn-#{params[:view_mode] ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: projects_path(view_mode: 'archived') } do %>
|
||||
<span class="<%= params[:view_mode] ? 'text-light' : 'text-dark' %>">
|
||||
<%= t('toolbar.archived_state') %>
|
||||
</span>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<%= 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="fas fa-info-circle" 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 class="dropdown sort-menu">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span><i class="fas fa-sort-amount-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbarWrapper" class="toolbar-row">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,120 @@
|
|||
<div id="projectsToolbar" class="projects-toolbar">
|
||||
<div class="form-inline">
|
||||
<div class="project-actions">
|
||||
<!-- 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',
|
||||
data: { view_mode: 'active' },
|
||||
remote: true do %>
|
||||
<span class="fas fa-plus" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.new') %></span>
|
||||
<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',
|
||||
data: { view_mode: 'active' },
|
||||
remote: true do %>
|
||||
<span class="fas fa-plus" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.new') %></span>
|
||||
<% end %>
|
||||
<% 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',
|
||||
remote: true do %>
|
||||
<span class="fas fa-folder" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.new_folder') %></span>
|
||||
<!-- 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',
|
||||
remote: true do %>
|
||||
<span class="fas fa-folder" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.new_folder') %></span>
|
||||
<% end %>
|
||||
<% 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 button-to #{ @current_view_type == 'table' ? 'selected' : ''}",
|
||||
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 button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
|
||||
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 layout: 'shared/state_view_switch', locals: { disabled: false } do %>
|
||||
<li class="view-switch-list cards-switch form-dropdown-item">
|
||||
<%= button_tag class: "btn btn-#{params[:view_mode] == 'active' ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: projects_path } do %>
|
||||
<span class="<%= params[:view_mode] == 'active' ? 'text-light' : 'text-dark' %>">
|
||||
<%= t('toolbar.active_state') %>
|
||||
</span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="view-switch-list cards-switch form-dropdown-item">
|
||||
<%= button_tag class: "btn btn-#{params[:view_mode] =='archived' ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: projects_path(view_mode: 'archived') } do %>
|
||||
<span class="<%= params[:view_mode] =='archived' ? 'text-light' : 'text-dark' %>">
|
||||
<%= t('toolbar.archived_state') %>
|
||||
</span>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</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="fas fa-info-circle" 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 class="dropdown sort-menu">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span><i class="fas fa-sort-amount-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>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<!--
|
||||
<a href="#" class="btn btn-light edit-btn single-object-action hidden" data-for="editable">
|
||||
<span class="fas fa-pencil-alt" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.edit_button') %></span>
|
||||
|
|
@ -54,13 +149,16 @@
|
|||
method: :post do %>
|
||||
<span class="fas fa-trash" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.delete_button') %></span>
|
||||
<% end %>
|
||||
<% end %> -->
|
||||
|
||||
<!-- export projects button -->
|
||||
<!--
|
||||
<a href="#" class="btn btn-light export-projects-btn multiple-object-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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="dropdown view-switch" >
|
||||
<a href="#" class="btn btn-light view-switch-button <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="state-view-switch-btn-name""><%= params[:view_mode] ? t('toolbar.archived_state') : t('toolbar.active_state') %></span>
|
||||
<span class="state-view-switch-btn-name""><%= params[:view_mode] == 'archived' ? t('toolbar.archived_state') : t('toolbar.active_state') %></span>
|
||||
<span class="caret pull-right"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
|
||||
|
|
|
|||
Loading…
Reference in a new issue