Adds a clickable trigger to collapse the list.

3 files changed, 23 insertions, 5 deletions

diff --git a/css/news.css b/css/news.css
index 706bb5ecb..750f07261 100644
--- a/css/news.css
+++ b/css/news.css
@@ -57,7 +57,12 @@ li.menuItem { margin-left:0.7em; margin-right:0.7em; float: none !important; tex
 li.feeds_list { margin-left: 16px !important; text-align: right; border-radius: 5px; padding-left: 5px !important; background-color: rgb(255,255,255) !important; }
 li.feeds_list a { padding: 0 0 0 20px !important; overflow: hidden; text-overflow: ellipsis; text-align: left; width: 65%; }
 li.folder_list { background-color: rgb(255,255,255) !important; }
-div.collapsable { background: url('%webroot%/core/img/places/folder.svg') no-repeat 5px; padding: 0 0 0 25px; border-radius: 5px; }
+div.collapsable { position: relative; border-radius: 5px; }
+.collapsable_trigger { border: none ; margin: 0 0 0 5px; padding: 0; border-radius: 0; box-shadow: none; vertical-align: middle !important; background: url('%webroot%/core/img/places/folder.svg') no-repeat; height:16px; width:16px; }
+.collapsable_trigger_s:hover { background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat; }
+.collapsable_trigger_n:hover { background: url('%webroot%/core/img/actions/triangle-n.svg') no-repeat; }
+
+.collapsable_title { padding-left: 0.2em; text-transform: uppercase; }
 
 ul.folders { margin-left: 16px !important; }
 
diff --git a/js/news.js b/js/news.js
index 61d79453d..432d4da08 100644
--- a/js/news.js
+++ b/js/news.js
@@ -228,8 +228,16 @@ News={
 }
 
 function setupFeedList() {
-	$('.collapsable').click(function(){
-		$(this).parent().children('ul').toggle();
+	$('.collapsable_trigger').click(function(){
+		var items = $(this).parent().parent().children('ul').toggle();
+		if (items.css('display') == 'block') {
+			items.show();
+			$(this).removeClass('collapsable_trigger_n').addClass('collapsable_trigger_s');
+		}
+		else {
+			items.hide();
+			$(this).removeClass('collapsable_trigger_s').addClass('collapsable_trigger_n');
+		}
 	});
 
 	var list = $('.collapsable,.feeds_list').hover(
@@ -245,6 +253,7 @@ function setupFeedList() {
 	list.find('#feeds_delete').hide();
 	list.find('#feeds_edit').hide();
 	list.find('#unreaditemcounter').show();
+	list.find('.collapsable_trigger').addClass('collapsable_trigger_s');
 }
 
 function setupRightContent() {
diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php
index 99353cc43..619518a3b 100644
--- a/templates/part.listfolder.php
+++ b/templates/part.listfolder.php
@@ -7,8 +7,12 @@ $l = new OC_l10n('news');
 
 echo '<ul class="folders"' . (($is_root) ? 'style="margin-left: 0px !important;"' : '') .'> <li class="folder_list" >' .
 	'<div class="collapsable_container" data-id="' . $folder->getId() . '">' .
-		'<div class="collapsable" >' . strtoupper($folder->getName()) .
-		( ($is_root) ?
+		'<div class="collapsable" >' .
+			'<button class="collapsable_trigger" title="' . $l->t($folder->getName()) . '"></button>' .
+			'<span class="collapsable_title">' .
+				$folder->getName() .
+			'</span>' .
+			( ($is_root) ?
 			''
 			:
 			'<button class="svg action" id="feeds_delete" onClick="(News.Folder.delete(' . $folder->getId(). '))" title="' . $l->t('Delete folder') . '"></button>' .