diff options
| -rw-r--r-- | css/feeds.css | 8 | ||||
| -rw-r--r-- | css/items.css | 538 | ||||
| -rw-r--r-- | img/mark_read.svg | 99 | ||||
| -rw-r--r-- | templates/part.listfeed.php | 18 | ||||
| -rw-r--r-- | templates/part.listfolder.php | 36 |
5 files changed, 381 insertions, 318 deletions
diff --git a/css/feeds.css b/css/feeds.css index e79ab9a4f..4b0fc0224 100644 --- a/css/feeds.css +++ b/css/feeds.css @@ -26,13 +26,14 @@ } #left-content .utils button { - margin: 5px 0 0 0; + margin: 0 5px 0 0; background-position: center; background-repeat: no-repeat; background-color: transparent; border: 0; box-shadow: none; - display: block; + display: none; + padding: 8px; } #left-content li:hover .utils button { @@ -40,7 +41,7 @@ } .unread-counter { - padding: 6px 8px 5px; + padding: 8px 6px 8px 5px; overflow: hidden; text-overflow: ellipsis; text-align: center; @@ -69,6 +70,7 @@ button.action:hover { } .delete-icon { + background-position: center 10px !important; background-image: url('%webroot%/core/img/actions/delete.svg'); } diff --git a/css/items.css b/css/items.css index 9ecc973cf..864112f3e 100644 --- a/css/items.css +++ b/css/items.css @@ -1,17 +1,17 @@ #right-content:after { - content: ''; - display: block; - height: 100%; + content: ''; + display: block; + height: 100%; } #right-content.loading { - background-image: url('%webroot%/core/img/loading.gif'); - background-position: center; - background-repeat: no-repeat; + background-image: url('%webroot%/core/img/loading.gif'); + background-position: center; + background-repeat: no-repeat; } #right-content.loading > ul { - display: none; + display: none; } @@ -19,281 +19,281 @@ * Rules for a single feed item */ .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); - padding: 2.5em 0 0 0; - cursor: default; + 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); + padding: 2.5em 0 0 0; + cursor: default; } .feed_item.viewed { - border-right: 5px solid #F28627; + border-right: 5px solid #F28627; } .feed_item:first-child { - border-top: 0; + border-top: 0; } - /** - * Utils panel - */ - .feed_item .utils { - height: 2em; - margin: 0 0 0 1em; - float: left; - } - - /** - * Primary feed utils which are always shown - */ - .feed_item .primary_item_utils { - float: left; - } - - .feed_item .primary_item_utils li { - display: inline-block; - line-height: 1.5em; - font-size: 1em; - color: #aaa; - float: left; - margin-left: ; - cursor: default; - } - - .feed_item .primary_item_utils li:first-child { margin: 0} - .feed_item .primary_item_utils li.star { - background-image: url('%appswebroot%/news/img/inactive_star.svg'); - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - width: 1.5em; - height: 1.5em; - cursor: pointer; - } - - .feed_item .primary_item_utils li.star.important, - .feed_item .primary_item_utils li.star:hover { - background-image: url('%appswebroot%/news/img/active_star.svg'); - } - - /** - * Feed title - */ - .feed_item h1.item_title { - font-size: 1.5em; - margin: 0 13em 0 2.1em; - font-weight: bold; - word-break: break-all; - } - - .feed_item h1.item_title a { - color: #222; - } - .feed_item h1.item_title a:hover { - color: #222; - text-decoration: underline; - } - - /** - * Feed title when read - */ - .feed_item.read h1.item_title { - font-weight: normal; - } - - .feed_item.read h1.item_title a { - color: #888; - } - - /** - * Title of the feed to which the item belongs - */ - .feed_item h2.item_feed_title { - color: #aaa; - font-size: 1.1em; - margin-left: 3em; - } - - /** - * Author of the item - */ - .feed_item h2.item_author { - color: #aaa; - font-size: 1.1em; - margin: .2em 0 0 3em; - } - - .feed_item h2.item_author a { - color: inherit; - } - - .feed_item h2.item_author a:hover { - text-decoration: underline; - } - - .timestamp { - display: none; - } - - /** - * Feed timestamp - */ - .timeago { - float: right; - color: #aaa; - margin: 0 1.2em 0 0; - font-size: 1.1em; - } - - /** - * Body of the feed item - */ - .feed_item .enclosure { - padding: 1em 3em 0 3.5em; - } - - .feed_item div.body { - padding: .75em 3em 0 3em; - max-width: 55em; - font-size: 1.1em; - clear: both; - overflow: auto; - } - - .feed_item div.body p { - line-height: 1.5; - margin: .5em 0 1em 0; - } - - .feed_item div.body img, .feed_item div.body table { - max-width: 100%; - height: auto; - overflow: auto; - word-wrap: break-word; - } - - .feed_item div.body > img:first-child { - padding: 0 1em 0 0; - float: left; - } - - .feed_item div.body h1, .feed_item div.body h2 { - font-size: 1.25em; - font-weight: bold; - color: #222; - margin: 1.5em 0 0 0; - } - - .feed_item div.body h3 { - font-size: 1.1em; - font-weight: bold; - color: #222; - margin: 1.5em 0 0 0; - text-decoration: underline; - } - - .feed_item div.body > div { - margin: .5em 0; - } - - .feed_item div.body a { - color: #0000ff; - text-decoration: underline; - } - - .feed_item div.body ul { - margin: .5em 0; - padding-left: 1em; - list-style-type: disc; - } - - .feed_item div.body ol { - margin: .5em 0; - padding-left: 1.5em; - } - - .feed_item div.body ul li { - cursor: default; - line-height: 1.5em; - } - - .feed_item div.body pre { - padding: .5em .5em .5em 1em; - background-color: #dadada; - border: 1px solid #ccc; - margin: .5em 0 1em 0; - background-image: linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); - background-image: -o-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); - background-image: -moz-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); - background-image: -webkit-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); - background-image: -ms-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); - overflow-y: auto; - } - - .feed_item div.body pre code { - font-family: monospace; - font-size: 1.5em; - } - .feed_item div.body > *:last-child { - margin-bottom: 0; - } + /** + * Utils panel + */ + .feed_item .utils { + height: 2em; + margin: 0 0 0 1em; + float: left; + } + + /** + * Primary feed utils which are always shown + */ + .feed_item .primary_item_utils { + float: left; + } + + .feed_item .primary_item_utils li { + display: inline-block; + line-height: 1.5em; + font-size: 1em; + color: #aaa; + float: left; + margin-left: ; + cursor: default; + } + + .feed_item .primary_item_utils li:first-child { margin: 0} + .feed_item .primary_item_utils li.star { + background-image: url('%appswebroot%/news/img/inactive_star.svg'); + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + width: 1.5em; + height: 1.5em; + cursor: pointer; + } + + .feed_item .primary_item_utils li.star.important, + .feed_item .primary_item_utils li.star:hover { + background-image: url('%appswebroot%/news/img/active_star.svg'); + } + + /** + * Feed title + */ + .feed_item h1.item_title { + font-size: 1.5em; + margin: 0 13em 0 2.1em; + font-weight: bold; + word-break: break-all; + } + + .feed_item h1.item_title a { + color: #222; + } + .feed_item h1.item_title a:hover { + color: #222; + text-decoration: underline; + } + + /** + * Feed title when read + */ + .feed_item.read h1.item_title { + font-weight: normal; + } + + .feed_item.read h1.item_title a { + color: #888; + } + + /** + * Title of the feed to which the item belongs + */ + .feed_item h2.item_feed_title { + color: #aaa; + font-size: 1.1em; + margin-left: 3em; + } + + /** + * Author of the item + */ + .feed_item h2.item_author { + color: #aaa; + font-size: 1.1em; + margin: .2em 0 0 3em; + } + + .feed_item h2.item_author a { + color: inherit; + } + + .feed_item h2.item_author a:hover { + text-decoration: underline; + } + + .timestamp { + display: none; + } + + /** + * Feed timestamp + */ + .timeago { + float: right; + color: #aaa; + margin: 0 1.2em 0 0; + font-size: 1.1em; + } + + /** + * Body of the feed item + */ + .feed_item .enclosure { + padding: 1em 3em 0 3.5em; + } + + .feed_item div.body { + padding: .75em 3em 0 3em; + max-width: 55em; + font-size: 1.1em; + clear: both; + overflow: auto; + } + + .feed_item div.body p { + line-height: 1.5; + margin: .5em 0 1em 0; + } + + .feed_item div.body img, .feed_item div.body table { + max-width: 100%; + height: auto; + overflow: auto; + word-wrap: break-word; + } + + .feed_item div.body > img:first-child { + padding: 0 1em 0 0; + float: left; + } + + .feed_item div.body h1, .feed_item div.body h2 { + font-size: 1.25em; + font-weight: bold; + color: #222; + margin: 1.5em 0 0 0; + } + + .feed_item div.body h3 { + font-size: 1.1em; + font-weight: bold; + color: #222; + margin: 1.5em 0 0 0; + text-decoration: underline; + } + + .feed_item div.body > div { + margin: .5em 0; + } + + .feed_item div.body a { + color: #0000ff; + text-decoration: underline; + } + + .feed_item div.body ul { + margin: .5em 0; + padding-left: 1em; + list-style-type: disc; + } + + .feed_item div.body ol { + margin: .5em 0; + padding-left: 1.5em; + } + + .feed_item div.body ul li { + cursor: default; + line-height: 1.5em; + } + + .feed_item div.body pre { + padding: .5em .5em .5em 1em; + background-color: #dadada; + border: 1px solid #ccc; + margin: .5em 0 1em 0; + background-image: linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); + background-image: -o-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); + background-image: -moz-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); + background-image: -webkit-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); + background-image: -ms-linear-gradient(top, rgb(215,215,215) 0%, rgb(220,220,220) 100%); + overflow-y: auto; + } + + .feed_item div.body pre code { + font-family: monospace; + font-size: 1.5em; + } + .feed_item div.body > *:last-child { + margin-bottom: 0; + } /** * Line with utils at the bottom */ .bottom_utils { - width: 100%; - height: 2.5em; - margin: 0; - padding: 0; - box-sizing: border-box; - -moz-box-sizing: border-box; + width: 100%; + height: 2.5em; + margin: 0; + padding: 0; + box-sizing: border-box; + -moz-box-sizing: border-box; } - /** - * Secondary feed items which are only shown on hover - */ - .feed_item .secondary_item_utils { - float: right; - margin: 0 1.2em; - } - - - .feed_item .secondary_item_utils, .feed_item .secondary_item_utils a { - color: #000; - } - - .feed_item:hover .secondary_item_utils li { - display: inline-block; - } - - .feed_item .secondary_item_utils li { - padding-left: 25px; - display: none; - } - - /** - * Secondary feed items which are only shown on hover - */ - .feed_item .show_keep_unread .keep_unread{ - display: block; - } - - .feed_item li.share_link { - background-image: url('%webroot%/core/img/actions/share.svg'); - background-repeat: no-repeat; - background-position: right center; - padding-right: 20px; - } - - .feed_item:hover .secondary_item_utils li.keep_unread { - cursor: pointer; - } - - .feed_item .secondary_item_utils li input[type=checkbox]{ - margin-left: 5px; - } + /** + * Secondary feed items which are only shown on hover + */ + .feed_item .secondary_item_utils { + float: right; + margin: 0 1.2em; + } + + + .feed_item .secondary_item_utils, .feed_item .secondary_item_utils a { + color: #000; + } + + .feed_item:hover .secondary_item_utils li { + display: inline-block; + } + + .feed_item .secondary_item_utils li { + padding-left: 25px; + display: none; + } + + /** + * Secondary feed items which are only shown on hover + */ + .feed_item .show_keep_unread .keep_unread{ + display: block; + } + + .feed_item li.share_link { + background-image: url('%webroot%/core/img/actions/share.svg'); + background-repeat: no-repeat; + background-position: right center; + padding-right: 20px; + } + + .feed_item:hover .secondary_item_utils li.keep_unread { + cursor: pointer; + } + + .feed_item .secondary_item_utils li input[type=checkbox]{ + margin-left: 5px; + } diff --git a/img/mark_read.svg b/img/mark_read.svg index c7f259417..282f9dc4e 100644 --- a/img/mark_read.svg +++ b/img/mark_read.svg @@ -1,21 +1,78 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
- <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
-]>
-<svg version="1.1"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
- x="0px" y="0px" width="16px" height="16px" viewBox="-0.5 -0.5 16 16"
- overflow="visible" enable-background="new -0.5 -0.5 16 16" xml:space="preserve">
-<defs>
-</defs>
-<circle fill="#FFFFFF" cx="7.5" cy="7.5" r="7.5"/>
-<g>
- <path fill="#575756" d="M7.323,10.541c-0.389,0.389-1.025,0.389-1.414,0l-0.354-0.354c-0.389-0.389-0.388-1.025,0-1.414
- l4.242-4.242c0.389-0.389,1.025-0.389,1.414,0l0.353,0.353c0.389,0.389,0.389,1.026,0,1.415L7.323,10.541z"/>
-</g>
-<g>
- <path fill="#575756" d="M7.323,10.541c-0.389,0.389-1.025,0.389-1.414,0L3.436,8.065C3.046,7.676,3.047,7.04,3.437,6.651
- l0.352-0.351c0.39-0.389,1.026-0.388,1.415,0l2.473,2.472c0.389,0.389,0.389,1.025,0,1.414L7.323,10.541z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In --> + +<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" + version="1.1" + x="0px" + y="0px" + width="16px" + height="16px" + viewBox="-0.5 -0.5 16 16" + overflow="visible" + enable-background="new -0.5 -0.5 16 16" + xml:space="preserve" + id="svg3047" + inkscape:version="0.48.4 r9939" + sodipodi:docname="mark_read.svg"><metadata + id="metadata3063"><rdf:RDF><cc:Work + rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1366" + inkscape:window-height="709" + id="namedview3061" + showgrid="false" + inkscape:zoom="15" + inkscape:cx="13.497865" + inkscape:cy="8" + inkscape:window-x="0" + inkscape:window-y="27" + inkscape:window-maximized="1" + inkscape:current-layer="svg3047" /> +<defs + id="defs3049"> +</defs> +<circle + cx="7.5" + cy="7.5" + r="7.5" + id="circle3051" + style="opacity:0;fill:#ffffff" + sodipodi:cx="7.5" + sodipodi:cy="7.5" + sodipodi:rx="7.5" + sodipodi:ry="7.5" + transform="translate(0.06666667,0.4)" /> +<g + id="g3053" + transform="translate(0.06666667,1.0666667)"> + <path + d="m 7.3832425,11.620439 c -0.5497484,0.549748 -1.4485659,0.549748 -1.9983143,0 L 4.884643,11.120153 c -0.5497484,-0.549748 -0.5483351,-1.4485653 0,-1.9983137 l 5.994942,-5.9949428 c 0.549749,-0.5497484 1.448566,-0.5497484 1.998315,0 l 0.498872,0.4988719 c 0.549748,0.5497484 0.549748,1.4499791 0,1.9997275 L 7.3832425,11.620439 z" + id="path3055" + inkscape:connector-curvature="0" + style="fill:#575756" /> +</g> +<g + id="g3057" + transform="translate(0.06666667,1.0666667)"> + <path + d="m 7.3832425,11.620439 c -0.5497484,0.549748 -1.4485659,0.549748 -1.9983143,0 L 1.8899981,8.1212689 C 1.3388365,7.5715205 1.3402497,6.672703 1.8914113,6.1229546 L 2.3888701,5.6269092 c 0.5511616,-0.5497484 1.449979,-0.5483352 1.9997274,0 L 7.8835276,9.120426 c 0.5497487,0.5497484 0.5497487,1.448566 0,1.998314 l -0.5002851,0.501699 z" + id="path3059" + inkscape:connector-curvature="0" + style="fill:#575756" /> +</g> +</svg>
\ No newline at end of file diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php index 7b9f1b57f..ed75bc0a6 100644 --- a/templates/part.listfeed.php +++ b/templates/part.listfeed.php @@ -12,16 +12,18 @@ </a> <span class="utils"> + + <button class="svg action mark-read-icon" + ng-click="markAllRead(feedType.Feed, feed.id)" + title="<?php p($l->t('Mark all read')); ?>"></button> + <span class="unread-counter"> - {{ getUnreadCount(feedType.Feed, feed.id) }} + {{ getUnreadCount(feedType.Feed, feed.id) }} </span> - + <button ng-click="delete(feedType.Feed, feed.id)" - class="svg action delete-icon" - title="<?php p($l->t('Delete feed')); ?>"></button> - - <button class="svg action mark-read-icon" - ng-click="markAllRead(feedType.Feed, feed.id)" - title="<?php p($l->t('Mark all read')); ?>"></button> + class="svg action delete-icon" + title="<?php p($l->t('Delete feed')); ?>"></button> + </span> </li> diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php index b685e607b..79e4120c1 100644 --- a/templates/part.listfolder.php +++ b/templates/part.listfolder.php @@ -3,14 +3,14 @@ open: folder.open, collapsible: folder.hasChildren, unread: getUnreadCount(feedType.Folder, folder.id)!=0}" - ng-repeat="folder in folders" - ng-show="folder.show" - class="folder" - data-id="{{folder.id}}" - droppable> - <button class="collapse" - title="<?php p($l->t('Collapse'));?>" - ng-click="toggleFolder(folder.id)"></button> + ng-repeat="folder in folders" + ng-show="folder.show" + class="folder" + data-id="{{folder.id}}" + droppable> + <button class="collapse" + title="<?php p($l->t('Collapse'));?>" + ng-click="toggleFolder(folder.id)"></button> <a href="#" class="title" class="folder-icon" @@ -19,20 +19,22 @@ </a> <span class="utils"> - <button ng-click="delete(feedType.Folder, folder.id)" - class="svg action delete-icon" - title="<?php p($l->t('Delete folder')); ?>"></button> - <button class="svg action edit-icon" - ng-click="renameFolder(folder.id)" - title="<?php p($l->t('Rename folder')); ?>"></button> + <button class="svg action mark-read-icon" + ng-click="markAllRead(feedType.Folder, folder.id)" + title="<?php p($l->t('Mark all read')); ?>"></button> <span class="unread-counter"> {{ getUnreadCount(feedType.Folder, folder.id) }} </span> - <button class="svg action mark-read-icon" - ng-click="markAllRead(feedType.Folder, folder.id)" - title="<?php p($l->t('Mark all read')); ?>"></button> + + <button ng-click="delete(feedType.Folder, folder.id)" + class="svg action delete-icon" + title="<?php p($l->t('Delete folder')); ?>"></button> + + <button class="svg action edit-icon" + ng-click="renameFolder(folder.id)" + title="<?php p($l->t('Rename folder')); ?>"></button> </span> <ul> <?php print_unescaped($this->inc('part.listfeed', array('folderId' => 'folder.id'))); ?> |
