rework preferences to use dijit stuff

7 files changed, 95 insertions, 37 deletions

diff --git a/modules/pref-feeds.php b/modules/pref-feeds.php
index 38f7b5777..d8df49ab3 100644
--- a/modules/pref-feeds.php
+++ b/modules/pref-feeds.php
@@ -955,6 +955,9 @@
 
 		if ($quiet) return;
 
+		print "<div dojoType=\"dijit.layout.AccordionContainer\" region=\"center\">";
+		print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Feeds')."\">";
+
 		set_pref($link, "_PREFS_ACTIVE_TAB", "feedConfig");
 
 		$result = db_query($link, "SELECT COUNT(id) AS num_errors
@@ -976,6 +979,8 @@
 			$feed_search = $_SESSION["prefs_feed_search"];
 		}
 
+		print "<div dojoType=\"dijit.Toolbar\">";
+
 		print "<div style='float : right'> 
 			<input id=\"feed_search\" size=\"20\" type=\"search\"
 				onfocus=\"disableHotkeys();\" 
@@ -1018,6 +1023,8 @@
 
 		}
 
+		print "</div>"; # toolbar
+
 		$feeds_sort = db_escape_string($_REQUEST["sort"]);
 
 		if (!$feeds_sort || $feeds_sort == "undefined") {
@@ -1229,17 +1236,9 @@
 
 		}
 
-		print "<h3>".__('OPML')."</h3>";
+		print "</div>"; # feeds pane
 
-/*		print "<div style='float : left'>
-		<form	enctype=\"multipart/form-data\" method=\"POST\" action=\"opml.php\">
-		".__('File:')." <input id=\"opml_file\" name=\"opml_file\" type=\"file\">&nbsp;
-			<input type=\"hidden\" name=\"op\" value=\"Import\">
-			<button onclick=\"return validateOpmlImport();\"
-				type=\"submit\">".__('Import')."</button>
-				</form></div>";
-
-		print "&nbsp;"; */
+		print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('OPML')."\">";
 
 		print "<p>" . __("Using OPML you can export and import your feeds and Tiny Tiny RSS settings.");
 
@@ -1262,8 +1261,7 @@
 			</form>";
 		print "</div>&nbsp;";
 
-		print "<button onclick=\"gotoExportOpml()\">".
-			__('Export OPML')."</button>";
+		print "<button onclick=\"gotoExportOpml()\">".__('Export OPML')."</button>";
 
 		print "<p>".__('Your OPML can be published publicly and can be subscribed by anyone who knows the URL below.');
 
@@ -1273,9 +1271,11 @@
 			__('Display URL')."</button> ";
 
 
-		if (strpos($_SERVER['HTTP_USER_AGENT'], "Firefox") !== false) {
-	
-			print "<h3>" . __("Firefox Integration") . "</h3>";
+		print "</div>"; # pane
+
+		if (true || strpos($_SERVER['HTTP_USER_AGENT'], "Firefox") !== false) {
+
+			print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Firefox integration')."\">";
                 
 			print "<p>" . __('This Tiny Tiny RSS site can be used as a Firefox Feed Reader by clicking the link below.') . "</p>";
 
@@ -1288,10 +1288,12 @@
 				"</button>";
 
 			print "</p>";
-		}
 
-		print "<h3>".__("Subscribing via bookmarklet")."</h3>";
+			print "</div>"; # pane
+		}
 
+		print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Subscribing using bookmarklet')."\">";
+		
 		print "<p>" . __("Drag the link below to your browser toolbar, open the feed you're interested in in your browser and click on the link to subscribe to it.") . "</p>";
 
 		$bm_subscribe_url = str_replace('%s', '', add_feed_url());
@@ -1302,7 +1304,9 @@
 
 		print "<a href=\"$bm_url\" class='visibleLink'>" . __('Subscribe in Tiny Tiny RSS'). "</a>";
 
-		print "<h3>".__("Published articles")."</h3>";
+		print "</div>"; #pane
+
+		print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Published articles and generated feeds')."\">";
 
 		print "<p>".__('Published articles are exported as a public RSS feed and can be subscribed by anyone who knows the URL specified below.')."</p>";
 
@@ -1315,6 +1319,9 @@
 		print "<button onclick=\"return clearFeedAccessKeys()\">".
 			__('Clear all generated URLs')."</button> ";
 
+		print "</div>"; #pane
+		print "</div>"; #container
+
 	}
 
 	function print_feed_browser($link, $search, $limit, $mode = 1) {
diff --git a/modules/pref-filters.php b/modules/pref-filters.php
index b50b0410f..d796d84e4 100644
--- a/modules/pref-filters.php
+++ b/modules/pref-filters.php
@@ -298,16 +298,17 @@
 		} else {
 			$filter_search = $_SESSION["prefs_filter_search"];
 		}
+		
+		print "<div id=\"pref-filter-wrap\" dojoType=\"dijit.layout.BorderContainer\" gutters=\"false\">";
+		print "<div id=\"pref-filter-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
+		print "<div id=\"pref-filter-toolbar\" dojoType=\"dijit.Toolbar\">";
 
