diff options
-rw-r--r-- | appinfo/version | 3 | ||||
-rw-r--r-- | css/news.css | 146 | ||||
-rw-r--r-- | img/eye_all.svg | 88 | ||||
-rw-r--r-- | img/eye_unread.svg | 89 | ||||
-rw-r--r-- | js/news.js | 22 | ||||
-rw-r--r-- | templates/main.php | 17 | ||||
-rw-r--r-- | templates/part.items.header.php | 51 | ||||
-rw-r--r-- | templates/part.listfeed.php | 1 |
8 files changed, 241 insertions, 176 deletions
diff --git a/appinfo/version b/appinfo/version index 468c41f93..7495c0a15 100644 --- a/appinfo/version +++ b/appinfo/version @@ -1 +1,2 @@ -7.2.1
\ No newline at end of file +7.2.2 + diff --git a/css/news.css b/css/news.css index 1e05c61e9..a671b5786 100644 --- a/css/news.css +++ b/css/news.css @@ -69,88 +69,6 @@ div.add_parentfolder { padding-left: 1.8em; } - -/** - * View above the feeds which shows the feed title - * and the controls - */ -div.feed_controls { - box-sizing: border-box; - -moz-box-sizing: border-box; - background: none repeat scroll 0 0 #f7f7f7; - border-bottom: 1px solid #ccc; - box-shadow: 0 4px 4px -3px #ccc; - overflow: hidden; - position: fixed; - left: 34.1em; - right: 0; - top: 3.5em; - 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; - display: none; - } - - div.feed_controls .unreaditemcounter.all_read { - display: none; - } - - - div.feed_controls div.subscriptions_title { - display: inline-block; - padding-left: .8em; - padding-bottom: .6em; - width: 22.4em; - border-right: 1px solid #ddd; - } - - div.feed_controls div.feed_title { - padding-left: 10px; - display: inline-block; - } - - div.feed_controls div.feed_title h1 { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 1.2em; - line-height: 2.6em; - font-weight: bold; - color: #333; - } - - @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; - } - /* feed/folder list */ #leftcontent { @@ -163,20 +81,6 @@ div.feed_controls { 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 { background-color: #f8f8f8; @@ -453,10 +357,31 @@ div.feed_controls { width: 100%; } + #feed_settings .controls > li { + display: inline-block; + float: left; + width: 3em; + } + + #feed_settings #view button { + width: 3em; + height: 2.5em; + padding-top: .2em; + background-size: 80%; + background-position: center; + background-repeat: no-repeat; + } + + #feed_settings #view.show_all button { + background-image: url('%appswebroot%/news/img/eye_all.svg'); + } + + #feed_settings #view.show_unread button { + background-image: url('%appswebroot%/news/img/eye_unread.svg'); + } + #feed_settings #addfeedfolder { margin: 0 .3em .3em .3em; - float: left; - } #feed_settings #addfeedfolder #addfolder { @@ -509,7 +434,6 @@ div.feed_controls { top: 3.5em !important; box-sizing: border-box; -moz-box-sizing: border-box; - margin-top: 3.5em; left: 34.1em; } @@ -540,6 +464,11 @@ div.feed_controls { .feed_item { border-top: 1px solid #ccc; min-height: 100px; + background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em); + background-image: -o-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em); + background-image: -moz-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em); + background-image: -webkit-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em); + background-image: -ms-linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 6em); } .feed_item:first-child { @@ -552,13 +481,8 @@ div.feed_controls { .utils { height: 2em; margin: 0; - padding: 0.6em 0.5em 0.5em 0.5em; - background-color: #f8f8f8; - background-image: linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); - background-image: -o-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); - background-image: -moz-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); - background-image: -webkit-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); - background-image: -ms-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); + padding: 1.1em 0.5em 0.5em 0.5em; + float: left; } /** @@ -598,8 +522,9 @@ div.feed_controls { */ .feed_item h1.item_title { font-size: 1.5em; - margin: 0 13em 0 1.6em; + margin: 0 13em 0 1.75em; font-weight: bold; + padding-top: .8em; } .feed_item h1.item_title a { @@ -626,7 +551,7 @@ div.feed_controls { */ .feed_item h2.item_author { color: #aaa; - margin-left: 2.5em; + margin-left: 2.7em; } /** @@ -635,7 +560,7 @@ div.feed_controls { .timeago { float: right; color: #aaa; - margin: .6em 1.2em 0 0; + margin: 1em 1.2em 0 0; line-height: 1.5em; font-size: 1em; } @@ -644,7 +569,10 @@ div.feed_controls { * Body of the feed item */ .feed_item div.body { + overflow-y: hidden; padding: .5em 2.5em 0 2.5em; + max-width: 55em; + font-size: 1.1em; } .feed_item div.body p { diff --git a/img/eye_all.svg b/img/eye_all.svg new file mode 100644 index 000000000..939ec3b32 --- /dev/null +++ b/img/eye_all.svg @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="347.96875" + height="161.3125" + id="svg2" + version="1.1" + inkscape:version="0.48.3.1 r9886" + sodipodi:docname="eye_all.svg"> + <defs + id="defs4" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1.4" + inkscape:cx="104.21376" + inkscape:cy="102.35518" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + fit-margin-top="0" + fit-margin-left="0" + fit-margin-right="0" + fit-margin-bottom="0" + inkscape:window-width="1920" + inkscape:window-height="1021" + inkscape:window-x="0" + inkscape:window-y="27" + inkscape:window-maximized="1"> + <inkscape:grid + type="xygrid" + id="grid3782" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" + originx="-571.40625px" + originy="-564.98718px" /> + </sodipodi:namedview> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-571.40625,-326.0625)"> + <g + id="g4357"> + <path + inkscape:connector-curvature="0" + id="path2985" + d="m 745.78125,326.0625 c -71.00858,0 -134.13606,31.82047 -174.375,81.15625 C 611.67903,456.00543 674.45393,487.375 745,487.375 c 71.00858,0 134.13606,-31.78922 174.375,-81.125 C 879.10222,357.46332 816.32732,326.0625 745.78125,326.0625 z M 745,332.375 c 41.42136,0 75,33.57864 75,75 0,41.42136 -33.57864,75 -75,75 -41.42136,0 -75,-33.57864 -75,-75 0,-41.42136 33.57864,-75 75,-75 z" + style="fill:#333333;fill-opacity:1;stroke:none" /> + <path + transform="translate(9,0)" + d="m 760,407.36218 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" + sodipodi:ry="25" + sodipodi:rx="25" + sodipodi:cy="407.36218" + sodipodi:cx="735" + id="path3787" + style="fill:#333333;fill-opacity:1;stroke:none" + sodipodi:type="arc" /> + </g> + </g> +</svg> diff --git a/img/eye_unread.svg b/img/eye_unread.svg new file mode 100644 index 000000000..c30a84046 --- /dev/null +++ b/img/eye_unread.svg @@ -0,0 +1,89 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="347.96875" + height="161.3125" + id="svg2" + version="1.1" + inkscape:version="0.48.3.1 r9886" + sodipodi:docname="eye_all.svg"> + <defs + id="defs4" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1.4" + inkscape:cx="104.21376" + inkscape:cy="102.35518" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + fit-margin-top="0" + fit-margin-left="0" + fit-margin-right="0" + fit-margin-bottom="0" + inkscape:window-width="1920" + inkscape:window-height="1021" + inkscape:window-x="0" + inkscape:window-y="27" + inkscape:window-maximized="1"> + <inkscape:grid + type="xygrid" + id="grid3782" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" + originx="-571.40625px" + originy="-564.98718px" /> + </sodipodi:namedview> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-571.40625,-326.0625)"> + <g + id="g4357" + style="fill:#aaaaaa;fill-opacity:1"> + <path + inkscape:connector-curvature="0" + id="path2985" + d="m 745.78125,326.0625 c -71.00858,0 -134.13606,31.82047 -174.375,81.15625 C 611.67903,456.00543 674.45393,487.375 745,487.375 c 71.00858,0 134.13606,-31.78922 174.375,-81.125 C 879.10222,357.46332 816.32732,326.0625 745.78125,326.0625 z M 745,332.375 c 41.42136,0 75,33.57864 75,75 0,41.42136 -33.57864,75 -75,75 -41.42136,0 -75,-33.57864 -75,-75 0,-41.42136 33.57864,-75 75,-75 z" + style="fill:#aaaaaa;fill-opacity:1;stroke:none" /> + <path + transform="translate(9,0)" + d="m 760,407.36218 c 0,13.80712 -11.19288,25 -25,25 -13.80712,0 -25,-11.19288 -25,-25 0,-13.80712 11.19288,-25 25,-25 13.80712,0 25,11.19288 25,25 z" + sodipodi:ry="25" + sodipodi:rx="25" + sodipodi:cy="407.36218" + sodipodi:cx="735" + id="path3787" + style="fill:#aaaaaa;fill-opacity:1;stroke:none" + sodipodi:type="arc" /> + </g> + </g> +</svg> diff --git a/js/news.js b/js/news.js index b3229e947..1ae753fa2 100644 --- a/js/news.js +++ b/js/news.js @@ -388,7 +388,6 @@ News={ 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'); /** @@ -457,24 +456,15 @@ News={ 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 @@ -751,8 +741,16 @@ $(document).ready(function(){ bindItemEventListeners(); // filter for newest or all items - $('#feed_filter').change(function(){ - News.Feed.filter($(this).val()); + $('#view').click(function(){ + var term; + if($(this).hasClass('show_all')){ + term = 'unread'; + $(this).addClass('show_unread').removeClass('show_all'); + } else { + term = 'all'; + $(this).addClass('show_all').removeClass('show_unread'); + } + News.Feed.filter(term); }); // mark items whose title was hid under the top edge as read diff --git a/templates/main.php b/templates/main.php index 3ec909b7d..96e419eeb 100644 --- a/templates/main.php +++ b/templates/main.php @@ -5,7 +5,17 @@ <?php if ($_['feedid']){ -echo $this->inc("part.items.header"); +$showAll = OCP\Config::getUserValue(OCP\USER::getUser(), 'news', 'showAll'); + +if($showAll){ + $viewButtonImg = 'eye_all.svg'; + $viewButtonTitle = $l->t('Show everything'); + $viewButtonClass = 'show_all'; +} else { + $viewButtonImg = 'eye_unread.svg'; + $viewButtonTitle = $l->t('Show only unread'); + $viewButtonClass = 'show_unread'; +} ?> @@ -20,12 +30,15 @@ echo $this->inc("part.items.header"); <div id="feed_settings"> <ul class="controls"> <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> + <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 id="view" title="<?php echo $viewButtonTitle; ?>" class="<?php echo $viewButtonClass; ?>"> + <button class="svg"></button> + </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> </li> diff --git a/templates/part.items.header.php b/templates/part.items.header.php deleted file mode 100644 index 0a49b9e91..000000000 --- a/templates/part.items.header.php +++ /dev/null @@ -1,51 +0,0 @@ -<?php - -if(isset($_['feedid'])){ - $feedId = $_['feedid']; - $itemMapper = new OCA\News\ItemMapper(); - switch ($feedId) { - case -1: - $feedTitle = $l->t('Starred'); - $unreadItemCount = $itemMapper->countAllStatus($feedId, OCA\News\StatusFlag::IMPORTANT); - break; - - case -2: - $feedTitle = $l->t('New articles'); - $unreadItemCount = $itemMapper->countEveryItemByStatus(OCA\News\StatusFlag::UNREAD); - break; - - default: - $feedMapper = new OCA\News\FeedMapper(); - $feed = $feedMapper->findById($feedId); - $feedTitle = $feed->getTitle(); - $unreadItemCount = $itemMapper->countAllStatus($feedId, OCA\News\StatusFlag::UNREAD); - break; - } - - if($unreadItemCount > 0){ - $readClass = ''; - } else { - $readClass = 'all_read'; - } -} else { - $feedTitle = ''; - $unreadItemCount = 0; -} - -$showAll = OCP\Config::getUserValue(OCP\USER::getUser(), 'news', 'showAll'); - -?> - -<div class="feed_controls"> - <span title="<?php echo $l->t('Unread items'); ?>" class="unreaditemcounter <?php echo $readClass; ?>"><?php echo $unreadItemCount; ?></span> - <div class="feed_title"> - <h1 title="<?php echo $feedTitle; ?>"><?php echo $feedTitle; ?></h1> - </div> - <div class="controls"> - <input type="button" value="<?php echo $l->t('Mark all read'); ?>" id="mark_all_as_read" /> - <select id="feed_filter"> - <option value="unread" <?php if(!$showAll){ echo 'selected="selected"'; }; ?>><?php echo $l->t('Show only unread articles'); ?></option> - <option value="all" <?php if($showAll){ echo 'selected="selected"'; }; ?>><?php echo $l->t('Show read/unread articles'); ?></option> - </select> - </div> -</div>
\ No newline at end of file diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php index e06dcd38c..e8d91ecb8 100644 --- a/templates/part.listfeed.php +++ b/templates/part.listfeed.php @@ -19,6 +19,5 @@ if($unreadItemsCount == 0){ echo '<li class="feed" data-id="' . $feed->getId() . '" style="background-image: url(' . $favicon . ');">'; echo '<a href="#" " 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>'; echo '</li>'; |