Adding custom scrollbar to global activities [SCI-3206] (#1623)

* Adding custom scrollbar to global activities
This commit is contained in:
aignatov-bio 2019-04-02 09:56:50 +02:00 committed by GitHub
parent 5443bfcbd1
commit daaa6a367b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 266 additions and 53 deletions

View file

@ -37,6 +37,7 @@
//= require i18n/translations //= require i18n/translations
//= require users/settings/teams/invite_users_modal //= require users/settings/teams/invite_users_modal
//= require select2.min //= require select2.min
//= require perfect-scrollbar.min
//= require select2_customization //= require select2_customization
//= require turbolinks //= require turbolinks

View file

@ -1,4 +1,4 @@
/* global animateSpinner I18n */ /* global animateSpinner I18n PerfectSb */
// Common code // Common code
@ -122,6 +122,7 @@ $(function() {
} }
}); });
}); });
PerfectSb().update_all();
} }
// update_filter // update_filter
@ -152,6 +153,7 @@ $(function() {
} }
updateRunning = false; updateRunning = false;
animateSpinner(null, false); animateSpinner(null, false);
PerfectSb().update_all();
}, },
error: function() { error: function() {
updateRunning = false; updateRunning = false;

View file

@ -1,4 +1,4 @@
/* global PerfectScrollbar */
$.fn.extend({ $.fn.extend({
select2Multiple: function(config = {}) { select2Multiple: function(config = {}) {
if (this.length === 0) return this; if (this.length === 0) return this;
@ -33,8 +33,8 @@ $.fn.extend({
// Add dynamic size // Add dynamic size
select2.next().css('width', '100%'); select2.next().css('width', '100%');
//Placeholder fix for ajax fields // Placeholder fix for ajax fields
if (config.ajax){ if (config.ajax) {
select2.next().find('.select2-search__field').css('min-width', '150px'); select2.next().find('.select2-search__field').css('min-width', '150px');
} }
@ -65,9 +65,14 @@ $.fn.extend({
var groups; var groups;
var groupChildrens; var groupChildrens;
var leftPosition = -310; var leftPosition = -310;
var perfectScroll = new PerfectScrollbar($('.select2-results__options')[0], { wheelSpeed: 0.5 });
setTimeout(() => {
perfectScroll.update();
}, 300);
$('.select2-dropdown').removeClass('custom-group'); $('.select2-dropdown').removeClass('custom-group');
$('.select2-selection').scrollTo(0); $('.select2-selection').scrollTo(0);
$('.select2_select_all').remove(); $('.select2_select_all').remove();
// Adding select_all_button // Adding select_all_button
if (selectElement.dataset.selectAllButton !== undefined) { if (selectElement.dataset.selectAllButton !== undefined) {
$('<div class="select2_select_all btn btn-default"><strong>' + selectElement.dataset.selectAllButton + '</strong></div>').prependTo('.select2-dropdown').on('click', function() { $('<div class="select2_select_all btn btn-default"><strong>' + selectElement.dataset.selectAllButton + '</strong></div>').prependTo('.select2-dropdown').on('click', function() {

View file

@ -0,0 +1,22 @@
/* global PerfectScrollbar */
var PerfectSb = (function() {
(function() {
$(document).on('turbolinks:load', function() {
$.each($('.perfect-scrollbar'), function(index, object) {
var ps = new PerfectScrollbar(object, { wheelSpeed: 0.5 });
$(object).bind('update_scroll', () => {
ps.update();
});
});
});
})();
return Object.freeze({
update_all: function() {
$.each($('.perfect-scrollbar'), function(index, object) {
$(object).trigger('update_scroll');
});
}
});
});
PerfectSb();

View file

@ -21,3 +21,4 @@
@import "extend/bootstrap"; @import "extend/bootstrap";
@import "themes/scinote"; @import "themes/scinote";
@import "select2.min"; @import "select2.min";
@import "extend/perfect-scrollbar";

View file

@ -0,0 +1,117 @@
// scss-lint:disable all
@import "constants";
.ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
}
/*
* Scrollbar rail styles
*/
.ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 16px;
/* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 16px;
/* there must be 'right' or 'left' for ps__rail-y */
right: 0;
/* please don't change 'position' */
position: absolute;
cursor: pointer;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
display: block;
background-color: transparent;
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
opacity: 0.6;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: $color-gainsboro;
opacity: 0.9;
}
/*
* Scrollbar thumb styles
*/
.ps__thumb-x {
background-color: $color-silver-chalice;
border-radius: 4px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
/* there must be 'bottom' for ps__thumb-x */
bottom: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__thumb-y {
background-color: $color-silver-chalice;
border-radius: 4px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 4px;
/* there must be 'right' for ps__thumb-y */
right: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
background-color: $brand-primary;
height: 12px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: $brand-primary;
width: 12px;
}
/* MS supports */
@supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
}

View file

@ -1,19 +1,38 @@
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
@import "constants"; @import "constants";
@import "mixins"; @import "mixins";
.global-activities-container { .global-activities-container {
background: $color-white; background: $color-white;
height: calc(100vh - 89px);
margin-top: 2em; margin-top: 2em;
padding: 1em; padding: 0 15px;
&.task_activities {
height: calc(100vh - 126px);
}
> .row {
height: 100%;
position: relative;
}
.ga-main { .ga-main {
border-right: 1px solid $gray-lighter; border-right: 1px solid $gray-lighter;
float: right; float: right;
height: calc(100% - 160px);
overflow: hidden;
padding-top: 10px; padding-top: 10px;
position: relative;
&.task_activities {
height: calc(100% - 70px);
}
.ga-activities-list { .ga-activities-list {
grid-area: activities; grid-area: activities;
min-height: 600px;
.activities-day { .activities-day {
margin-bottom: 10px; margin-bottom: 10px;
@ -22,7 +41,8 @@
max-width: 105px; max-width: 105px;
padding-right: 0; padding-right: 0;
} }
.date-activities{
.date-activities {
min-width: calc(100% - 105px); min-width: calc(100% - 105px);
} }
} }
@ -34,6 +54,7 @@
.activities-group { .activities-group {
list-style: none; list-style: none;
margin-bottom: 0;
padding-left: 0; padding-left: 0;
} }
@ -46,10 +67,6 @@
} }
} }
.activities-group{
margin-bottom: 0px;
}
.activity-card { .activity-card {
border-radius: 5px; border-radius: 5px;
margin-right: 10px; margin-right: 10px;
@ -77,6 +94,7 @@
} }
} }
} }
.no-activities-message { .no-activities-message {
margin-top: 20px; margin-top: 20px;
} }
@ -84,16 +102,22 @@
} }
.ga-side { .ga-side {
float: right; float: right;
height: calc(100% - 160px);
overflow: hidden;
position: relative;
&.task_activities {
height: calc(100% - 70px);
}
.filter-block { .filter-block {
padding: 10px 0; padding: 10px 0;
width: 100%; width: 100%;
.title { .title {
font-size: 16px;
float: left; float: left;
font-size: 16px;
line-height: 20px; line-height: 20px;
margin-bottom: 5px; margin-bottom: 5px;
width: calc(100% - 50px); width: calc(100% - 50px);
@ -126,7 +150,7 @@
cursor: pointer; cursor: pointer;
float: left; float: left;
margin: 0; margin: 0;
opacity: 0.7; opacity: .7;
text-align: left; text-align: left;
width: calc(50% - 25px); width: calc(50% - 25px);
@ -170,21 +194,27 @@
.ga-top { .ga-top {
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $gray-lighter;
height: 160px;
&.task_activities {
height: 70px;
}
.ga-title { .ga-title {
border-bottom: 1px solid $color-gainsboro; border-bottom: 1px solid $color-gainsboro;
left: -20px; height: 35px;
margin-bottom: 10px; left: -15px;
margin-bottom: 5px;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 20px; padding-left: 20px;
position: relative; position: relative;
width: calc(100% + 40px); width: calc(100% + 30px);
} }
.ga-top-actions { .ga-top-actions {
float: left; float: left;
line-height: 34px; line-height: 20px;
margin: 5px; margin: 5px 0;
position: relative; position: relative;
width: 200px; width: 200px;
@ -210,7 +240,7 @@
.ga-tags-container { .ga-tags-container {
display: inline-block; display: inline-block;
margin: 5px 0; margin-top: 5px;
width: 100%; width: 100%;
.clear-container { .clear-container {
@ -236,10 +266,11 @@
.ga-tags { .ga-tags {
float: left; float: left;
height: 64px;
margin: 0; margin: 0;
min-height: 50px; overflow: hidden;
padding-left: 0; padding-left: 0;
position: elative; position: relative;
width: calc(100% - 100px); width: calc(100% - 100px);
li { li {
@ -268,8 +299,29 @@
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
.global-activities-container {
height: auto;
> .row {
height: auto;
}
}
.ga-main {
width: 100%;
}
.ga-top {
.ga-tags {
height: auto;
min-height: 60px;
}
}
.ga-side { .ga-side {
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $gray-lighter;
height: auto;
.filter-block { .filter-block {
@ -317,7 +369,7 @@
font-size: 13px; font-size: 13px;
padding-left: 5px; padding-left: 5px;
&::placeholder{ &::placeholder {
color: $color-silver-chalice; color: $color-silver-chalice;
} }
} }

View file

@ -1,3 +1,8 @@
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorFormat
// scss-lint:disable ImportantRule
@import "constants"; @import "constants";
@import "mixins"; @import "mixins";
@ -13,12 +18,12 @@
} }
.select2-selection__rendered { .select2-selection__rendered {
width: calc(100% - 26px) width: calc(100% - 26px);
} }
.select2-search__field { .select2-search__field {
&::placeholder{ &::placeholder {
color: $color-silver-chalice; color: $color-silver-chalice;
} }
} }
@ -39,19 +44,19 @@
align-items: center; align-items: center;
background: $color-white; background: $color-white;
border: 1px solid $color-alto; border: 1px solid $color-alto;
border-radius: 0px 4px 4px 0px; border-radius: 0 4px 4px 0;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
right: 0; right: 0;
top :0; top: 0;
width: 26px; width: 26px;
&:hover { &:hover {
background: $color-gainsboro; background: $color-gainsboro;
border: 1px solid $color-silver-chalice; border: 1px solid $color-silver-chalice;
} }
.caret { .caret {
@ -74,6 +79,10 @@
width: 100%; width: 100%;
} }
.select2-results__options {
position: relative;
}
.select2-results__option[role="treeitem"] { .select2-results__option[role="treeitem"] {
background: $color-white; background: $color-white;
line-height: 18px; line-height: 18px;
@ -81,13 +90,13 @@
position: relative; position: relative;
&::before { &::before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
font-weight: 400;
left: 0;
margin: 7px 0 0 12px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
margin: 7px 0px 0px 12px;
font-family: "Font Awesome 5 Free";
content: "\f0c8";
font-weight: 400;
} }
&.select2-results__option--highlighted { &.select2-results__option--highlighted {
@ -116,9 +125,7 @@
} }
} }
&.custom-group {
&.custom-group{
.select2-results__option[role="group"] { .select2-results__option[role="group"] {
.select2-results__group { .select2-results__group {
@ -127,13 +134,13 @@
position: relative; position: relative;
&::before { &::before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
font-weight: 400;
left: 0;
margin: 7px 0 0 12px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
margin: 7px 0px 0px 12px;
font-family: "Font Awesome 5 Free";
content: "\f0c8";
font-weight: 400;
} }
&:hover { &:hover {
@ -168,12 +175,12 @@
@media (min-width: 1200px) { @media (min-width: 1200px) {
.select2-container--open.left-position { .select2-container--open.left-position {
top: 60px !important;
position: fixed !important; position: fixed !important;
top: 60px !important;
z-index: 1500; z-index: 1500;
.select2-dropdown { .select2-dropdown {
border-radius: 0px; border-radius: 0;
height: calc(100vh - 70px) !important; height: calc(100vh - 70px) !important;
width: 300px !important; width: 300px !important;
@ -183,6 +190,7 @@
.select2-results__options { .select2-results__options {
max-height: 100%; max-height: 100%;
position: relative;
} }
} }

View file

@ -10,8 +10,7 @@ class ActivitiesService
if filters[:subjects].present? if filters[:subjects].present?
subjects_with_children = load_subjects_children(filters[:subjects]) subjects_with_children = load_subjects_children(filters[:subjects])
if subjects_with_children[:Project] if subjects_with_children[:Project]
add_or = subjects_with_children.length > 1 query = query.where('project_id IN (?)', subjects_with_children[:Project])
query = query.where("project_id IN (?) #{add_or ? 'OR' : ''}", subjects_with_children[:Project])
subjects_with_children.except!(:Project) subjects_with_children.except!(:Project)
end end
query = query.where( query = query.where(

View file

@ -20,7 +20,7 @@
<!-- </div>--> <!-- </div>-->
<!--</div>--> <!--</div>-->
<div class="ga-tags-container"> <div class="ga-tags-container">
<ul class="ga-tags"></ul> <ul class="ga-tags perfect-scrollbar"></ul>
<div class="clear-container"> <div class="clear-container">
<span> <span>
<i class="fas fa-times"></i> <i class="fas fa-times"></i>

View file

@ -6,11 +6,11 @@
<%= render partial: "top_pane" %> <%= render partial: "top_pane" %>
</div> </div>
<div class="ga-side col-lg-3 col-md-12 col-xl-2"> <div class="ga-side col-lg-3 col-md-12 col-xl-2 perfect-scrollbar">
<%= render partial: "side_filters" %> <%= render partial: "side_filters" %>
</div> </div>
<div class="ga-main col-lg-9 col-md-12 col-xl-10"> <div class="ga-main col-lg-9 col-md-12 col-xl-10 perfect-scrollbar">
<div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>"> <div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
<p><%= t('activities.index.no_activities_message') %></p> <p><%= t('activities.index.no_activities_message') %></p>
</div> </div>

View file

@ -2,17 +2,17 @@
<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %> <%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
<%= render partial: "shared/secondary_navigation" %> <%= render partial: "shared/secondary_navigation" %>
<div class="global-activities-container container-flex"> <div class="global-activities-container container-flex task_activities">
<div class="row"> <div class="row">
<div class="ga-top col-md-12"> <div class="ga-top col-md-12 task_activities">
<%= render partial: "my_modules/activities/top_pane" %> <%= render partial: "my_modules/activities/top_pane" %>
</div> </div>
<div class="ga-side col-lg-3 col-md-12 col-xl-2"> <div class="ga-side col-lg-3 col-md-12 col-xl-2 task_activities perfect-scrollbar">
<%= render partial: "my_modules/activities/side_filters" %> <%= render partial: "my_modules/activities/side_filters" %>
</div> </div>
<div class="ga-main col-lg-9 col-md-12 col-xl-10"> <div class="ga-main col-lg-9 col-md-12 col-xl-10 task_activities perfect-scrollbar">
<div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>"> <div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
<p><%= t('activities.index.no_activities_task_message') %></p> <p><%= t('activities.index.no_activities_task_message') %></p>
</div> </div>

File diff suppressed because one or more lines are too long