diff options
| -rw-r--r-- | css/news.css | 193 | ||||
| -rw-r--r-- | js/news.js | 54 | ||||
| -rw-r--r-- | lib/foldermapper.php | 1 | ||||
| -rw-r--r-- | templates/main.php | 25 | ||||
| -rw-r--r-- | templates/part.folderdialog.php | 6 | ||||
| -rw-r--r-- | templates/part.folderlist.php | 3 | ||||
| -rw-r--r-- | templates/part.items.header.php | 2 |
7 files changed, 190 insertions, 94 deletions
diff --git a/css/news.css b/css/news.css index 1f2b75a1b..41bb60662 100644 --- a/css/news.css +++ b/css/news.css @@ -63,6 +63,7 @@ div.feed_controls { right: 0; top: 3.5em; z-index: 1; + height: 3.3em; } div.feed_controls div.subscriptions_title { display: inline-block; @@ -78,17 +79,30 @@ div.feed_controls { } div.feed_controls div.feed_title h1 { - max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-size: 1.2em; + line-height: 2.6em; + font-weight: bold; + color: #333; } - div.feed_controls h1 { - font-size: 1.5em; - color: #444; - padding-top: .5em; - } + @media all and (min-width: 1280px){ + div.feed_controls div.feed_title h1 { max-width: 450px; } + } + + @media all and (max-width: 1279px) and (min-width: 1024px){ + div.feed_controls div.feed_title h1 { max-width: 230px; } + } + + @media all and (max-width: 1023px) and (min-width: 950px){ + div.feed_controls div.feed_title h1 { max-width: 130px; } + } + + @media all and (max-width: 949px){ + div.feed_controls div.feed_title h1 { display: none; } + } div.feed_controls .controls { float: right; @@ -98,23 +112,44 @@ div.feed_controls { /* feed/folder list */ #leftcontent { width: 21.5em; - top: 3.5em !important; - padding: 0 0 3em 0; margin: 0; z-index: 0; + position: relative; overflow: hidden; + top: 0; + bottom: 0; } + #leftcontent h1 { + background-color: #DBDBDB; + border-bottom: 1px solid #CCCCCC; + border-top: 1px solid #D4D4D4; + color: #333333; + font-weight: bold; + display: block; + font-size: 1.2em; + max-width: 100%; + padding: 0 0.8em; + text-shadow: 0 1px 0 #F8F8F8; + line-height: 2.6em; + } + #feeds { - clear: both; background-color: #f8f8f8; - position: relative; - overflow: auto; - height: 100%; + position: absolute; + top: 3.3em; + bottom: 2.8em; + left: 0; + right: 0; box-sizing: border-box; -moz-box-sizing: border-box; } + #feeds ul { + height: 100%; + overflow: auto; + } + #feeds li { padding: 0px !important; } @@ -152,7 +187,10 @@ div.feed_controls { background-image: url('%webroot%/core/img/loader.gif'); background-size: 16px 16px; background-repeat: no-repeat; - background-position: 20em center; + background-position: right center; + /* uncomment if webkit supports this + background-position: right 5px center; + */ } #feeds li.feed:hover { @@ -232,29 +270,9 @@ div.feed_controls { /* feed settings */ -#addfolder { - background: url('%webroot%/core/img/places/folder.svg') no-repeat left center; - padding-left: 20px !important; -} - -#addfeed { - background: url('%appswebroot%/news/img/rss.svg') no-repeat left center; - padding-left: 20px !important; -} - -#addfeedbtn { - background: url('%appswebroot%/news/img/rss.svg') no-repeat left; - padding-left: 20px; -} - -#importopmlbtn { - background: url('%appswebroot%/news/img/opml-icon.svg') no-repeat left center; - padding-left: 20px; -} - #feed_settings { padding: 0; - bottom:0px; + bottom: 0px; overflow:visible; height:2.8em; width: 21.5em; @@ -264,12 +282,73 @@ div.feed_controls { solid #ccc; position:fixed; } + + #feed_settings .controls { + height: 100%; + width: 100%; + } + + #feed_settings #addfeedfolder { + margin: 0 .3em .3em .3em; + float: left; + + } + + #feed_settings #addfeedfolder #addfolder { + background: url('%webroot%/core/img/places/folder.svg') no-repeat 10px center; + } + + #feed_settings #addfeedfolder #addfeed { + background: url('%appswebroot%/news/img/rss.svg') no-repeat 10px center; + } + + /* + #feed_settings #addfeedfolder:hover ul#feedfoldermenu{ + display: block; + }*/ + + #feed_settings ul#feedfoldermenu { + 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); + position:fixed; + margin-left: 0; + bottom: 2.8em; + border-left:1px solid #ccc; + border-top:1px solid #ccc; + border-right:1px solid #ccc; + border-bottom: 0; + -moz-box-shadow: 0 -3px 3px -3px #000; + -webkit-box-shadow: 0 -3px 3px -3px #000; + box-shadow: 0 -3px 3px -3px #000; + } + + #feed_settings ul#feedfoldermenu li { + padding: 0 1em 0 2.5em; + float: none !important; + text-align: left; + } + + #feed_settings ul#feedfoldermenu li:hover { + background-color: #ccc !important; + } + + +#addfeedbtn { + background: url('%appswebroot%/news/img/rss.svg') no-repeat left; + padding-left: 20px; +} -ul.controls li { - float: left; +#importopmlbtn { + background: url('%appswebroot%/news/img/opml-icon.svg') no-repeat left center; + padding-left: 20px; } + /* item view */ #rightcontent { top: 3.5em !important; @@ -465,42 +544,34 @@ div.dialog { ul#dropdownmenu { left: 0em; - box-shadow: 0px 0px 10px #000; -} - -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; + z-index:1; 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); + background:-webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#f1f1f1)); + background:-moz-linear-gradient(#eee, #f1f1f1); + background:-o-linear-gradient(#eee, #f1f1f1); + background:linear-gradient(#eee, #f1f1f1); + border: 1px solid #ccc; } + ul.menu .menuItem { + padding: 2px 5px; + min-width: 11em; + } + + ul.menu .menuItem:hover { + background-color: #ddd; + } + .popup.bottomleft { - left: 3.8em; + left: 34.8em; + /*left: 3.8em;*/ } diff --git a/js/news.js b/js/news.js index dbe9a53a1..2647427a8 100644 --- a/js/news.js +++ b/js/news.js @@ -66,7 +66,7 @@ News={ if(folderid > 0){ $('.collapsable_container[data-id="' + folderid + '"] > ul').append(jsondata.data.listfolder); } else { - $('#feeds').append(jsondata.data.listfolder); + $('#feeds > ul').append(jsondata.data.listfolder); } setupFeedList(); transformCollapsableTrigger(); @@ -132,7 +132,7 @@ News={ if(folderid > 0){ $('.collapsable_container[data-id="' + folderid + '"] > ul').append(jsondata.data.listfeed); } else { - $('#feeds').append(jsondata.data.listfeed); + $('#feeds > ul').append(jsondata.data.listfeed); } setupFeedList(); News.Feed.load(jsondata.data.feedid); @@ -251,8 +251,10 @@ News={ var $feedItems = $('#feed_items'); $feedItems.empty(); $feedItems.html(jsonData.data.feedItems); + $feedItems.scrollTop(0); var $feedTitle = $(".feed_controls .feed_title h1"); $feedTitle.html(jsonData.data.feedTitle); + $feedTitle.attr('title', jsonData.data.feedTitle); $('li#selected_feed').attr('id', ''); $('li.feed[data-id="' + feedId + '"]').attr('id', 'selected_feed'); @@ -368,6 +370,8 @@ News={ * hide the icon and show the unread count */ var _setUpdating = function(isUpdating){ + // we dont use this anymore + return; if(isUpdating){ _$feed.addClass('updating'); _$feedUnreadCounter.hide(); @@ -599,6 +603,14 @@ function bindItemEventListeners(){ handler.setRead(true); }); + // single hover on item should mark it as read too + $('#feed_items .body').click(function(){ + var $item = $(this).parent('.feed_item'); + var itemId = $item.data('id'); + var handler = new News.ItemStatusHandler(itemId); + handler.setRead(true); + }); + // mark or unmark as important $('#feed_items li.star').click(function(){ var $item = $(this).parent().parent().parent('.feed_item'); @@ -640,7 +652,8 @@ $(document).ready(function(){ }); $('#addfeedfolder').click(function(event) { - event.stopPropagation(); + News.DropDownMenu.fade($(this).children('ul')); + event.stopPropagation(); }); $('#settingsbtn').on('click keydown', function() { @@ -670,24 +683,43 @@ $(document).ready(function(){ var boxHeight = $(this).height(); var scrollHeight = $(this).prop('scrollHeight'); var scrolled = $(this).scrollTop() + boxHeight; - + var scrollArea = this; $(this).children('ul').children('.feed_item:not(.read)').each(function(){ + var item = this; var itemOffset = $(this).position().top; if(itemOffset <= 0 || scrolled >= scrollHeight){ - var itemId = parseInt($(this).data('id')); - 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; - var handler = new News.ItemStatusHandler(itemId); - handler.setRead(true); - } + // wait and check if the item is still under the top edge + setTimeout(function(){ markItemAsRead(scrollArea, item);}, 1000); } }) }); + + $('#feed_items').scrollTop(0); }); +/** + * Marks an item as read which is called by the timeout + * @param item the dom item + */ +function markItemAsRead(scrollArea, item){ + var itemId = parseInt($(item).data('id')); + var itemOffset = $(item).position().top; + var boxHeight = $(scrollArea).height(); + 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; + var handler = new News.ItemStatusHandler(itemId); + handler.setRead(true); + } + } +} + $(document).click(function(event) { $('#feedfoldermenu').hide(); }); diff --git a/lib/foldermapper.php b/lib/foldermapper.php index 54ed1e8aa..abc89b5af 100644 --- a/lib/foldermapper.php +++ b/lib/foldermapper.php @@ -28,6 +28,7 @@ class FolderMapper { $this->userid = \OCP\USER::getUser(); } + /** * @brief Returns the forest (list of trees) of folders children of $parentid * @param diff --git a/templates/main.php b/templates/main.php index 4fb588aeb..61cfc5ec9 100644 --- a/templates/main.php +++ b/templates/main.php @@ -10,18 +10,22 @@ echo $this->inc("part.items.header"); ?> <div id="leftcontent" class="leftcontent"> - <ul id="feeds"> - <?php echo $this->inc("part.feeds"); ?> - </ul> + <h1><?php echo $l->t('Subscriptions'); ?></h1> + <div id="feeds"> + <ul> + <?php echo $this->inc("part.feeds"); ?> + </ul> + </div> </div> <div id="feed_settings"> <ul class="controls"> - <li> - <button class="svg" id="addfeedfolder" title="$l->t('Change View');" onclick="News.DropDownMenu.fade('ul#feedfoldermenu')"><img class="svg" src="<?php echo OCP\Util::linkTo('news', 'img/add.svg'); ?>" alt="<?php echo $l->t('Add Feed/Folder'); ?>" /></button> - </li> - <li> - <button class="svg" title="$l->t('Change View');">Eye</button> + <li id="addfeedfolder" title="<?php echo $l->t('Add feed or folder'); ?>"> + <button class="svg"><img class="svg" src="<?php echo OCP\Util::linkTo('news', 'img/add.svg'); ?>" alt="<?php echo $l->t('Add Feed/Folder'); ?>" /></button> + <ul class="menu" id="feedfoldermenu"> + <li id="addfeed"><?php echo $l->t('Feed'); ?></li> + <li id="addfolder"><?php echo $l->t('Folder'); ?></li> + </ul> </li> <li style="float: right"> <button class="svg" id="settingsbtn" title="<?php echo $l->t('Settings'); ?>"><img class="svg" src="<?php echo OCP\Util::imagePath('core','actions/settings.png'); ?>" alt="<?php echo $l->t('Settings'); ?>" /></button> @@ -29,10 +33,7 @@ echo $this->inc("part.items.header"); </ul> </div> -<ul class="menu" id="feedfoldermenu"> - <li class="menuItem" id="addfeed"><?php echo $l->t('Feed'); ?></li> - <li class="menuItem" id="addfolder"><?php echo $l->t('Folder'); ?></li> -</ul> + <div id="rightcontent" class="rightcontent" data-id="<?php echo $_['feedid']; ?>"> diff --git a/templates/part.folderdialog.php b/templates/part.folderdialog.php index 36a0d9633..e441e90a8 100644 --- a/templates/part.folderdialog.php +++ b/templates/part.folderdialog.php @@ -5,13 +5,7 @@ <td>Add new folder</td> <td> <div class="add_parentfolder"> - <button id="dropdownBtn" onclick="News.DropDownMenu.dropdown(this)"> - <?php echo $l->t('Choose folder'); ?> - </button> <input id="inputfolderid" type="hidden" name="folderid" value="0" /> - <ul class="menu" id="dropdownmenu"> - <?php echo $this->inc("part.folderlist"); ?> - </ul> </div> </td> </tr> diff --git a/templates/part.folderlist.php b/templates/part.folderlist.php index 09b5f8e64..f2da64737 100644 --- a/templates/part.folderlist.php +++ b/templates/part.folderlist.php @@ -3,11 +3,8 @@ function print_folder_list($folderlist, $depth) { foreach($folderlist as $folder) { echo '<li style="margin-left:' . 10*$depth . 'px;" class="menuItem" onclick="News.DropDownMenu.selectItem(this, ' . $folder->getId() . ')">' . $folder->getName() . '</li>'; - $children = $folder->getChildren(); - print_folder_list($children, $depth+1); } } - print_folder_list($_['folderforest'], 0); ?>
\ No newline at end of file diff --git a/templates/part.items.header.php b/templates/part.items.header.php index 68e0d9234..7291cb296 100644 --- a/templates/part.items.header.php +++ b/templates/part.items.header.php @@ -16,7 +16,7 @@ $showOnlyUnread = true; <div class="feed_controls"> <div class="feed_title"> - <h1><?php echo $feedTitle; ?></h1> + <h1 title="<?php echo $feedTitle; ?>"><?php echo $feedTitle; ?></h1> </div> <div class="controls"> <input type="button" value="<?php echo $l->t('Mark all as read'); ?>" id="mark_all_as_read" /> |