fix autopaging and marking read, render items

4 files changed, 65 insertions, 30 deletions

diff --git a/templates/main.php b/templates/main.php
index 103c1dc76..b9b00a4a3 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -12,7 +12,7 @@
 \OCP\Util::addStyle('news', 'bootstrap/tooltip');
 \OCP\Util::addStyle('news', 'app');
 //\OCP\Util::addStyle('news', 'navigation');
-//\OCP\Util::addStyle('news', 'content');
+\OCP\Util::addStyle('news', 'content');
 \OCP\Util::addStyle('news', 'settings');
 ?>
 
@@ -42,14 +42,17 @@
 	<script type="text/ng-template" id="content.html"><?php print_unescaped($this->inc('part.content')) ?></script>
 
 	<div id="app-content"
-		ng-class="{'icon-loading': App.loading.isLoading('content')}"
+		ng-class="{
+			'icon-loading': App.loading.isLoading('content'),
+			'autopaging': App.loading.isLoading('autopaging')
+		}"
 		ng-hide="App.loading.isLoading('global')"
 		ng-view
 		tabindex="-1"
 		news-scroll
 		news-scroll-enabled-auto-page="Content.autoPagingEnabled()"
 		news-scroll-enabled-mark-read="Content.markReadEnabled()"
-		news-scroll-auto-page="Content.autoPage"
-		news-scroll-mark-read="Content.scrollRead"></div>
+		news-scroll-auto-page="Content.autoPage()"
+		news-scroll-mark-read="Content.scrollRead(itemIds)"></div>
 
 </div>
diff --git a/templates/part.content.php b/templates/part.content.php
index 18351d453..00363f073 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -3,24 +3,30 @@
 </div>
 
 <div news-auto-focus="#app-content" ng-if="!App.isFirstRun()">
-    <ul ng-if="isCompactView()">
+    <!-- compact view -->
+    <ul ng-if="Content.isCompactView()" class="compact">
 
     </ul>
-    <ul ng-if="!isCompactView()">
-        <li class="article"
+
+    <!-- full view -->
+    <ul ng-if="!Content.isCompactView()">
+        <li class="item"
             ng-repeat="item in Content.getItems() | orderBy:[Content.orderBy()] track by item.id"
             ng-click="Content.markRead(item.id)"
-            ng-class="{read: !item.unread}">
+            ng-class="{read: !item.unread}"
+            data-id="{{ item.id }}">
 
             <h2 class="date">
-                <span class="timeago" title="{{item.pubDate*1000|date:'dd-MM-yyyy'}}">
-                    {{ getRelativeDate(item.pubDate) }}
+                <span class="timeago" title="{{ item.pubDate*1000|date:'dd-MM-yyyy' }}">
+                    {{ Content.getRelativeDate(item.pubDate) }}
                 </span>
             </h2>
 
-            <button class="star"
+            <button class="star svg"
                     ng-click="Content.toggleStar(item.id)"
-                    ng-class="{starred: item.starred}"></button>
+                    ng-class="{
+                        'starred': item.starred
+                    }"></button>
 
             <h1 class="title">
                 <a target="_blank" ng-href="{{ item.url }}">
@@ -28,9 +34,36 @@
                 </a>
             </h1>
 
-            <div class="item_body" news-bind-html-unsafe="item.body"></div>
+            <h2 class="author">
+                <span>
+                    <?php p($l->t('from')) ?>
+                    <a ng-href="#/items/feeds/{{ item.feedId }}"
+                        class="from_feed">{{ Content.getFeed(item.feedId).title }}</a>
+                </span>
+                <span ng-show="item.author">
+                    <?php p($l->t('by')) ?>
+                    {{ item.author }}
+                </span>
+            </h2>
+
+            <div class="enclosure" ng-if="item.enclosureLink">
+                <news-audio type="{{ item.enclosureType }}"
+                            ng-src="{{ item.enclosureLink|trustUrl }}"/>
+                    <?php p($l->t('Download')) ?>
+                </news-audio>
+            </div>
+
 
