summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ajax/loadfeed.php6
-rw-r--r--css/news.css182
-rw-r--r--js/news.js93
-rw-r--r--templates/part.feeddialog.php4
-rw-r--r--templates/part.items.header.php15
-rw-r--r--templates/part.listfeed.php2
-rw-r--r--templates/part.listfolder.php4
7 files changed, 206 insertions, 100 deletions
diff --git a/ajax/loadfeed.php b/ajax/loadfeed.php
index d87c71328..644f28714 100644
--- a/ajax/loadfeed.php
+++ b/ajax/loadfeed.php
@@ -29,7 +29,11 @@ $feedMapper = new OCA\News\FeedMapper();
$feed = $feedMapper->findById($feedId);
$feedTitle = $feed->getTitle();
+$itemMapper = new OCA\News\ItemMapper();
+$unreadItemCount = $itemMapper->countAllStatus($feedId, OCA\News\StatusFlag::UNREAD);
+
OCP\JSON::success(array('data' => array( 'message' => $l->t('Feed loaded!'),
'feedTitle' => $feedTitle,
- 'feedItems' => $feedItems )));
+ 'feedItems' => $feedItems,
+ 'unreadItemCount' => $unreadItemCount )));
diff --git a/css/news.css b/css/news.css
index 10f79a309..7450d973f 100644
--- a/css/news.css
+++ b/css/news.css
@@ -65,6 +65,25 @@ div.feed_controls {
z-index: 1;
height: 3.3em;
}
+
+ div.feed_controls .unreaditemcounter {
+ background: #5E5E5E;
+ border-radius: 5px;
+ padding: 2px 5px;
+ color: white;
+ text-align: center;
+ font-weight: normal;
+ margin: .7em 0 0 .6em;
+ display: block;
+ float: left;
+ min-width: 1.2em;
+ }
+
+ div.feed_controls .unreaditemcounter.all_read {
+ display: none;
+ }
+
+
div.feed_controls div.subscriptions_title {
display: inline-block;
padding-left: .8em;
@@ -151,29 +170,33 @@ div.feed_controls {
}
#feeds li {
- padding: 0px !important;
}
#feeds li.feed {
position: relative;
text-align: right;
- padding-left: 5px !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
+ border-bottom: 1px solid #ccc;
+ padding: 0 0 0 5px;
+ -moz-transition: background-color 200ms ease 0s;
+ transition: background-color 200ms ease 0s;
+ background-color: #f1f1f1;
}
#feeds li.feed a {
- padding: 0 0 0 20px !important;
+ background-size:16px 16px;
+ background-repeat: no-repeat;
+ background-position: 3px center;
+ padding: 0 0 0 25px !important;
+ line-height: 2.2em;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
width: 75%;
- }
-
- #feeds li.feed a {
font-weight: bold;
}
-
+
#feeds li.feed a.all_read {
font-weight: normal;
}
@@ -188,50 +211,27 @@ div.feed_controls {
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: right center;
- /* uncomment if webkit supports this
- background-position: right 5px center;
- */
}
#feeds li.feed:hover {
- background-color: rgb(221, 221, 221) !important;
+ background-color: #ddd;
}
- #feeds li.collapsable_container {
- }
-
- #feeds li.collapsable_container:hover {
- color: #000 !important;
- background-color: #f8f8f8 !important;
- }
-
- #feeds li.collapsable_container > ul {
- margin: 0 0 0.1em 16px;
- }
+ #feeds li.feed .feeds_delete,
+ #feeds li.feed .feeds_edit {
+ display: none;
+ }
- #feeds div.collapsable {
- position: relative;
- border-radius: 5px;
- }
-
- #feeds .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;
- opacity: 1;
- }
-
- #feeds .collapsable_title {
- padding-left: 0.2em;
- }
-
- #feeds div.collapsable:hover {
- background-color: rgb(221, 221, 221);
- }
+ #feeds li.feed:hover .unreaditemcounter {
+ display: none;
+ }
+
+ #feeds li.feed:hover .feeds_delete,
+ #feeds li.feed:hover .feeds_edit,
+ #feeds .collapsable:hover .feeds_delete,
+ #feeds .collapsable:hover .feeds_edit {
+ display: inline-block;
+ }
#feeds .feeds_delete {
position: absolute;
@@ -255,18 +255,106 @@ div.feed_controls {
#feeds .unreaditemcounter {
position: relative;
+ top: .3em;
+ right: .3em;
background: #5E5E5E;
border-radius: 5px;
- padding: 0 5px;
+ padding: 2px 5px;
color: white;
text-align: center;
- margin: 0 0.3em 0 0.3em;
+ font-weight: normal;
+ margin: 0;
+ display: none;
}
#feeds .unreaditemcounter.all_read {
display: none !important;
}
+ #feeds li.collapsable_container {
+ background-color: #dfdfdf;
+ font-weight: bold;
+ padding: 0;
+ border: 0;
+ border-bottom: 1px solid #bbb;
+ }
+
+ #feeds li.collapsable_container.open {
+ background-image: linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
+ background-image: -o-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
+ background-image: -moz-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
+ background-image: -webkit-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
+ background-image: -ms-linear-gradient(bottom, rgb(208,208,208) 0%, rgb(222,222,222) 100%);
+ font-weight: bold;
+ padding: 0;
+ border: 0;
+ border-bottom: 1px solid #bbb;
+ border-top: 1px solid #bbb;
+ -webkit-box-shadow: inset 0 0 5px -1px #bbb;
+ box-shadow: inset 0 0 5px -1px #bbb;
+ }
+
+ #feeds li.collapsable_container:hover {
+ background-color: #d0d0d0;
+ -moz-transition: background-color 200ms ease 0s;
+ transition: background-color 200ms ease 0s;
+ }
+
+
+
+ #feeds li.collapsable_container.open > ul {
+ margin: 0 8px 8px 8px;
+ }
+
+ #feeds li.collapsable_container > ul > li {
+ border: 1px solid #ccc;
+ border-bottom: 0;
+ }
+
+ #feeds li.collapsable_container > ul > li:last-child {
+ border: 1px solid #ccc;
+ }
+
+ #feeds div.collapsable {
+ position: relative;
+ border-radius: 5px;
+ }
+
+ #feeds div.collapsable:hover {
+ background-image: none;
+ }
+
+ #feeds .collapsable_trigger {
+ border: none ;
+ margin: 0 0 0 1em;
+ padding: 0;
+ border-radius: 0;
+ box-shadow: none;
+ vertical-align: middle !important;
+ background: url('%webroot%/core/img/places/folder.svg') no-repeat;
+ outline: none;
+ opacity: 1;
+ }
+
+ #feeds .collapsable_container:hover .collapsable_trigger.triggerable {
+ background-image: url('%webroot%/core/img/actions/triangle-s.svg');
+ -moz-transform: none;
+ transform: none;
+ }
+
+ #feeds .collapsable_container:hover .collapsable_trigger.triggered {
+ background-image: url('%webroot%/core/img/actions/triangle-s.svg');
+ -moz-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ }
+
+ #feeds .collapsable_title {
+ padding: .5em 0 .5em .5em;
+ line-height: 1.5em;
+ float: none;
+ display: inline-block;
+ position: relative;
+ }
/* feed settings */
diff --git a/js/news.js b/js/news.js
index af3a80f2d..2c3c039ac 100644
--- a/js/news.js
+++ b/js/news.js
@@ -69,7 +69,6 @@ News={
$('#feeds > ul').append(jsondata.data.listfolder);
}
setupFeedList();
- transformCollapsableTrigger();
$('#addfolder_dialog').dialog('destroy').remove();
} else {
OC.dialogs.alert(jsondata.data.message, t('news', 'Error'));
@@ -137,7 +136,7 @@ News={
setupFeedList();
News.Feed.load(jsondata.data.feedid);
- $('#ui-dialog-title-addfeed_dialog').html('Feed added. Do you want to add another feed?')
+ //$('#ui-dialog-title-addfeed_dialog').html('Feed added. Do you want to add another feed?')
/*
OC.dialogs.confirm(t('news', ), t('news', 'Feed added!'), function(answer) {
@@ -249,19 +248,27 @@ News={
load:function(feedId) {
$.post(OC.filePath('news', 'ajax', 'loadfeed.php'), { 'feedId' : feedId }, function(jsonData) {
if(jsonData.status == 'success'){
+ // set active id
var $rightContent = $(".rightcontent");
$rightContent.attr('data-id', feedId);
+ News.Feed.activeFeedId = parseInt(feedId);
+ // load in new items
var $feedItems = $('#feed_items');
$feedItems.empty();
$feedItems.html(jsonData.data.feedItems);
+ // scroll to the top position
$feedItems.scrollTop(0);
+ // set title
var $feedTitle = $(".feed_controls .feed_title h1");
$feedTitle.html(jsonData.data.feedTitle);
$feedTitle.attr('title', jsonData.data.feedTitle);
-
+ // update unread count
+ $feedHandler = new News.FeedStatusHandler(feedId);
+ $feedHandler.setUnreadCount(jsonData.data.unreadItemCount);
+ // select new feed
$('li#selected_feed').attr('id', '');
$('li.feed[data-id="' + feedId + '"]').attr('id', 'selected_feed');
-
+ // refresh callbacks
transformCollapsableTrigger();
bindItemEventListeners();
}
@@ -328,6 +335,7 @@ News={
// this array is used to store ids to prevent sending too
// many posts when scrolling. the structure is: feed_id: boolean
processing:{},
+ activeFeedId: parseInt($('#rightcontent').data('id')),
},
/**
@@ -336,8 +344,10 @@ News={
*/
FeedStatusHandler: function(feedId){
var _feedId = feedId;
+ var _activeFeedId = News.Feed.activeFeedId;
var _$feed = $('li.feed[data-id="'+feedId+'"]');
var _$feedUnreadCounter = _$feed.find('.unreaditemcounter');
+ var _$feedUnreadCounterUtil = $('.feed_controls .unreaditemcounter');
var _$feedLink = _$feed.children('a');
/**
@@ -353,6 +363,14 @@ News={
}
};
+
+ /**
+ * Writes the current value into all fields
+ */
+ var _refresh = function(){
+ _setUnreadCount(_getUnreadCount);
+ }
+
/**
* Decreases the current unread count by 1
*/
@@ -389,21 +407,33 @@ News={
* @param count the unread count that will be set
*/
var _setUnreadCount = function(count){
+ count = parseInt(count);
// dont allow setting the count below 0
if(count < 0){
count = 0;
}
+ // if the count is 0 we have to add special classes
if(count === 0){
_$feedLink.addClass('all_read');
_$feedUnreadCounter.addClass('all_read');
+ if(_activeFeedId == _feedId){
+ _$feedUnreadCounterUtil.addClass('all_read');
+ }
} else {
var currentCount = _getUnreadCount();
+ // if the previous count was 0 we need to remove certain classes
if(currentCount === 0){
_$feedLink.removeClass('all_read');
_$feedUnreadCounter.removeClass('all_read');
+ if(_activeFeedId == _feedId){
+ _$feedUnreadCounterUtil.removeClass('all_read');
+ }
}
}
_$feedUnreadCounter.html(count);
+ if(_activeFeedId == _feedId){
+ _$feedUnreadCounterUtil.html(count);
+ }
};
// public
@@ -411,6 +441,7 @@ News={
this.incrementUnreadCount = function(){ return _incrementUnreadCount(); };
this.setUpdating = function(isUpdating){ return _setUpdating(isUpdating); };
this.setUnreadCount = function(count){ return _setUnreadCount(count); };
+ this.refresh = function(){ return _refresh(); };
},
/**
@@ -535,50 +566,25 @@ News={
function transformCollapsableTrigger() {
// we need this here to detect and toggle new children instantly
$('.collapsable_trigger').unbind();
+ $('.collapsable_trigger').each(function(){
+ $container = $(this).parent().parent();
+ $sublist = $container.children('ul');
+ if($sublist.children('li').length > 0){
+ $(this).addClass('triggerable');
+ $container.addClass('open');
+ }
+ });
$('.collapsable_trigger').click(function(){
- var items = $(this).parent().parent().children('ul');
- items.toggle();
- transformCollapsableTrigger();
+ $(this).toggleClass('triggerable');
+ $(this).toggleClass('triggered');
+ $sublist = $(this).parent().parent().children('ul');
+ $sublist.toggle();
+ $container = $(this).parent().parent();
+ $container.toggleClass('open');
});
-
- var triggericon = OC.imagePath('core', 'actions/triangle-s.svg');
- var foldericon = OC.imagePath('core', 'places/folder.svg');
-
- $('.collapsable_trigger').each(
- function() {
- var items = $(this).parent().parent().children('ul');
- if (items.html()) {
- $(this).css('background-image', 'url(' + triggericon + ')');
- if (items.css('display') == 'block') {
- $(this).css('-moz-transform', 'none');
- $(this).css('transform', 'none');
- }
- else {
- $(this).css('-moz-transform', 'rotate(-90deg)');
- $(this).css('transform', 'rotate(-90deg)');
- }
- }
- else {
- $(this).css('background-image', 'url(' + foldericon + ')');
- }
- }
- );
}
function setupFeedList() {
- var list = $('.collapsable,.feed').hover(
- function() {
- $(this).find('.feeds_delete,.feeds_edit').css('display', 'inline');
- $(this).find('.unreaditemcounter').css('display', 'none');
- },
- function() {
- $(this).find('.feeds_delete,.feeds_edit').css('display', 'none');
- $(this).find('.unreaditemcounter').css('display', 'inline');
- }
- );
- list.find('.feeds_delete').hide();
- list.find('.feeds_edit').hide();
- list.find('.unreaditemcounter').show();
$('.feed').click(function() {
News.Feed.load($(this).attr('data-id'));
@@ -713,7 +719,6 @@ function markItemAsRead(scrollArea, item){
var scrollHeight = $(scrollArea).prop('scrollHeight');
var scrolled = $(scrollArea).scrollTop() + boxHeight;
if(itemOffset < 0 || scrolled >= scrollHeight){
- console.log(itemOffset);
if(News.Feed.processing[itemId] === undefined || News.Feed.processing[itemId] === false){
// mark item as processing to prevent unecessary post requests
News.Feed.processing[itemId] = true;
diff --git a/templates/part.feeddialog.php b/templates/part.feeddialog.php
index 8d67f2010..6df940164 100644
--- a/templates/part.feeddialog.php
+++ b/templates/part.feeddialog.php
@@ -1,5 +1,5 @@
-<div id="addfeed_dialog" title="<?php echo $l->t("Add Feed"); ?>">
+<div id="addfeed_dialog" title="<?php echo $l->t("Add Subscription"); ?>">
<table width="100%" style="border: 0;">
<tr>
<td>Add new feed</td>
@@ -8,7 +8,7 @@
<button id="dropdownBtn" onclick="News.DropDownMenu.dropdown(this)">
<?php echo $l->t('Choose folder'); ?>
</button>
- <input id="inputfolderid" type="hidden" name="folderid" value="0" />
+ <input id="inputfolderid" type="hidden" placeholder="<?php echo $l->t("Link"); ?>" name="folderid" value="0" />
<ul class="menu" id="dropdownmenu">
<?php echo $this->inc("part.folderlist"); ?>
</ul>
diff --git a/templates/part.items.header.php b/templates/part.items.header.php
index 7291cb296..831fc54fa 100644
--- a/templates/part.items.header.php
+++ b/templates/part.items.header.php
@@ -1,11 +1,20 @@
<?php
if(isset($_['feedid'])){
- $feedmapper = new OCA\News\FeedMapper();
- $feed = $feedmapper->findById($_['feedid']);
+ $feedMapper = new OCA\News\FeedMapper();
+ $feed = $feedMapper->findById($_['feedid']);
$feedTitle = $feed->getTitle();
+
+ $itemMapper = new OCA\News\ItemMapper();
+ $unreadItemsCount = $itemMapper->countAllStatus($_['feedid'], OCA\News\StatusFlag::UNREAD);
+ if($unreadItemsCount > 0){
+ $readClass = '';
+ } else {
+ $readClass = 'all_read';
+ }
} else {
$feedTitle = '';
+ $unreadItemsCount = 0;
}
// FIXME: get this setting from the database
@@ -14,7 +23,7 @@ $showOnlyUnread = true;
?>
<div class="feed_controls">
-
+ <span class="unreaditemcounter <?php echo $readClass; ?>"><?php echo $unreadItemsCount; ?></span>
<div class="feed_title">
<h1 title="<?php echo $feedTitle; ?>"><?php echo $feedTitle; ?></h1>
</div>
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index 8b64a3846..d3008bc91 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -17,7 +17,7 @@ if($unreadItemsCount == 0){
}
echo '<li class="feed" data-id="' . $feed->getId() . '">';
-echo '<a href="#" style="background: url(' . $favicon . ') left center no-repeat; background-size:16px 16px;" class="' . $allReadClass . '">' . $feed->getTitle() .'</a>';
+echo '<a href="#" style="background-image: url(' . $favicon . '); " class="' . $allReadClass . '">' . $feed->getTitle() .'</a>';
echo '<span class="unreaditemcounter ' . $allReadClass . '">' . $unreadItemsCount . '</span>';
echo '<button class="svg action feeds_edit" title="' . $l->t('Edit feed') . '"></button>';
echo '<button class="svg action feeds_delete" onClick="(News.Feed.delete(' . $feed->getId(). '))" title="' . $l->t('Delete feed') . '"></button>';
diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php
index 26763090f..c24d9ae72 100644
--- a/templates/part.listfolder.php
+++ b/templates/part.listfolder.php
@@ -8,9 +8,9 @@ $l = new OC_l10n('news');
echo '<li class="collapsable_container" data-id="' . $folder->getId() . '"' . (($is_root) ? 'style="margin-left: 0px !important;"' : '') . '>' .
'<div class="collapsable" >' .
'<button class="collapsable_trigger action" title="' . $folder->getName() . '"></button>' .
- '<span class="collapsable_title">' .
+ '<a href="#" class="collapsable_title">' .
$folder->getName() .
- '</span>' .
+ '</a>' .
( ($is_root) ?
''
:
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-21 09:50:50 +0000