Gui fixes

3 files changed, 64 insertions, 10 deletions

diff --git a/chrome/css/redirector.css b/chrome/css/redirector.css
index a9880d3..5ebc5f9 100644
--- a/chrome/css/redirector.css
+++ b/chrome/css/redirector.css
@@ -29,12 +29,30 @@ li:first-child { border-top:none;}
 	box-shadow: 0px 0px 2px grey;
 	text-shadow: 1px 1px 1px white;
 }
-#config { display:none; position:fixed; margin:auto;}
+#config { 
+	display:none; 
+	position:fixed; 
+	margin:auto;
+}
+
 button { border:solid 1px grey; border-radius:4px; background:-moz-linear-gradient(top, #ccc, #fff); cursor:pointer;}
 h5 { text-align:center; margin:0px; padding-left:130px; }
 .pattern, .redirectTo { color:blue; font-style:italic;}
 .exampleUrl, .redirectResult { color:blue; }
 #redirect-list li:nth-child(odd) { background:-moz-linear-gradient(top, #ddf, #cce); }
 #redirect-list li:nth-child(even) { background-color:#fff; }
-#redirect-form div { display:table-row; }
-#redirect-form { display:none; position:fixed; margin:0 auto; border:solid 1px black; }
+
+#redirect-form div {  margin-top:5px; display:table-row; }
+#redirect-form div label{ text-align:right; padding:6px;}
+#redirect-form div input[type='text']{  margin-top:7px; width:300px; display:inline-block; }
+
+.button-row { text-align:center; display:block !important;}
+#redirect-form {
+	background:-moz-linear-gradient(top, #fff, #bcd);
+	border-radius:8px;
+	display:none; 
+	position:fixed; 
+	margin:0 auto; 
+	padding:10px;
+	box-shadow: 0px 0px 4px black;
+}
diff --git a/chrome/js/redirector-ui.js b/chrome/js/redirector-ui.js
index e0a5d07..643f3f6 100644
--- a/chrome/js/redirector-ui.js
+++ b/chrome/js/redirector-ui.js
@@ -1,7 +1,15 @@
+Components.utils.import("chrome://redirector/content/js/redirect.js");
 Components.utils.import("chrome://redirector/content/js/redirector.js");
 Components.utils.import("chrome://redirector/content/js/redirectorprefs.js");
 Components.utils.import("chrome://redirector/content/js/xpcom.js");
 
+jQuery.fn.center = function () {
+    this.css("position","absolute");
+    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
+    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
+    return this;
+}
+
 $(document).ready(function() {
 	var prefs = new RedirectorPrefs();
 	var strings = StringBundleService.createBundle('chrome://redirector/locale/redirector.properties', LocaleService.getApplicationLocale());
@@ -69,6 +77,7 @@ $(document).ready(function() {
 			for (var i = Redirector.redirectCount-imported; i < Redirector.redirectCount; i++) {
 				newlist.push(Redirector.getRedirectAt(i));
 			}				
+			databind();
 		}
 	}
 	
@@ -85,7 +94,18 @@ $(document).ready(function() {
 			node.appendTo('#redirect-list');
 			node.data('redirect', redirect);
 		}
-		
+	}
+	
+	function bindRedirect(redirect) {
+		$('#description').val(redirect.description);
+		$('#example-url').val(redirect.exampleUrl);
+		$('#include-pattern').val(redirect.includePattern);
+		$('#exclude-pattern').val(redirect.excludePattern);
+		$('#redirect-to').val(redirect.redirectUrl);
+		$('#redirect-enabled').attr('checked', !redirect.disabled);
+		$('#unescape-matches').attr('checked', redirect.unescapeMatches);
+		$('#regex-pattern').attr('checked', redirect.patternType == Redirect.REGEX);
+		$('#wildcard-pattern').attr('checked', redirect.patternType == Redirect.WILDCARD);
 	}
 
 	$('#redirect-list li div a.delete').live('click', function(ev) {
@@ -96,17 +116,29 @@ $(document).ready(function() {
 		}
 		ev.preventDefault();
 	});
+	
+	function showRedirect(redirect) {
+		bindRedirect(redirect);
+		$('#redirect-form').center().css('top', '-=40px').show();
+	}
 
 	$('#redirect-list li div a.edit').live('click', function(ev) {
 		var redirect = $(this.parentNode.parentNode).data('redirect');
-		$('#redirect-form').show();
+		showRedirect(redirect);
 		ev.preventDefault();
 	});
 
 	databind();
 	$('#import').click(importRedirects);
 	$('#export').click(exportRedirects);
+	$('#new-redirect').click(function() { showRedirect({patternType:Redirect.REGEX});});
+	$('#configure').click(configure);
+	$('#cancel').click(function() { $('#redirect-form').hide();});
+	$('#configure').click(configure);
 	
+	function configure() {
+		$('#config').show();
+	}
 	function bindConfig() {
 		$('#config input[type="checkbox"]').each(function() {
 			var pref = $(this).attr('data-pref');
diff --git a/chrome/redirector.html b/chrome/redirector.html
index 9bb6cc7..6a9de05 100644
--- a/chrome/redirector.html
+++ b/chrome/redirector.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<title>Redirector Extension Settings</title>
-		<link rel="stylesheet" href="css/redirector.css" />
+		<link rel="stylesheet" href="css/redirector.css?sfsdf" />
 		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
 		<script type="text/javascript" src="js/redirector-ui.js"></script>
 	</head>
@@ -27,10 +27,10 @@
 		</ul>
 		<div id="config">
 			<h2>Configuration</h2>
-			<input type="checkbox" id="enable-redirector" data-pref="enabled" />Enabled
-			<input type="checkbox" id="show-status-bar-icon" data-pref="showStatusBarIcon"/> Statusbar icon
-			<input type="checkbox" id="show-context-menu" data-pref="showContextMenu"/> Context menu
-			<input type="checkbox" id="enable-debug-output" data-pref="debugEnabled"/> Debug output
+			<input type="checkbox" id="enable-redirector" data-pref="enabled" /><label>Enabled</label>
+			<input type="checkbox" id="show-status-bar-icon" data-pref="showStatusBarIcon"/><label>Statusbar icon</label>
+			<input type="checkbox" id="show-context-menu" data-pref="showContextMenu"/><label>Context menu</label>
+			<input type="checkbox" id="enable-debug-output" data-pref="debugEnabled"/><label>Debug output</label>
 		</div>
 		<div id="redirect-form">
 			<div>
@@ -66,6 +66,10 @@
 				<label>Enabled</label>
 				<input type="checkbox" id="redirect-enabled" />
 			</div>
+			<div class="button-row">
+				<button id="save">Save</button>
+				<button id="cancel">Cancel</button>
+			</div>
 		</div>
 	</body>
 </html>
\ No newline at end of file