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

Redesign clear buttons on global activities page

Browse source
This commit is contained in:
Mojca Lorber 2020-02-07 11:33:25 +01:00
parent 665c178d79
commit 9068c20588
8 changed files with 66 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/javascripts/global_activities/side_pane.js
View file

@ -77,7 +77,9 @@ var globalActivities = (function() {
var defaultOnChangeActions = function() { var defaultOnChangeActions = function() {
GlobalActivitiesUpdateTopPaneTags(); GlobalActivitiesUpdateTopPaneTags();
reloadActivities(); reloadActivities();
toggleClearButtons();
}; };
$('.ga-tags-container').hide();
dropdownSelector.init(groupActivityFilter, { dropdownSelector.init(groupActivityFilter, {
optionClass: 'checkbox-icon', optionClass: 'checkbox-icon',
@ -113,6 +115,7 @@ var globalActivities = (function() {
updateRunning = false; updateRunning = false;
GlobalActivitiesUpdateTopPaneTags(); GlobalActivitiesUpdateTopPaneTags();
reloadActivities(); reloadActivities();
toggleClearButtons();
}); });
dropdownSelector.init(userFilter, { dropdownSelector.init(userFilter, {
@ -295,6 +298,24 @@ var globalActivities = (function() {
return true; return true;
} }
function toggleClearButtons() {
var topFilters = $('.ga-tags-container');
if (topFilters.find('.ds-tags').length) {
topFilters.show();
} else {
topFilters.hide();
}
$.each($('.filter-block'), (i, block) => {
if ($(block).find('.ds-tags').length
|| ($(block).hasClass('date-selector') && $(block)[0].dataset.periodSelect.length)) {
$(block).find('.clear').show();
} else {
$(block).find('.clear').hide();
}
});
}
function resetHotButtonsBackgroundColor() { function resetHotButtonsBackgroundColor() {
$('.date-selector .hot-button').each(function() { $('.date-selector .hot-button').each(function() {
$(this).removeClass('selected'); $(this).removeClass('selected');
@ -314,6 +335,7 @@ var globalActivities = (function() {
dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val(); dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
GlobalActivitiesUpdateTopPaneTags(); GlobalActivitiesUpdateTopPaneTags();
reloadActivities(); reloadActivities();
toggleClearButtons();
resetHotButtonsBackgroundColor(); resetHotButtonsBackgroundColor();
} }
}); });
@ -325,6 +347,7 @@ var globalActivities = (function() {
dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val(); dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
GlobalActivitiesUpdateTopPaneTags(); GlobalActivitiesUpdateTopPaneTags();
reloadActivities(); reloadActivities();
toggleClearButtons();
resetHotButtonsBackgroundColor(); resetHotButtonsBackgroundColor();
} }
}); });
@ -376,6 +399,7 @@ var globalActivities = (function() {
dateContainer[0].dataset.periodSelect = this.innerHTML; dateContainer[0].dataset.periodSelect = this.innerHTML;
GlobalActivitiesUpdateTopPaneTags(); GlobalActivitiesUpdateTopPaneTags();
reloadActivities(); reloadActivities();
toggleClearButtons();
resetHotButtonsBackgroundColor(); resetHotButtonsBackgroundColor();
$(this).addClass('selected'); $(this).addClass('selected');

38
app/assets/stylesheets/global_activities.scss
View file

@ -17,8 +17,6 @@
} }
.ga-top { .ga-top {
border-bottom: 1px solid $color-gainsboro;
.ga-title { .ga-title {
border-bottom: 1px solid $color-gainsboro; border-bottom: 1px solid $color-gainsboro;
height: 35px; height: 35px;
@ -71,11 +69,18 @@
} }
.ga-tags-container { .ga-tags-container {
border-bottom: 1px solid $color-gainsboro;
display: flex; display: flex;
min-height: 38px; min-height: 38px;
padding: 5px 0; padding: 2px 0;
.clear-container {
flex-shrink: 0;
margin-left: 4px;
}
.ga-tags { .ga-tags {
align-items: center;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-wrap: wrap; flex-wrap: wrap;
@ -95,6 +100,7 @@
flex-shrink: 0; flex-shrink: 0;
line-height: 13px; line-height: 13px;
margin: 2px 3px; margin: 2px 3px;
max-height: 24px;
max-width: 250px; max-width: 250px;
overflow: hidden; overflow: hidden;
padding: 5px 8px; padding: 5px 8px;
@ -126,26 +132,12 @@
.fas { .fas {
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
font-size: 13px; font-size: 12px;
opacity: .7; opacity: .7;
text-align: right; text-align: right;
} }
} }
} }
.clear-container {
color: $color-silver-chalice;
cursor: pointer;
flex-shrink: 0;
line-height: 28px;
padding-left: 15px;
user-select: none;
.fas {
margin-right: 5px;
}
}
} }
} }
@ -322,10 +314,18 @@
.clear { .clear {
cursor: pointer; cursor: pointer;
display: none;
float: right; float: right;
font-weight: normal;
line-height: 12px; line-height: 12px;
margin-bottom: 5px; margin-bottom: 0;
margin-top: 8px;
padding-bottom: 8px;
padding-top: 8px; padding-top: 8px;
&:hover {
text-decoration: underline;
}
} }
.select-container { .select-container {

1
app/assets/stylesheets/partials/_sidebar.scss
View file

@ -24,7 +24,6 @@
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
bottom: 50%; bottom: 50%;
box-shadow: $flyout-shadow;
display: block; display: block;
position: absolute; position: absolute;
right: -18px; right: -18px;

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

@ -96,7 +96,7 @@
.fas { .fas {
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
font-size: 13px; font-size: 12px;
opacity: .7; opacity: .7;
text-align: right; text-align: right;
} }

16
app/assets/stylesheets/shared_styles/elements/buttons.scss
View file

@ -57,46 +57,46 @@
&.btn-secondary { &.btn-secondary {
background: $color-white; background: $color-white;
border: $border-default; border: $border-default;
color: $color-black; color: $color-volcano;
&:hover { &:hover {
background: $color-concrete; background: $color-concrete;
border: $border-secondary; border: $border-secondary;
color: $color-black; color: $color-volcano;
} }
&:active { &:active {
background: $color-alto; background: $color-alto;
border: $border-secondary; border: $border-secondary;
color: $color-black; color: $color-volcano;
} }
&:focus { &:focus {
box-shadow: 0 0 0 1px $brand-focus; box-shadow: 0 0 0 1px $brand-focus;
color: $color-black; color: $color-volcano;
} }
} }
&.btn-light { &.btn-light {
background: transparent; background: transparent;
border: $border-transparent; border: $border-transparent;
color: $color-black; color: $color-volcano;
&:hover { &:hover {
background: $color-concrete; background: $color-concrete;
border: $border-transparent; border: $border-transparent;
color: $color-black; color: $color-volcano;
} }
&:active { &:active {
background: $color-alto; background: $color-alto;
border: $border-transparent; border: $border-transparent;
color: $color-black; color: $color-volcano;
} }
&:focus { &:focus {
box-shadow: 0 0 0 1px $brand-focus; box-shadow: 0 0 0 1px $brand-focus;
color: $color-black; color: $color-volcano;
} }
} }

4
app/views/global_activities/_top_pane.html.erb
View file

@ -17,7 +17,7 @@
</div> </div>
<div class="ga-tags-container"> <div class="ga-tags-container">
<div class="ga-tags perfect-scrollbar"></div> <div class="ga-tags perfect-scrollbar"></div>
<div class="clear-container"> <div class="btn btn-light clear-container">
<i class="fas fa-times"></i><%= t('global_activities.index.clear_filters') %> <i class="fas fa-times-circle"></i><%= t('global_activities.index.clear_filters') %>
</div> </div>
</div> </div>

5
app/views/my_modules/activities/_side_filters.html.erb
View file

@ -1,10 +1,9 @@
<div class="date-selector filter-block small-right first" <div class="date-selector filter-block small-right first"
data-period-label="<%= t('global_activities.index.period_label') %>" data-period-label="<%= t('global_activities.index.period_label') %>"
data-period-select=""> data-period-select="">
<h4 class="title"><%= t('global_activities.index.activity') %></h4> <h4 class="title"><%= t('global_activities.index.activity') %></h4>
<h6 class="date clear"><%= t('global_activities.index.clear') %></h6>
<div class="date-selector"> <div class="date-selector">
<div class="hot-buttons"> <div class="hot-buttons">
<div class="hot-button btn btn-default" data-period="today"><%= t('global_activities.index.today') %></div> <div class="hot-button btn btn-default" data-period="today"><%= t('global_activities.index.today') %></div>
@ -49,4 +48,4 @@
data-ajax-url = "<%= user_filter_global_activities_path(my_module_id: @my_module.id) %>" data-ajax-url = "<%= user_filter_global_activities_path(my_module_id: @my_module.id) %>"
></select> ></select>
</div> </div>
</div> </div>

18
app/views/my_modules/activities/_top_pane.html.erb
View file

@ -1,10 +1,12 @@
<div class="ga-actions"> <div class="ga-actions">
<a id="global-activities-expand-all" class="hide-actions" href="#" data-turbolinks="false"> <div class="sci-btn-group">
<i class="fas fa-chevron-down"></i><%= t('activities.index.expand_all') %> <a id="global-activities-expand-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
</a> <i class="fas fa-chevron-down"></i><%= t('activities.index.expand_all') %>
<a id="global-activities-colapse-all" class="hide-actions" href="#" data-turbolinks="false"> </a>
<i class="fas fa-chevron-up"></i><%= t('activities.index.collapse_all') %> <a id="global-activities-colapse-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
</a> <i class="fas fa-chevron-up"></i><%= t('activities.index.collapse_all') %>
</a>
</div>
<div class="ga-search-container"> <div class="ga-search-container">
<input type="text" class="search-field" placeholder="Search..." aria-describedby="basic-addon1"> <input type="text" class="search-field" placeholder="Search..." aria-describedby="basic-addon1">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
@ -12,7 +14,7 @@
</div> </div>
<div class="ga-tags-container"> <div class="ga-tags-container">
<div class="ga-tags perfect-scrollbar"></div> <div class="ga-tags perfect-scrollbar"></div>
<div class="clear-container"> <div class="btn btn-light clear-container">
<i class="fas fa-times"></i><%= t('global_activities.index.clear_filters') %> <i class="fas fa-times-circle"></i><%= t('global_activities.index.clear_filters') %>
</div> </div>
</div> </div>