-		print "<div style='float : right'>
+		print "<div style='float : right; padding-right : 4px;'>
 			<input id=\"filter_search\" size=\"20\" type=\"search\"
 				onfocus=\"javascript:disableHotkeys();\" 
 				onblur=\"javascript:enableHotkeys();\"
 				onchange=\"javascript:updateFilterList()\" value=\"$filter_search\">
 			<button onclick=\"javascript:updateFilterList()\">".__('Search')."</button>
-			&nbsp;
-			<a class='helpLinkPic' href=\"javascript:displayHelpInfobox(2)\">
-			<img style='vertical-align : top;' src='".theme_image($link, "images/sign_quest.png")."'></a>
 		</div>";
 
 		print "<button onclick=\"return quickAddFilter()\">".
@@ -324,6 +325,10 @@
 				__('Rescore articles')."</button> "; 
 		}
 
+		print "</div>"; # toolbar
+		print "</div>"; # toolbar-frame
+		print "<div id=\"pref-filter-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
+
 		if ($filter_search) {
 			$filter_search = split(' ', db_escape_string($filter_search));
 
@@ -523,6 +528,9 @@
 			print "</p>";
 
 		}
+
+		print "</div>"; #pane
+		print "</div>"; #container
 	}
 
 ?>
diff --git a/modules/pref-labels.php b/modules/pref-labels.php
index ac25d01e1..e683ab615 100644
--- a/modules/pref-labels.php
+++ b/modules/pref-labels.php
@@ -150,7 +150,11 @@
 			$label_search = $_SESSION["prefs_label_search"];
 		}
 
-		print "<div style='float : right'>
+		print "<div id=\"pref-label-wrap\" dojoType=\"dijit.layout.BorderContainer\" gutters=\"false\">";
+		print "<div id=\"pref-label-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
+		print "<div id=\"pref-label-toolbar\" dojoType=\"dijit.Toolbar\">";
+
+		print "<div style='float : right; padding-right : 4px'>
 			<input id=\"label_search\" size=\"20\" type=\"search\"
 				onfocus=\"javascript:disableHotkeys();\" 
 				onblur=\"javascript:enableHotkeys();\"
@@ -158,19 +162,19 @@
 			<button onclick=\"javascript:updateLabelList()\">".__('Search')."</button>
 			</div>";
 
-		print "<div class=\"prefGenericAddBox\">";
-
 		print"<button onclick=\"return addLabel()\">".
 			__('Create label')."</button> ";
 
-		print "<button onclick=\"javascript:removeSelectedLabels()\">".
+		print "<button onclick=\"removeSelectedLabels()\">".
 			__('Remove')."</button> ";
 
 		print "<button onclick=\"labelColorReset()\">".
 			__('Clear colors')."</button>";
 
 
-		print "</div>";
+		print "</div>"; #toolbar
+		print "</div>"; #pane
+		print "<div id=\"pref-label-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
 
 		if ($label_search) {
 
@@ -269,6 +273,9 @@
 			print "</p>";
 
 		}
+
+		print "</div>"; #pane
+		print "</div>"; #container
 	}
 
 	function print_color_picker($id) {
diff --git a/modules/pref-prefs.php b/modules/pref-prefs.php
index 2133715a2..18a336396 100644
--- a/modules/pref-prefs.php
+++ b/modules/pref-prefs.php
@@ -195,10 +195,12 @@
 
 				$_SESSION["prefs_op_result"] = "";
 
+				print "<div dojoType=\"dijit.layout.AccordionContainer\" region=\"center\">";
+				print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Personal data')."\">";
+
 				print "<form onsubmit='return false' id='change_email_form'>";
 	
 				print "<table width=\"100%\" class=\"prefPrefsList\">";
-	 			print "<tr><td colspan='3'><h3>".__("Personal data")."</h3></tr></td>";
 
 				$result = db_query($link, "SELECT email,full_name,
 					access_level FROM ttrss_users
@@ -240,11 +242,13 @@
 				print "<p><button onclick=\"return changeUserEmail()\">".
 					__("Save data")."</button>";
 
+				print "</div>"; # pane
+				print "<div dojoType=\"dijit.layout.AccordionPane\" title=\"".__('Authentication')."\">";
+
 				print "<form onsubmit=\"return false\" 
 					name=\"change_pass_form\" id=\"change_pass_form\">";
 	
 				print "<table width=\"100%\" class=\"prefPrefsList\">";
-	 			print "<tr><td colspan='3'><h3>".__("Authentication")."</h3></tr></td>";
 	
 				print "<tr><td width=\"40%\">".__("Old password")."</td>";
 				print "<td class=\"prefValue\"><input class=\"editbox\" type=\"password\"
@@ -279,8 +283,12 @@
 				print "<p><button	onclick=\"return changeUserPassword()\">".
 					__("Change password")."</button>";
 
+
+				print "</div>"; #pane
 			}
 
+			print "<div dojoType=\"dijit.layout.AccordionPane\" selected=\"true\" title=\"".__('Preferences')."\">";
+
 			if ($_SESSION["profile"]) {
 				initialize_user_prefs($link, $_SESSION["uid"], $_SESSION["profile"]);
 				$profile_qpart = "profile = '" . $_SESSION["profile"] . "'";
@@ -325,7 +333,7 @@
 						print "</table>";
 					}
 
-					print "<p><table width=\"100%\" class=\"prefPrefsList\">";
+					print "<table width=\"100%\" class=\"prefPrefsList\">";
 
 					$active_section = $line["section_name"];				
 					
@@ -434,6 +442,9 @@
 
 			print "</form>";
 
+			print "</div>"; #pane
+			print "</div>"; #container
+
 		}
 	}
 ?>
