added an item header, improved feed design, removed unused javascript function, added proper template translation tags

5 files changed, 51 insertions, 90 deletions

diff --git a/css/news.css b/css/news.css
index b810e7a25..465b26326 100644
--- a/css/news.css
+++ b/css/news.css
@@ -45,65 +45,32 @@ ul.controls li { float: left; }
 
 
 /* item view */
-#rightcontent { top: 3.5em !important; padding: 0 0 0 5px; }
-
-#rightcontent div.body { 
-    padding: 10px 15px 25px 15px;
-}
-
-#rightcontent div.body p {
-    line-height: 1.5;
-    margin: 10px 0;
-}
-
-#rightcontent div.body a {
-    color: #0000ff;
-    text-decoration: underline;
-}
-
-#rightcontent div.body ul {
-    padding-left: 15px;
-    list-style-type: disc;
- }
-
-#rightcontent div.body ul li {
-    cursor: default;
-}
-
-#rightcontent li:active {
-    background: none;
-}
-
-
-#rightcontent div.body pre {
-    padding: 5px;
-}
-
-#rightcontent div.body pre code {
-    font-family: monospace;
-    font-size: 14px;
-}
-
-#rightcontent .title_unread h1, #rightcontent .title_read h1 {
-    padding: 5px 10px;
-    font-size: 14px;    
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    background: linear-gradient(to bottom, #eee 0%,#f1f1f1 80%);
-    background: -moz-linear-gradient(top, #eee 0%, #f1f1f1 80%);
-}
-
-#rightcontent .title_unread h1 { 
-    font-weight: bold;
-}
-
-#rightcontent .title_unread h1 a {
-    
-}
-
-#rightcontent .title_read h1 {
-    font-weight: normal;
-}
+#rightcontent { top: 3.5em !important; padding: 0 0 0 5px; box-sizing: border-box; -moz-box-sizing: border-box; margin-top: 3.5em;}
+
+#rightcontent div.feed_controls { box-sizing: border-box; -moz-box-sizing: border-box; background: none repeat scroll 0 0 #FFFFFF; border-bottom: 1px solid #ccc; box-shadow: 0 3px 3px -3px #000000; text-align: right; overflow: hidden; position: fixed; left: 32.5em; right: 0; top: 3.5em; }
+#rightcontent div.feed_controls div.feed_title { float: left; padding-left: 10px; }
+#rightcontent div.feed_controls div.feed_title h1 { font-size: 16pt; color: #444; padding-top: .5em; }
+
+#rightcontent ul { box-sizing: border-box; -moz-box-sizing: border-box; overflow: auto; height: 100%; }
+
+#rightcontent div.body { padding: 25px; }
+#rightcontent div.body p { line-height: 1.5; margin: 10px 0; }
+#rightcontent div.body a { color: #0000ff; text-decoration: underline; }
+#rightcontent div.body ul { padding-left: 15px; list-style-type: disc; }
+#rightcontent div.body ul li { cursor: default; }
+#rightcontent li:active { background: none; }
+#rightcontent div.body pre { padding: 5px; background-color: #dadada; border: 1px solid #ccc; }
+#rightcontent div.body pre code { font-family: monospace; font-size: 14px; }
+
+#rightcontent .title_unread h1.item_title, 
+#rightcontent .title_read h1.item_title { padding: 15px 10px 10px 10px; font-size: 14pt; }
+
+#rightcontent .title_unread h1.item_title { font-weight: bold; border-bottom: 1px solid #222; }
+
+#rightcontent .title_unread h1.item_title a { color: #222; }
+
+#rightcontent .title_read h1.item_title { font-weight: normal; border-bottom: 1px solid #ccc; }
+#rightcontent .title_read h1.item_title a { color: #888; }
 
 #rightcontent .title_read a:hover, #rightcontent .title_unread a:hover { text-decoration: underline; }
 
@@ -119,21 +86,7 @@ ul#dropdownmenu { left: 0em; box-shadow: 0px 0px 10px rgb(0, 0, 0); }
 ul#feedfoldermenu { position:fixed; margin-left: 0; bottom: 2.8em; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
 
 li.menuItem { margin-left:0.7em; margin-right:0.7em; float: none !important; text-align: left; }
-
-ul.menu { position: absolute; z-index:100; margin-left: 0.3em;
-	display: none;
-	background:#EEEEEE; /* default background for browsers without gradient support */
-	/* css3 */
-	background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE));
-	background:-moz-linear-gradient(#DCDCDC, #EEEEEE);
-	background:-o-linear-gradient(#DCDCDC, #EEEEEE);
-	background:linear-gradient(#DCDCDC, #EEEEEE);
-	/*
-	-webkit-border-radius:10px;
-	-moz-border-radius:10px;
-	border-radius:10px;
-	*/
-}
+ul.menu { position: absolute; z-index:100; margin-left: 0.3em; display: none; background:#EEEEEE; background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE)); background:-moz-linear-gradient(#DCDCDC, #EEEEEE); background:-o-linear-gradient(#DCDCDC, #EEEEEE); background:linear-gradient(#DCDCDC, #EEEEEE); }
 
 
 
diff --git a/js/news.js b/js/news.js
index 5420965eb..8ff46ed82 100644
--- a/js/news.js
+++ b/js/news.js
@@ -211,7 +211,6 @@ News={
 					$('li#selected_feed').attr('id', '');
 					$('li.feed[data-id="' + feedid + '"]').attr('id', 'selected_feed');
 
-					setupRightContent();
 					transformCollapsableTrigger();
 				}
 				else {
@@ -320,18 +319,6 @@ function setupFeedList() {
 	transformCollapsableTrigger();
 }
 
-function setupRightContent() {
-	$('.accordion .title_unread').click(function() {
-		$(this).next().toggle();
-		return false;
-	}).next().hide();
-
-	$('.accordion .title_read').click(function() {
-		$(this).next().toggle();
-		return false;
-	}).next().hide();
-}
-
 $(document).ready(function(){
 
 	$('#addfeed').click(function() {
@@ -355,7 +342,6 @@ $(document).ready(function(){
 	});
 
 	setupFeedList();
-	setupRightContent();
 
 	News.Feed.updateAll();
 	var updateInterval = 200000; //how often the feeds should update (in msec)
diff --git a/templates/main.php b/templates/main.php
index c014a4a11..db3abe34a 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -26,6 +26,7 @@
 <div id="rightcontent" class="rightcontent" data-id="<?php echo $_['feedid']; ?>">
 	<?php
 		if ($_['feedid']){
+			echo $this->inc("part.items.header");
 			echo $this->inc("part.items");
 		}
 		else {
diff --git a/templates/part.items.header.php b/templates/part.items.header.php
new file mode 100644
index 000000000..04b319533
--- /dev/null
+++ b/templates/part.items.header.php
@@ -0,0 +1,22 @@
+<?php 
+
+if(isset($_['feedid'])){
+    $feedmapper = new OC_News_FeedMapper();
+    $feed = $feedmapper->findById($_['feedid']);
+    $feedTitle = $feed->getTitle();
+} else {
+    $feedTitle = '';
+}
+
+?>
+
+<div class="feed_controls">
+    <div class="feed_title">
+        <h1>» <?php echo $feedTitle; ?></h1>
+    </div>
+    <input type="button" value="<?php echo $l->t('Mark all as read'); ?>" id="mark_all_as_read" />
+    <select id="feed_filter">
+        <option value="all"><?php echo $l->t('Show all articles'); ?></option>
+        <option value="newest"><?php echo $l->t('Show newest articles'); ?></option>
+    </select>
+</div>
\ No newline at end of file
diff --git a/templates/part.items.php b/templates/part.items.php
index c2b9b2889..8c2ef15d2 100644
--- a/templates/part.items.php
+++ b/templates/part.items.php
@@ -3,7 +3,6 @@
 $feedid = isset($_['feedid']) ? $_['feedid'] : '';
 
 $itemmapper = new OC_News_ItemMapper();
-
 $items = $itemmapper->findAll($feedid);
 
 echo '<ul>';
@@ -15,7 +14,7 @@ foreach($items as $item) {
 	}
 
 	echo '<li class="news_item ' . $readClass .'" data-id="' . $item->getId() . '" data-feedid="' . $feedid . '">';
-	echo '<h1><a href="' . $item->getUrl() . '">' . $item->getTitle() . '</a></h1>';
+	echo '<h1 class="item_title"><a href="' . $item->getUrl() . '">' . $item->getTitle() . '</a></h1>';
 	echo '<div class="body">' . $item->getBody() . '</div>';
 	echo '</li>';