diff options
| -rw-r--r-- | css/content.css | 132 | ||||
| -rw-r--r-- | css/navigation.css | 65 | ||||
| -rw-r--r-- | css/oc8.css | 4 | ||||
| -rw-r--r-- | img/actions/more.svg | 5 | ||||
| -rw-r--r-- | templates/main.php | 1 | ||||
| -rw-r--r-- | templates/part.addnew.php | 16 | ||||
| -rw-r--r-- | templates/part.listfeed.php | 2 |
7 files changed, 102 insertions, 123 deletions
diff --git a/css/content.css b/css/content.css index 247afa1f3..27274822a 100644 --- a/css/content.css +++ b/css/content.css @@ -48,7 +48,7 @@ /** * Rules for a single feed item */ -.item { +#app-content .item { border-top: 1px solid #ccc; min-height: 120px; background-image: linear-gradient(top, #F8F8F8 0, #FFF 84px); @@ -56,19 +56,19 @@ cursor: default; } -.item.viewed { +#app-content .item.viewed { border-right: 5px solid #F28627; } -.item:first-child { +#app-content .item:first-child { border-top: 0; } /** * Utils panel */ - .item .star { + #app-content .item .star { height: 25px; width: 25px; margin: 2px 0 0 6px; @@ -80,37 +80,37 @@ background-image: url('../img/inactive_star.svg'); } - .item .starred, - .item .star:hover { + #app-content .item .starred, + #app-content .item .star:hover { background-image: url('../img/active_star.svg'); } /** * Heading for compact view */ - .compact .item .body, - .compact .item .title, - .compact .item .author, - .compact .item .date, - .compact .item .bottom-utils, - .item .heading, - .item .link { + #app-content .compact .item .body, + #app-content .compact .item .title, + #app-content .compact .item .author, + #app-content .compact .item .date, + #app-content .compact .item .bottom-utils, + #app-content .item .heading, + #app-content .item .link { display: none; } - .compact .item.open .body, - .compact .item.open .author, - .compact .item.open .bottom-utils, - .compact .item .heading, - .item .link { + #app-content .compact .item.open .body, + #app-content .compact .item.open .author, + #app-content .compact .item.open .bottom-utils, + #app-content .compact .item .heading, + #app-content .item .link { display: block; } - .heading { + #app-content .heading { padding: 5px 20px; background-color: #fafafa; } - .heading h1 a { + #app-content .heading h1 a { font-weight: bold; font-size: 13pt; padding: 0 5px; @@ -118,35 +118,35 @@ line-height: 40px; } - .read .heading h1 a { + #app-content .read .heading h1 a { color: #888; } - .compact .item { + #app-content .compact .item { padding: 0 !important; min-height: 0; } - .compact .item .body { + #app-content .compact .item .body { padding-bottom: 40px; } - .compact .item.open .heading { + #app-content .compact .item.open .heading { margin-bottom: 15px; border-bottom: 1px dashed #ddd; } - .heading .star { + #app-content .heading .star { float: left; margin: 7px 12px 0 0; } - .heading .external { + #app-content .heading .external { float: left; margin: 8px 12px 0 0; } - .heading .timeago { + #app-content .heading .timeago { display: block; float: right; line-height: 40px; @@ -156,17 +156,17 @@ /** * Feed title */ - .item .title { + #app-content .item .title { font-size: 19px; margin: 4px 182px 4px 42px; font-weight: bold; word-wrap: break-word; } - .item .title a { + #app-content .item .title a { color: #222; } - .item .title a:hover { + #app-content .item .title a:hover { color: #222; text-decoration: underline; } @@ -174,39 +174,39 @@ /** * Feed title when read */ - .item.read .title { + #app-content .item.read .title { font-weight: normal; } - .item.read .title a { + #app-content .item.read .title a { color: #888; } /** * Author of the item */ - .item .author { + #app-content .item .author { color: #aaa; font-size: 15px; margin: 3px 0 5px 42px; } - .item .author a { + #app-content .item .author a { color: inherit; } - .item .author a:hover { + #app-content .item .author a:hover { text-decoration: underline; } - .timestamp { + #app-content .timestamp { display: none; } /** * Feed timestamp */ - .timeago { + #app-content .timeago { float: right; color: #aaa; margin: 4px 17px 0 0; @@ -216,11 +216,11 @@ /** * Body of the feed item */ - .item .enclosure { + #app-content .item .enclosure { padding: 14px 42px 0 49px; } - .item .body { + #app-content .item .body { padding: 10px 42px 0 42px; max-width: 770px; font-size: 14px; @@ -230,16 +230,17 @@ height: 80px;*/ } - .item .body.opened { + #app-content .item .body.opened { } - .item .body p { + #app-content .item .body p { line-height: 1.5; margin: 7px 0 14px 0; } - .item .body img, .item .body table { + #app-content .item .body img, + #app-content .item .body table { max-width: 100%; height: auto; overflow: auto; @@ -247,20 +248,21 @@ white-space:normal; } - .item .body > img:first-child, - .item .body > div:first-child > img:first-child { + #app-content .item .body > img:first-child, + #app-content .item .body > div:first-child > img:first-child { padding: 0 14px 0 0; float: left; } - .item .body h1, .item .body h2 { + #app-content .item .body h1, + #app-content .item .body h2 { font-size: 17px; font-weight: bold; color: #222; margin: 21px 0 0 0; } - .item .body h3 { + #app-content .item .body h3 { font-size: 15px; font-weight: bold; color: #222; @@ -268,57 +270,57 @@ text-decoration: underline; } - .item .body > div { + #app-content .item .body > div { margin: 7px 0; } - .item .body a { + #app-content .item .body a { color: #0000ff; text-decoration: underline; } - .item .body ul { + #app-content .item .body ul { margin: 7px 0; padding-left: 14px; list-style-type: disc; } - .item .body ol { + #app-content .item .body ol { margin: 7px 0; padding-left: 21px; } - .item .body ul li { + #app-content .item .body ul li { cursor: default; line-height: 21px; } - .item .body pre { + #app-content .item .body pre { padding: 7px 7px 7px 14px; background-color: #dadada; border: 1px solid #ccc; margin: 7px 0 14px 0; overflow-y: auto; } - .item .body pre::-webkit-scrollbar { + #app-content .item .body pre::-webkit-scrollbar { height: 10px; } - .item .body pre::-webkit-scrollbar-thumb { + #app-content .item .body pre::-webkit-scrollbar-thumb { background: #333; } - .item .body pre::-webkit-scrollbar-track-piece { + #app-content .item .body pre::-webkit-scrollbar-track-piece { background: #ddd; } - .item .body code, - .item .body pre { + #app-content .item .body code, + #app-content .item .body pre { font-family: monospace; font-size: 16px; } - .item .body blockquote { + #app-content .item .body blockquote { border-left: 1px solid rgb(210,210,210); margin: 25px 0; padding: 0 0 0 15px; @@ -329,7 +331,7 @@ /** * Line with utils at the bottom */ -.item .bottom-utils { +#app-content .item .bottom-utils { width: 100%; height: 35px; margin: 0; @@ -338,25 +340,25 @@ -moz-box-sizing: border-box; } - .item .bottom-utils ul { + #app-content .item .bottom-utils ul { float: right; margin: 0 17px; } - .item .bottom-utils, - .item .bottom-utils a { + #app-content .item .bottom-utils, + #app-content .item .bottom-utils a { color: #000; } - .item:hover .bottom-utils li { + #app-content .item:hover .bottom-utils li { display: inline-block; } - .item .bottom-utils li { + #app-content .item .bottom-utils li { padding-left: 25px; } - .item .bottom-utils li input[type=checkbox]{ + #app-content .item .bottom-utils li input[type=checkbox]{ margin-left: 5px; } diff --git a/css/navigation.css b/css/navigation.css index a7ddc359c..f8135d1b5 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -7,17 +7,20 @@ * @author Bernhard Posselt <dev@bernhard-posselt.com> * @copyright Bernhard Posselt 2014 */ -.add-new .heading { + +/* add new feed or folder */ +#app-navigation .add-new .heading { height: 44px; width: 100%; - padding: 0; + padding: 0 0 0 44px; + background-position: 14px center; } -.add-new .heading:hover { +#app-navigation .add-new .heading:hover { background-color: #ccc; } -.add-new .heading button { +#app-navigation .add-new .heading button { padding: 0; line-height: 44px; width: 100%; @@ -28,33 +31,33 @@ font-weight: normal; } -.add-new-popup { +#app-navigation .add-new-popup { display: none; - height: 120px; + height: 150px; padding: 15px 10px; box-shadow: inset 0px 0px 10px #dedede; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } -.add-new-popup input[type=text] { +#app-navigation .add-new-popup input[type=text] { width: 170px; } -.add-new-popup select { +#app-navigation .add-new-popup select { width: 170px; margin-top: 1px !important; height: 30px; background-color: #eee; } -.add-new-popup input { +#app-navigation .add-new-popup input { margin-top: 15px; box-sizing: border-box; } -.add-new-popup input, -.add-new-popup select { +#app-navigation .add-new-popup input, +#app-navigation .add-new-popup select { margin: 0 0 5px 0; display: inline-block; float: left; @@ -63,7 +66,7 @@ border-right: 0; } -.add-new-popup button { +#app-navigation .add-new-popup button { margin: 0 0 5px 0; display: inline-block; float: left; @@ -73,66 +76,46 @@ margin-top: 1px; } -.add-new-popup .action-button { +#app-navigation .add-new-popup .action-button { width: 30px; background-position: center; background-repeat: no-repeat; } -.add-new-popup .back-button { +#app-navigation .add-new-popup .back-button { border-radius: 0; background-image: url('../img/delete.svg'); } -.add-new-popup .new-button { +#app-navigation .add-new-popup .new-button { border-radius: 0; background-image: url('../img/add.svg'); border-top-right-radius: 5px; border-bottom-right-radius: 5px; } -.add-new-popup .create-button { +#app-navigation .add-new-popup .create-button { border-radius: 0; background-image: url('../img/mark_read.svg'); border-top-right-radius: 5px; border-bottom-right-radius: 5px; } -.add-new-popup .error { +#app-navigation .add-new-popup .error { padding: 0 0 10px 0; } -.starred-icon { +/* navigation */ +#app-navigation .starred-icon { background-image: url('../img/starred.png'); } -.subscriptions-icon { +#app-navigation .subscriptions-icon { background-image: url('../img/rss.svg'); } -.unread > a, -.unread > .utils .unread-counter { - font-weight: bold; -} - -#app-navigation .with-icon .list-title { - padding-left:16px; -} - -#app-navigation .with-icon .list-title span { - display:none; - margin-left:6px; -} - -#app-navigation .with-icon .list-title:hover span { - display:inline; -} - -#app-navigation .with-icon .opened span { - display:inline; -} - #app-navigation .unread > a { + font-weight: bold; padding-right: 32px; } diff --git a/css/oc8.css b/css/oc8.css index 27b75dbef..82ce421cf 100644 --- a/css/oc8.css +++ b/css/oc8.css @@ -134,4 +134,6 @@ .app-navigation-entry-options li button:focus { opacity: 1; background-color: transparent; -}
\ No newline at end of file +} + +/* Loading sign instead of icon by adding the loading class to the list item */ diff --git a/img/actions/more.svg b/img/actions/more.svg deleted file mode 100644 index 9ab5d4243..000000000 --- a/img/actions/more.svg +++ /dev/null @@ -1,5 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/"> - <rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/> - <path d="m3 6c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.105 0-2 0.8954-2 2s0.895 2 2 2 2-0.8954 2-2-0.895-2-2-2z" fill-rule="evenodd"/> -</svg> diff --git a/templates/main.php b/templates/main.php index b0b450493..9185eb2f7 100644 --- a/templates/main.php +++ b/templates/main.php @@ -10,7 +10,6 @@ \OCP\Util::addStyle('news', 'bootstrap/tooltip'); \OCP\Util::addStyle('news', 'app'); -\OCP\Util::addStyle('news', 'oc8'); \OCP\Util::addStyle('news', 'navigation'); \OCP\Util::addStyle('news', 'content'); \OCP\Util::addStyle('news', 'settings'); diff --git a/templates/part.addnew.php b/templates/part.addnew.php index af07dc566..afbbec642 100644 --- a/templates/part.addnew.php +++ b/templates/part.addnew.php @@ -1,8 +1,8 @@ <li class="add-new"> - <div class="list-title list-title-with-icon heading"> + <div class="heading icon-add"> <button data-apps-slide-toggle=".add-new-popup" - news-focus="[ng-model='feedUrl']">+ <?php p($l->t('Add Website'))?></button> + news-focus="[ng-model='feedUrl']"><?php p($l->t('Add Website'))?></button> </div> <div class="add-new-popup"> @@ -15,19 +15,13 @@ <?php p($l->t('Error: folder exists already')); ?> </span> </p> - <form> + <form> <input type="text" ng-model="feedUrl" placeholder="<?php p($l->t('Address')); ?>" name="address" autofocus> - <button title="<?php p($l->t('Add')); ?>" - class="primary" - ng-disabled="!feedUrl.trim()" - ng-click="createFeed(feedUrl, folderId.id)"><?php p($l->t('Add')); ?></button> - </form> - <form> <select name="folder" data-create="<?php p($l->t('New folder')); ?>" title="<?php p($l->t('Folder')); ?>" @@ -59,6 +53,10 @@ ng-class="{loading: Navigation.isAddingFolder()}" class="action-button create-button action"> </button> + <button title="<?php p($l->t('Add')); ?>" + class="primary" + ng-disabled="!feedUrl.trim()" + ng-click="createFeed(feedUrl, folderId.id)"><?php p($l->t('Add')); ?></button> </form> </div> diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php index 964d2f7e2..0d3fcc761 100644 --- a/templates/part.listfeed.php +++ b/templates/part.listfeed.php @@ -54,7 +54,7 @@ </ul> </div> - <div class="app-navigation-entry-options" ng-class="{'app-navigation-entry-options-open': optionsId == feed.id}"> + <div class="app-navigation-entry-menu" ng-class="{'app-navigation-entry-menu-open': optionsId == feed.id}"> <ul> <li><button class="icon-rename" title="<?php p($l->t('Rename feed')); ?>"></button></li> <li><button class="icon-delete" title="<?php p($l->t('Delete website')); ?>"></button></li> |
