tabbed preferences

5 files changed, 149 insertions, 62 deletions

diff --git a/backend.php b/backend.php
index 353062d19..8b8a90709 100644
--- a/backend.php
+++ b/backend.php
@@ -947,6 +947,13 @@
 		
 			}
 
+		print "<h3>OPML Import</h3>
+		<form	enctype=\"multipart/form-data\" method=\"POST\" action=\"opml.php\">
+			File: <input id=\"opml_file\" name=\"opml_file\" type=\"file\">&nbsp;
+			<input class=\"button\" name=\"op\" onclick=\"return validateOpmlImport();\"
+				type=\"submit\" value=\"Import\">
+			</form>";
+
 	}
 
 	if ($op == "pref-filters") {
diff --git a/prefs.js b/prefs.js
index 1b5277674..0f545b7f8 100644
--- a/prefs.js
+++ b/prefs.js
@@ -9,6 +9,8 @@ var active_feed = false;
 var active_filter = false;
 var active_label = false;
 
+var active_tab = false;
+
 /*@cc_on @*/
 /*@if (@_jscript_version >= 5)
 // JScript gives us Conditional compilation, we can cope with old IE versions.
@@ -29,10 +31,9 @@ if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 }
 
 function feedlist_callback() {
-	var container = document.getElementById('feedConfPane');
+	var container = document.getElementById('prefContent');
 	if (xmlhttp.readyState == 4) {
 		container.innerHTML=xmlhttp.responseText;
-
 		if (active_feed) {
 			var row = document.getElementById("FEEDR-" + active_feed);
 			if (row) {
@@ -45,12 +46,14 @@ function feedlist_callback() {
 				checkbox.checked = true;
 			}
 		}
+		p_notify("");
 	}
 }
 
 function filterlist_callback() {
-	var container = document.getElementById('filterConfPane');
+	var container = document.getElementById('prefContent');
 	if (xmlhttp.readyState == 4) {
+
 		container.innerHTML=xmlhttp.responseText;
 
 		if (active_filter) {
@@ -66,11 +69,12 @@ function filterlist_callback() {
 				checkbox.checked = true;
 			}
 		}
+		p_notify("");
 	}
 }
 
 function labellist_callback() {
-	var container = document.getElementById('labelConfPane');
+	var container = document.getElementById('prefContent');
 	if (xmlhttp.readyState == 4) {
 		container.innerHTML=xmlhttp.responseText;
 
@@ -87,6 +91,7 @@ function labellist_callback() {
 				checkbox.checked = true;
 			}
 		}
+		p_notify("");
 	}
 }
 function notify_callback() {
@@ -104,7 +109,9 @@ function updateFeedList() {
 		return
 	}
 
-	document.getElementById("feedConfPane").innerHTML = "Loading feeds, please wait...";
+//	document.getElementById("prefContent").innerHTML = "Loading feeds, please wait...";
+
+	p_notify("Loading, please wait...");
 
 	xmlhttp.open("GET", "backend.php?op=pref-feeds", true);
 	xmlhttp.onreadystatechange=feedlist_callback;
@@ -670,7 +677,9 @@ function updateFilterList() {
 		return
 	}
 
-	document.getElementById("filterConfPane").innerHTML = "Loading filters, please wait...";
+//	document.getElementById("prefContent").innerHTML = "Loading filters, please wait...";
+
+	p_notify("Loading, please wait...");
 
 	xmlhttp.open("GET", "backend.php?op=pref-filters", true);
 	xmlhttp.onreadystatechange=filterlist_callback;
@@ -685,28 +694,43 @@ function updateLabelList() {
 		return
 	}
 
-	document.getElementById("labelConfPane").innerHTML = "Loading labels, please wait...";
+	p_notify("Loading, please wait...");
+
+//	document.getElementById("prefContent").innerHTML = "Loading labels, please wait...";
 
 	xmlhttp.open("GET", "backend.php?op=pref-labels", true);
 	xmlhttp.onreadystatechange=labellist_callback;
 	xmlhttp.send(null);
-
 }
 
+function selectTab(id) {
 
-function expandPane(id) {
-
-	var container;
-
-	container = document.getElementById(id);
-
-	if (id == "feedConfPane") {
+	if (id == "feedConfig") {
 		updateFeedList();
-	} else if (id == "filterConfPane") {
+	} else if (id == "filterConfig") {
 		updateFilterList();
-	} else if (id == "labelConfPane") {
+	} else if (id == "labelConfig") {
 		updateLabelList();
 	}
+
+	var tab = document.getElementById(active_tab + "Tab");
+
+	if (tab) {
+		if (tab.className.match("Selected")) {
+			tab.className = "prefsTab";
+		}
+	}
+
+	tab = document.getElementById(id + "Tab");
+
+	if (tab) {
+		if (!tab.className.match("Selected")) {
+			tab.className = tab.className + "Selected";
+		}
+	}
+
+	active_tab = id;
+
 }
 
 function init() {
@@ -720,7 +744,8 @@ function init() {
 		return;
 	}
 
-//	updateFeedList();
+	selectTab("feedConfig");
+
 	document.onkeydown = hotkey_handler;
 	notify("");
 
diff --git a/prefs.php b/prefs.php
index 17b93f47a..2e3d96326 100644
--- a/prefs.php
+++ b/prefs.php
@@ -31,50 +31,24 @@
 </tr>
 <? } ?>
 <tr>
-	<td class="prefsToolbar" valign="middle" align="right">
+	<td class="prefsTabs" align="left" valign="bottom">
+		<input id="feedConfigTab" class="prefsTab" type="submit" value="Feed Configuration"
+			onclick="selectTab('feedConfig')">
+		<input id="filterConfigTab" class="prefsTab" type="submit" value="Content Filtering"
+			onclick="selectTab('filterConfig')">
+		<? if (ENABLE_LABELS) { ?>
+		<input id="labelConfigTab" class="prefsTab" type="submit" value="Label Editor"
+			onclick="selectTab('labelConfig')">
+		<? } ?>
+	</td>
+	<td class="prefsToolbar" valign="middle" align="right">	
 		<input type="submit" onclick="gotoMain()" class="button" value="Return to main">
 	</td>
+	</tr>
 </tr>
-</tr>
-	<td id="prefContent" class="prefContent" valign="top">
-		<h2>Feed Configuration</h2><div id="piggie">&nbsp;</div>
-
-		<div class="expPane" id="feedConfPane">
-			<a class="button" 
-				href="javascript:expandPane('feedConfPane')">Expand section &gt;</a>
-		</div>
-
-		<h2>OPML Import</h2>
-
-		<div class="expPane">
-	
-		<form	enctype="multipart/form-data" method="POST" action="opml.php">
-			File: <input id="opml_file" name="opml_file" type="file">&nbsp;
-			<input class="button" name="op" onclick="return validateOpmlImport();"
-				type="submit" value="Import">
-			</form>
-
-		</div>
-
-		<h2>Content Filtering</h2>
+	<td id="prefContent" class="prefContent" valign="top" colspan="2">
 
-		<div class="expPane" id="filterConfPane">
-			<a class="button" 
-				href="javascript:expandPane('filterConfPane')">Expand section &gt;</a>
-
-		</div>
-
-		<? if (ENABLE_LABELS) { ?>
-
-		<h2>Label Editor</h2>
-
-		<div class="expPane" id="labelConfPane">
-			<a class="button" 
-				href="javascript:expandPane('labelConfPane')">Expand section &gt;</a>
-
-		</div>
-
-		<? } ?>
+		<p>Loading, please wait...</p>
 
 	</td>
 </tr>
diff --git a/tt-rss.css b/tt-rss.css
index 67c6b549c..dd55bbc70 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -29,10 +29,7 @@ table.main td.mainToolbar {
 }
 
 table.main td.prefsToolbar {
-	border-width : 0px 0px 0px 0px;
-	border-style : solid;
-	border-color : #c0c0c0;
-	padding : 0px 10px 10px 5px;
+	padding : 0px 5px 5px 0px;
 }
 
 table.main td.feeds {
@@ -174,6 +171,14 @@ h2 {
 	border-color : #e0e0e0;
 }
 
+h3 {
+	font-size : 12pt;
+	font-weight : bold;
+	border-width : 0px 0px 1px 0px;
+	border-style : solid;
+	border-color : #e0e0e0;
+}
+
 hr {
 	border-width : 0px 0px 1px 0px;
 	border-style : dashed;
@@ -406,3 +411,35 @@ pre {
 input.extSearch {
 	width : 200px;
 }
+
+table.main td.prefsTabs {
+	padding-left : 15px;
+}
+
+input.prefsTab {
+	border-width : 1px 1px 0px 1px;
+	border-color : #c0c0c0;	
+	padding : 2px 7px 2px 7px;
+	margin : 0px 1px 0px 0px;
+	width : 150px;
+	background-image : url("images/vgrad_light_rev2.png");
+	background-position : top left;
+	background-repeat : repeat-x;
+}
+
+input.prefsTabSelected {
+	border-width : 1px 1px 0px 1px;
+	border-color : #c0c0c0;	
+	padding : 2px 7px 2px 7px;
+	margin : 0px 1px 0px 0px;
+	width : 150px;
+	background : white;
+	font-weight : bold;
+	background-position : top left;
+	background-repeat : repeat-x;
+}
+
+
+input.prefsTab:hover {
+	background : white;
+}
diff --git a/tt-rss_compact.css b/tt-rss_compact.css
index 724c28a42..29bf8e3d5 100644
--- a/tt-rss_compact.css
+++ b/tt-rss_compact.css
@@ -194,6 +194,14 @@ h2 {
 	border-color : #e0e0e0;
 }
 
+h3 {
+	font-size : 12pt;
+	font-weight : bold;
+	border-width : 0px 0px 1px 0px;
+	border-style : solid;
+	border-color : #e0e0e0;
+}
+
 hr {
 	border-width : 0px 0px 1px 0px;
 	border-style : dashed;
@@ -429,3 +437,39 @@ pre {
 #qafInput {
 	width : 300px;
 }
+
+input.extSearch {
+	width : 200px;
+}
+
+table.main td.prefsTabs {
+	padding-left : 15px;
+}
+
+input.prefsTab {
+	border-width : 1px 1px 0px 1px;
+	border-color : #c0c0c0;	
+	padding : 2px 7px 2px 7px;
+	margin : 0px 1px 0px 0px;
+	width : 150px;
+	background-image : url("images/vgrad_light_rev2.png");
+	background-position : top left;
+	background-repeat : repeat-x;
+}
+
+input.prefsTabSelected {
+	border-width : 1px 1px 0px 1px;
+	border-color : #c0c0c0;	
+	padding : 2px 7px 2px 7px;
+	margin : 0px 1px 0px 0px;
+	width : 150px;
+	background : white;
+	font-weight : bold;
+	background-position : top left;
+	background-repeat : repeat-x;
+}
+
+
+input.prefsTab:hover {
+	background : white;
+}