diff --git a/modules/pref-users.php b/modules/pref-users.php
index f1f25c665..a97bd3108 100644
--- a/modules/pref-users.php
+++ b/modules/pref-users.php
@@ -347,6 +347,10 @@
 			}
 		}
 
+		print "<div id=\"pref-user-wrap\" dojoType=\"dijit.layout.BorderContainer\" gutters=\"false\">";
+		print "<div id=\"pref-user-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
+		print "<div id=\"pref-user-toolbar\" dojoType=\"dijit.Toolbar\">";
+
 		set_pref($link, "_PREFS_ACTIVE_TAB", "userConfig");
 
 		$user_search = db_escape_string($_REQUEST["search"]);
@@ -357,7 +361,7 @@
 			$user_search = $_SESSION["prefs_user_search"];
 		}
 
-		print "<div style='float : right'>
+		print "<div style='float : right; padding-right : 4px;'>
 			<input id=\"user_search\" size=\"20\" type=\"search\"
 				onfocus=\"javascript:disableHotkeys();\" 
 				onblur=\"javascript:enableHotkeys();\"
@@ -384,7 +388,9 @@
 			<button onclick=\"javascript:resetSelectedUserPass()\">".
 			__('Reset password')."</button>";
 
-		print "</div>";
+		print "</div>"; #toolbar
+		print "</div>"; #pane
+		print "<div id=\"pref-user-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
 
 		if ($user_search) {
 
@@ -485,5 +491,8 @@
 
 		}
 
+		print "</div>"; #pane
+		print "</div>"; #container
+
 	}
 ?>
diff --git a/prefs.js b/prefs.js
index e9cb8d364..db84a210d 100644
--- a/prefs.js
+++ b/prefs.js
@@ -1148,8 +1148,11 @@ function init() {
 	
 		dojo.require("dijit.layout.TabContainer");
 		dojo.require("dijit.layout.BorderContainer");
+		dojo.require("dijit.layout.AccordionContainer");
 		dojo.require("dijit.layout.ContentPane");
 		dojo.require("dijit.Dialog");
+		dojo.require("dijit.form.Button");
+		dojo.require("dijit.Toolbar");
 
 		loading_set_progress(30);
 
diff --git a/tt-rss.css b/tt-rss.css
index 40ea68099..b1d3ea582 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -312,6 +312,10 @@ table.prefPrefsList tr:hover td.prefValue input {
 	color : #88b0f0;
 }
 
+table.prefPrefsList h3 {
+	margin-top : 0px;
+}
+
 tr.title td {
 	border-width : 0px 0px 1px 0px;
 	border-color : #ecf4ff;
@@ -396,7 +400,7 @@ table.prefFeedList td.feedSelect {
 div.prefFeedCatHolder {
 	height : 250px;
 	overflow : auto;
-	border : 1px solid #99d67a;
+	border : 1px solid gray;
 	margin : 5px 0px 5px 0px;
 	background-color : white;
 }
@@ -679,7 +683,7 @@ div.tagCloudContainer {
 }
 
 div.errorExplained {
-	border : 1px solid #99d67a;
+	border : 1px solid gray;
 	background-color : white;
 	margin : 5px 0px 5px 0px;
 	padding : 5px;
@@ -689,7 +693,7 @@ ul.feedErrorsList {
 	height : 300px;
 	overflow : auto;
 	list-style-type : none;
-	border : 1px solid #99d67a;
+	border : 1px solid gray;
 	background-color : white;
 	margin : 0px 0px 5px 0px;
 	padding : 0px;
@@ -699,7 +703,7 @@ ul.userFeedList {
 	height : 300px;
 	overflow : auto;
 	list-style-type : none;
-	border : 1px solid #99d67a;
+	border : 1px solid gray;
 	background-color : white;
 	margin : 0px 0px 5px 0px;
 	padding : 0px;
@@ -711,7 +715,7 @@ ul.browseFeedList {
 	list-style-type : none;
 	margin : 0px 0px 5px 0px;
 	padding : 0px;
-	border : 1px solid #99d67a;
+	border : 1px solid gray;
 	background-color : white;
 }
 
@@ -1547,3 +1551,12 @@ div#pref-tabs .dijitContentPane h3 {
 } */
 
 
+#pref-filter-wrap, #pref-filter-header, #pref-filter-content, 
+#pref-label-wrap, #pref-label-header, #pref-label-content,
+#pref-user-wrap, #pref-user-header, #pref-user-content {
+	margin : 0px;
+	padding : 0px;
+	border-width : 0px;
+}
+
+