tweak headlines-toolbar appearance

diff --git a/classes/feeds.php b/classes/feeds.php
index 5ecac494ac4929c13066cf5d2d50734711b5be06..2e9aea6861e7220ded425401b72943e6ddb37add 100644 (file)
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -68,7 +68,43 @@ class Feeds extends Protected_Handler {
                $tog_marked_link = "selectionToggleMarked()";\r
                $tog_published_link = "selectionTogglePublished()";\r
 \r
-               $reply = "<div id=\"subtoolbar_main\">";\r
+               if ($is_cat) $cat_q = "&is_cat=$is_cat";\r
+\r
+               if ($search) {\r
+                       $search_q = "&q=$search&m=$match_on&smode=$search_mode";\r
+               } else {\r
+                       $search_q = "";\r
+               }\r
+\r
+               $rss_link = htmlspecialchars(get_self_url_prefix() .\r
+                       "/public.php?op=rss&id=$feed_id$cat_q$search_q");\r
+\r
+               // right part\r
+\r
+               $reply .= "<span class='r'>";\r
+\r
+               if ($feed_site_url) {\r
+                       $target = "target=\"_blank\"";\r
+                       $reply .= "<a title=\"".__("Visit the website")."\" $target href=\"$feed_site_url\">".\r
+                               truncate_string($feed_title,30)."</a>";\r
+\r
+                       if ($error) {\r
+                               $reply .= " (<span class=\"error\" title=\"$error\">Error</span>)";\r
+                       }\r
+\r
+               } else {\r
+                       $reply .= $feed_title;\r
+               }\r
+\r
+               $reply .= "\r
+                       <a href=\"#\"\r
+                               title=\"".__("View as RSS feed")."\"\r
+                               onclick=\"displayDlg('generatedFeed', '$feed_id:$is_cat:$rss_link')\">\r
+                               <img class=\"noborder\" style=\"vertical-align : middle\" src=\"images/feed-icon-12x12.png\"></a>";\r
+\r
+               $reply .= "</span>";\r
+\r
+               // left part\r
 \r
                $reply .= __('Select:')."\r
                        <a href=\"#\" onclick=\"$sel_all_link\">".__('All')."</a>,\r
@@ -103,17 +139,6 @@ class Feeds extends Protected_Handler {
                $reply .= "<option value=\"emailArticle(false)\">".__('Forward by email').\r
                        "</option>";\r
 \r
-               if ($is_cat) $cat_q = "&is_cat=$is_cat";\r
-\r
-               if ($search) {\r
-                       $search_q = "&q=$search&m=$match_on&smode=$search_mode";\r
-               } else {\r
-                       $search_q = "";\r
-               }\r
-\r
-               $rss_link = htmlspecialchars(get_self_url_prefix() .\r
-                       "/public.php?op=rss&id=$feed_id$cat_q$search_q");\r
-\r
                $reply .= "<option value=\"0\" disabled=\"1\">".__('Feed:')."</option>";\r
 \r
                $reply .= "<option value=\"catchupPage()\">".__('Mark as read')."</option>";\r
@@ -122,50 +147,9 @@ class Feeds extends Protected_Handler {
 \r
                $reply .= "</select>";\r
 \r
-               $reply .= "</div>";\r
-\r
-               $reply .= "<div id=\"subtoolbar_ftitle\">";\r
-\r
-               if ($feed_site_url) {\r
-                       $target = "target=\"_blank\"";\r
-                       $reply .= "<a title=\"".__("Visit the website")."\" $target href=\"$feed_site_url\">".\r
-                               truncate_string($feed_title,30)."</a>";\r
-\r
-                       if ($error) {\r
-                               $reply .= " (<span class=\"error\" title=\"$error\">Error</span>)";\r
-                       }\r
-\r
-               } else {\r
-                       if ($feed_id < -10) {\r
-                               $label_id = -11-$feed_id;\r
-\r
-                               $result = db_query($this->link, "SELECT fg_color, bg_color\r
-                                       FROM ttrss_labels2 WHERE id = '$label_id' AND owner_uid = " .\r
-                                       $_SESSION["uid"]);\r
-\r
-                               if (db_num_rows($result) != 0) {\r
-                                       $fg_color = db_fetch_result($result, 0, "fg_color");\r
-                                       $bg_color = db_fetch_result($result, 0, "bg_color");\r
-\r
-                                       $reply .= "<span style=\"background : $bg_color; color : $fg_color\" >";\r
-                                       $reply .= $feed_title;\r
-                                       $reply .= "</span>";\r
-                               } else {\r
-                                       $reply .= $feed_title;\r
-                               }\r
-\r
-                       } else {\r
-                               $reply .= $feed_title;\r
-                       }\r
-               }\r
-\r
-               $reply .= "\r
-                       <a href=\"#\"\r
-                               title=\"".__("View as RSS feed")."\"\r
-                               onclick=\"displayDlg('generatedFeed', '$feed_id:$is_cat:$rss_link')\">\r
-                               <img class=\"noborder\" style=\"vertical-align : middle\" src=\"images/feed-icon-12x12.png\"></a>";\r
+               //$reply .= "</div>";\r
 \r
-               $reply .= "</div>";\r
+               //$reply .= "</h2";\r
 \r
                return $reply;\r
        }\r

diff --git a/tt-rss.css b/tt-rss.css
index 972805f901c9afb263dd7c8569d983a69fa16718..712bc6b5d66585e8b51916c4eee3d4877ac8d868 100644 (file)
--- 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 {