+            <div class="body" news-bind-html-unsafe="item.body"></div>
 
+            <div class="bottom-utils">
+                <ul>
+                    <li ng-click="Content.toggleKeepUnread(item.id)">
+                        <label for="keep-unread"><?php p($l->t('Keep unread')); ?></label>
+                        <input type="checkbox" name="keep-unread" ng-checked="item.keepUnread"/>
+                    </li>
+                </ul>
+            </div>
         </li>
     </ul>
 </div>
diff --git a/templates/part.items.php b/templates/part.items.php
index 200d5fffd..e1f761900 100644
--- a/templates/part.items.php
+++ b/templates/part.items.php
@@ -59,23 +59,22 @@
 				<?php p($l->t('by')) ?>
 				{{ item.author }}
 			</span>
-	</h2>
+		</h2>
 
-		<div class="enclosure" ui-if="item.enclosureLink">
+		<div class="enclosure" ng-if="item.enclosureLink">
 			<news-audio type="{{ item.enclosureType }}" ng-src="{{ item.enclosureLink|trustUrl }}"/><?php
 				p($l->t('Download'))
 			?></audio>
 		</div>
 
-		<div class="item_body" news-bind-html-unsafe="item.body">
+		<div class="body" news-bind-html-unsafe="item.body">
 		</div>
 
-		<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)"
-					class="keep_unread"><?php p($l->t('Keep unread')); ?>
-					<input type="checkbox" ng-checked="itemBusinessLayer.isKeptUnread(item.id)"/>
+		<div class="bottom-utils">
+			<ul ng-show="item.keepUnread">
+				<li ng-click="Content.toggleKeepUnread(item.id)">
+					<label for="keep-unread"><?php p($l->t('Keep unread')); ?></label>
+					<input type="checkbox" name="keep-unread" ng-checked="item.keepUnread"/>
 				</li>
 			</ul>
 		</div>
diff --git a/templates/part.settings.php b/templates/part.settings.php
index cfef921f9..5b2bf599a 100644
--- a/templates/part.settings.php
+++ b/templates/part.settings.php
@@ -8,23 +8,23 @@
   <h3><?php p($l->t('Settings')); ?></h3>
 
   <p ng-click="Settings.toggleSetting('compact')">
-    <input type="checkbox" ng-checked="Settings.getSetting('compact')">
-    <?php p($l->t('Use compact view')); ?>
+    <input type="checkbox" ng-checked="Settings.getSetting('compact')" name="compact">
+    <label for="compact"><?php p($l->t('Use compact view')); ?></label>
   </p>
 
   <p ng-click="Settings.toggleSetting('showAll')">
-    <input type="checkbox" ng-checked="Settings.getSetting('showAll')">
-    <?php p($l->t('Show unread articles')); ?>
+    <input type="checkbox" ng-checked="Settings.getSetting('showAll')" name="showAll">
+    <label for="showAll"><?php p($l->t('Show unread articles')); ?></label>
   </p>
 
   <p ng-click="Settings.toggleSetting('oldestFirst')">
-    <input type="checkbox" ng-checked="Settings.getSetting('oldestFirst')">
-    <?php p($l->t('Order by oldest first')); ?>
+    <input type="checkbox" ng-checked="Settings.getSetting('oldestFirst')" name="oldestFirst">
+    <label for="oldestFirst"><?php p($l->t('Order by oldest first')); ?></label>
   </p>
 
   <p ng-click="Settings.toggleSetting('preventReadOnScroll')">
-    <input type="checkbox" ng-checked="Settings.getSetting('preventReadOnScroll')">
-    <?php p($l->t('Do not as mark read when scrolling')); ?>
+    <input type="checkbox" ng-checked="Settings.getSetting('preventReadOnScroll')" name="preventReadOnScroll">
+    <label for="preventReadOnScroll"><?php p($l->t('Do not as mark read when scrolling')); ?></label>
   </p>