diff --git a/css/preview-film-section.css b/css/preview-film-section.css
index 48680d04..2757c9e9 100644
--- a/css/preview-film-section.css
+++ b/css/preview-film-section.css
@@ -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;
diff --git a/index.html b/index.html
index 0fa2c994..67da5098 100644
--- a/index.html
+++ b/index.html
@@ -45,8 +45,12 @@
-
@@ -67,10 +71,7 @@
12 FPS
-
-
-
-
+
diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js
index 61b4fe3a..1d28b00c 100644
--- a/js/controller/PreviewFilmController.js
+++ b/js/controller/PreviewFilmController.js
@@ -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();
};
/**