From daaf87749dae9c70ccd46911a08c6da1d9ad8150 Mon Sep 17 00:00:00 2001 From: Bernhard Posselt Date: Tue, 9 Sep 2014 18:56:31 +0200 Subject: add css custom classes --- appinfo/app.json | 4 +- appinfo/application.php | 10 + css/content.css | 439 +++++++++++++++----------------------- css/custom.css | 3 + db/feed.php | 13 +- templates/index.php | 108 +++++----- templates/part.content.expand.php | 87 ++++---- templates/part.content.php | 2 +- tests/unit/db/FeedTest.php | 40 +++- 9 files changed, 334 insertions(+), 372 deletions(-) create mode 100644 css/custom.css diff --git a/appinfo/app.json b/appinfo/app.json index 7432a3717..f11b6ccc2 100644 --- a/appinfo/app.json +++ b/appinfo/app.json @@ -3,7 +3,7 @@ "id": "news", "description": "ownCloud News App", "licence": "AGPL", - "version": "2.001", + "version": "2.002", "authors": [ { "name": "Bernhard Posselt", @@ -36,7 +36,7 @@ "categories": ["Multimedia"], "dependencies": { "php": ">=5.4", - "owncloud": ">=6", + "owncloud": ">=7.8", "libs": { "curl": "*" } diff --git a/appinfo/application.php b/appinfo/application.php index a353884cb..01e623adc 100644 --- a/appinfo/application.php +++ b/appinfo/application.php @@ -205,6 +205,16 @@ class Application extends App { ); }); + // compability for plugins pre 3.0 + $container->registerService('FolderBusinessLayer', function($c) { + return $c->query('FolderService'); + }); + $container->registerService('FeedBusinessLayer', function($c) { + return $c->query('FeedService'); + }); + $container->registerService('ItemBusinessLayer', function($c) { + return $c->query('ItemService'); + }); /** * Mappers diff --git a/css/content.css b/css/content.css index b99691cd0..ea8080eeb 100644 --- a/css/content.css +++ b/css/content.css @@ -23,344 +23,259 @@ vertical-align: middle; } -#content-container:after { - content: ''; - display: block; - height: 100%; + +#app-content.loading-content { + background: url('../img/loading.gif') no-repeat; + background-position: calc(50% - 16px) calc(50% - 16px); +} + +#app-content.loading-content > * { + display: none; } -#content-container.autopaging:after { +#app-content-wrapper:after { content: ''; - background-image: url('../img/loading.gif'); - background-position: center; - background-repeat: no-repeat; - background-size: 18px; display: block; height: 100%; } - -#content-container.icon-loading > * { - display: none; +#app-content-wrapper.autopaging:after { + content: ''; + background-image: url('../img/loading.gif') no-repeat; + background-position: calc(50% - 16px) calc(50% - 16px); } - - /** * Rules for a single feed item */ #app-content .item { - border-top: 1px solid #ccc; min-height: 120px; - background-image: linear-gradient(top, #F8F8F8 0, #FFF 84px); - padding: 35px 5px 20px 5px; cursor: default; } -#app-content .item.viewed { - border-right: 5px solid #F28627; +/** + * Utils panel + */ +#app-content .utils { + width: 100%; + border-top: 1px solid #eee; + border-bottom: 1px solid #eee; + line-height: 40px; + padding: 5px 40px; } - -#app-content .item:first-child { - border-top: 0; +#app-content .utils ul { + width: 100%; + line-height: 40px; + height: 40px; + list-style-type: none; + -moz-box-sizing: border-box; + box-sizing: border-box; } - /** - * Utils panel - */ - #app-content .item .star { - height: 25px; - width: 25px; - margin: 2px 0 0 6px; - float: left; + #app-content .utils li { + display: inline-block; + line-height: 40px; + height: 40px; + padding-right: 15px; + } + + #app-content .utils button { + padding: 0; + margin: 5px; + height: 30px; + width: 30px; border: 0; - background-color: #FFF; + background-color: transparent; background-size: 100%; background-repeat: no-repeat; + } + + #app-content .utils .star { background-image: url('../img/inactive_star.svg'); } - #app-content .item .starred, - #app-content .item .star:hover { + #app-content .utils .starred, + #app-content .utils .star:hover { background-image: url('../img/active_star.svg'); } - /** - * Heading for compact view - */ - #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; - } - #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; - } +/** + * Actual content + */ +#app-content .article { + padding: 30px 45px 30px 45px; +} - #app-content .heading { - padding: 5px 20px; - background-color: #fafafa; - } +/** + * Article title + */ +#app-content .title { + font-size: 19px; + line-height: 25px; + margin-right: 200px; + font-weight: bold; + word-wrap: break-word; + display: inline-block; +} - #app-content .heading h1 a { - font-weight: bold; - font-size: 13pt; - padding: 0 5px; - margin: 0; - line-height: 40px; + #app-content .title a { + color: #222; } - #app-content .read .heading h1 a { - color: #888; + #app-content .title a:hover { + color: #222; + text-decoration: underline; } - #app-content .compact .item { - padding: 0 !important; - min-height: 0; - } +#app-content .read .title { + font-weight: normal; +} - #app-content .compact .item .body { - padding-bottom: 40px; + #app-content .read .title a { + color: #888; } - #app-content .compact .item.open .heading { - margin-bottom: 15px; - border-bottom: 1px dashed #ddd; - } - #app-content .heading .star { - float: left; - margin: 7px 12px 0 0; - } - #app-content .heading .external { - float: left; - margin: 8px 12px 0 0; - } +/** + * Timestamp + */ +#app-content .date { + float: right; + display: block; + color: #aaa; + line-height: 25px; + margin-right: 20px; + font-size: 15px; +} - #app-content .heading .timeago { - display: block; - float: right; - line-height: 40px; - } +/** + * Enclosure + */ +#app-content .enclosure { + padding: 14px 42px 0 49px; +} +/** + * Author + */ +#app-content .author { + color: #aaa; + font-size: 15px; +} - /** - * Feed title - */ - #app-content .item .title { - font-size: 19px; - margin: 4px 182px 4px 42px; - font-weight: bold; - word-wrap: break-word; + #app-content .author a { + color: inherit; } - #app-content .item .title a { - color: #222; + #app-content .author a:hover { + text-decoration: underline; } - #app-content .item .title a:hover { - color: #222; - text-decoration: underline; - } - - /** - * Feed title when read - */ - #app-content .item.read .title { - font-weight: normal; - } - #app-content .item.read .title a { - color: #888; - } +/** + * Article body + */ +#app-content .body { + margin-top: 15px; + max-width: 770px; + font-size: 14px; + clear: both; + overflow-x: auto; +} - /** - * Author of the item - */ - #app-content .item .author { - color: #aaa; - font-size: 15px; - margin: 3px 0 5px 42px; + #app-content .body p { + line-height: 1.5; + margin: 7px 0 14px 0; } - #app-content .item .author a { - color: inherit; - } + #app-content .body img, + #app-content .body table { + max-width: 100%; + height: auto; + overflow: auto; + word-wrap: break-word; + white-space:normal; + } - #app-content .item .author a:hover { - text-decoration: underline; - } + #app-content .body > img:first-child, + #app-content .body > div:first-child > img:first-child { + padding: 0 14px 0 0; + float: left; + } - #app-content .timestamp { - display: none; + #app-content .body h1, + #app-content .body h2 { + font-size: 17px; + font-weight: bold; + color: #222; + margin: 21px 0 0 0; } - /** - * Feed timestamp - */ - #app-content .timeago { - float: right; - color: #aaa; - margin: 4px 17px 0 0; + #app-content .body h3 { font-size: 15px; + font-weight: bold; + color: #222; + margin: 21px 0 0 0; + text-decoration: underline; } - /** - * Body of the feed item - */ - #app-content .item .enclosure { - padding: 14px 42px 0 49px; + #app-content .body > div { + margin: 7px 0; } - #app-content .item .body { - padding: 10px 42px 0 42px; - max-width: 770px; - font-size: 14px; - clear: both; - overflow-x: auto; - /*overflow-y: hidden; - height: 80px;*/ + #app-content .body a { + color: #0000ff; + text-decoration: underline; } - #app-content .item .body.opened { - + #app-content .body ul { + margin: 7px 0; + padding-left: 14px; + list-style-type: disc; } - #app-content .item .body p { - line-height: 1.5; - margin: 7px 0 14px 0; - } - - #app-content .item .body img, - #app-content .item .body table { - max-width: 100%; - height: auto; - overflow: auto; - word-wrap: break-word; - white-space:normal; - } - - #app-content .item .body > img:first-child, - #app-content .item .body > div:first-child > img:first-child { - padding: 0 14px 0 0; - float: left; - } - - #app-content .item .body h1, - #app-content .item .body h2 { - font-size: 17px; - font-weight: bold; - color: #222; - margin: 21px 0 0 0; - } - - #app-content .item .body h3 { - font-size: 15px; - font-weight: bold; - color: #222; - margin: 21px 0 0 0; - text-decoration: underline; - } + #app-content .body ol { + margin: 7px 0; + padding-left: 21px; + } - #app-content .item .body > div { - margin: 7px 0; + #app-content .body ul li { + cursor: default; + line-height: 21px; } - #app-content .item .body a { - color: #0000ff; - text-decoration: underline; + #app-content .body pre { + padding: 7px 7px 7px 14px; + background-color: #dadada; + border: 1px solid #ccc; + margin: 7px 0 14px 0; + overflow-y: auto; + } + #app-content .body pre::-webkit-scrollbar { + height: 10px; } - #app-content .item .body ul { - margin: 7px 0; - padding-left: 14px; - list-style-type: disc; + #app-content .body pre::-webkit-scrollbar-thumb { + background: #333; } - #app-content .item .body ol { - margin: 7px 0; - padding-left: 21px; + #app-content .body pre::-webkit-scrollbar-track-piece { + background: #ddd; } - #app-content .item .body ul li { - cursor: default; - line-height: 21px; - } - - #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; - } - #app-content .item .body pre::-webkit-scrollbar { - height: 10px; - } - - #app-content .item .body pre::-webkit-scrollbar-thumb { - background: #333; - } - - #app-content .item .body pre::-webkit-scrollbar-track-piece { - background: #ddd; - } - - #app-content .item .body code, - #app-content .item .body pre { - font-family: monospace; - font-size: 16px; - } - - #app-content .item .body blockquote { - border-left: 1px solid rgb(210,210,210); - margin: 25px 0; - padding: 0 0 0 15px; - font-style: italic; + #app-content .body code, + #app-content .body pre { + font-family: monospace; + font-size: 16px; } - -/** - * Line with utils at the bottom - */ -#app-content .item .bottom-utils { - width: 100%; - height: 35px; - margin: 0; - padding: 0; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - - #app-content .item .bottom-utils ul { - float: right; - margin: 0 17px; + #app-content .body blockquote { + border-left: 1px solid rgb(210,210,210); + margin: 25px 0; + padding: 0 0 0 15px; + font-style: italic; } - #app-content .item .bottom-utils, - #app-content .item .bottom-utils a { - color: #000; - } - - #app-content .item:hover .bottom-utils li { - display: inline-block; - } - - #app-content .item .bottom-utils li { - padding-left: 25px; - } - - #app-content .item .bottom-utils li input[type=checkbox]{ - margin-left: 5px; - } diff --git a/css/custom.css b/css/custom.css new file mode 100644 index 000000000..d87a2669a --- /dev/null +++ b/css/custom.css @@ -0,0 +1,3 @@ +/** + * Add your custom styles here + */ \ No newline at end of file diff --git a/db/feed.php b/db/feed.php index d5c7314c2..32565f09b 100644 --- a/db/feed.php +++ b/db/feed.php @@ -73,7 +73,7 @@ class Feed extends Entity implements IAPI, \JsonSerializable { * Turns entitie attributes into an array */ public function jsonSerialize() { - return $this->serializeFields([ + $serialized = $this->serializeFields([ 'id', 'userId', 'urlHash', @@ -88,6 +88,17 @@ class Feed extends Entity implements IAPI, \JsonSerializable { 'deletedAt', 'articlesPerUpdate', ]); + + $url = parse_url($this->link)['host']; + + // strip leading www. to avoid css class confusion + if (strpos($url, 'www.') === 0) { + $url = substr($url, 4); + } + + $serialized['cssClass'] = str_replace('.', '-', $url); + + return $serialized; } public function toAPI() { diff --git a/templates/index.php b/templates/index.php index 0413227b0..e5f0d6485 100644 --- a/templates/index.php +++ b/templates/index.php @@ -1,61 +1,61 @@
-
- - -
- - -
    - inc('part.navigation.addfeed')) ?> - inc('part.navigation.addfolder')) ?> - inc('part.navigation.unreadfeed')) ?> - inc('part.navigation.starredfeed')) ?> - inc('part.navigation.feed', ['folderId' => '0'])) ?> - inc('part.navigation.folder')) ?> -
