diff --git a/app/assets/javascripts/global_activities/side_pane.js b/app/assets/javascripts/global_activities/side_pane.js
index fd1e368a3..c9bcb163f 100644
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@@ -23,11 +23,20 @@ function GlobalActivitiesFiltersGetDates() {
function GlobalActivitiesFilterPrepareArray() {
var convertToInt = (array) => { return array.map(e => { return parseInt(e, 10); }); };
+ var typesFilter = convertToInt(dropdownSelector.getValues('select[name=activity]') || []);
+ var typesGroups = dropdownSelector.getValues('select[name=group_activity]') || [];
+ if (typesFilter.length === 0 && typesGroups.length > 0) {
+ $.each(typesGroups, (ig, group) => {
+ $.each($('select[name=activity]').find(`optgroup[label="${group}"] option`), (io, option) => {
+ typesFilter.push(parseInt(option.value, 10));
+ });
+ });
+ }
return {
teams: convertToInt(dropdownSelector.getValues('select[name=team]') || []),
users: convertToInt(dropdownSelector.getValues('select[name=user]') || []),
- types: convertToInt(dropdownSelector.getValues('select[name=activity]') || []),
+ types: typesFilter,
subjects: {
Project: convertToInt(dropdownSelector.getValues('select[name=project]') || []),
Experiment: convertToInt(dropdownSelector.getValues('select[name=experiment]') || []),
@@ -45,6 +54,12 @@ function GlobalActivitiesFilterPrepareArray() {
$(function() {
var updateRunning = false;
+ var filterSelectors = ['group_activity', 'activity', 'user', 'team', 'project',
+ 'experiment', 'task', 'inventory', 'inventory-item', 'protocol', 'report'];
+ var clearSelectors = ['group_activity', 'activity', 'user', 'team', 'project',
+ 'inventory', 'protocol', 'report'];
+
+
var ajaxParams = function(params) {
var filter = GlobalActivitiesFilterPrepareArray();
filter.query = params.query;
@@ -70,14 +85,23 @@ $(function() {
return [];
}
});
+ $('.activity.clear').click(() => {
+ updateRunning = true;
+ dropdownSelector.clearData('select[name=group_activity]');
+ updateRunning = false;
+ dropdownSelector.clearData('select[name=activity]');
+ });
+
dropdownSelector.init('select[name=user]', {
ajaxParams: ajaxParams,
onChange: defaultOnChangeActions
- });
+ }).initClearButton('select[name=user]', '.user.clear');
+
dropdownSelector.init('select[name=team]', {
ajaxParams: ajaxParams,
onChange: defaultOnChangeActions
- });
+ }).initClearButton('select[name=team]', '.team.clear');
+
dropdownSelector.init('select[name=project]', {
ajaxParams: ajaxParams,
onChange: () => {
@@ -90,7 +114,8 @@ $(function() {
}
defaultOnChangeActions();
}
- });
+ }).initClearButton('select[name=project]', '.project.clear');
+
dropdownSelector.init('.select-container.experiment select', {
ajaxParams: ajaxParams,
onChange: () => {
@@ -99,10 +124,12 @@ $(function() {
defaultOnChangeActions();
}
});
+
dropdownSelector.init('select[name=task]', {
ajaxParams: ajaxParams,
onChange: defaultOnChangeActions
});
+
dropdownSelector.init('select[name=inventory]', {
ajaxParams: ajaxParams,
onChange: () => {
@@ -110,24 +137,42 @@ $(function() {
dropdownSelector.disableSelector('select[name=inventory-item]', (selectedValues.length === 0));
defaultOnChangeActions();
}
- });
+ }).initClearButton('select[name=inventory]', '.inventory.clear');
+
dropdownSelector.init('select[name=inventory-item]', {
ajaxParams: ajaxParams,
onChange: defaultOnChangeActions
});
+
dropdownSelector.init('select[name=protocol]', {
ajaxParams: ajaxParams,
onChange: defaultOnChangeActions
- });
+ }).initClearButton('select[name=protocol]', '.protocol.clear');
+
dropdownSelector.init('select[name=report]', {
ajaxParams: ajaxParams,
onChange: defaultOnChangeActions
- });
+ }).initClearButton('select[name=report]', '.report.clear');
$('.ga-side').scroll(() => {
- var selectors = ['group_activity', 'activity', 'user', 'team', 'project',
- 'experiment', 'task', 'inventory', 'inventory-item', 'protocol', 'report'];
- $.each(selectors, (i, selector) => { dropdownSelector.updateDropdownDirection(`select[name=${selector}]`); });
+ $.each(filterSelectors, (i, selector) => { dropdownSelector.updateDropdownDirection(`select[name=${selector}]`); });
+ });
+
+ $('.clear-container').click(() => {
+ var selectorsCount = $('select[name=project]').length === 1 ? clearSelectors.length - 1 : 1;
+ updateRunning = true;
+
+ $('#calendar-from-date').data('DateTimePicker').clear();
+ $('#calendar-to-date').data('DateTimePicker').clear();
+ $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = '';
+
+
+ $.each(clearSelectors, (i, selector) => {
+ if (i === selectorsCount) updateRunning = false;
+ dropdownSelector.clearData(`select[name=${selector}]`);
+ });
+
+ resetHotButtonsBackgroundColor();
});
function GlobalActivitiesUpdateTopPaneTags() {
@@ -220,18 +265,6 @@ $(function() {
});
}
- $('.ga-tags-container .clear-container span').click(function() {
- updateRunning = true;
- $('#calendar-from-date').data('DateTimePicker').clear();
- $('#calendar-to-date').data('DateTimePicker').clear();
- $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = '';
-
- updateRunning = false;
- GlobalActivitiesUpdateTopPaneTags();
- reloadActivities();
- resetHotButtonsBackgroundColor();
- });
-
$('#calendar-to-date').on('dp.change', function(e) {
var dateContainer = $('.ga-side .date-selector.filter-block');
if (!updateRunning) {
diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js
index 863ed7b6c..25b879afc 100644
--- a/app/assets/javascripts/sitewide/dropdown_selector.js
+++ b/app/assets/javascripts/sitewide/dropdown_selector.js
@@ -93,7 +93,7 @@ var dropdownSelector = (function() {
var ps;
var dropdownContainer;
- if (selectElement.length === 0) return;
+ if (selectElement.length === 0 || selectElement.next().hasClass('dropdown-selector-container')) return;
dropdownContainer = selectElement.after('
').next();
@@ -103,6 +103,7 @@ var dropdownSelector = (function() {
+
@@ -120,7 +121,8 @@ var dropdownSelector = (function() {
saveData(selectElement, dropdownContainer);
});
}
- dropdownContainer.find('.seacrh-field').keyup(() => {
+ dropdownContainer.find('.seacrh-field').keyup((e) => {
+ e.stopPropagation();
loadData(selectElement, dropdownContainer);
}).click((e) =>{
e.stopPropagation();
@@ -163,6 +165,8 @@ var dropdownSelector = (function() {
// Load data to dropdown list
function loadData(selector, container, ajaxData = null) {
var data;
+ var containerDropdown = container.find('.dropdown-container');
+ containerDropdown.css('height', `${containerDropdown.height()}px`);
if (ajaxData) {
data = ajaxData;
} else {
@@ -227,6 +231,7 @@ var dropdownSelector = (function() {
PerfectSb().update_all();
refreshDropdownSelection(selector, container);
+ containerDropdown.css('height', 'auto');
}
// Save data to local field
@@ -299,7 +304,7 @@ var dropdownSelector = (function() {
updateCurrentData(container, selectedOptions);
updateTags(selector, container);
}
- }, 150);
+ }, 300);
});
}
@@ -375,17 +380,37 @@ var dropdownSelector = (function() {
return {
// Dropdown initialization
- init: (selector, config) => {
+ init: function(selector, config) {
generateDropdown(selector, config);
+
+ return this;
+ },
+
+ // Clear button initialization
+ initClearButton: function(selector, clearButton) {
+ var container;
+
+ if ($(selector).length === 0) return false;
+
+ container = $(selector).next();
+ $(clearButton).click(() => {
+ updateCurrentData(container, []);
+ refreshDropdownSelection($(selector), container);
+ updateTags($(selector), container);
+ });
+
+ return this;
},
// Update dropdown position
- updateDropdownDirection: (selector) => {
+ updateDropdownDirection: function(selector) {
if ($(selector).length === 0) return false;
updateDropdownDirection($(selector), $(selector).next());
+
+ return this;
},
// Get only values
- getValues: (selector) => {
+ getValues: function(selector) {
if ($(selector).length === 0) return false;
return $.map(getCurrentData($(selector).next()), (v) => {
@@ -393,24 +418,38 @@ var dropdownSelector = (function() {
});
},
// Get all data
- getData: (selector) => {
+ getData: function(selector) {
if ($(selector).length === 0) return false;
return getCurrentData($(selector).next());
},
- setData: (selector, data) => {
+ // Set data to selector
+ setData: function(selector, data) {
if ($(selector).length === 0) return false;
updateCurrentData($(selector).next(), data);
refreshDropdownSelection($(selector), $(selector).next());
updateTags($(selector), $(selector).next());
+
+ return this;
},
- disableSelector: (selector, mode) => {
+ // Clear selector
+ clearData: function(selector) {
+ if ($(selector).length === 0) return false;
+
+ dropdownSelector.setData(selector, []);
+ return this;
+ },
+
+ // Disable selector
+ disableSelector: function(selector, mode) {
if ($(selector).length === 0) return false;
disableDropdown($(selector), $(selector).next(), mode);
+
+ return this;
}
};
}());
diff --git a/app/assets/stylesheets/global_activities.scss b/app/assets/stylesheets/global_activities.scss
index 8d493cdd6..67618ae18 100644
--- a/app/assets/stylesheets/global_activities.scss
+++ b/app/assets/stylesheets/global_activities.scss
@@ -12,7 +12,7 @@
margin-top: 2em;
padding: 0 15px;
- &.task_activities {
+ &.task-activities {
height: calc(100vh - 136px);
}
@@ -27,6 +27,7 @@
position: relative;
width: calc(100% + 30px);
}
+
.ga-actions {
align-items: center;
border-bottom: 1px solid $color-gainsboro;
@@ -35,8 +36,8 @@
.hide-actions {
align-items: center;
- display: flex;
color: $color-silver-chalice;
+ display: flex;
margin-right: 20px;
&:hover {
@@ -74,8 +75,8 @@
.fa-search {
color: $color-silver-chalice;
font-size: 18px;
- line-height: 30px;
left: 0;
+ line-height: 30px;
position: absolute;
text-align: center;
top: 0;
@@ -85,16 +86,17 @@
}
.ga-tags-container {
- align-items: center;
display: flex;
- min-height: 36px;
+ min-height: 38px;
+ padding: 5px 0;
.ga-tags {
- display: flex;
+ display: flex;
flex-grow: 1;
+ flex-wrap: wrap;
&::after {
- content: '';
+ content: "";
flex-grow: 1000000000;
}
@@ -102,7 +104,7 @@
align-items: center;
background: $color-concrete;
border-radius: 12px;
- box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
display: flex;
flex-shrink: 0;
line-height: 13px;
@@ -135,7 +137,7 @@
cursor: pointer;
flex-grow: 1;
font-size: 13px;
- opacity: 0.7;
+ opacity: .7;
text-align: right;
}
}
@@ -144,6 +146,10 @@
.clear-container {
color: $color-silver-chalice;
cursor: pointer;
+ flex-shrink: 0;
+ line-height: 28px;
+ padding-left: 15px;
+ user-select: none;
.fas {
margin-right: 5px;
@@ -223,14 +229,12 @@
margin: 0;
}
-
-
.atwho-user-container {
-
+
&:not(:first-child) {
.global-avatar-container {
- line-height: 20px;
height: 20px;
+ line-height: 20px;
margin-left: 0;
position: relative;
top: 1px;
@@ -292,12 +296,11 @@
height: 100%;
margin-right: -15px;
overflow: hidden;
- padding: 0 15px;
+ padding: 0 15px 20px;
position: relative;
.filter-block {
display: inline-block;
- padding: 10px 0 0;
width: 100%;
.title {
@@ -325,11 +328,16 @@
margin-bottom: 5px;
min-height: 36px;
width: 100%;
+
+ select {
+ display: none;
+ }
}
}
.date-selector {
display: inline-block;
+ margin-bottom: 5px;
position: relative;
width: 100%;
@@ -362,10 +370,6 @@
}
}
- .title {
- margin-top: 0;
- }
-
.from,
.to {
float: left;
diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss
index 4fce4c031..ac4425599 100644
--- a/app/assets/stylesheets/shared/dropdown_selector.scss
+++ b/app/assets/stylesheets/shared/dropdown_selector.scss
@@ -1,3 +1,6 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
@import "constants";
.dropdown-selector-container {
@@ -15,11 +18,23 @@
flex-wrap: wrap;
min-height: 36px;
overflow: hidden;
- padding: 3px;
+ padding: 3px 36px 3px 3px;
position: relative;
transition: .2s;
width: 100%;
+ .fa-caret-down {
+ color: $color-silver-chalice;
+ cursor: pointer;
+ font-size: 20px;
+ line-height: 18px;
+ position: absolute;
+ right: 8px;
+ text-align: center;
+ top: 8px;
+ width: 18px;
+ }
+
.seacrh-field {
border: 0;
flex-basis: 50px;
@@ -30,7 +45,7 @@
padding-left: 5px;
&::placeholder {
- opacity: 0.7;
+ opacity: .7;
}
}
@@ -38,7 +53,7 @@
align-items: center;
background: $color-concrete;
border-radius: 12px;
- box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
display: flex;
flex-shrink: 0;
line-height: 13px;
@@ -47,11 +62,6 @@
padding: 5px 7px;
user-select: none;
- &.stretch {
- flex-grow: 1;
- flex-shrink: 1;
- }
-
.tag-label {
display: inline-block;
margin-bottom: 1px;
@@ -63,6 +73,7 @@
width: auto;
&.closing {
+ margin-right: 0;
max-width: 0;
}
}
@@ -71,7 +82,7 @@
cursor: pointer;
flex-grow: 1;
font-size: 13px;
- opacity: 0.7;
+ opacity: .7;
text-align: right;
}
}
@@ -81,8 +92,7 @@
background: $color-white;
border: 1px solid $color-alto;
border-radius: 0 0 4px 4px;
- border-top: 0;
- box-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.2);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, .2);
display: none;
overflow: hidden;
position: absolute;
@@ -92,7 +102,7 @@
width: 100%;
z-index: 10;
- .dropdown-select-all{
+ .dropdown-select-all {
background: $color-white;
border: 0;
border-bottom: 1px solid $color-alto;
@@ -118,12 +128,13 @@
}
&.select {
+
&::before {
content: "\f14a";
}
}
}
-
+
.dropdown-option {
align-items: center;
cursor: pointer;
@@ -167,8 +178,10 @@
}
&.select {
+
.group-name.checkbox-icon {
background: $color-concrete;
+
&::before {
content: "\f14a";
}
@@ -188,13 +201,18 @@
&.open {
.input-field {
- border-radius: 4px 4px 0 0;
border-bottom: 1px solid $brand-primary;
+ border-radius: 4px 4px 0 0;
z-index: 12;
+
+ .fa-caret-down {
+ transform: rotate(180deg);
+ }
}
.dropdown-container {
- box-shadow: 0px 1px 2px 0px rgba(0,0,0, 0.2);
+ border-top: 0;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
display: block;
top: 100%;
}
@@ -202,15 +220,16 @@
&.inverse {
.input-field {
- border-radius: 0 0 4px 4px;
border-bottom: 1px solid $color-alto;
- border-top: 1px solid $brand-primary
+ border-radius: 0 0 4px 4px;
+ border-top: 1px solid $brand-primary;
}
.dropdown-container {
+ border-bottom: 0;
border-radius: 4px 4px 0 0;
bottom: 100%;
- box-shadow: 0px -1px 2px 0px rgba(0,0,0, 0.2);
+ box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .2);
position: fixed;
top: auto;
}
@@ -228,4 +247,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/app/controllers/global_activities_controller.rb b/app/controllers/global_activities_controller.rb
index c9d4c575d..176a54630 100644
--- a/app/controllers/global_activities_controller.rb
+++ b/app/controllers/global_activities_controller.rb
@@ -127,11 +127,12 @@ class GlobalActivitiesController < ApplicationController
matched = subject.search_by_name(current_user, teams, query, whole_phrase: true)
.where.not(name: nil).where.not(name: '')
.filter_by_teams(filter_teams)
+ .order(name: :asc)
selected_subject = subject_search_params[:subjects]
- matched = matched.where(:project_id => selected_subject['Project']) if subject == Experiment
- matched = matched.where(:experiment_id => selected_subject['Experiment']) if subject == MyModule
- matched = matched.where(:repository_id => selected_subject['Repository']) if subject == RepositoryRow
+ matched = matched.where(project_id: selected_subject['Project']) if subject == Experiment
+ matched = matched.where(experiment_id: selected_subject['Experiment']) if subject == MyModule
+ matched = matched.where(repository_id: selected_subject['Repository']) if subject == RepositoryRow
matched = matched.limit(Constants::SEARCH_LIMIT).pluck(:id, :name)
matched.map { |pr| { value: pr[0], label: escape_input(pr[1]) } }
diff --git a/app/views/global_activities/_side_filters.html.erb b/app/views/global_activities/_side_filters.html.erb
index aab749835..93e245aea 100644
--- a/app/views/global_activities/_side_filters.html.erb
+++ b/app/views/global_activities/_side_filters.html.erb
@@ -1,6 +1,6 @@
<%= t('global_activities.index.teams') %>
-
<%= t('global_activities.index.clear') %>
+
<%= t('global_activities.index.clear') %>