scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-09 13:28:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

Update styling for projects filters and fix some js bugs [SCI-5210] (#3012)

Browse source 
* Update styling for projects filters and fix some js bugs

* Fix hound
This commit is contained in:
mlorb 2020-12-17 23:13:45 +01:00 • committed by GitHub
parent ad4ee65f6b
commit f6f7211d77
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 194 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/javascripts/projects/index.js
View file

@ -564,8 +564,10 @@
$textFilter.click((e) => { $textFilter.click((e) => {
e.stopPropagation(); e.stopPropagation();
$('#textSearchFilterHistory').toggle(); $('#textSearchFilterHistory').toggle();
$textFilter.closest('.dropdown').toggleClass('open');
}).on('input', () => { }).on('input', () => {
$('#textSearchFilterHistory').hide(); $('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
}); });
$projectsFilter.on('click', '.projects-search-keyword', function(e) { $projectsFilter.on('click', '.projects-search-keyword', function(e) {
@ -573,6 +575,12 @@
e.preventDefault(); e.preventDefault();
$textFilter.val($(this).data('keyword')); $textFilter.val($(this).data('keyword'));
$('#textSearchFilterHistory').hide(); $('#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() { $('.project-filters-dropdown').on('show.bs.dropdown', function() {
@ -587,7 +595,7 @@
`<li class="dropdown-item"> `<li class="dropdown-item">
<a class="projects-search-keyword" href="#" data-keyword="${keyword}"> <a class="projects-search-keyword" href="#" data-keyword="${keyword}">
<i class="fas fa-history"></i> <i class="fas fa-history"></i>
${keyword} <span class="keyword-text">${keyword}</span>
</a> </a>
</li>` </li>`
)); ));
@ -595,6 +603,10 @@
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}).on('hide.bs.dropdown', function() {
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
$('#folderSearchInfo').hide();
}); });
$('#applyProjectFiltersButton').click((e) => { $('#applyProjectFiltersButton').click((e) => {
@ -640,10 +652,13 @@
// Prevent filter window close // Prevent filter window close
$($projectsFilter).click((e) => { $($projectsFilter).click((e) => {
if (!$(e.target).is('input')) { if (!$(e.target).is('input,a')) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
dropdownSelector.closeDropdown($membersFilter); dropdownSelector.closeDropdown($membersFilter);
$('#folderSearchInfo').hide();
} }
}); });
} }

49
app/assets/stylesheets/projects.scss
View file

@ -564,6 +564,8 @@ li.module-hover {
} }
.filter-container { .filter-container {
position: initial;
.projects-filters { .projects-filters {
padding: 0; padding: 0;
width: 230px; width: 230px;
@ -602,19 +604,57 @@ li.module-hover {
display: flex; display: flex;
.folder-search-label { .folder-search-label {
@include font-button;
margin: 0 .3em; 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 { .recent-searches {
border-top-left-radius: 0;
border-top-right-radius: 0;
left: auto;
margin-top: -1px;
top: auto;
width: calc(100% - 2em);
label { label {
@include font-small; @include font-small;
color: $color-silver-chalice;
font-weight: bold; font-weight: bold;
margin-bottom: .3em; margin-bottom: .3em;
padding: 0 1.5em; padding: 0 1.5em;
user-select: none; user-select: none;
} }
.projects-search-keyword {
@include font-button;
padding: .5em 1.25em;
.keyword-text {
margin-left: .25em;
}
}
} }
.footer { .footer {
@ -648,12 +688,6 @@ li.module-hover {
width: 2px; width: 2px;
} }
.datetime-picker-container {
.calendar-input {
padding-right: 40px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.projects-filters { .projects-filters {
@ -668,11 +702,12 @@ li.module-hover {
.datetime-picker-container { .datetime-picker-container {
display: inline-block; display: inline-block;
width: 46%;
} }
.connect-line { .connect-line {
display: inline-block; display: inline-block;
margin: 0 12px; margin: 0 11px;
position: relative; position: relative;
top: 2px; top: 2px;
transform: rotate(90deg); transform: rotate(90deg);

1
app/assets/stylesheets/shared/dropdown_selector.scss
View file

@ -75,6 +75,7 @@
flex-shrink: 0; flex-shrink: 0;
line-height: 13px; line-height: 13px;
margin: 2px 3px; margin: 2px 3px;
max-height: 24px;
max-width: calc(100% - 11px); max-width: calc(100% - 11px);
overflow: hidden; overflow: hidden;
padding: 5px 8px; padding: 5px 8px;

252
app/views/projects/index/_header.html.erb
View file

@ -2,147 +2,151 @@
<h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1> <h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
<h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('projects.index.head_title') %></h1> <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('projects.index.head_title') %></h1>
<div class="header-actions"> <div class="sci-btn-group header-actions">
<div> <div class="filter-container dropdown project-filters-dropdown">
<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="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="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>"> <div class="header">
<div class="header"> <div class="title"><%= t("projects.index.filters_modal.title") %></div>
<div class="title"><%= t("projects.index.filters_modal.title") %></div> <div class="btn btn-light clear-button">
<div class="btn btn-light clear-button"> <i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
<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>
<div class="select-block dropdown-selector-container"> <div class="connect-line"></div>
<label><%= t('projects.index.filters_modal.text.label') %></label>
<div class="input-field dropdown"> <div class="datetime-picker-container" id="to-date">
<input id="textSearchFilterInput" <span class="fas fa-calendar-alt"></span>
class="dropdown-toggle search-field" <input id="createdOnEndDate"
type="text" type="datetime"
name="search" data-toggle='date-time-picker'
autocomplete="off" class="form-control calendar-input"
data-toggle="dropdown" readonly
data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>"> placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
</div> data-date-format="<%= datetime_picker_format_full %>"
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2"> data-date-locale="<%= I18n.locale %>"
<label><%= t("projects.index.filters_modal.recent_searches_label") %></label> data-date-use-current="false"
</div> 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>
<div class="select-block"> <div class="connect-line"></div>
<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>
<div class="datetime-picker-container" id="to-date"> <input id="archivedOnEndDate"
<span class="fas fa-calendar-alt"></span> type="datetime"
<input id="createdOnEndDate" data-toggle='date-time-picker'
type="datetime" class="form-control calendar-input"
data-toggle='date-time-picker' readonly
class="form-control calendar-input" placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
readonly data-date-format="<%= datetime_picker_format_full %>"
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>" data-date-locale="<%= I18n.locale %>"
data-date-format="<%= datetime_picker_format_full %>" data-date-use-current="false"
data-date-locale="<%= I18n.locale %>" data-date-orientation="left"
data-date-use-current="false" value=""/>
data-date-orientation="left"
value=""/>
</div>
</div> </div>
</div>
<div class="select-block"> <div class="select-block folders">
<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"> <span class="sci-checkbox-container">
<%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %> <%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
<span class="sci-checkbox-label"></span> <span class="sci-checkbox-label"></span>
</span> </span>
<span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></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 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>
<div class="footer"> </div>
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></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> </div>
<div>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <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><%= t("general.sort.#{@current_sort}_html") %></span>
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu"> <ul id="sortMenuDropdown" class="dropdown-menu" aria-labelledby="sortMenu">
<% %w(new old atoz ztoa archived_first archived_last).each do |sort| %> <% %w(new old atoz ztoa archived_first archived_last).each do |sort| %>
<li <%= %w(archived_first archived_last).include?(sort) ? 'data-view-mode=archived' : '' %>> <li <%= %w(archived_first archived_last).include?(sort) ? 'data-view-mode=archived' : '' %>>
<% if @current_sort != sort %> <% if @current_sort != sort %>
<a href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a> <a href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a>
<% else %> <% else %>
<a class="disabled" href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a> <a class="disabled" href="#" data-sort="<%= sort %>"><%= t("projects.index.sort.#{sort}") %></a>
<% end %> <% end %>
</li> </li>
<% end %> <% end %>
</ul> </ul>
</div>
</div> </div>
<%= render layout: 'shared/view_switch', locals: { disabled: false } do %> <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
<li class="view-switch-cards projects-view-mode active"> <li class="view-switch-cards projects-view-mode active">
<i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %> <i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %>

12
config/locales/en.yml
View file

@ -406,11 +406,11 @@ en:
label: "Contains text" label: "Contains text"
placeholder: "Enter search terms..." placeholder: "Enter search terms..."
created_on: created_on:
label: "Created on" label: "Start date"
from_placeholder: "From" from_placeholder: "From"
to_placeholder: "To" to_placeholder: "To"
archived_on: archived_on:
label: "Archived on" label: "Archived date"
from_placeholder: "From" from_placeholder: "From"
to_placeholder: "To" to_placeholder: "To"
members: members:
@ -418,12 +418,12 @@ en:
placeholder: "Select members of a project" placeholder: "Select members of a project"
folders: folders:
label: "Look inside 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" recent_searches_label: "Recent searches"
show_btn: show_btn:
many: "Show %{num} results" many: "Show %{num} projects"
none: "No results" none: "No projects"
one: "Show result" one: "Show project"
clear_btn: "Clear" clear_btn: "Clear"
sort: sort:
new: "Started last" new: "Started last"