rework tab appearance, various interface improvements

19 years ago · e5d758e3db
parent 7b5c6012d1
commit e5d758e3db
10 changed files with 803 additions and 614 deletions
--- a/backend.php
+++ b/backend.php
@ -1308,11 +1308,11 @@
 				print "Feed browser is administratively disabled.";
 				return;
 			}
+
+			print "<div id=\"infoBoxTitle\">Other feeds: Top 50</div>";
 			
 			print "<div class=\"infoBoxContents\">";

-			print "<h1>Feed browser</h1>";
-
 			print "<p>Showing top 50 registered feeds, sorted by popularity:</p>";

 			$result = db_query($link, "SELECT feed_url,count(id) AS subscribers 
@ -1388,8 +1388,6 @@
 			$title = htmlspecialchars(db_unescape_string(db_fetch_result($result,
 				0, "title")));

-			print "<div class=\"infoBoxContents\">";
-
 			$icon_file = ICONS_DIR . "/$feed_id.ico";
 	
 			if (file_exists($icon_file) && filesize($icon_file) > 0) {
@ -1398,8 +1396,12 @@
 			} else {
 				$feed_icon = "";
 			}
-	
-			print "<h1>$feed_icon $title</h1>";
+
+			print "<div id=\"infoBoxTitle\">Feed editor</div>";
+
+			print "<div class=\"infoBoxContents\">";
+
+#			print "<h1>$feed_icon $title</h1>";

 			print "<table width='100%'>";

@ -1823,10 +1825,11 @@
 				onchange=\"javascript:addFeed()\"
 				size=\"40\">
 				<input type=\"submit\" class=\"button\"
-				onclick=\"javascript:addFeed()\" value=\"Add feed\">";
+				onclick=\"javascript:addFeed()\" value=\"Subscribe\">";

 		if (ENABLE_FEED_BROWSER && !SINGLE_USER_MODE) {
-			print "&nbsp;(<a href='javascript:browseFeeds()'>Top 50</a>)";
+			print " <input type=\"submit\" class=\"button\"
+				onclick=\"javascript:browseFeeds()\" value=\"Top 50\">";
 		}
 		
 		print "</td><td align='right'>
@ -2000,16 +2003,16 @@
 	
 				print "
 					Selection:&nbsp;
-				<input type=\"submit\" class=\"button\" 
-					onclick=\"javascript:selectedFeedDetails()\" value=\"Details\">
+				<!-- <input type=\"submit\" class=\"button\" 
+					onclick=\"javascript:selectedFeedDetails()\" value=\"Details\"> -->
 				<input type=\"submit\" class=\"button\" 
 					onclick=\"javascript:editSelectedFeed()\" value=\"Edit\">
 				<input type=\"submit\" class=\"button\" 
-					onclick=\"javascript:removeSelectedFeeds()\" value=\"Remove\">";
+					onclick=\"javascript:removeSelectedFeeds()\" value=\"Unsubscribe\">";

 				if (get_pref($link, 'ENABLE_FEED_CATS')) {

-					print "&nbsp;&nbsp;";				
+					print "&nbsp;|&nbsp;";				

 					$result = db_query($link, "SELECT title,id FROM ttrss_feed_categories
 						WHERE owner_uid = ".$_SESSION["uid"]."
@ -2058,7 +2061,7 @@
 					size=\"40\">&nbsp;
 				<input 
 					type=\"submit\" class=\"button\" 
-					onclick=\"javascript:addFeedCat()\" value=\"Add category\"></div>";
+					onclick=\"javascript:addFeedCat()\" value=\"Create category\"></div>";
 	
 			$result = db_query($link, "SELECT title,id FROM ttrss_feed_categories
 				WHERE owner_uid = ".$_SESSION["uid"]."
@ -2233,7 +2236,8 @@

 		if ($quiet) return;

-		print "<div id=\"infoBoxShadow\"><div id=\"infoBox\">PLACEHOLDER</div></div>";
+		print "<div id=\"infoBoxShadow\">
+			<div id=\"infoBox\">PLACEHOLDER</div></div>";

 		$result = db_query($link, "SELECT description 
 			FROM ttrss_filter_types ORDER BY description");
@ -2374,7 +2378,7 @@
 	
 					if (!$line["description"]) $line["description"] = "[No description]";
 	
-					print "<td><input disabled=\"true\" type=\"checkbox\" 
+					print "<td align='center'><input disabled=\"true\" type=\"checkbox\" 
 						id=\"FICHK-".$line["id"]."\"></td>";
 	
 					print "<td>".$line["reg_exp"]."</td>";		
@ -2384,7 +2388,7 @@

 				} else {
 	
-					print "<td><input disabled=\"true\" type=\"checkbox\" checked></td>";
+					print "<td align='center'><input disabled=\"true\" type=\"checkbox\" checked></td>";
 	
 					print "<td><input id=\"iedit_regexp\" value=\"".$line["reg_exp"].
 						"\"></td>";
@ -2491,9 +2495,11 @@
 			$expr = $_GET["expr"];
 			$descr = $_GET["descr"];

+			print "<div id=\"infoBoxTitle\">Test label: $descr</div>";
+
 			print "<div class='infoBoxContents'>";
 		
-			print "<h1>Label &laquo;$descr&raquo;</h1>";
+#			print "<h1>Label &laquo;$descr&raquo;</h1>";

 //			print "<p><b>Expression</b>: $expr</p>";

@ -2726,6 +2732,8 @@

 		$tid = sprintf("%d", $_GET["tid"]);

+		print "<div id=\"infoBoxTitle\">Help</div>";
+
 		print "<div class='infoBoxContents'>";

 		if (file_exists("help/$tid.php")) {
@ -2750,20 +2758,24 @@
 		$id = $_GET["id"];
 		$param = $_GET["param"];

-		print "<div class=\"infoBoxContents\">";
-
 		if ($id == "quickAddFeed") {
-			print "
-			Feed URL: <input 
-			onblur=\"javascript:enableHotkeys()\" onfocus=\"javascript:disableHotkeys()\"
-			id=\"qafInput\">";
+
+			print "<div id=\"infoBoxTitle\">Subscribe to feed</div>";
+			print "<div class=\"infoBoxContents\">";
+
+			print "<table width='100%'>
+			<tr><td>Feed URL:</td><td>
+				<input onblur=\"javascript:enableHotkeys()\" 
+					onfocus=\"javascript:disableHotkeys()\" id=\"qafInput\"></td></tr>";
 		
 			if (get_pref($link, 'ENABLE_FEED_CATS')) {
+				print "<tr><td>Category:</td><td>";
+			
 				$result = db_query($link, "SELECT title,id FROM ttrss_feed_categories
 					WHERE owner_uid = ".$_SESSION["uid"]."
 					ORDER BY title");

-				print " <select id=\"qafCat\">";
+				print "<select id=\"qafCat\">";
 				print "<option id=\"0\">Uncategorized</option>";

 				if (db_num_rows($result) != 0) {
@ -2777,13 +2789,14 @@
 				}

 				print "</select>";
+				print "</td></tr>";
 			}
 			
-			print "&nbsp;<input class=\"button\"
-				type=\"submit\" onclick=\"javascript:qafAdd()\" value=\"Add feed\">
+			print "<tr><td colspan='2' align='right'><input class=\"button\"
+				type=\"submit\" onclick=\"javascript:qafAdd()\" value=\"Subscribe\">
 			<input class=\"button\"
-				type=\"submit\" onclick=\"javascript:closeDlg()\" 
-				value=\"Cancel\">";
+				type=\"submit\" onclick=\"javascript:closeInfoBox()\" 
+				value=\"Cancel\"></td></tr></table>";
 		}

 		if ($id == "quickDelFeed") {
@ -2800,23 +2813,29 @@
 				<input class=\"button\"
 					type=\"submit\" onclick=\"javascript:qfdDelete($param)\" value=\"Remove\">
 				<input class=\"button\"
-					type=\"submit\" onclick=\"javascript:closeDlg()\" 
+					type=\"submit\" onclick=\"javascript:closeInfoBox()\" 
 					value=\"Cancel\">";
 			} else {
 				print "Error: Feed $param not found.&nbsp;
 				<input class=\"button\"
-					type=\"submit\" onclick=\"javascript:closeDlg()\" 
+					type=\"submit\" onclick=\"javascript:closeInfoBox()\" 
 					value=\"Cancel\">";		
 			}
 		}

 		if ($id == "search") {

+			print "<div id=\"infoBoxTitle\">Search</div>";
+			print "<div class=\"infoBoxContents\">";
+
 			$active_feed_id = db_escape_string($_GET["param"]);

+			print "<table width='100%'><tr><td>Search:</td><td>";
+
 			print "<input id=\"searchbox\" class=\"extSearch\"			
 			onblur=\"javascript:enableHotkeys()\" onfocus=\"javascript:disableHotkeys()\"
 			onchange=\"javascript:search()\">
+			</td></tr><tr><td>Where:</td><td>
 			<select id=\"searchmodebox\">
 				<option selected>All feeds</option>";
 				
@ -2830,17 +2849,22 @@
 				print "<option>This category</option>";
 			}

-			print "</select>		
+			print "</select></td></tr>
+
+			<tr><td colspan='2' align='right'>
 			<input type=\"submit\" 
 				class=\"button\" onclick=\"javascript:search()\" value=\"Search\">
 			<input class=\"button\"
-				type=\"submit\" onclick=\"javascript:closeDlg()\" 
-				value=\"Close\">";
+				type=\"submit\" onclick=\"javascript:closeInfoBox()\" 
+				value=\"Cancel\"></td></tr></table>";

 		}

 		if ($id == "quickAddFilter") {

+			print "<div id=\"infoBoxTitle\">Create filter</div>";
+			print "<div class=\"infoBoxContents\">";
+
 			$result = db_query($link, "SELECT description 
 				FROM ttrss_filter_types ORDER BY description");
 	
@ -2850,9 +2874,9 @@
 				array_push($filter_types, $line["description"]);
 			}

-			print "<table>";
+			print "<table width='100%'>";

-			print "<tr><td>Match:</td><td><input id=\"fadd_regexp\" size=\"40\">&nbsp;";
+			print "<tr><td>Match:</td><td><input id=\"fadd_regexp\" size=\"30\">&nbsp;";
 			
 			print_select("fadd_match", "Title", $filter_types);	
 	
@ -2896,13 +2920,14 @@
 	
 			print "<input type=\"submit\" 
 				class=\"button\" onclick=\"javascript:qaddFilter()\" 
-				value=\"Add filter\"> ";
+				value=\"Create\"> ";

 			print "<input class=\"button\"
-				type=\"submit\" onclick=\"javascript:closeDlg()\" 
-				value=\"Close\">";
+				type=\"submit\" onclick=\"javascript:closeInfoBox()\" 
+				value=\"Cancel\">";

 			print "</td></tr></table>";
+
 		}

 		print "</div>";
@ -3581,6 +3606,8 @@

 		$uid = sprintf("%d", $_GET["id"]);

+		print "<div id=\"infoBoxTitle\">User details</div>";
+
 		print "<div class='infoBoxContents'>";

 		$result = db_query($link, "SELECT login,
@ -3681,6 +3708,7 @@

 		$feed_ids = split(",", db_escape_string($_GET["id"]));

+		print "<div id=\"infoBoxTitle\">Feed details</div>";
 		print "<div class=\"infoBoxContents\">";

 		foreach ($feed_ids as $feed_id) {
--- a/functions.js
+++ b/functions.js
@ -918,6 +918,20 @@ function center_element(e) {
 	}
 }

+function closeInfoBox() {
+	var box = document.getElementById('infoBox');
+	var shadow = document.getElementById('infoBoxShadow');
+
+	if (shadow) {
+		shadow.style.display = "none";
+	} else if (box) {
+		box.style.display = "none";
+	}
+
+	enableHotkeys();
+}
+
+
 function displayDlg(id, param) {

 	if (!xmlhttp_ready(xmlhttp)) {
@ -929,22 +943,16 @@ function displayDlg(id, param) {

 	xmlhttp.open("GET", "backend.php?op=dlg&id=" +
 		param_escape(id) + "&param=" + param_escape(param), true);
-	xmlhttp.onreadystatechange=dlg_display_callback;
+	xmlhttp.onreadystatechange=infobox_callback;
 	xmlhttp.send(null);

 	disableHotkeys();
 }

-function closeDlg() {
-	var dlg = document.getElementById("infoBoxShadow");
-	dlg.style.display = "none";
-	enableHotkeys();
-}
-
-function dlg_submit_callback() {
+function infobox_submit_callback() {
 	if (xmlhttp.readyState == 4) {
 		notify(xmlhttp.responseText);
-		closeDlg();
+		closeInfoBox();

 		// called from prefs, reload tab
 		if (active_tab) {
@ -953,14 +961,19 @@ function dlg_submit_callback() {
 	} 
 }

-function dlg_display_callback() {
+function infobox_callback() {
 	if (xmlhttp.readyState == 4) {
-		var dlg = document.getElementById("infoBox");
-		var dlg_s = document.getElementById("infoBoxShadow");
-
-		dlg.innerHTML = xmlhttp.responseText;
-		dlg_s.style.display = "block";
-	} 
+		var box = document.getElementById('infoBox');
+		var shadow = document.getElementById('infoBoxShadow');
+		if (box) {			
+			box.innerHTML=xmlhttp.responseText;			
+			if (shadow) {
+				shadow.style.display = "block";
+			} else {
+				box.style.display = "block";				
+			}
+		}
+	}
 }

 function qaddFilter() {
@ -976,7 +989,7 @@ function qaddFilter() {
 	var action = document.getElementById("fadd_action");

 	if (regexp.value.length == 0) {
-		notify("Missing filter expression.");
+		alert("Missing filter expression.");
 	} else {
 		notify("Adding filter...");

@ -988,7 +1001,7 @@ function qaddFilter() {
 			param_escape(regexp.value) + "&match=" + v_match +
 			"&fid=" + param_escape(feed_id) + "&aid=" + param_escape(action_id), true);
 			
-		xmlhttp.onreadystatechange=dlg_submit_callback;
+		xmlhttp.onreadystatechange=infobox_submit_callback;
 		xmlhttp.send(null);

 		regexp.value = "";
--- a/images/active_tab.png
+++ b/images/active_tab.png
--- a/images/active_tab.svg
+++ b/images/active_tab.svg
@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="130"
+   height="40"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.43"
+   version="1.0"
+   sodipodi:docbase="/home/fox/public_html/testbox/tt-rss/images"
+   sodipodi:docname="active_tab.svg"
+   inkscape:export-filename="/home/fox/public_html/testbox/tt-rss/images/active_tab.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient2200">
+      <stop
+         style="stop-color:#ecf0f4;stop-opacity:1;"
+         offset="0"
+         id="stop2202" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="1"
+         id="stop2204" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2200"
+       id="linearGradient2206"
+       x1="60.892857"
+       y1="1.6071428"
+       x2="60.892857"
+       y2="17.682539"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="67.817525"
+     inkscape:cy="17.306406"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1596"
+     inkscape:window-height="1153"
+     inkscape:window-x="0"
+     inkscape:window-y="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:url(#linearGradient2206);fill-opacity:1.0;stroke:#88b0ff;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1325"
+       width="129.28574"
+       height="48.392838"
+       x="0.53571433"
+       y="0.53571421"
+       rx="5"
+       ry="5"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+  </g>
+</svg>
--- a/images/prefs_tab.png
+++ b/images/prefs_tab.png
--- a/images/prefs_tab.svg
+++ b/images/prefs_tab.svg
@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="130"
+   height="40"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.43"
+   version="1.0"
+   sodipodi:docbase="/home/fox/public_html/testbox/tt-rss/images"
+   sodipodi:docname="prefs_tab.svg"
+   inkscape:export-filename="/home/fox/public_html/testbox/tt-rss/images/active_tab.png"
+   inkscape:export-xdpi="90.150002"
+   inkscape:export-ydpi="90.150002">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient2200">
+      <stop
+         style="stop-color:#ecf0f4;stop-opacity:1;"
+         offset="0"
+         id="stop2202" />
+      <stop
+         style="stop-color:#88b0ff;stop-opacity:0;"
+         offset="1"
+         id="stop2204" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="67.817525"
+     inkscape:cy="17.306406"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1596"
+     inkscape:window-height="1153"
+     inkscape:window-x="0"
+     inkscape:window-y="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1.0;stroke:#88b0ff;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1325"
+       width="129.28574"
+       height="48.392838"
+       x="0.53571433"
+       y="0.53571421"
+       rx="5"
+       ry="5" />
+  </g>
+</svg>
--- a/prefs.js
+++ b/prefs.js
@ -145,22 +145,6 @@ function userlist_callback() {
 	}
 }

-function infobox_callback() {
-	if (xmlhttp.readyState == 4) {
-		var box = document.getElementById('infoBox');
-		var shadow = document.getElementById('infoBoxShadow');
-		if (box) {			
-			box.innerHTML=xmlhttp.responseText;			
-			if (shadow) {
-				shadow.style.display = "block";
-			} else {
-				box.style.display = "block";				
-			}
-		}
-	}
-}
-
-
 function prefslist_callback() {
 	var container = document.getElementById('prefContent');
 	if (xmlhttp.readyState == 4) {
@ -1346,17 +1330,6 @@ function init() {
 	}
 }

-function closeInfoBox() {
-	var box = document.getElementById('infoBox');
-	var shadow = document.getElementById('infoBoxShadow');
-
-	if (shadow) {
-		shadow.style.display = "none";
-	} else if (box) {
-		box.style.display = "none";
-	}
-}
-
 function categorizeSelectedFeeds() {

 	if (!xmlhttp_ready(xmlhttp)) {
--- a/themes/compat/theme.css
+++ b/themes/compat/theme.css
@ -469,6 +469,15 @@ div.helpResponse {
 	width : 300px;
 }

+#infoBoxTitle {
+	border-width : 1px 1px 1px 1px;
+	border-style : solid;
+	border-color : #c0c0c0;
+	background-color : #c0c0c0;
+	padding : 2px;
+	color : white;
+}
+

 #infoBox {
 	border : 1px solid #c0c0c0;
--- a/tt-rss.css
+++ b/tt-rss.css
--- a/tt-rss.php
+++ b/tt-rss.php
@ -228,7 +228,7 @@ window.onload = init;
 				<option id="qmcSearch">Search</option>
 				<option disabled>--------</option>
 				<option style="color : #5050aa" disabled>Feed actions:</option>
-				<option id="qmcAddFeed">&nbsp;&nbsp;Add new feed</option>
+				<option id="qmcAddFeed">&nbsp;&nbsp;Subscribe to feed</option>
 				<option id="qmcRemoveFeed">&nbsp;&nbsp;Remove this feed</option>
 				<!-- <option>Edit this feed</option> -->
 				<option disabled>--------</option>