mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-06 20:05:55 +08:00
Update styling for projects filters and fix some js bugs [SCI-5210] (#3012)
* Update styling for projects filters and fix some js bugs * Fix hound
This commit is contained in:
mlorb
GitHub
parent
ad4ee65f6b
commit
f6f7211d77
5 changed files with 194 additions and 139 deletions
|
|
@ -564,8 +564,10 @@
|
|||
$textFilter.click((e) => {
|
||||
e.stopPropagation();
|
||||
$('#textSearchFilterHistory').toggle();
|
||||
$textFilter.closest('.dropdown').toggleClass('open');
|
||||
}).on('input', () => {
|
||||
$('#textSearchFilterHistory').hide();
|
||||
$textFilter.closest('.dropdown').removeClass('open');
|
||||
});
|
||||
|
||||
$projectsFilter.on('click', '.projects-search-keyword', function(e) {
|
||||
|
|
@ -573,6 +575,12 @@
|
|||
e.preventDefault();
|
||||
$textFilter.val($(this).data('keyword'));
|
||||
$('#textSearchFilterHistory').hide();
|
||||
$textFilter.closest('.dropdown').removeClass('open');
|
||||
});
|
||||
|
||||
$projectsFilter.on('click', '#folderSearchInfoBtn', function(e) {
|
||||
e.stopPropagation();
|
||||
$('#folderSearchInfo').toggle();
|
||||
});
|
||||
|
||||
$('.project-filters-dropdown').on('show.bs.dropdown', function() {
|
||||
|
|
@ -587,7 +595,7 @@
|
|||
`<li class="dropdown-item">
|
||||
<a class="projects-search-keyword" href="#" data-keyword="${keyword}">
|
||||
<i class="fas fa-history"></i>
|
||||
${keyword}
|
||||
<span class="keyword-text">${keyword}</span>
|
||||
</a>
|
||||
</li>`
|
||||
));
|
||||
|
|
@ -595,6 +603,10 @@
|
|||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}).on('hide.bs.dropdown', function() {
|
||||
$('#textSearchFilterHistory').hide();
|
||||
$textFilter.closest('.dropdown').removeClass('open');
|
||||
$('#folderSearchInfo').hide();
|
||||
});
|
||||
|
||||
$('#applyProjectFiltersButton').click((e) => {
|
||||
|
|
@ -640,10 +652,13 @@
|
|||
|
||||
// Prevent filter window close
|
||||
$($projectsFilter).click((e) => {
|
||||
if (!$(e.target).is('input')) {
|
||||
if (!$(e.target).is('input,a')) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
$('#textSearchFilterHistory').hide();
|
||||
$textFilter.closest('.dropdown').removeClass('open');
|
||||
dropdownSelector.closeDropdown($membersFilter);
|
||||
$('#folderSearchInfo').hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -564,6 +564,8 @@ li.module-hover {
|
|||
}
|
||||
|
||||
.filter-container {
|
||||
position: initial;
|
||||
|
||||
.projects-filters {
|
||||
padding: 0;
|
||||
width: 230px;
|
||||
|
|
@ -602,19 +604,57 @@ li.module-hover {
|
|||
display: flex;
|
||||
|
||||
.folder-search-label {
|
||||
@include font-button;
|
||||
margin: 0 .3em;
|
||||
}
|
||||
|
||||
.fas {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.folder-search-popover {
|
||||
@include font-button;
|
||||
left: -140px;
|
||||
padding: 1.25em;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-search-filter {
|
||||
&.open {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-searches {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
left: auto;
|
||||
margin-top: -1px;
|
||||
top: auto;
|
||||
width: calc(100% - 2em);
|
||||
|
||||
label {
|
||||
@include font-small;
|
||||
color: $color-silver-chalice;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3em;
|
||||
padding: 0 1.5em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.projects-search-keyword {
|
||||
@include font-button;
|
||||
padding: .5em 1.25em;
|
||||
|
||||
.keyword-text {
|
||||
margin-left: .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -648,12 +688,6 @@ li.module-hover {
|
|||
width: 2px;
|
||||
}
|
||||
|
||||
.datetime-picker-container {
|
||||
.calendar-input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.projects-filters {
|
||||
|
|
@ -668,11 +702,12 @@ li.module-hover {
|
|||
|
||||
.datetime-picker-container {
|
||||
display: inline-block;
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.connect-line {
|
||||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
margin: 0 11px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
flex-shrink: 0;
|
||||
line-height: 13px;
|
||||
margin: 2px 3px;
|
||||
max-height: 24px;
|
||||
max-width: calc(100% - 11px);
|
||||
overflow: hidden;
|
||||
padding: 5px 8px;
|
||||
|
|
|
|||
|
|
@ -2,147 +2,151 @@
|
|||
<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 class="sci-btn-group header-actions">
|
||||
<div class="filter-container dropdown project-filters-dropdown">
|
||||
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
|
||||
<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 text-search-filter">
|
||||
<input id="textSearchFilterInput"
|
||||
class="dropdown-toggle search-field"
|
||||
type="text"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
data-toggle="dropdown"
|
||||
placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
|
||||
</div>
|
||||
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput">
|
||||
<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="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 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="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="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 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">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="footer">
|
||||
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
|
||||
</div>
|
||||
</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 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 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>
|
||||
|
||||
<%= 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> <%= t('projects.index.header.cards') %>
|
||||
|
|
|
|||
|
|
@ -406,11 +406,11 @@ en:
|
|||
label: "Contains text"
|
||||
placeholder: "Enter search terms..."
|
||||
created_on:
|
||||
label: "Created on"
|
||||
label: "Start date"
|
||||
from_placeholder: "From"
|
||||
to_placeholder: "To"
|
||||
archived_on:
|
||||
label: "Archived on"
|
||||
label: "Archived date"
|
||||
from_placeholder: "From"
|
||||
to_placeholder: "To"
|
||||
members:
|
||||
|
|
@ -418,12 +418,12 @@ en:
|
|||
placeholder: "Select members of a project"
|
||||
folders:
|
||||
label: "Look inside folders"
|
||||
tooltip: "Hint should appear here"
|
||||
popover_html: "When <strong>“Look inside folders”</strong> is active, the filters will also take all folders and their content into account."
|
||||
recent_searches_label: "Recent searches"
|
||||
show_btn:
|
||||
many: "Show %{num} results"
|
||||
none: "No results"
|
||||
one: "Show result"
|
||||
many: "Show %{num} projects"
|
||||
none: "No projects"
|
||||
one: "Show project"
|
||||
clear_btn: "Clear"
|
||||
sort:
|
||||
new: "Started last"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue