From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 9 Mar 2016 12:33:42 +0000 (+0000)
Subject: #fluidbook-html5 : New arrows
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=59246712f30685c8a7528d35fadb62724f660c2c;p=fluidbook-html5.git

#fluidbook-html5 : New arrows
---

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 0152036d..8ca243d0 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -80,6 +80,13 @@ Fluidbook.prototype = {
         if (!this.support.isMobile) {
             this.desktop = new FluidbookDesktop(this);
         }
+        this.initTheme();
+    },
+    initTheme: function ()
+    {
+        if(this.datas.arrowsTheme){
+            $('html').addClass('sharp');
+        }
         this.initLoading();
     },
     initLoading: function () {
diff --git a/style/fluidbook.css b/style/fluidbook.css
index b6390898..15b7f7ac 100644
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -310,6 +310,12 @@ body {
   z-index: 21;
   background-size: 40px 100px;
 }
+.sharp #next,
+.sharp #previous {
+  width: 53px;
+  height: 107px;
+  background-size: 53px 107px;
+}
 #next,
 #previous,
 #down,
@@ -334,41 +340,47 @@ body {
   opacity: 0;
   cursor: default;
 }
+.rtl #previous,
 .ltr #next {
   background-image: url("../data/images/interface-next.svg");
   right: 0px;
   border-top-left-radius: 7px;
   border-bottom-left-radius: 7px;
 }
+.rtl #next,
 .ltr #previous {
   background-image: url("../data/images/interface-previous.svg");
   left: 0px;
   border-top-right-radius: 7px;
   border-bottom-right-radius: 7px;
 }
-.rtl #previous {
-  background-image: url("../data/images/interface-next.svg");
-  right: 0px;
-  border-top-left-radius: 7px;
-  border-bottom-left-radius: 7px;
-}
-.rtl #next {
-  background-image: url("../data/images/interface-previous.svg");
-  left: 0px;
-  border-top-right-radius: 7px;
-  border-bottom-right-radius: 7px;
+.sharp.rtl #previous,
+.sharp.ltr #next {
+  background-image: url("../data/images/interface-sharp-next.svg");
+  border-top-left-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
-.rtl.no-svg #next {
-  background-image: url("../data/images/interface-next.png");
+.sharp.rtl #next,
+.sharp.ltr #previous {
+  background-image: url("../data/images/interface-sharp-previous.svg");
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
 }
-.rtl.no-svg #previous {
+.no-svg.rtl #next,
+.no-svg.ltr #previous {
   background-image: url("../data/images/interface-previous.png");
 }
-.rtl.no-svg #previous {
+.no-svg.rtl #previous,
+.no-svg.ltr #next {
   background-image: url("../data/images/interface-next.png");
 }
-.rtl.no-svg #next {
-  background-image: url("../data/images/interface-previous.png");
+.no-svg.sharp.rtl #next,
+.no-svg.sharp.ltr #previous {
+  background-image: url("../data/images/interface-sharp-previous.png");
+}
+.no-svg.sharp.rtl #previous,
+.no-svg.sharp.ltr #next {
+  background-image: url("../data/images/interface-sharp-next.png");
 }
 /* Header */
 header {
@@ -889,6 +901,12 @@ ul.chapters.shareList a.level0 img {
   right: 40px;
   top: 340px;
 }
+.sharp .ltr #helpView .interface .next,
+.sharp .ltr #helpView .interface .last,
+.sharp .rtl #helpView .interface .first,
+.sharp .rtl #helpView .interface .previous {
+  right: 53px;
+}
 .ltr #helpView .interface .next:after,
 .ltr #helpView .interface .last:after,
 .rtl #helpView .interface .first:after,
@@ -908,6 +926,12 @@ ul.chapters.shareList a.level0 img {
   left: 40px;
   top: 340px;
 }
+.sharp .rtl #helpView .interface .next,
+.sharp .rtl #helpView .interface .last,
+.sharp .ltr #helpView .interface .first,
+.sharp .ltr #helpView .interface .previous {
+  left: 57px;
+}
 .rtl #helpView .interface .next:before,
 .rtl #helpView .interface .last:before,
 .ltr #helpView .interface .first:before,
@@ -924,6 +948,10 @@ ul.chapters.shareList a.level0 img {
 #helpView .interface .last {
   margin-top: 43px;
 }
+.sharp #helpView .interface .first,
+.sharp #helpView .interface .last {
+  margin-top: 40px;
+}
 #helpView .interface .next,
 #helpView .interface .previous {
   margin-top: -5px;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index c11b2806..b930ceb8 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -352,6 +352,12 @@ body {
 	opacity: 1;
 	z-index: 21;
 	background-size: 40px 100px;
+
+	.sharp & {
+		width: 53px;
+		height: 107px;
+		background-size: 53px 107px;
+	}
 }
 
 #next, #previous, #down, #splash {
@@ -377,48 +383,51 @@ body {
 	cursor: default;
 }
 
-.ltr #next {
+.rtl #previous, .ltr #next {
 	background-image: url("../data/images/interface-next.svg");
 	right: 0px;
 	border-top-left-radius: 7px;
 	border-bottom-left-radius: 7px;
 }
 
-.ltr #previous {
+.rtl #next, .ltr #previous {
 	background-image: url("../data/images/interface-previous.svg");
 	left: 0px;
 	border-top-right-radius: 7px;
 	border-bottom-right-radius: 7px;
 }
 
-.rtl #previous {
-	background-image: url("../data/images/interface-next.svg");
-	right: 0px;
-	border-top-left-radius: 7px;
-	border-bottom-left-radius: 7px;
-}
-
-.rtl #next {
-	background-image: url("../data/images/interface-previous.svg");
-	left: 0px;
-	border-top-right-radius: 7px;
-	border-bottom-right-radius: 7px;
+.sharp {
+	&.rtl #previous, &.ltr #next {
+		background-image: url("../data/images/interface-sharp-next.svg");
+		border-top-left-radius: 1px;
+		border-bottom-left-radius: 1px;
+	}
+	&.rtl #next, &.ltr #previous {
+		background-image: url("../data/images/interface-sharp-previous.svg");
+		border-top-right-radius: 1px;
+		border-bottom-right-radius: 1px;
+	}
 }
 
-.rtl.no-svg #next {
-	background-image: url("../data/images/interface-next.png");
-}
+.no-svg {
+	&.rtl #next, &.ltr #previous {
+		background-image: url("../data/images/interface-previous.png");
+	}
 
-.rtl.no-svg #previous {
-	background-image: url("../data/images/interface-previous.png");
-}
+	&.rtl #previous, &.ltr #next {
+		background-image: url("../data/images/interface-next.png");
+	}
 
-.rtl.no-svg #previous {
-	background-image: url("../data/images/interface-next.png");
-}
+	&.sharp {
+		&.rtl #next, &.ltr #previous {
+			background-image: url("../data/images/interface-sharp-previous.png");
+		}
 
-.rtl.no-svg #next {
-	background-image: url("../data/images/interface-previous.png");
+		&.rtl #previous, &.ltr #next {
+			background-image: url("../data/images/interface-sharp-next.png");
+		}
+	}
 }
 
 /* Header */
@@ -1045,6 +1054,15 @@ ul.chapters.shareList a.level0 img {
 	top: 340px;
 }
 
+&.sharp {
+	.ltr #helpView .interface .next,
+	.ltr #helpView .interface .last,
+	.rtl #helpView .interface .first,
+	.rtl #helpView .interface .previous {
+		right: 53px;
+	}
+}
+
 .ltr #helpView .interface .next:after,
 .ltr #helpView .interface .last:after,
 .rtl #helpView .interface .first:after,
@@ -1066,6 +1084,15 @@ ul.chapters.shareList a.level0 img {
 	top: 340px;
 }
 
+.sharp {
+	.rtl #helpView .interface .next,
+	.rtl #helpView .interface .last,
+	.ltr #helpView .interface .first,
+	.ltr #helpView .interface .previous {
+		left: 57px;
+	}
+}
+
 .rtl #helpView .interface .next:before,
 .rtl #helpView .interface .last:before,
 .ltr #helpView .interface .first:before,
@@ -1082,6 +1109,10 @@ ul.chapters.shareList a.level0 img {
 #helpView .interface .first,
 #helpView .interface .last {
 	margin-top: 43px;
+
+	.sharp & {
+		margin-top: 40px;
+	}
 }
 
 #helpView .interface .next,