diff options
-rw-r--r-- | css/items.css | 144 | ||||
-rw-r--r-- | js/app/controllers/itemcontroller.coffee | 9 | ||||
-rw-r--r-- | js/app/services/persistence.coffee | 7 | ||||
-rw-r--r-- | js/public/app.js | 16 | ||||
-rw-r--r-- | js/tests/controllers/itemcontrollerSpec.coffee | 13 | ||||
-rw-r--r-- | templates/part.items.php | 38 |
6 files changed, 178 insertions, 49 deletions
diff --git a/css/items.css b/css/items.css index 9c5ca9ab2..19e5e197b 100644 --- a/css/items.css +++ b/css/items.css @@ -93,9 +93,9 @@ /** * Utils panel */ - .feed_item .utils { + .feed_item .item_utils { height: 28px; - margin: 0 0 0 14px; + margin: 0 0 0 8px; float: left; } @@ -117,32 +117,108 @@ } .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'); + .feed_item .star, + .feed_item .external { + background: none; background-repeat: no-repeat; - background-size: 21px 21px; - width: 21px; - height: 21px; - cursor: pointer; + background-position: center center; + background-size: 24px 24px; + width: 24px; + height: 24px; + border: none; + display: block; + margin: 0; + padding: 0; + } + + .feed_item .star { + background-image: url('%appswebroot%/news/img/inactive_star.svg'); + } + + .feed_item .external { + background-image: url('%webroot%/core/img/places/link.svg'); + opacity: 0.4; } - .feed_item .primary_item_utils li.star.important, - .feed_item .primary_item_utils li.star:hover { + .feed_item .external:hover { + opacity: 1; + } + + .feed_item .star.important, + .feed_item .star:hover { background-image: url('%appswebroot%/news/img/active_star.svg'); } - .feed_item .primary_item_utils li.star.important:hover { + .feed_item .star.important:hover { opacity:1; } - .feed_item .primary_item_utils li.star:hover { + .feed_item .star:hover { opacity:0.5; } /** - * Heading which is used for plugins only + * Heading for compact view */ - .feed_item .item_heading { + .feed_item.compact .item_body, + .feed_item.compact .item_title, + .feed_item.compact .item_author, + .feed_item.compact .item_date, + .feed_item.compact .item_utils, + .feed_item.compact .item_bottom_utils, + .feed_item .item_heading, + .feed_item .item_link { display: none; } + .feed_item.compact.open .item_body, + .feed_item.compact.open .item_author, + .feed_item.compact.open .item_bottom_utils, + .feed_item.compact .item_heading, + .feed_item .item_link { + display: block; + } + + .item_heading { + padding: 5px 20px; + background-color: #fafafa; + } + + .item_heading h1 a { + font-weight: bold; + font-size: 13pt; + padding: 0 5px; + margin: 0; + line-height: 40px; + } + + .read .item_heading h1 a { + color: #888; + } + + .feed_item.compact { + padding: 0 !important; + min-height: 0; + } + + .feed_item.compact .item_body { + padding-bottom: 40px; + } + + .feed_item.compact.open .item_heading { + margin-bottom: 15px; + border-bottom: 1px dashed #ddd; + } + + .item_heading .star, + .item_heading .external { + float: left; + margin: 7px 12px 0 0; + } + + .item_heading .timeago { + display: block; + float: right; + line-height: 40px; + } + /** * Feed title @@ -220,7 +296,7 @@ padding: 14px 42px 0 49px; } - .feed_item .body { + .feed_item .item_body { padding: 10px 42px 0 42px; max-width: 770px; font-size: 14px; @@ -230,16 +306,16 @@ height: 80px;*/ } - .feed_item .body.opened { + .feed_item .item_body.opened { } - .feed_item .body p { + .feed_item .item_body p { line-height: 1.5; margin: 7px 0 14px 0; } - .feed_item .body img, .feed_item .body table { + .feed_item .item_body img, .feed_item .item_body table { max-width: 100%; height: auto; overflow: auto; @@ -247,19 +323,19 @@ white-space:normal; } - .feed_item .body > img:first-child { + .feed_item .item_body > img:first-child { padding: 0 14px 0 0; float: left; } - .feed_item .body h1, .feed_item .body h2 { + .feed_item .item_body h1, .feed_item .item_body h2 { font-size: 17px; font-weight: bold; color: #222; margin: 21px 0 0 0; } - .feed_item .body h3 { + .feed_item .item_body h3 { font-size: 15px; font-weight: bold; color: #222; @@ -267,57 +343,57 @@ text-decoration: underline; } - .feed_item .body > div { + .feed_item .item_body > div { margin: 7px 0; } - .feed_item .body a { + .feed_item .item_body a { color: #0000ff; text-decoration: underline; } - .feed_item .body ul { + .feed_item .item_body ul { margin: 7px 0; padding-left: 14px; list-style-type: disc; } - .feed_item .body ol { + .feed_item .item_body ol { margin: 7px 0; padding-left: 21px; } - .feed_item .body ul li { + .feed_item .item_body ul li { cursor: default; line-height: 21px; } - .feed_item .body pre { + .feed_item .item_body pre { padding: 7px 7px 7px 14px; background-color: #dadada; border: 1px solid #ccc; margin: 7px 0 14px 0; overflow-y: auto; } - .feed_item .body pre::-webkit-scrollbar { + .feed_item .item_body pre::-webkit-scrollbar { height: 10px; } - .feed_item .body pre::-webkit-scrollbar-thumb { + .feed_item .item_body pre::-webkit-scrollbar-thumb { background: #333; } - .feed_item .body pre::-webkit-scrollbar-track-piece { + .feed_item .item_body pre::-webkit-scrollbar-track-piece { background: #ddd; } - .feed_item .body code, - .feed_item .body pre { + .feed_item .item_body code, + .feed_item .item_body pre { font-family: monospace; font-size: 16px; } - .feed_item .body blockquote { + .feed_item .item_body blockquote { border-left: 1px solid rgb(210,210,210); margin: 25px 0; padding: 0 0 0 15px; @@ -328,7 +404,7 @@ /** * Line with utils at the bottom */ -.bottom_utils { +.item_bottom_utils { width: 100%; height: 35px; margin: 0; diff --git a/js/app/controllers/itemcontroller.coffee b/js/app/controllers/itemcontroller.coffee index ee2fa7e82..1b5d4a350 100644 --- a/js/app/controllers/itemcontroller.coffee +++ b/js/app/controllers/itemcontroller.coffee @@ -87,6 +87,15 @@ Language, AutoPageLoading, Compact) -> @_$scope.isCompactView = => return @_compact.isCompact() + @_$scope.is = + active: 0 + + @_$scope.toggleOpen = (id) => + if id == @_$scope.is.active + @_$scope.is.active = 0 + else + @_$scope.is.active = id + return new ItemController($scope, ItemBusinessLayer, FeedModel, FeedLoading, AutoPageLoading, FeedBusinessLayer, Language, diff --git a/js/app/services/persistence.coffee b/js/app/services/persistence.coffee index 05558b3e1..176589e9c 100644 --- a/js/app/services/persistence.coffee +++ b/js/app/services/persistence.coffee @@ -39,9 +39,6 @@ $rootScope, $q) -> @deferred = $q.defer() - # items can only be loaded after the active feed is known - @getActiveFeed => - @getItems(@_activeFeed.getType(), @_activeFeed.getId()) @getAllFolders() @@ -53,6 +50,10 @@ $rootScope, $q) -> @userSettingsLanguage() @userSettingsIsCompact() + # items can only be loaded after the active feed is known + @getActiveFeed => + @getItems(@_activeFeed.getType(), @_activeFeed.getId()) + @deferred.promise ### diff --git a/js/public/app.js b/js/public/app.js index f49f2546c..caaf5dc52 100644 --- a/js/public/app.js +++ b/js/public/app.js @@ -867,6 +867,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>. this._$scope.isCompactView = function() { return _this._compact.isCompact(); }; + this._$scope.is = { + active: 0 + }; + this._$scope.toggleOpen = function(id) { + if (id === _this._$scope.is.active) { + return _this._$scope.is.active = 0; + } else { + return _this._$scope.is.active = id; + } + }; } return ItemController; @@ -2722,9 +2732,6 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>. var successCallback, _this = this; this.deferred = $q.defer(); - this.getActiveFeed(function() { - return _this.getItems(_this._activeFeed.getType(), _this._activeFeed.getId()); - }); this.getAllFolders(); successCallback = function() { return _this.deferred.resolve(); @@ -2733,6 +2740,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>. this.userSettingsRead(); this.userSettingsLanguage(); this.userSettingsIsCompact(); + this.getActiveFeed(function() { + return _this.getItems(_this._activeFeed.getType(), _this._activeFeed.getId()); + }); return this.deferred.promise; }; diff --git a/js/tests/controllers/itemcontrollerSpec.coffee b/js/tests/controllers/itemcontrollerSpec.coffee index 955f9fe16..03b6bbc2e 100644 --- a/js/tests/controllers/itemcontrollerSpec.coffee +++ b/js/tests/controllers/itemcontrollerSpec.coffee @@ -189,4 +189,15 @@ describe 'ItemController', -> it 'should bind the compact object', => expect(@scope.isCompactView()).toBe(false) @Compact.handle(true) - expect(@scope.isCompactView()).toBe(true)
\ No newline at end of file + expect(@scope.isCompactView()).toBe(true) + + + it 'should toggle active ones and close old ones', => + expect(@scope.is.active).toBe(0) + + @scope.toggleOpen(3) + expect(@scope.is.active).toBe(3) + + @scope.toggleOpen(3) + expect(@scope.is.active).toBe(0) + diff --git a/templates/part.items.php b/templates/part.items.php index b4049a270..4334baf4d 100644 --- a/templates/part.items.php +++ b/templates/part.items.php @@ -2,27 +2,49 @@ <ul> <li class="feed_item" + ng-repeat="item in itemBusinessLayer.getAll() | orderBy:['-id'] " - ng-class="{ read: item.isRead() }" + ng-class="{ read: item.isRead(), compact: isCompactView(), open: is.active==item.id}" data-id="{{ item.id }}" ng-click="itemBusinessLayer.setRead(item.id)"> + + <div class="item_heading"> + <button ng-class="{ important: item.isStarred() }" + ng-click="itemBusinessLayer.toggleStarred(item.id)" + class="star" + > + </button> + <a class="external" + target="_blank" + ng-href="{{ item.url }}" + title="<?php p($l->t('read on website')) ?>"> + </a> + <span class="timeago" title="{{item.pubDate*1000|date:'dd-MM-yyyy'}}"> + {{ getRelativeDate(item.pubDate) }} + </span> + <h1> + <a ng-click="toggleOpen(item.id)" href="#">{{ item.title }}</a> + </h1> + </div> + <h2 class="item_date"> <span class="timeago" title="{{item.pubDate*1000|date:'dd-MM-yyyy'}}"> {{ getRelativeDate(item.pubDate) }} </span> </h2> - <div class="utils"> + <div class="item_utils"> <ul class="primary_item_utils"> - <li ng-class="{ important: item.isStarred() }" + <li> + <button + title="<?php p($l->t('star')) ?>" + ng-class="{ important: item.isStarred() }" ng-click="itemBusinessLayer.toggleStarred(item.id)" - class="star" - > + class="star"></button> </li> </ul> </div> - <h1 class="item_heading">{{ item.title }}</h1> <h1 class="item_title"> <a target="_blank" ng-href="{{ item.url }}"> {{ item.title }} @@ -47,10 +69,10 @@ ?></audio> </div> - <div class="body" ng-bind-html-unsafe="item.body"> + <div class="item_body" ng-bind-html-unsafe="item.body"> </div> - <div class="bottom_utils"> + <div class="item_bottom_utils"> <ul class="secondary_item_utils" ng-class="{ show_keep_unread: itemBusinessLayer.isKeptUnread(item.id) }"> <li ng-click="itemBusinessLayer.toggleKeepUnread(item.id)" |