scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-01 05:02:50 +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() {
GlobalActivitiesUpdateTopPaneTags();
reloadActivities();
toggleClearButtons();
};
$('.ga-tags-container').hide();
dropdownSelector.init(groupActivityFilter, {
optionClass: 'checkbox-icon',
@ -113,6 +115,7 @@ var globalActivities = (function() {
updateRunning = false;
GlobalActivitiesUpdateTopPaneTags();
reloadActivities();
toggleClearButtons();
});
dropdownSelector.init(userFilter, {
@ -295,6 +298,24 @@ var globalActivities = (function() {
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() {
$('.date-selector .hot-button').each(function() {
$(this).removeClass('selected');
@ -314,6 +335,7 @@ var globalActivities = (function() {
dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
GlobalActivitiesUpdateTopPaneTags();
reloadActivities();
toggleClearButtons();
resetHotButtonsBackgroundColor();
}
});
@ -325,6 +347,7 @@ var globalActivities = (function() {
dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
GlobalActivitiesUpdateTopPaneTags();
reloadActivities();
toggleClearButtons();
resetHotButtonsBackgroundColor();
}
});
@ -376,6 +399,7 @@ var globalActivities = (function() {
dateContainer[0].dataset.periodSelect = this.innerHTML;
GlobalActivitiesUpdateTopPaneTags();
reloadActivities();
toggleClearButtons();
resetHotButtonsBackgroundColor();
$(this).addClass('selected');

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

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

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

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

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

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

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

@ -57,46 +57,46 @@
&.btn-secondary {
background: $color-white;
border: $border-default;
color: $color-black;
color: $color-volcano;
&:hover {
background: $color-concrete;
border: $border-secondary;
color: $color-black;
color: $color-volcano;
}
&:active {
background: $color-alto;
border: $border-secondary;
color: $color-black;
color: $color-volcano;
}
&:focus {
box-shadow: 0 0 0 1px $brand-focus;
color: $color-black;
color: $color-volcano;
}
}
&.btn-light {
background: transparent;
border: $border-transparent;
color: $color-black;
color: $color-volcano;
&:hover {
background: $color-concrete;
border: $border-transparent;
color: $color-black;
color: $color-volcano;
}
&:active {
background: $color-alto;
border: $border-transparent;
color: $color-black;
color: $color-volcano;
}
&: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 class="ga-tags-container">
<div class="ga-tags perfect-scrollbar"></div>
<div class="clear-container">
<i class="fas fa-times"></i><%= t('global_activities.index.clear_filters') %>
<div class="btn btn-light clear-container">
<i class="fas fa-times-circle"></i><%= t('global_activities.index.clear_filters') %>
</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"
data-period-label="<%= t('global_activities.index.period_label') %>"
data-period-select="">
<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="hot-buttons">
<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) %>"
></select>
</div>
</div>
</div>

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

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