- - -
- inc('part.settings')) ?> -
- -
- - - - -
-
- -
+
+ + +
+ + +
    + inc('part.navigation.addfeed')) ?> + inc('part.navigation.addfolder')) ?> + inc('part.navigation.unreadfeed')) ?> + inc('part.navigation.starredfeed')) ?> + inc('part.navigation.feed', ['folderId' => '0'])) ?> + inc('part.navigation.folder')) ?> +
+ + +
+ inc('part.settings')) ?> +
+ +
+ + + + +
+
diff --git a/templates/part.content.expand.php b/templates/part.content.expand.php index 15209dca7..2d7aaa550 100644 --- a/templates/part.content.expand.php +++ b/templates/part.content.expand.php @@ -1,58 +1,53 @@ -
  • -

    - - {{ Content.getRelativeDate(item.pubDate) }} - -

    - - - -

    - - {{ item.title }} - -

    - -

    - - t('from')) ?> - {{ Content.getFeed(item.feedId).title }} - - - t('by')) ?> - {{ item.author }} - -

    - -
    - - t('Download')) ?> - -
    - - -
    - -
    +
      +
    • + +
    • - +
    + +
    + + +

    + + {{ item.title }} + +

    + +

    + + t('from')) ?> + {{ Content.getFeed(item.feedId).title }} + + + t('by')) ?> + {{ item.author }} + +

    + +
    + + t('Download')) ?> + +
    + +
    + +
    • diff --git a/templates/part.content.php b/templates/part.content.php index 251a01772..b0e39f8d9 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -3,7 +3,7 @@
    -
      +
        inc('part.content.compact')); ?>
      diff --git a/tests/unit/db/FeedTest.php b/tests/unit/db/FeedTest.php index 60fbeacc6..f7fe9b885 100644 --- a/tests/unit/db/FeedTest.php +++ b/tests/unit/db/FeedTest.php @@ -17,27 +17,55 @@ namespace OCA\News\Db; class FeedTest extends \PHPUnit_Framework_TestCase { - public function testToAPI() { + private function createFeed() { $feed = new Feed(); $feed->setId(3); - $feed->setUrl('http://google'); + $feed->setUrl('http://google.com/some/weird/path'); $feed->setTitle('title'); $feed->setFaviconLink('favicon'); $feed->setAdded(123); $feed->setFolderId(1); $feed->setUnreadCount(321); - $feed->setLink('https://google'); + $feed->setLink('https://www.google.com/some/weird/path'); + + return $feed; + } + + public function testToAPI() { + $feed = $this->createFeed(); + + $this->assertEquals([ + 'id' => 3, + 'url' => 'http://google.com/some/weird/path', + 'title' => 'title', + 'faviconLink' => 'favicon', + 'added' => 123, + 'folderId' => 1, + 'unreadCount' => 321, + 'link' => 'https://www.google.com/some/weird/path' + ], $feed->toAPI()); + } + + + public function testSerialize() { + $feed = $this->createFeed(); $this->assertEquals([ 'id' => 3, - 'url' => 'http://google', + 'url' => 'http://google.com/some/weird/path', 'title' => 'title', 'faviconLink' => 'favicon', 'added' => 123, 'folderId' => 1, 'unreadCount' => 321, - 'link' => 'https://google' - ], $feed->toAPI()); + 'link' => 'https://www.google.com/some/weird/path', + 'userId' => null, + 'urlHash' => '44168618f55392b145629d6b3922e84b', + 'preventUpdate' => null, + 'deletedAt' => null, + 'articlesPerUpdate' => null, + 'cssClass' => 'custom-google-com', + ], $feed->jsonSerialize()); } -- cgit v1.2.3