tweak headlines-toolbar appearance

2 files changed, 91 insertions, 72 deletions

diff --git a/classes/feeds.php b/classes/feeds.php
index 5ecac494a..2e9aea686 100644
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -68,7 +68,43 @@ class Feeds extends Protected_Handler {
 		$tog_marked_link = "selectionToggleMarked()";

 		$tog_published_link = "selectionTogglePublished()";

 

-		$reply = "<div id=\"subtoolbar_main\">";

+		if ($is_cat) $cat_q = "&is_cat=$is_cat";

+

+		if ($search) {

+			$search_q = "&q=$search&m=$match_on&smode=$search_mode";

+		} else {

+			$search_q = "";

+		}

+

+		$rss_link = htmlspecialchars(get_self_url_prefix() .

+			"/public.php?op=rss&id=$feed_id$cat_q$search_q");

+

+		// right part

+

+		$reply .= "<span class='r'>";

+

+		if ($feed_site_url) {

+			$target = "target=\"_blank\"";

+			$reply .= "<a title=\"".__("Visit the website")."\" $target href=\"$feed_site_url\">".

+				truncate_string($feed_title,30)."</a>";

+

+			if ($error) {

+				$reply .= " (<span class=\"error\" title=\"$error\">Error</span>)";

+			}

+

+		} else {

+			$reply .= $feed_title;

+		}

+

+		$reply .= "

+			<a href=\"#\"

+				title=\"".__("View as RSS feed")."\"

+				onclick=\"displayDlg('generatedFeed', '$feed_id:$is_cat:$rss_link')\">

+				<img class=\"noborder\" style=\"vertical-align : middle\" src=\"images/feed-icon-12x12.png\"></a>";

+

+		$reply .= "</span>";

+

+		// left part

 

 		$reply .= __('Select:')."

 			<a href=\"#\" onclick=\"$sel_all_link\">".__('All')."</a>,

@@ -103,17 +139,6 @@ class Feeds extends Protected_Handler {
 		$reply .= "<option value=\"emailArticle(false)\">".__('Forward by email').

 			"</option>";

 

-		if ($is_cat) $cat_q = "&is_cat=$is_cat";

-

-		if ($search) {

-			$search_q = "&q=$search&m=$match_on&smode=$search_mode";

-		} else {

-			$search_q = "";

-		}

-

-		$rss_link = htmlspecialchars(get_self_url_prefix() .

-			"/public.php?op=rss&id=$feed_id$cat_q$search_q");

-

 		$reply .= "<option value=\"0\" disabled=\"1\">".__('Feed:')."</option>";

 

 		$reply .= "<option value=\"catchupPage()\">".__('Mark as read')."</option>";

@@ -122,50 +147,9 @@ class Feeds extends Protected_Handler {
 

 		$reply .= "</select>";

 

-		$reply .= "</div>";

-

-		$reply .= "<div id=\"subtoolbar_ftitle\">";

-

-		if ($feed_site_url) {

-			$target = "target=\"_blank\"";

-			$reply .= "<a title=\"".__("Visit the website")."\" $target href=\"$feed_site_url\">".

-				truncate_string($feed_title,30)."</a>";

-

-			if ($error) {

-				$reply .= " (<span class=\"error\" title=\"$error\">Error</span>)";

-			}

-

-		} else {

-			if ($feed_id < -10) {

-				$label_id = -11-$feed_id;

-

-				$result = db_query($this->link, "SELECT fg_color, bg_color

-					FROM ttrss_labels2 WHERE id = '$label_id' AND owner_uid = " .

-					$_SESSION["uid"]);

-

-				if (db_num_rows($result) != 0) {

-					$fg_color = db_fetch_result($result, 0, "fg_color");

-					$bg_color = db_fetch_result($result, 0, "bg_color");

-

-					$reply .= "<span style=\"background : $bg_color; color : $fg_color\" >";

-					$reply .= $feed_title;

-					$reply .= "</span>";

-				} else {

-					$reply .= $feed_title;

-				}

-

-			} else {

-				$reply .= $feed_title;

-			}

-		}

-

-		$reply .= "

-			<a href=\"#\"

-				title=\"".__("View as RSS feed")."\"

-				onclick=\"displayDlg('generatedFeed', '$feed_id:$is_cat:$rss_link')\">

-				<img class=\"noborder\" style=\"vertical-align : middle\" src=\"images/feed-icon-12x12.png\"></a>";

+		//$reply .= "</div>";

 

-		$reply .= "</div>";

+		//$reply .= "</h2";

 

 		return $reply;

 	}

diff --git a/tt-rss.css b/tt-rss.css
index 972805f90..712bc6b5d 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -502,7 +502,7 @@ td.selectPrompt {
 
 div#headlines-toolbar {
 	border-width : 0px 0px 1px 0px;
-	background-color : #ecf4ff;
+	background-color : #f0f0f0;
 	border-color : #88b0f0 #88b0f0 #ecf4ff #88b0f0;
 	font-size : 11px;
 	font-family : "Segoe UI", Tahoma, sans-serif;
@@ -510,31 +510,66 @@ div#headlines-toolbar {
 	padding : 0px;
 	margin : 0px;
 	overflow : hidden;
-	height : 23px;
+	height : 25px;
+	line-height : 25px;
+	padding-left : 4px;
 }
 
 div#headlines-toolbar .dijitSelect {
 	font-size : 11px;
+	position : relative;
+	top : -2px;
 }
 
-div#headlines-toolbar div#subtoolbar_main {
-	display : table-cell;
-	width : 100%;
-	white-space : nowrap;
-	vertical-align : middle;
-	padding-left : 5px;
-}
-
-div#headlines-toolbar div#subtoolbar_ftitle {
-	display : table-cell;
+div#headlines-toolbar span.r {
+	float: right;
+   position: relative;
+	background : #ecf4ff;
+	border-left: 5px solid white;
+	padding : 0 4px 0px 4px;
 	text-align : right;
-	vertical-align : middle;
-	white-space : nowrap;
-	padding-right : 5px;
+}	
+
+/* http://css-tricks.com/adobe-like-arrow-headers/ */
+
+div#headlines-toolbar span.r:before,
+div#headlines-toolbar span.r:after {
+        content: "";
+        position: absolute;
+        /* Pushed down half way, will get pulled back up half height of triangle
+           ensures centering if font-size or line-height changes */
+        top: 50%;
+        width: 0;
+        height: 0;
+}
+div#headlines-toolbar span.r:before {
+        left: -12px;
+        /* Triangle */
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-right: 8px solid white;
+        /* Pull-up */
+        margin-top: -8px;
+}
+div#headlines-toolbar span.r:after {
+        /* Smaller and different position triangle */
+        left: -5px;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-right: 6px solid #ecf4ff;
+        margin-top: -6px;
+}
+
+div#headlines-toolbar span.r span.error {
+	color : red;
+} 
+
+div#headlines-toolbar span.r a {
+	color : gray;
 }
 
-div#subtoolbar_ftitle span.error {
-	color : red;
+div#headlines-toolbar span.r a:hover {
+	color : black;
 }
 
 span.contentPreview {