wip #1445 @1

diff --git a/images/shade-thumb-left.png b/images/shade-thumb-left.png
new file mode 100644 (file)
index 0000000..c9be493
Binary files /dev/null and b/images/shade-thumb-left.png differ

diff --git a/images/shade-thumb-right.png b/images/shade-thumb-right.png
new file mode 100644 (file)
index 0000000..c66414f
Binary files /dev/null and b/images/shade-thumb-right.png differ

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 69751d334b541a298b665bb101a6312ee84c1246..1b68da6f142c4c10631fc49da56c788bacd0a46c 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -256,11 +256,14 @@ FluidbookLoader.prototype = {
         var img = this.loadImage(src, width, height, type, callback);
         return $(img).get(0).outerHTML;
     },
-    getThumbImage: function (page, div) {
+    getThumbImage: function (page, div, shade) {
         var returnHTML = false;
-        if (div == undefined) {
+        if (div === null || div == undefined) {
             div = $('<div />');
         }
+
+        left = (page % 2 == 0);
+
         var h = this.fluidbook.datas.thumbHeight;
         var s = Math.floor(page / 100);
         var row = Math.floor((page - 1) / 10);
@@ -268,12 +271,30 @@ FluidbookLoader.prototype = {
         if (col < 0) {
             col += 10;
         }
-        var left = col * 100;
-        var top = row * h;
+        var spriteleft = col * 100;
+        var spritetop = row * h;
+
+        var shadeImage = '';
+        var shadePosition = '';
+        var shadeSize = '';
+
+        if (shade) {
+            var p = '0%';
+            var i = 'right';
+            if (left) {
+                p = '100%';
+                i = 'left';
+            }
+            shadeImage = 'url("images/shade-thumb-' + i + '.png"),';
+
+            shadePosition = p + " 0%,";
+            shadeSize = '20px ' + h + 'px,';
+        }
+
         $(div).css({
-            backgroundImage: 'url("data/thumbnails/s' + s + '.jpg")',
-            backgroundPositionX: -left,
-            backgroundPositionY: -top
+            backgroundImage: shadeImage + 'url("data/thumbnails/s' + s + '.jpg")',
+            backgroundPosition: shadePosition + '' + (-spriteleft) + 'px ' + (-spritetop) + 'px',
+            backgroundSize: shadeSize + 'auto auto'
         }).addClass('img');
         return $(div).get(0).outerHTML;
     },

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 8bf2d05004523e657cc1cc37899b431627a4835f..646101045cfc7aa9efb32517eb6e74185144b4c2 100644 (file)
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -170,16 +170,16 @@ FluidbookSlider.prototype = {
         }
 
 
-        this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left);
-        this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right);
+        this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left, !single);
+        this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right, !single);
         this.fluidbook.bookmarks.updateBookmarks();
     },
 
-    setThumb: function (thumb, page) {
+    setThumb: function (thumb, page, shade) {
         thumb.find('.bookmark').attr('data-page', page);
         if (page > 0 && page <= this.fluidbook.datas.pages) {
             thumb.css('visibility', 'visible');
-            this.fluidbook.loader.getThumbImage(page, thumb.find('.img'));
+            this.fluidbook.loader.getThumbImage(page, thumb.find('.img'), shade);
             thumb.find('.number').text(this.fluidbook.physicalToVirtual(page));
         } else {
             thumb.css('visibility', 'hidden');

diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index 88d204237f9bca10ca193f31da06afba3b5f385d..70ba03a641688936e90c237356f190ff391df813 100644 (file)
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -43,7 +43,7 @@ FluidbookIndex.prototype = {
                 }
 
                 if (i > 0) {
-                    ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
+                    ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, null, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
                     if (this.fluidbook.bookmarks.enabled) {
                         ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
                     }
@@ -63,7 +63,7 @@ FluidbookIndex.prototype = {
                 }
 
                 if (j < this.fluidbook.datas.pages) {
-                    ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
+                    ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j, null, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
                     if (this.fluidbook.bookmarks.enabled) {
                         ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
                     }

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 43bd20923b4b7263819df20ddd895b0cbb27544f..e9d5fb29325dae7fbc0531e2d32ce185b00e15d8 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1063,12 +1063,14 @@ form input[type="text"], form input[type="email"] {
                background: #fff;
                position: relative;
                z-index: 1;
+               background-blend-mode: multiply;
+               background-repeat: no-repeat;
        }
        .number {
                text-align: center;
                display: block;
                font-family: Arial, Helvetica, sans-serif;
-               margin: 1px 0 0 0;
+               margin: 5px 0 0 0;
                max-width: 100px;
                position: relative;
                z-index: 1;

diff --git a/style/slider.less b/style/slider.less
index 720621be0f53c57534707a1610e0ee92a9b7291d..f053b4458c466844f3ad86ab48175aaf17ad9980 100644 (file)
--- a/style/slider.less
+++ b/style/slider.less
@@ -1,5 +1,5 @@
 @slider-background: rgba(0, 0, 0, 0.1);
-@slider-thumb-background: rgba(0, 0, 0, 0.2);
+@slider-thumb-background: @menu-background;
 
 #slider {
        position: absolute;
@@ -23,9 +23,8 @@
        }
 
        &.drag {
-
+               z-index: 12;
        }
-       z-index: 12;
 
        #sliderback {
                position: absolute;
@@ -60,7 +59,7 @@
                }
        }
 
-       @sliderthumb-height: unit(@thumb-height+40, px);
+       @sliderthumb-height: unit(@thumb-height+60, px);
        @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px);
 
        #sliderthumb {
@@ -68,15 +67,15 @@
                top: @sliderthumb-top;
                left: 0;
                background-color: @slider-thumb-background;
-               padding: 15px;
-               //display: none;
-               width: 230px;
+               padding: 25px;
+               display: none;
+               width: 250px;
                height: @sliderthumb-height;
 
                &.single {
-                       width: 130px;
+                       width: 150px;
                        &:after {
-                               left: 53px;
+                               left: 59px;
                        }
                }
 
@@ -84,11 +83,11 @@
                        content: "";
                        position: absolute;
                        bottom: -16px;
-                       left: 103px;
+                       left: 109px;
                        width: 0;
                        height: 0;
-                       border-left: 12px solid transparent;
-                       border-right: 12px solid transparent;
+                       border-left: 16px solid transparent;
+                       border-right: 16px solid transparent;
                        border-top: 16px solid @slider-thumb-background;
                        display: block;
                }
@@ -98,7 +97,8 @@
                }
 
                .number {
-                       color: #fff;
+                       color: @menu-text;
+
                }
        }
        &.drag {