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 {
|
.preview-list-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-list-scroller {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
height: 100%;
|
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 {
|
.preview-list {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding-right: 7px;
|
padding-right: 7px;
|
||||||
|
13
index.html
13
index.html
@ -45,8 +45,12 @@
|
|||||||
<div class='left-column'>
|
<div class='left-column'>
|
||||||
|
|
||||||
<!-- List of frames: -->
|
<!-- List of frames: -->
|
||||||
<div class="preview-list-wrapper">
|
<div id="preview-list-wrapper" class="preview-list-wrapper">
|
||||||
<ul class="preview-list" id="preview-list"></ul>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -67,10 +71,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<span id="display-fps" class="display-fps">12 FPS</span>
|
<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"/>
|
<input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="application-actions">
|
<div class="application-actions">
|
||||||
|
@ -11,9 +11,14 @@
|
|||||||
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
|
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
|
||||||
$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
|
$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
|
||||||
$.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.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 () {
|
ns.PreviewFilmController.prototype.addFrame = function () {
|
||||||
this.framesheet.addEmptyFrame();
|
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 () {
|
ns.PreviewFilmController.prototype.createPreviews_ = function () {
|
||||||
|
|
||||||
this.container.html("");
|
this.container.html("");
|
||||||
@ -68,11 +95,11 @@
|
|||||||
*/
|
*/
|
||||||
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
||||||
|
|
||||||
$( "#preview-list" ).sortable({
|
$("#preview-list").sortable({
|
||||||
placeholder: "preview-tile-drop-proxy",
|
placeholder: "preview-tile-drop-proxy",
|
||||||
update: $.proxy(this.onUpdate_, this)
|
update: $.proxy(this.onUpdate_, this)
|
||||||
});
|
});
|
||||||
$( "#preview-list" ).disableSelection();
|
$("#preview-list").disableSelection();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user