From effb313d3cca06ccdff44792225c1bf9056d09b0 Mon Sep 17 00:00:00 2001
From: Bala Clark <balaclark@gmail.com>
Date: Fri, 2 Sep 2011 23:38:22 +0200
Subject: [PATCH] color control styles

---
 css/styles.css                    |  73 +++++++++++++++++++--------
 img/iconic/white/reload_12x14.png | Bin 0 -> 248 bytes
 lib/ComicBook.js                  |  80 ++++++++++++++++--------------
 3 files changed, 94 insertions(+), 59 deletions(-)
 create mode 100644 img/iconic/white/reload_12x14.png

diff --git a/css/styles.css b/css/styles.css
index 7ffe005..af646ac 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,28 +1,24 @@
 
+.cb-control * {
+	font-family: helvetica, arial, sans-serif;
+	font-size: 12px;
+}
+
 .cb-control {
 	color: #fff;
-	font-size: 12px;
 	background-color: #111;
 	padding: 10px;
 	position: fixed !important;
-	opacity: 0.95;
-}
-
-.cb-control.cb-floating {
-	margin: 5px;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-}
-
-.cb-control.cb-floating,
-#cb-toolbar {
-	border: 2px solid #444;
 	-webkit-box-shadow: 0 0 4px #000;
 	-moz-box-shadow: 0 0 4px #000;
 	box-shadow: 0 0 4px #000;
 }
 
+.cb-control label {
+	display: inline-block;
+	margin: 0 0 4px;
+}
+
 .cb-control.cb-navigate {
 	top: 0;
 	margin: 0;
@@ -46,17 +42,21 @@
 	background-image: url(../img/right.png);
 }
 
+.cb-option {
+	margin-bottom: 16px;
+}
+
+.cb-option:last-child {
+	margin-bottom: 0;
+}
+
 .ui-draggable {
 	cursor: move;
 }
 
 #cb-toolbar {
 	top: 0;
-	line-height: 42px;
-	border-top: none;
-	border-left: none;
-	border-right: none;
-	display: none;
+	border-bottom: 2px solid #444;
 }
 
 #cb-toolbar #cb-status {
@@ -130,6 +130,37 @@
 }
 
 #cb-color {
-	width: 200px;
-	height: 150px;
+	width: 246px;
+	top: 52px;
+	left: 136px;
+	z-index: 1;
+	border: 2px solid #444;
+	border-top: none;
+	-moz-border-radius-bottomleft: 16px;
+	-moz-border-radius-bottomright: 16px;
+	-webkit-border-bottom-left-radius: 16px;
+	-webkit-border-bottom-right-radius: 16px;
+	border-bottom-left-radius: 16px;
+	border-bottom-right-radius: 16px;
+}
+
+label[for="cb-desaturate"] {
+	padding: 4px;
+}
+
+#cb-desaturate {
+	float: left;
+}
+
+#cb-reset {
+	float: right;
+}
+
+#cb-reset {
+	background: transparent url(../img/iconic/white/reload_12x14.png) no-repeat left center;
+	padding-left: 16px;
+	height: 14px;
+	border: none;
+	color: #fff;
+	cursor: pointer;
 }
diff --git a/img/iconic/white/reload_12x14.png b/img/iconic/white/reload_12x14.png
new file mode 100644
index 0000000000000000000000000000000000000000..c634491e29fd574fa0e12e373690661213afc855
GIT binary patch
literal 248
zcmeAS@N?(olHy`uVBq!ia0vp^JV4CH!3HFy_x^nYq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~-c70vQ=aSW-rm6ULR`QQKl_VOL)nGNlk6&XTA{>w8Om@=|H
zS*W(}f4^*l=|%_9*UT%K9dsOeu72`Z*7TxEVH^9Sx;1`HR?N#H<}X-2(P#bfhfF-@
z4>i~_3pR90xCYoaGI|_lU$KK(&emWje}yeCcaci{xpWp*?SMZ_CVURtd>f8&o_WHg
uV#%DdEP;8(w#Ob)?-wS0GALzWWMg=1EgqP8*nb1il?<M)elF{r5}E)3>{aFf

literal 0
HcmV?d00001

diff --git a/lib/ComicBook.js b/lib/ComicBook.js
index c60c9b4..36788e1 100755
--- a/lib/ComicBook.js
+++ b/lib/ComicBook.js
@@ -158,6 +158,7 @@ function ComicBook(id, srcs, opts) {
 	ComicBook.prototype.control = {
 
 		toolbar: $(document.createElement("div"))
+			.hide()
 			.attr("id", "cb-toolbar")
 			.addClass("cb-control")
 			.append(
@@ -212,44 +213,47 @@ function ComicBook(id, srcs, opts) {
 		color: $(document.createElement("div"))
 			.attr("id", "cb-color")
 			.addClass("cb-control cb-floating")
-			.append("<label>brightness</label>")
-			.append($("<div id='cb-brightness'></div>").slider({
-				value: 0,
-				step: 10,
-				min: -1000,
-				max: 1000,
-				slide: function(event, ui) {
-					ComicBook.prototype.enhance.brightness({ brightness: ui.value });
-				}
-			}))
-			.append("<label>contrast</label>")
-			.append($("<div id='cb-contrast'></div>").slider({
-				value: 0,
-				step: 0.1,
-				min: 0,
-				max: 1,
-				slide: function(event, ui) {
-					ComicBook.prototype.enhance.brightness({ contrast: ui.value });
-				}
-			}))
-			.append("<label>sharpen</label>")
-			.append($("<div id='cb-sharpen'></div>").slider({
-				value: 0,
-				step: 0.1,
-				min: 0,
-				max: 1,
-				slide: function(event, ui) {
-					ComicBook.prototype.enhance.sharpen({ amount: ui.value });
-				}
-			}))
-			.append("<input type='checkbox' id='cb-desaturate' /> <label for='cb-desaturate'>Desaturate</label>")
-			.append("<button id='cb-reset' style='display:block'>reset</button>")
-			.css({
-				position: "absolute",
-				top: "40%",
-				left: "40%"
-			})
-			.draggable(),
+			.append("<label for='cb-sharpen'>Brightness</label>")
+			.append(
+				$("<div id='cb-brightness' class='cb-option'></div>").slider({
+					value: 0,
+					step: 10,
+					min: -1000,
+					max: 1000,
+					slide: function(event, ui) {
+						ComicBook.prototype.enhance.brightness({ brightness: ui.value });
+					}
+				})
+			)
+			.append("<label for='cb-sharpen'>Contrast</label>")
+			.append(
+				$("<div id='cb-contrast' class='cb-option'></div>").slider({
+					value: 0,
+					step: 0.1,
+					min: 0,
+					max: 1,
+					slide: function(event, ui) {
+						ComicBook.prototype.enhance.brightness({ contrast: ui.value });
+					}
+				})
+			)
+			.append("<label for='cb-sharpen'>Sharpen</label>")
+			.append(
+				$("<div id='cb-sharpen' class='cb-option'></div>").slider({
+					value: 0,
+					step: 0.1,
+					min: 0,
+					max: 1,
+					slide: function(event, ui) {
+						ComicBook.prototype.enhance.sharpen({ amount: ui.value });
+					}
+				})
+			)
+			.append(
+				$(document.createElement("div")).addClass("cb-option")
+					.append("<input type='checkbox' id='cb-desaturate' /> <label for='cb-desaturate'>Desaturate</label>")
+					.append("<button id='cb-reset'>reset</button>")
+			),
 
 		/**
 		 * Page navigation