mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Adding overflow markers for preview frame scroller
This commit is contained in:
parent
2a32a7f9fe
commit
8b265bdb9b
@ -1,10 +1,53 @@
|
||||
|
||||
.preview-list-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-list-scroller {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-overflow,
|
||||
.bottom-overflow {
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 12px;
|
||||
|
||||
-webkit-transition: all 500ms ease-out;
|
||||
-moz-transition: all 500ms ease-out;
|
||||
-ms-transition: all 500ms ease-out;
|
||||
-o-transition: all 500ms ease-out;
|
||||
transition: all 500ms ease-out;
|
||||
|
||||
background-image: linear-gradient(45deg, rgba(0,0,0, 0.5) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.5) 75%, rgba(0,0,0, 0.5)),
|
||||
linear-gradient(-45deg, rgba(0,0,0, 0.5) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.5) 75%, rgba(0,0,0, 0.5));
|
||||
background-size: 45px 45px;
|
||||
background-repeat: repeat-x;
|
||||
background-position-x: 3px;
|
||||
}
|
||||
|
||||
.top-overflow {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.bottom-overflow {
|
||||
bottom: -20px;
|
||||
background-position-x: 0;
|
||||
background-position-y: -23px;
|
||||
}
|
||||
|
||||
.top-overflow-visible .top-overflow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bottom-overflow-visible .bottom-overflow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
list-style-type: none;
|
||||
padding-right: 7px;
|
||||
|
11
index.html
11
index.html
@ -45,8 +45,12 @@
|
||||
<div class='left-column'>
|
||||
|
||||
<!-- List of frames: -->
|
||||
<div class="preview-list-wrapper">
|
||||
<ul class="preview-list" id="preview-list"></ul>
|
||||
<div id="preview-list-wrapper" class="preview-list-wrapper">
|
||||
<div id="preview-list-scroller" class="preview-list-scroller">
|
||||
<ul class="preview-list" id="preview-list"></ul>
|
||||
</div>
|
||||
<div class="top-overflow"></div>
|
||||
<div class="bottom-overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -68,9 +72,6 @@
|
||||
<span id="display-fps" class="display-fps">12 FPS</span>
|
||||
<input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="application-actions">
|
||||
|
@ -11,9 +11,14 @@
|
||||
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
|
||||
$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
|
||||
$.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
|
||||
|
||||
$('#preview-list-scroller').scroll(this.onScroll_.bind(this))
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.init = function() {};
|
||||
ns.PreviewFilmController.prototype.init = function() {
|
||||
|
||||
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.addFrame = function () {
|
||||
this.framesheet.addEmptyFrame();
|
||||
@ -36,6 +41,28 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.onScroll_ = function (evt) {
|
||||
var scroller = $('#preview-list-scroller');
|
||||
var scrollerHeight = scroller.height();
|
||||
var scrollTop = scroller.scrollTop();
|
||||
var scrollerContentHeight = $('#preview-list').height();
|
||||
var treshold = 30;
|
||||
var overflowTop = false,
|
||||
overflowBottom = false;
|
||||
if (scrollerHeight < scrollerContentHeight) {
|
||||
if (scrollTop > treshold) {
|
||||
overflowTop = true;
|
||||
}
|
||||
var scrollBottom = (scrollerContentHeight - scrollTop) - scrollerHeight;
|
||||
if (scrollBottom > treshold) {
|
||||
overflowBottom = true;
|
||||
}
|
||||
var wrapper = $('#preview-list-wrapper');
|
||||
wrapper.toggleClass('top-overflow-visible', overflowTop);
|
||||
wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.createPreviews_ = function () {
|
||||
|
||||
this.container.html("");
|
||||
@ -68,11 +95,11 @@
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
||||
|
||||
$( "#preview-list" ).sortable({
|
||||
$("#preview-list").sortable({
|
||||
placeholder: "preview-tile-drop-proxy",
|
||||
update: $.proxy(this.onUpdate_, this)
|
||||
});
|
||||
$( "#preview-list" ).disableSelection();
|
||||
$("#preview-list").disableSelection();
|
||||
};
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user