Merge pull request #106 from juliandescottes/fix-user-messages

UI Stuff again

css/preview-film-section.css

@@ -1,10 +1,54 @@
-
 .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.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)),
+                    linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8));
+  background-size: 29px 45px;
+  background-repeat: repeat-x;
+  background-position-x: 3px;
+  z-index: 10;
+}
+
+.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;
@@ -53,7 +97,7 @@
 .preview-tile .tile-overlay {
   z-index: 10;
   position: absolute;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(100, 100, 100, 0.6);
   opacity: 0;
   height: 30px;
   width: 30px;
@@ -64,9 +108,9 @@
   opacity: 1.0;
 }
 
-.tile-overlay.tile-count {
+.preview-tile .tile-overlay.tile-count {
   display: block;
-  opacity: 0.5;
+  opacity: 1.0;
   border-bottom-right-radius: 3px;
   top: 0;
   left: 0;

css/style.css

@@ -72,7 +72,7 @@ body {
 }
 
 .canvas-container .canvas-background {
-  background: url(../img/canvas_background.png) repeat;
+  background: url(../img/medium_canvas_background.png) repeat;
   position: absolute;
   top: 0;
   right: 0;
@@ -125,25 +125,25 @@ body {
  */
 .user-message {
     position: absolute;
+    right: 0;
     bottom: 0;
-    left: 25%;
     background-color: #F9EDBE;
-    padding: 4px 12px;
+    padding: 10px 47px;
-    padding-right: 20px;
     border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-    border-right: 0;
     color: #222;
     border: #F0C36D 1px solid;
+    border-right: 0;
+    border-bottom: 0;
     font-weight: bold;
     font-size: 13px; 
     z-index: 10000;
+    max-width: 300px;
 }
 
 .user-message .close {
   position: absolute;
-  top: 0px;
+  top: 6px;
-  right: 5px;
+  right: 17px;
   color: gray;
   font-weight: bold;
   cursor: pointer;

index.html

@@ -45,9 +45,13 @@
     <div class='left-column'>
       
       <!-- List of frames: -->
-      <div class="preview-list-wrapper">
+      <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>
 
     <div class='main-column'>
@@ -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">

js/controller/PreviewFilmController.js

@@ -11,6 +11,9 @@
         $.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.updateScrollerOverflows.bind(this));
+        this.updateScrollerOverflows();
     };
 
     ns.PreviewFilmController.prototype.init = function() {};
@@ -18,6 +21,7 @@
     ns.PreviewFilmController.prototype.addFrame = function () {
         this.framesheet.addEmptyFrame();
         this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
+        this.updateScrollerOverflows();
     };
 
     ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
@@ -36,6 +40,28 @@
         }
     };
 
+    ns.PreviewFilmController.prototype.updateScrollerOverflows = function () {
+        var scroller = $('#preview-list-scroller');
+        var scrollerHeight = scroller.height();
+        var scrollTop = scroller.scrollTop();
+        var scrollerContentHeight = $('#preview-list').height();
+        var treshold = $('.top-overflow').height();
+        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("");
@@ -60,6 +86,7 @@
         if(needDragndropBehavior) {
             this.initDragndropBehavior_();
         }
+        this.updateScrollerOverflows();
     };
 
 
@@ -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();
     };
 
     /**
@@ -165,12 +192,14 @@
     ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
         this.framesheet.removeFrameByIndex(index);
         $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
+        this.updateScrollerOverflows();
     };
 
     ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
         this.framesheet.duplicateFrameByIndex(index);
         $.publish(Events.LOCALSTORAGE_REQUEST);  // Should come from model
         this.framesheet.setCurrentFrameIndex(index + 1);
+        this.updateScrollerOverflows();
     };
 
     /**

js/service/LocalStorageService.js

@@ -30,8 +30,8 @@
    */
   ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
     
-   // console.log('[LocalStorage service]: Snapshot stored');
+    console.log('[LocalStorage service]: Snapshot stored');
-   // window.localStorage.snapShot = this.framesheet.serialize();
+    window.localStorage.snapShot = this.framesheet.serialize();
   };
 
   /**
@@ -55,7 +55,6 @@
    * @public
    */
   ns.LocalStorageService.prototype.init = function(framesheet_) {
-
     $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
   };