Use native scrollbars

This commit is contained in:
2016-11-16 17:48:35 +01:00
parent 8959fac415
commit f1661f7efb
13 changed files with 5 additions and 212 deletions

File diff suppressed because one or more lines are too long

View File

@@ -2,20 +2,12 @@ function projectNavCollapse() {
$("#project-side-container").addClass('collapsed'); $("#project-side-container").addClass('collapsed');
$("ul.breadcrumb.context").addClass('active'); $("ul.breadcrumb.context").addClass('active');
if (typeof Ps !== 'undefined'){
Ps.destroy(document.getElementById('project_tree'));
};
}; };
function projectNavExpand() { function projectNavExpand() {
$("#project-side-container").removeClass('collapsed'); $("#project-side-container").removeClass('collapsed');
$("ul.breadcrumb.context").removeAttr('class'); $("ul.breadcrumb.context").removeAttr('class');
if (typeof Ps !== 'undefined'){
Ps.initialize(document.getElementById('project_tree'), {suppressScrollX: true});
}
}; };
function projectNavCheck(){ function projectNavCheck(){
@@ -177,7 +169,4 @@ function containerResizeY(window_height){
} }
}; };
if (projectTree){ Ps.update(projectTree) }
}; };

View File

@@ -740,6 +740,7 @@ ul.project_nav-edit-list
position: relative // for scrollbar alignment position: relative // for scrollbar alignment
margin-top: $project_header-height margin-top: $project_header-height
background-color: $color-background-light background-color: $color-background-light
overflow-y: auto
&.edit &.edit
margin-top: 0 margin-top: 0

View File

@@ -309,10 +309,9 @@ $search-hit-width_grid: 100px
border-left: 2px solid darken(white, 3%) border-left: 2px solid darken(white, 3%)
#search-hit-container #search-hit-container
position: absolute // for custom scrollbars position: absolute // for scrollbars
width: 100% width: 100%
.ps-scrollbar-y-rail overflow-y: auto
z-index: 1
#error_container #error_container
position: relative position: relative

View File

@@ -19,6 +19,5 @@
@import plugins/_jstree @import plugins/_jstree
@import plugins/_js_select2 @import plugins/_js_select2
@import plugins/js_perfectscrollbar
/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */ /* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */

View File

@@ -1,147 +0,0 @@
$color-scrollbars-base: lighten($color-background-nav, 25%)
.ps-container
.ps-scrollbar-y
opacity: 0
transition: opacity 150ms ease-in-out
&:hover
.ps-scrollbar-y
opacity: 1
/* perfect-scrollbar v0.6.3 */
.ps-container
-ms-touch-action: none
overflow: hidden !important
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
.ps-container.ps-active-y > .ps-scrollbar-y-rail
display: block
.ps-container > .ps-scrollbar-x-rail
display: none
position: absolute
/* please don't change 'position' */
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
opacity: 0
-webkit-transition: background-color .2s linear, opacity .2s linear
-moz-transition: background-color .2s linear, opacity .2s linear
-o-transition: background-color .2s linear, opacity .2s linear
transition: background-color .2s linear, opacity .2s linear
bottom: 3px
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x
position: absolute
/* please don't change 'position' */
background-color: $color-scrollbars-base
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
-webkit-transition: background-color .2s linear
-moz-transition: background-color .2s linear
-o-transition: background-color .2s linear
transition: background-color .2s linear
bottom: 0
/* there must be 'bottom' for ps-scrollbar-x */
height: 5px
.ps-container > .ps-scrollbar-y-rail
display: none
position: absolute
/* please don't change 'position' */
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
opacity: 0.6
-webkit-transition: background-color .2s linear, opacity .2s linear
-moz-transition: background-color .2s linear, opacity .2s linear
-o-transition: background-color .2s linear, opacity .2s linear
transition: background-color .2s linear, opacity .2s linear
right: 3px
/* there must be 'right' for ps-scrollbar-y-rail */
width: 5px
margin:
top: 5px
bottom: 5px
#project_nav.ps-container > .ps-scrollbar-y-rail
margin-top: $project_header-height + 10
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y
position: absolute
/* please don't change 'position' */
background-color: $color-scrollbars-base
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
-webkit-transition: background-color .2s linear
-moz-transition: background-color .2s linear
-o-transition: background-color .2s linear
transition: background-color .2s linear, height .2s linear
right: 0
/* there must be 'right' for ps-scrollbar-y */
width: 5px
.ps-container.ps-in-scrolling
pointer-events: none
&.ps-x
.ps-scrollbar-x-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-x
background-color: rgba($color-scrollbars-base, .2)
&.ps-y
.ps-scrollbar-y-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-y
background-color: rgba($color-scrollbars-base, .2)
.ps-container:hover
.ps-scrollbar-x-rail, .ps-scrollbar-y-rail
opacity: 0.6
&:hover
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-x, .ps-scrollbar-y
background-color: $color-scrollbars-base
&.ps-in-scrolling
pointer-events: none
&.ps-x
.ps-scrollbar-x-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-x
background-color: rgba($color-scrollbars-base, .1)
&.ps-y
.ps-scrollbar-y-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-y
background-color: rgba($color-scrollbars-base, .1)

View File

