mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-02 01:45:38 +08:00
Adding custom scrollbar to global activities [SCI-3206] (#1623)
* Adding custom scrollbar to global activities
This commit is contained in:
aignatov-bio
GitHub
parent
5443bfcbd1
commit
daaa6a367b
13 changed files with 266 additions and 53 deletions
|
|
@ -37,6 +37,7 @@
|
|||
//= require i18n/translations
|
||||
//= require users/settings/teams/invite_users_modal
|
||||
//= require select2.min
|
||||
//= require perfect-scrollbar.min
|
||||
//= require select2_customization
|
||||
//= require turbolinks
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* global animateSpinner I18n */
|
||||
/* global animateSpinner I18n PerfectSb */
|
||||
|
||||
// Common code
|
||||
|
||||
|
|
@ -122,6 +122,7 @@ $(function() {
|
|||
}
|
||||
});
|
||||
});
|
||||
PerfectSb().update_all();
|
||||
}
|
||||
|
||||
// update_filter
|
||||
|
|
@ -152,6 +153,7 @@ $(function() {
|
|||
}
|
||||
updateRunning = false;
|
||||
animateSpinner(null, false);
|
||||
PerfectSb().update_all();
|
||||
},
|
||||
error: function() {
|
||||
updateRunning = false;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
/* global PerfectScrollbar */
|
||||
$.fn.extend({
|
||||
select2Multiple: function(config = {}) {
|
||||
if (this.length === 0) return this;
|
||||
|
|
@ -33,8 +33,8 @@ $.fn.extend({
|
|||
// Add dynamic size
|
||||
select2.next().css('width', '100%');
|
||||
|
||||
//Placeholder fix for ajax fields
|
||||
if (config.ajax){
|
||||
// Placeholder fix for ajax fields
|
||||
if (config.ajax) {
|
||||
select2.next().find('.select2-search__field').css('min-width', '150px');
|
||||
}
|
||||
|
||||
|
|
@ -65,9 +65,14 @@ $.fn.extend({
|
|||
var groups;
|
||||
var groupChildrens;
|
||||
var leftPosition = -310;
|
||||
var perfectScroll = new PerfectScrollbar($('.select2-results__options')[0], { wheelSpeed: 0.5 });
|
||||
setTimeout(() => {
|
||||
perfectScroll.update();
|
||||
}, 300);
|
||||
$('.select2-dropdown').removeClass('custom-group');
|
||||
$('.select2-selection').scrollTo(0);
|
||||
$('.select2_select_all').remove();
|
||||
|
||||
// Adding select_all_button
|
||||
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() {
|
||||
|
|
|
|||
22
app/assets/javascripts/sitewide/perfect_scrollbar.js
Normal file
22
app/assets/javascripts/sitewide/perfect_scrollbar.js
Normal 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();
|
||||
|
|
@ -21,3 +21,4 @@
|
|||
@import "extend/bootstrap";
|
||||
@import "themes/scinote";
|
||||
@import "select2.min";
|
||||
@import "extend/perfect-scrollbar";
|
||||
|
|
|
|||
117
app/assets/stylesheets/extend/perfect-scrollbar.scss
Normal file
117
app/assets/stylesheets/extend/perfect-scrollbar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,38 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
.global-activities-container {
|
||||
background: $color-white;
|
||||
height: calc(100vh - 89px);
|
||||
margin-top: 2em;
|
||||
padding: 1em;
|
||||
padding: 0 15px;
|
||||
|
||||
&.task_activities {
|
||||
height: calc(100vh - 126px);
|
||||
}
|
||||
|
||||
> .row {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ga-main {
|
||||
border-right: 1px solid $gray-lighter;
|
||||
float: right;
|
||||
height: calc(100% - 160px);
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
|
||||
&.task_activities {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.ga-activities-list {
|
||||
grid-area: activities;
|
||||
min-height: 600px;
|
||||
|
||||
.activities-day {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -22,7 +41,8 @@
|
|||
max-width: 105px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.date-activities{
|
||||
|
||||
.date-activities {
|
||||
min-width: calc(100% - 105px);
|
||||
}
|
||||
}
|
||||
|
|
@ -34,6 +54,7 @@
|
|||
|
||||
.activities-group {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -46,10 +67,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.activities-group{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
|
|
@ -77,6 +94,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-activities-message {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -84,16 +102,22 @@
|
|||
}
|
||||
|
||||
.ga-side {
|
||||
|
||||
float: right;
|
||||
height: calc(100% - 160px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&.task_activities {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.filter-block {
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 5px;
|
||||
width: calc(100% - 50px);
|
||||
|
|
@ -126,7 +150,7 @@
|
|||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
opacity: .7;
|
||||
text-align: left;
|
||||
width: calc(50% - 25px);
|
||||
|
||||
|
|
@ -170,21 +194,27 @@
|
|||
|
||||
.ga-top {
|
||||
border-bottom: 1px solid $gray-lighter;
|
||||
height: 160px;
|
||||
|
||||
&.task_activities {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.ga-title {
|
||||
border-bottom: 1px solid $color-gainsboro;
|
||||
left: -20px;
|
||||
margin-bottom: 10px;
|
||||
height: 35px;
|
||||
left: -15px;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
width: calc(100% + 40px);
|
||||
width: calc(100% + 30px);
|
||||
}
|
||||
|
||||
.ga-top-actions {
|
||||
float: left;
|
||||
line-height: 34px;
|
||||
margin: 5px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
|
||||
|
|
@ -210,7 +240,7 @@
|
|||
|
||||
.ga-tags-container {
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
|
||||
.clear-container {
|
||||
|
|
@ -236,10 +266,11 @@
|
|||
|
||||
.ga-tags {
|
||||
float: left;
|
||||
height: 64px;
|
||||
margin: 0;
|
||||
min-height: 50px;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
position: elative;
|
||||
position: relative;
|
||||
width: calc(100% - 100px);
|
||||
|
||||
li {
|
||||
|
|
@ -268,8 +299,29 @@
|
|||
}
|
||||
|
||||
@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 {
|
||||
border-bottom: 1px solid $gray-lighter;
|
||||
height: auto;
|
||||
|
||||
.filter-block {
|
||||
|
||||
|
|
@ -317,7 +369,7 @@
|
|||
font-size: 13px;
|
||||
padding-left: 5px;
|
||||
|
||||
&::placeholder{
|
||||
&::placeholder {
|
||||
color: $color-silver-chalice;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
// scss-lint:disable SelectorFormat
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
|
|
@ -13,12 +18,12 @@
|
|||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
width: calc(100% - 26px)
|
||||
width: calc(100% - 26px);
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
|
||||
&::placeholder{
|
||||
&::placeholder {
|
||||
color: $color-silver-chalice;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,19 +44,19 @@
|
|||
align-items: center;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-alto;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top :0;
|
||||
top: 0;
|
||||
width: 26px;
|
||||
|
||||
&:hover {
|
||||
background: $color-gainsboro;
|
||||
border: 1px solid $color-silver-chalice;
|
||||
background: $color-gainsboro;
|
||||
border: 1px solid $color-silver-chalice;
|
||||
}
|
||||
|
||||
.caret {
|
||||
|
|
@ -74,6 +79,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.select2-results__options {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select2-results__option[role="treeitem"] {
|
||||
background: $color-white;
|
||||
line-height: 18px;
|
||||
|
|
@ -81,13 +90,13 @@
|
|||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "\f0c8";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 400;
|
||||
left: 0;
|
||||
margin: 7px 0 0 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 7px 0px 0px 12px;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f0c8";
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.select2-results__option--highlighted {
|
||||
|
|
@ -116,9 +125,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.custom-group{
|
||||
&.custom-group {
|
||||
.select2-results__option[role="group"] {
|
||||
|
||||
.select2-results__group {
|
||||
|
|
@ -127,13 +134,13 @@
|
|||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "\f0c8";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 400;
|
||||
left: 0;
|
||||
margin: 7px 0 0 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 7px 0px 0px 12px;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f0c8";
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -168,12 +175,12 @@
|
|||
@media (min-width: 1200px) {
|
||||
|
||||
.select2-container--open.left-position {
|
||||
top: 60px !important;
|
||||
position: fixed !important;
|
||||
top: 60px !important;
|
||||
z-index: 1500;
|
||||
|
||||
.select2-dropdown {
|
||||
border-radius: 0px;
|
||||
border-radius: 0;
|
||||
height: calc(100vh - 70px) !important;
|
||||
width: 300px !important;
|
||||
|
||||
|
|
@ -183,6 +190,7 @@
|
|||
|
||||
.select2-results__options {
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ class ActivitiesService
|
|||
if filters[:subjects].present?
|
||||
subjects_with_children = load_subjects_children(filters[:subjects])
|
||||
if subjects_with_children[:Project]
|
||||
add_or = subjects_with_children.length > 1
|
||||
query = query.where("project_id IN (?) #{add_or ? 'OR' : ''}", subjects_with_children[:Project])
|
||||
query = query.where('project_id IN (?)', subjects_with_children[:Project])
|
||||
subjects_with_children.except!(:Project)
|
||||
end
|
||||
query = query.where(
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
<div class="ga-tags-container">
|
||||
<ul class="ga-tags"></ul>
|
||||
<ul class="ga-tags perfect-scrollbar"></ul>
|
||||
<div class="clear-container">
|
||||
<span>
|
||||
<i class="fas fa-times"></i>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
<%= render partial: "top_pane" %>
|
||||
</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" %>
|
||||
</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? %>">
|
||||
<p><%= t('activities.index.no_activities_message') %></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
<%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
|
||||
<%= 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="ga-top col-md-12">
|
||||
<div class="ga-top col-md-12 task_activities">
|
||||
<%= render partial: "my_modules/activities/top_pane" %>
|
||||
</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" %>
|
||||
</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? %>">
|
||||
<p><%= t('activities.index.no_activities_task_message') %></p>
|
||||
</div>
|
||||
|
|
|
|||
6
vendor/assets/javascripts/perfect-scrollbar.min.js
vendored
Normal file
6
vendor/assets/javascripts/perfect-scrollbar.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue