diff options
-rw-r--r-- | css/news.css | 18 | ||||
-rw-r--r-- | js/news.js | 74 | ||||
-rw-r--r-- | templates/part.feeddialog.php | 2 | ||||
-rw-r--r-- | templates/part.folderdialog.php | 2 | ||||
-rw-r--r-- | templates/part.folderlist.php | 1 | ||||
-rw-r--r-- | templates/part.items.php | 2 |
6 files changed, 86 insertions, 13 deletions
diff --git a/css/news.css b/css/news.css index ae3e9ab3d..eeff10e49 100644 --- a/css/news.css +++ b/css/news.css @@ -49,9 +49,17 @@ ul.controls li { float: left; } #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: .4em; } +#rightcontent div.feed_controls div.feed_title h1 { font-size: 1.7em; color: #444; padding-top: .5em; } -#rightcontent ul { box-sizing: border-box; -moz-box-sizing: border-box; overflow: auto; height: 100%; } +#rightcontent #feed_items { + box-sizing: border-box; + -moz-box-sizing: border-box; + overflow: auto; + height: 100%; +} + + +#rightcontent ul { } #rightcontent div.body { padding: 15px 25px 10px 25px; } #rightcontent div.body p { line-height: 1.5; margin: 10px 0; } @@ -60,10 +68,10 @@ ul.controls li { float: left; } #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 div.body pre code { font-family: monospace; font-size: 1.5em; } #rightcontent .title_unread h1.item_title, -#rightcontent .title_read h1.item_title { padding: 15px 10px 10px 10px; font-size: 14pt; } +#rightcontent .title_read h1.item_title { padding: 15px 10px 10px 10px; font-size: 1.5em; } #rightcontent .title_unread h1.item_title { font-weight: bold; border-bottom: 1px solid #222; } @@ -80,7 +88,7 @@ ul.controls li { float: left; } /* dialog/menues */ div.dialog { overflow: visible; } -#dropdownBtn { width: 9em; padding-left: 0; padding-right:20px; background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; } +#dropdownBtn { width: 20em; padding-left: 0; padding-right:20px; background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; text-align: left; overflow: hidden;} 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;} diff --git a/js/news.js b/js/news.js index 94503ed58..0e0c2a843 100644 --- a/js/news.js +++ b/js/news.js @@ -176,7 +176,7 @@ News={ return false; }, markItem:function(itemid, feedid) { - var currentitem = $('#rightcontent [data-id="' + itemid + '"]'); + var currentitem = $('#feed_items [data-id="' + itemid + '"][data-feedid="' + feedid + '"]'); if (currentitem.hasClass('title_unread')) { $.post(OC.filePath('news', 'ajax', 'markitem.php'),{'itemid':itemid},function(jsondata){ if(jsondata.status == 'success'){ @@ -203,6 +203,13 @@ News={ }) }; }, + markAllItems:function() { + $("#feed_items li.title_unread").each(function(){ + var itemId = $(this).data('id'); + var feedId = $(this).data('feedid'); + News.Feed.markItem(itemId, feedId); + }); + }, load:function(feedid) { $.post(OC.filePath('news', 'ajax', 'loadfeed.php'),{'feedid':feedid},function(jsondata) { if(jsondata.status == 'success'){ @@ -215,6 +222,7 @@ News={ $('li.feed[data-id="' + feedid + '"]').attr('id', 'selected_feed'); transformCollapsableTrigger(); + bindItemEventListeners(); } else { OC.dialogs.alert(t('news', 'Error while loading the feed'), t('news', 'Error')); @@ -259,6 +267,20 @@ News={ } }); + }, + filter:function(value){ + // TODO: safe this on the server + switch(value){ + case 'all': + $("#feed_items li").show(); + break; + case 'newest': + $("#feed_items li.title_read").hide(); + break; + default: + break; + } + } } } @@ -322,6 +344,50 @@ function setupFeedList() { transformCollapsableTrigger(); } + +/** + * Binds a listener on the feed item list to detect scrolling and mark previous + * items as read + */ +function bindItemEventListeners(){ + + // mark items whose title was hid under the top edge as read + // when the bottom is reached, mark all items as read + $('#feed_items').scroll(function(){ + var boxHeight = $(this).height(); + var scrollHeight = $(this).prop('scrollHeight'); + var scrolled = $(this).scrollTop() + boxHeight; + + $(this).children('ul').children('li.title_unread').each(function(){ + var itemOffset = $(this).position().top; + if(itemOffset <= 0 || scrolled >= scrollHeight){ + var itemId = $(this).data('id'); + var feedId = $(this).data('feedid'); + News.Feed.markItem(itemId, feedId); + } + }) + }); + + // single click on item should mark it as read too + $('#feed_items ul li').click(function(){ + var itemId = $(this).data('id'); + var feedId = $(this).data('feedid'); + News.Feed.markItem(itemId, feedId); + }) + + // bind the mark all as read button + $('#mark_all_as_read').click(function(){ + News.Feed.markAllItems(); + }); + + // filter for newest or all items + $('#feed_filter').change(function(){ + News.Feed.filter($(this).val()); + }); + +} + + $(document).ready(function(){ $('#addfeed').click(function() { @@ -350,11 +416,7 @@ $(document).ready(function(){ var updateInterval = 200000; //how often the feeds should update (in msec) setInterval('News.Feed.updateAll()', updateInterval); - $('.title_unread').live('mouseenter', function(){ - var itemId = $(this).data('id'); - var feedId = $(this).data('feedid'); - News.Feed.markItem(itemId, feedId); - }); + bindItemEventListeners(); }); diff --git a/templates/part.feeddialog.php b/templates/part.feeddialog.php index 6807f3c5b..99332d421 100644 --- a/templates/part.feeddialog.php +++ b/templates/part.feeddialog.php @@ -6,7 +6,7 @@ <td> <div class="add_parentfolder"> <button id="dropdownBtn" onclick="News.DropDownMenu.dropdown(this)"> - <?php echo $l->t('EVERYTHING'); ?> + <?php echo $l->t('Subscriptions'); ?> </button> <input id="inputfolderid" type="hidden" name="folderid" value="0" /> <ul class="menu" id="dropdownmenu"> diff --git a/templates/part.folderdialog.php b/templates/part.folderdialog.php index e1217160c..fb1a819af 100644 --- a/templates/part.folderdialog.php +++ b/templates/part.folderdialog.php @@ -6,7 +6,7 @@ <td> <div class="add_parentfolder"> <button id="dropdownBtn" onclick="News.DropDownMenu.dropdown(this)"> - <?php echo $l->t('EVERYTHING'); ?> + <?php echo $l->t('Subscriptions'); ?> </button> <input id="inputfolderid" type="hidden" name="folderid" value="0" /> <ul class="menu" id="dropdownmenu"> diff --git a/templates/part.folderlist.php b/templates/part.folderlist.php index 972b60143..11ed53bcb 100644 --- a/templates/part.folderlist.php +++ b/templates/part.folderlist.php @@ -1,4 +1,5 @@ <?php + function print_folder(OCA\News\Folder $folder, $depth){ echo '<li style="margin-left:' . 10*$depth . 'px;" class="menuItem" onclick="News.DropDownMenu.selectItem(this, ' . $folder->getId() . ')">' . $folder->getName() . '</li>'; $children = $folder->getChildren(); diff --git a/templates/part.items.php b/templates/part.items.php index 20701fff9..ff372fafb 100644 --- a/templates/part.items.php +++ b/templates/part.items.php @@ -5,6 +5,7 @@ $feedid = isset($_['feedid']) ? $_['feedid'] : ''; $itemmapper = new OCA\News\ItemMapper(); $items = $itemmapper->findAll($feedid); +echo '<div id="feed_items">'; echo '<ul>'; foreach($items as $item) { if($item->isRead()){ @@ -20,3 +21,4 @@ foreach($items as $item) { } echo '</ul>'; +echo '</div>'; |