@@ -45,6 +45,7 @@ body.theatre .container-page
width: 100% width: 100%
padding: 25px padding: 25px
position: relative position: relative
overflow: auto
&:hover &:hover
ul#theatre-tools ul#theatre-tools
@@ -145,6 +146,7 @@ body.theatre .container-page
border-left: 2px solid $color-background-nav border-left: 2px solid $color-background-nav
transition: right 200ms ease-in-out transition: right 200ms ease-in-out
position: absolute position: absolute
overflow-y: auto
.theatre-info-header .theatre-info-header
border-bottom: thin solid $color-background border-bottom: thin solid $color-background

View File

@@ -408,7 +408,6 @@ html(lang="en")
link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css') link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css')
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.bootstrap-3.3.7.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.bootstrap-3.3.7.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/perfect-scrollbar-0.6.14.min.js') }}")
script. script.
$(document).ready(function() { $(document).ready(function() {
@@ -417,10 +416,6 @@ html(lang="en")
// Resize #notifications and change overflow for scrollbars // Resize #notifications and change overflow for scrollbars
$(window).on("resize", function() { notificationsResize(); }); $(window).on("resize", function() { notificationsResize(); });
// Load perfectScrollbar
Ps.initialize(document.getElementById('notifications'), {suppressScrollX: true});
{% endif %} {% endif %}
}); });

View File

@@ -49,9 +49,6 @@ include ../_scripts
script. script.
$(function () { $(function () {
// Load scrollbar for sidebar
Ps.initialize(document.getElementById('theatre-info'), {suppressScrollX: true});
var file_width = {{ node.file.width }}; var file_width = {{ node.file.width }};
var file_height = {{ node.file.height }}; var file_height = {{ node.file.height }};
var theatre_media = document.getElementById('theatre-media'); var theatre_media = document.getElementById('theatre-media');
@@ -80,11 +77,9 @@ script.
if (started_zoomed_in) { if (started_zoomed_in) {
$theatre_media.removeClass('zoomed-in'); $theatre_media.removeClass('zoomed-in');
$theatre_media.addClass('zoomed-out'); $theatre_media.addClass('zoomed-out');
Ps.destroy(theatre_media);
} else { } else {
$theatre_media.addClass('zoomed-in'); $theatre_media.addClass('zoomed-in');
$theatre_media.removeClass('zoomed-out'); $theatre_media.removeClass('zoomed-out');
Ps.initialize(theatre_media);
} }
// Style toolbar button // Style toolbar button

View File

@@ -265,12 +265,6 @@ script(type="text/javascript").
} }
}); });
/* Scrollbars */
if (typeof Ps !== 'undefined'){
Ps.initialize(searchList, {suppressScrollX: true});
Ps.initialize(document.getElementById('search-hit-container'), {suppressScrollX: true});
}
/* Hide site-wide search, kinda confusing */ /* Hide site-wide search, kinda confusing */
$('.search-input').hide(); $('.search-input').hide();

View File

@@ -174,11 +174,6 @@ script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets
script(type="text/javascript"). script(type="text/javascript").
/* Initialize scrollbars */
if ((typeof Ps !== 'undefined') && window.innerWidth > 768){
Ps.initialize(document.getElementById('project_tree'), {suppressScrollX: true});
}
$('.project-mode-edit').show(); $('.project-mode-edit').show();
ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''}); ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''});

View File

@@ -244,11 +244,6 @@ script.
var projectTree = document.getElementById('project_tree'); var projectTree = document.getElementById('project_tree');
/* Initialize project_tree scrollbar */
if ((typeof Ps !== 'undefined') && projectTree && window.innerWidth > 768){
Ps.initialize(projectTree, {suppressScrollX: true});
}
var urlNodeMove = "{{url_for('projects.move_node')}}"; var urlNodeMove = "{{url_for('projects.move_node')}}";
var urlNodeFeature = "{{url_for('projects.add_featured_node')}}"; var urlNodeFeature = "{{url_for('projects.add_featured_node')}}";
var urlNodeDelete = "{{url_for('projects.delete_node')}}"; var urlNodeDelete = "{{url_for('projects.delete_node')}}";
@@ -564,18 +559,6 @@ script.
displayStorage(data.node.original.storage_node, data.node.original.path); displayStorage(data.node.original.storage_node, data.node.original.path);
jstreeAPI.toggle_node(data.node); jstreeAPI.toggle_node(data.node);
} }
/* Update scrollbar */
Ps.update(projectTree);
});
$(projectTree).on("open_node.jstree", function () {
/* Update scrollbar */
Ps.update(projectTree);
});
$(projectTree).on("close_node.jstree", function () {
/* Update scrollbar */
Ps.update(projectTree);
}); });
}; };
@@ -593,12 +576,6 @@ script.
} }
}); });
if (projectTree){
$(projectTree).hover(function(){
Ps.update(projectTree);
});
}
| {% endblock %} | {% endblock %}
| {% block comment_scripts %} {% endblock%} | {% block comment_scripts %} {% endblock%}

View File

@@ -96,10 +96,6 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select
script(type="text/javascript"). script(type="text/javascript").
if (typeof Ps !== 'undefined'){
Ps.initialize(document.getElementById('hits'), {suppressScrollX: true});
}
function displayUser(userId) { function displayUser(userId) {
var url = '/u/' + userId + '/edit?embed=1'; var url = '/u/' + userId + '/edit?embed=1';
$.get(url, function(dataHtml){ $.get(url, function(dataHtml){