mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 14:45:56 +08:00
Merge pull request #2921 from urbanrotnik/ur-sci-5127
Add filters flyout [SCI-5127]
This commit is contained in:
Urban Rotnik
GitHub
commit
00cf35ef44
|
|
@ -8,7 +8,7 @@
|
|||
// - refactor view handling using library, ex. backbone.js
|
||||
|
||||
/* global Comments CounterBadge animateSpinner initFormSubmitLinks HelperModule
|
||||
I18n setupSidebarTree */
|
||||
I18n dropdownSelector */
|
||||
|
||||
(function(global) {
|
||||
var newProjectModal = null;
|
||||
|
|
@ -552,6 +552,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
function initCardsFilter() {
|
||||
dropdownSelector.init($('.assignee-filter'));
|
||||
}
|
||||
|
||||
// Updates "Select all" control in a data table
|
||||
function updateDataTableSelectAllCtrl() {
|
||||
var $table = TABLE.table().node();
|
||||
|
|
@ -764,4 +768,5 @@
|
|||
initProjectsViewModeSwitch();
|
||||
initSorting();
|
||||
loadCardsView();
|
||||
initCardsFilter();
|
||||
}(window));
|
||||
|
|
|
|||
|
|
@ -910,3 +910,116 @@ li.module-hover {
|
|||
}
|
||||
}
|
||||
|
||||
.projects-toolbar {
|
||||
.filter-container {
|
||||
.current-tasks-filters {
|
||||
padding: 0;
|
||||
width: 230px;
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
border-bottom: $border-default;
|
||||
display: flex;
|
||||
height: 2.75em;
|
||||
margin-bottom: 1em;
|
||||
padding: 0 .3em 0 1em;
|
||||
|
||||
.title {
|
||||
@include font-h2;
|
||||
flex-grow: 1;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-block {
|
||||
display: inline-block;
|
||||
padding: 0 1em 1em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
@include font-small;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.folders {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.folder-search-label {
|
||||
margin: 0 .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: center;
|
||||
border-top: $border-default;
|
||||
display: flex;
|
||||
height: 4.25em;
|
||||
justify-content: center;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.filters-applied::after {
|
||||
background: $brand-danger;
|
||||
border: 1px solid $color-white;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: .5em;
|
||||
left: 1.5em;
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.connect-line {
|
||||
background: $input-border;
|
||||
height: 10px;
|
||||
margin: 5px auto;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.datetime-picker-container {
|
||||
.calendar-input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.current-tasks-filters {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.btn:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime-picker-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.connect-line {
|
||||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.created-on-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,9 +46,76 @@
|
|||
<i class="fas fa-search"></i>
|
||||
</a>
|
||||
<!-- project filter -->
|
||||
<a class="projects-filter-btn">
|
||||
<i class="fas fa-filter"></i>
|
||||
</a>
|
||||
<div class="filter-container 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 current-tasks-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">
|
||||
<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.assignee.label") %></label>
|
||||
<select class="assignee-filter">
|
||||
<option value="user1"><%= "User 1" %></option>
|
||||
<option value="user2"><%= "User 2" %></option>
|
||||
<option value="user3"><%= "User 3" %></option>
|
||||
<option value="user4"><%= "User 4" %></option>
|
||||
</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 class="btn btn-primary apply-filters"><%= 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">
|
||||
|
|
|
|||
|
|
@ -357,6 +357,24 @@ en:
|
|||
invite_users_link: "Invite users"
|
||||
invite_users_details: "to team %{team}."
|
||||
contact_admins: "To invite additional users to team %{team}, contact its administrator/s."
|
||||
filters_modal:
|
||||
title: "Filters"
|
||||
created_on:
|
||||
label: "Created on"
|
||||
from_placeholder: "From"
|
||||
to_placeholder: "To"
|
||||
assignee:
|
||||
label: "Assignee"
|
||||
placeholder: "Select a person assigned to a project"
|
||||
folders:
|
||||
label: "Look inside folders"
|
||||
tooltip: "Hint should appear here"
|
||||
show_btn:
|
||||
many: "Show %{num} results"
|
||||
none: "No results"
|
||||
one: "Show result"
|
||||
clear_btn: "Clear"
|
||||
|
||||
export_projects:
|
||||
export_button: "Export"
|
||||
error_title: "Export denied"
|
||||
|
|
|
|||
Loading…
Reference in a new issue