merge

19 files changed, 652 insertions, 522 deletions

diff --git a/templates/7.php b/templates/7.php
new file mode 100644
index 000000000..24dde55b4
--- /dev/null
+++ b/templates/7.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * ownCloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Alessandro Cosentino <cosenal@gmail.com>
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright Alessandro Cosentino 2012
+ * @copyright Bernhard Posselt 2012, 2014
+ */
+
+
+/**
+ * Shortcut for adding scripts to a page
+ * @param string $app the appname
+ * @param string|string[] $file the filename,
+ * if an array is given it will add all scripts
+ */
+function script($app, $file) {
+	if(is_array($file)) {
+		foreach($file as $f) {
+			OC_Util::addScript($app, $f);
+		}
+	} else {
+		OC_Util::addScript($app, $file);
+	}
+}
+
+/**
+ * Shortcut for adding styles to a page
+ * @param string $app the appname
+ * @param string|string[] $file the filename,
+ * if an array is given it will add all styles
+ */
+function style($app, $file) {
+	if(is_array($file)) {
+		foreach($file as $f) {
+			OC_Util::addStyle($app, $f);
+		}
+	} else {
+		OC_Util::addStyle($app, $file);
+	}
+}
\ No newline at end of file
diff --git a/templates/index.php b/templates/index.php
new file mode 100644
index 000000000..3d277dbbf
--- /dev/null
+++ b/templates/index.php
@@ -0,0 +1,73 @@
+<?php
+// owncloud 7 backported style sheets
+$version = \OCP\Util::getVersion();
+
+if ($version[0] === 7 && $version[1] === 0 && $version[2] < 3) {
+    require_once __DIR__ . '/7.php';
+}
+
+if($version[0] > 7 && $version[1] <= 8) {
+    style('news', '7');
+}
+
+script('news', [
+    'vendor/es6-shim/es6-shim.min',
+    'vendor/angular/angular.min',
+    'vendor/angular-route/angular-route.min',
+    'vendor/angular-sanitize/angular-sanitize.min',
+    'vendor/momentjs/min/moment-with-locales.min',
+    'build/app',
+]);
+
+style('news', [
+    'app',
+    'navigation',
+    'content',
+    'settings',
+    'custom'
+]);
+?>
+
+
+<div id="app" ng-app="News" ng-cloak ng-controller="AppController as App">
+
+    <div id="global-loading" class="icon-loading" ng-show="App.loading.isLoading('global')"></div>
+
+    <!-- navigation -->
+    <div id="app-navigation" ng-controller="NavigationController as Navigation" ng-hide="App.loading.isLoading('global')">
+        <news-title-unread-count unread-count="{{ Navigation.getUnreadCount() }}"></news-title-unread-count>
+
+        <ul class="with-icon" data-id="0" news-droppable>
+            <?php print_unescaped($this->inc('part.navigation.addfeed')) ?>
+            <?php print_unescaped($this->inc('part.navigation.addfolder')) ?>
+            <?php print_unescaped($this->inc('part.navigation.unreadfeed')) ?>
+            <?php print_unescaped($this->inc('part.navigation.starredfeed')) ?>
+            <?php print_unescaped($this->inc('part.navigation.feed', ['folderId' => '0'])) ?>
+            <?php print_unescaped($this->inc('part.navigation.folder')) ?>
+        </ul>
+
+        <!-- settings -->
+        <div id="app-settings" ng-controller="SettingsController as Settings">
+            <?php print_unescaped($this->inc('part.settings')) ?>
+        </div>
+    </div>
+
+    <!-- content -->
+    <script type="text/ng-template" id="content.html"><?php print_unescaped($this->inc('part.content')) ?></script>
+
+    <div id="app-content"
+        ng-class="{
+            'loading-content': App.loading.isLoading('content') && !App.loading.isLoading('global'),
+            'first-run': App.isFirstRun()
+        }"
+        tabindex="-1"
+        news-pull-to-refresh>
+        <div id="app-content-wrapper"
+            ng-class="{'autopaging': App.loading.isLoading('autopaging')}"
+            ng-hide="App.loading.isLoading('global')"
+            ng-view
+            news-scroll="#app-content"
+            news-scroll-enabled-mark-read="Content.markReadEnabled()"
+            news-scroll-auto-page="Content.autoPage()"
+            news-scroll-mark-read="Content.scrollRead(itemIds)"></div>
+</div>
diff --git a/templates/main.php b/templates/main.php
deleted file mode 100644
index 8ac778dea..000000000
--- a/templates/main.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<?php
-\OCP\Util::addScript('news', 'vendor/angular/angular');
-\OCP\Util::addScript('news', 'vendor/angular-ui/build/angular-ui');
-\OCP\Util::addScript('news', 'vendor/momentjs/moment');
-\OCP\Util::addScript('news', 'vendor/momentjs/min/langs');
-\OCP\Util::addScript('news', 'vendor/bootstrap/tooltip');
-\OCP\Util::addScript('news', 'public/app');
-
-\OCP\Util::addStyle('news', 'bootstrap/tooltip');
-\OCP\Util::addStyle('news', 'addnew');
-\OCP\Util::addStyle('news', 'feeds');
-\OCP\Util::addStyle('news', 'items');
-\OCP\Util::addStyle('news', 'settings');
-\OCP\Util::addStyle('news', 'showall');
-\OCP\Util::addStyle('news', 'firstrun');
-
-
-// stylesheets for different OC versions
-$version = \OCP\Util::getVersion();
-
-// owncloud 6
-if($version[0] > 5 || ($version[0] >= 5 && $version[1] >= 80)) {
-	\OCP\Util::addStyle('news', 'owncloud6');
-}
-
-
-?>
-
-<div id="app" ng-app="News" ng-cloak ng-controller="AppController">
-	<div id="undo-container">
-		<div undo-notification id="undo">
-			<a href="#"><?php p($l->t('Undo deletion of %s', '{{ getCaption() }}')); ?></a>
-		</div>
-	</div>
-	<div id="app-navigation" ng-controller="FeedController">
-		<news-translate key="appName"><?php p($l->t('News')); ?></news-translate>
-
-		<ul class="with-icon" data-id="0" droppable>
-			<?php print_unescaped($this->inc('part.addnew')) ?>
-			<?php print_unescaped($this->inc('part.feed.unread')) ?>
-			<?php print_unescaped($this->inc('part.feed.starred')) ?>
-			<?php print_unescaped($this->inc('part.listfeed', array('folderId' => '0'))) ?>
-			<?php print_unescaped($this->inc('part.listfolder')) ?>
-			<?php print_unescaped($this->inc('part.showall')); ?>
-		</ul>
-
-		<div id="app-settings" ng-controller="SettingsController">
-			<?php print_unescaped($this->inc('part.settings')) ?>
-		</div>
-
-	</div>
-
-	<div id="app-content" ng-class="{
-			loading: isLoading(),
-			autopaging: isAutoPaging()
-		}"
-		ng-controller="ItemController"
-		ng-show="initialized && !feedBusinessLayer.noFeeds()"
-		news-item-scroll="true"
-		item-shortcuts
-		news-pull-to-refresh="loadNew()"
-		tabindex="-1"
-		news-auto-focus>
-		<?php print_unescaped($this->inc("part.items")); ?>
-	</div>
-	<div id="firstrun" ng-show="initialized && feedBusinessLayer.noFeeds()">
-		<?php print_unescaped($this->inc("part.firstrun")); ?>
-	</div>
-
-</div>
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
deleted file mode 100644
index a6f525262..000000000
--- a/templates/part.addnew.php
+++ /dev/null
@@ -1,73 +0,0 @@
-<li class="add-new">
-	<a class="list-title list-title-with-icon"
-		oc-click-slide-toggle="{
-			selector: '.add-new-popup',
-			hideOnFocusLost: true,
-			cssClass: 'opened'
-		}" 
-		href="#"
-		oc-click-focus="{
-			selector: '.add-new-popup input[ng-model=feedUrl]'
-		}"
- 	>+ <span><?php p($l->t('Add Website'))?></span></a>
-
-	<div class="add-new-popup">
-	
-		<fieldset class="personalblock">
-			<p class="error" ng-show="feedExistsError || folderExistsError">
-				<span ng-show="feedExistsError">
-					<?php p($l->t('Error: address exists already!')); ?>
-				</span>
-				<span ng-show="folderExistsError">
-					<?php p($l->t('Error: folder exists already')); ?>
-				</span>
-			</p>
-			<form>
-
-				<input type="text" 
-					ng-model="feedUrl" 
-					placeholder="<?php p($l->t('Address')); ?>" 
-					name="adress"
-					autofocus>
-				<button title="<?php p($l->t('Add')); ?>" 
-						class="primary"
-						ng-disabled="!feedUrl.trim()"
-						ng-click="addFeed(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')); ?>"		
-						ng-model="folderId"
-						ng-options="folder.name for folder in folderBusinessLayer.getAll()"
-						ng-hide="addNewFolder">
-					<option value="" selected="selected"><?php p($l->t('Choose folder')); ?></option>
-				</select>
-				<button title="<?php p($l->t('New folder')); ?>" 
-						ng-click="addNewFolder=true"
-						ng-hide="addNewFolder"
-						class="action-button new-button action"
-						oc-click-focus="{selector: 'input[name=\'foldername\']'}"></button>
-				<input type="text" 
-						ng-model="folderName" 
-						ng-show="addNewFolder"
-						name="foldername"
-						placeholder="<?php p($l->t('Folder name')); ?>" 
-						autofocus
-						class="folder-input"
-						ui-keyup="{13: 'addFolder(folderName)'}"/>
-				<button title="<?php p($l->t('Back to folder selection')); ?>" 
-						ng-show="addNewFolder"
-						ng-click="addNewFolder=false"
-						class="action-button back-button action"></button>
-				<button title="<?php p($l->t('Create folder')); ?>" 
-						ng-show="addNewFolder"
-						ng-click="addFolder(folderName)"
-						ng-disabled="!folderName.trim()"
-						ng-class="{loading: isAddingFolder()}"
-						class="action-button create-button action">
-				</button>
-			</form>
-		</fieldset>
-	</div>
-</li>
diff --git a/templates/part.content.php b/templates/part.content.php
new file mode 100644
index 000000000..9968e07e1
--- /dev/null
+++ b/templates/part.content.php
@@ -0,0 +1,80 @@
+<div id="first-run">
+    <div>
+        <div class="helper"><h1><?php p($l->t('Add a feed')) ?></h1></div>
+        <div class="title"><h1><?php p($l->t('There are no feeds yet. Go ahead and add some')) ?> :)</h1></div>
+        <div class="helper"><h1><?php p($l->t('Import feeds and articles')) ?></h1></div>
+    </div>
+</div>
+
+<div news-auto-focus="#app-content"
+     ng-class="{compact: Content.isCompactView(), 'feed-view': Content.isFeed()}">
+    <ul>
+        <li class="item {{ Content.getFeed(item.feedId).cssClass }}"
+            ng-repeat="item in Content.getItems() | orderBy:[Content.orderBy()] track by item.id"
+            ng-click="Content.markRead(item.id)"
+            ng-class="{read: !item.unread, open: item.show}"
+            data-id="{{ item.id }}">
+
+            <div class="utils" ng-click="Content.toggleItem(item)">
+                <ul>
+                    <li class="util-spacer"></li>
+                    <li class="title only-in-compact"
+                        title="{{ item.title }}"
+                        ng-style="{ backgroundImage: 'url(' + Content.getFeed(item.feedId).faviconLink + ')'}">
+                        <h1><a>{{ item.title }}</a></h1>
+                    </li>
+                    <li class="only-in-compact">
+                        <time class="date" title="{{ item.pubDate*1000|date:'yyyy-MM-dd HH:mm:ss' }}"
+                            datetime="{{ item.pubDate*1000|date:'yyyy-MM-ddTHH:mm:ssZ' }}">{{ Content.getRelativeDate(item.pubDate) }}
+                        </time>
+                    </li>
+                    <li ng-click="Content.toggleStar(item.id)" class="util" news-stop-propagation>
+                        <button class="star svg" ng-class="{'starred': item.starred}" title="<?php p($l->t('Star')); ?>"></button>
+                    </li>
+                    <li ng-click="Content.toggleKeepUnread(item.id)" class="util" news-stop-propagation>
+                        <button class="icon-toggle toggle-keep-unread" ng-class="{'keep-unread': item.keepUnread}" title="<?php p($l->t('Keep article unread')); ?>"></button>
+                    </li>
+                    <li class="util only-in-compact">
+                        <a class="external icon-link"
+                            target="_blank"
+                            ng-href="{{ item.url }}"
+                            title="<?php p($l->t('Open website')) ?>"
+                            news-stop-propagation>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="article">
+
+                <div class="heading only-in-expanded">
+                    <time class="date" title="{{ item.pubDate*1000|date:'yyyy-MM-dd HH:mm:ss' }}"
+                        datetime="{{ item.pubDate*1000|date:'yyyy-MM-ddTHH:mm:ssZ' }}">{{ Content.getRelativeDate(item.pubDate) }}</time>
+                    <a class="external"
+                        target="_blank"
+                        ng-href="{{ item.url }}"
+                        title="{{ item.title }}">
+                        <h1>{{ item.title }}</h1>
+                    </a>
+                </div>
+
+                <div class="subtitle">
+                    <span class="author" ng-show="item.author"> <?php p($l->t('by')) ?> {{ item.author }}</span>
+                    <span class="source"><?php p($l->t('from')) ?> <a ng-href="#/items/feeds/{{ item.feedId }}/">{{ Content.getFeed(item.feedId).title }}</a></span>
+                </div>
+
+
+
+                <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>
+        </li>
+    </ul>
+</div>
diff --git a/templates/part.feed.starred.php b/templates/part.feed.starred.php
deleted file mode 100644
index 15f5e0a07..000000000
--- a/templates/part.feed.starred.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<li ng-class="{	
-		active: starredBusinessLayer.isActive(0), 
-		unread: starredBusinessLayer.getUnreadCount() > 0
-	}" 
-	ng-show="starredBusinessLayer.isVisible(0)"
-	class="starred">
-	<a class="starred-icon"
-		href="#"
-		ng-click="starredBusinessLayer.load(0)"
-		oc-click-focus="{selector: '#app-content'}">
-	   <?php p($l->t('Starred')) ?>
-	</a>
-	<span class="utils">
-		<span class="unread-counter">
-			{{ unreadCountFormatter(starredBusinessLayer.getUnreadCount()) }}
-		</span>
-	</span>
-</li>
\ No newline at end of file
diff --git a/templates/part.feed.unread.php b/templates/part.feed.unread.php
deleted file mode 100644
index 2fe2eda0c..000000000
--- a/templates/part.feed.unread.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<li ng-class="{
-		active: subscriptionsBusinessLayer.isActive(0),
-		unread: getTotalUnreadCount() > 0
-	}" 
-	ng-show="subscriptionsBusinessLayer.isVisible(0)">
-	<a class="rss-icon" 
-	   href="#" 
-	   ui-if="!feedBusinessLayer.isShowAll()"
-	   ng-click="subscriptionsBusinessLayer.load(0)"
-	   oc-click-focus="{selector: '#app-content'}">
-	   <?php p($l->t('Unread articles'))?>
-	</a>
-		<a class="rss-icon" 
-	   href="#" 
-	   ui-if="feedBusinessLayer.isShowAll()"
-	   ng-click="subscriptionsBusinessLayer.load(0)"
-	   oc-click-focus="{selector: '#app-content'}">
-	   <?php p($l->t('All articles'))?>
-	</a>
-	<span class="utils">
-		<span class="unread-counter"
-			ng-show="getTotalUnreadCount() > 0">
-			{{ unreadCountFormatter(getTotalUnreadCount()) }}
-		</span>
-		<button class="svg action mark-read-icon" 
-			ng-click="subscriptionsBusinessLayer.markRead()"
-			title="<?php p($l->t('Mark read')) ?>"
-			ng-show="getTotalUnreadCount() > 0"
-			oc-tooltip data-placement="bottom"></button>
-	</span>
-</li>
\ No newline at end of file
diff --git a/templates/part.firstrun.php b/templates/part.firstrun.php
deleted file mode 100644
index 6edf8617e..000000000
--- a/templates/part.firstrun.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<h1 class="message">
-	<?php p($l->t('Welcome to the ownCloud News app!')) ?>
-</h1>
\ No newline at end of file
diff --git a/templates/part.items.php b/templates/part.items.php
deleted file mode 100644
index 8b062b787..000000000
--- a/templates/part.items.php
+++ /dev/null
@@ -1,85 +0,0 @@
-<div class="pull-refresh" ng-class="{refresh: refresh}"></div>
-
-<ul>
-	<li class="feed_item"
-
-		ng-repeat="item in itemBusinessLayer.getAll() | orderBy:['-id'] "
-		ng-class="{ read: item.isRead(), compact: isCompactView(), open: item.active}"
-		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="item.active = !item.active" 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="item_utils">
-			<ul class="primary_item_utils">
-				<li>
-					<button 
-					title="<?php p($l->t('star')) ?>"
-					ng-class="{ important: item.isStarred() }"
-					ng-click="itemBusinessLayer.toggleStarred(item.id)"
-					class="star"></button>
-				</li>
-			</ul>
-		</div>
-
-		<h1 class="item_title">
-			<a target="_blank" ng-href="{{ item.url }}">
-				{{ item.title }}
-			</a>
-		</h1>
-
-		<h2 class="item_author">
-			<span ng-show="itemBusinessLayer.noFeedActive() && feedBusinessLayer.getFeedLink(item.feedId)">
-				<?php p($l->t('from')) ?>
-				<a 	target="_blank" ng-href="{{ feedBusinessLayer.getFeedLink(item.feedId) }}"
-					class="from_feed">{{ itemBusinessLayer.getFeedTitle(item.id) }}</a>
-			</span>
-			<span ui-if="item.author">
-				<?php p($l->t('by')) ?>
-				{{ item.author }}
-			</span>
-	</h2>
-
-		<div class="enclosure" ui-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>
-
-		<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)"/>
-				</li>
-			</ul>
-		</div>
-	</li>
-</ul>
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
deleted file mode 100644
index afecddc37..000000000
--- a/templates/part.listfeed.php
+++ /dev/null
@@ -1,81 +0,0 @@
-<li ng-class="{
-		active: feedBusinessLayer.isActive(feed.id),
-		unread: feedBusinessLayer.getUnreadCount(feed.id) > 0,
-		failed: feed.error
-	}"
-	ng-repeat="feed in feedBusinessLayer.getFeedsOfFolder(<?php p($_['folderId']); ?>) | orderBy:'id':true"
-	ng-show="feedBusinessLayer.isVisible(feed.id) || !feed.id"
-	data-id="{{ feed.id }}"
-	class="feed"
-	oc-draggable="{
-		stack: '> li',
-		zIndex: 1000,
-		axis: 'y',
-		delay: 200,
-		containment: '#app-navigation ul',
-		scroll: true,
-		revert: true
-	}">
-
-	<div ui-if="feed.editing" class="rename-feed">
-          <input type="text" ng-model="feed.title" autofocus>
-          <button title="<?php p($l->t('Cancel')); ?>" 
-		ng-click="cancel(feed)"
-		class="action-button back-button action"></button>
-	  <button title="<?php p($l->t('Save')); ?>" 
-		ng-click="feedBusinessLayer.renameFeed(feed.id, feed.title)"
-		class="action-button create-button action">
-	  </button>
-    </div>
-
-	<a 	ng-style="{ backgroundImage: feed.faviconLink }"
-		ng-click="feedBusinessLayer.load(feed.id)"
-		ng-class="{
-			'progress-icon': !feed.id,
-			'problem-icon': feed.error
-		}"
-		ng-hide="feed.editing"
-	   	href="#"
-	   	class="title"
-	   	title="{{ feed.title }}"
-	   	oc-click-focus="{selector: '#app-content'}">
-
-	   {{ feed.title }}
-	</a>
-
-	<span class="utils">
-		
-		<button ng-click="feedBusinessLayer.delete(feed.id)"
-			class="svg action delete-icon delete-button"
-			title="<?php p($l->t('Delete website')); ?>"
-			ng-show="feed.id && !feed.editing && !feed.error"
-			oc-tooltip></button>
-
-		<span class="unread-counter"
-			ng-show="feed.id && feedBusinessLayer.getUnreadCount(feed.id) > 0 && !feed.error && !feed.editing">
-			{{ unreadCountFormatter(feedBusinessLayer.getUnreadCount(feed.id)) }}
-		</span>
-
-		<button class="svg action mark-read-icon"
-			ng-show="feedBusinessLayer.getUnreadCount(feed.id) > 0 && feed.id && !feed.error && !feed.editing"
-			ng-click="feedBusinessLayer.markRead(feed.id)"
-			title="<?php p($l->t('Mark read')); ?>"
-			oc-tooltip></button>
-
-
-		<button class="svg action rename-feed-icon"
-			ng-hide="feed.editing || feed.error"
-			ng-click="edit(feed)"
-			title="<?php p($l->t('Rename feed')); ?>"
-			oc-tooltip></button>
-
-		<button class="svg action delete-icon"
-			ng-click="feedBusinessLayer.markErrorRead(feed.url)"
-			title="<?php p($l->t('Delete website')); ?>"
-			ng-show="feed.error"
-			oc-tooltip></button>
-	</span>
-
-	<div class="message" ng-show="feed.error">{{ feed.error }}</div>
-</li>
-
diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php
deleted file mode 100644
index 89626d5c9..000000000
--- a/templates/part.listfolder.php
+++ /dev/null
@@ -1,76 +0,0 @@
-<li ng-class="{
-		active: folderBusinessLayer.isActive(folder.id), 
-		open: folder.opened && folderBusinessLayer.hasFeeds(folder.id),
-		collapsible: folderBusinessLayer.hasFeeds(folder.id),
-		unread: folderBusinessLayer.getUnreadCount(folder.id) != 0,
-		failed: folder.error
-	}" 
-	ng-repeat="folder in folderBusinessLayer.getAll() | orderBy:'id':true"
-	ng-show="folderBusinessLayer.isVisible(folder.id) || !folder.id"
-	class="folder"
-	data-id="{{ folder.id }}"
-	droppable>
-	<button class="collapse" 
-			ng-hide="folder.editing"
-			title="<?php p($l->t('Collapse'));?>"
-			ng-click="folderBusinessLayer.toggleFolder(folder.id)"></button>
-	<div ui-if="folder.editing" class="rename-feed">
-        <input type="text" ng-model="folder.name" class="folder-input" autofocus>
-        <button title="<?php p($l->t('Cancel')); ?>"
-			ng-click="folderBusinessLayer.cancel(folder.id)"
-			class="action-button back-button action"></button>
-		<button title="<?php p($l->t('Save')); ?>"
-			ng-click="folderBusinessLayer.rename(folder.id, folder.name)"
-			class="action-button create-button action">
-	  </button>
-    </div>
-	<a href="#" 
-	   class="title folder-icon"
-	   ng-hide="folder.editing"
-	   ng-click="folderBusinessLayer.load(folder.id)"
-	   ng-class="{
-			'progress-icon': !folder.id,
-			'problem-icon': folder.error
-		}"
-		oc-click-focus="{selector: '#app-content'}">
-	   {{ folder.name }}
-	</a>
-
-	<span class="utils">
-
-		<button ng-click="folderBusinessLayer.delete(folder.id)"
-				ng-hide="folder.editing || !folder.id"
-				class="svg action delete-icon delete-button" 
-				title="<?php p($l->t('Delete folder')); ?>"
-				oc-tooltip></button>
-
-		<span class="unread-counter"
-			ng-show="folderBusinessLayer.getUnreadCount(folder.id) > 0 && !folder.editing">
-			{{ unreadCountFormatter(folderBusinessLayer.getUnreadCount(folder.id)) }}
-		</span>
-		
-		<button class="svg action mark-read-icon" 
-				ng-show="folderBusinessLayer.getUnreadCount(folder.id) > 0 && folder.id && !folder.editing"
-				ng-click="folderBusinessLayer.markRead(folder.id)"
-				title="<?php p($l->t('Mark read')); ?>"
-				oc-tooltip></button>
-
-		<button class="svg action delete-icon"
-			ng-click="folderBusinessLayer.markErrorRead(folder.name)"
-			title="<?php p($l->t('Delete folder')); ?>"
-			ng-show="folder.error"
-			oc-tooltip></button>
-
-		<button class="svg action rename-feed-icon"
-	                ng-hide="folder.editing"
-			ng-click="folderBusinessLayer.edit(folder.id)"
-			title="<?php p($l->t('Rename folder')); ?>"
-	                oc-tooltip></button>
-
-	</span>
-	<ul>
-		<?php print_unescaped($this->inc('part.listfeed', array('folderId' => 'folder.id'))); ?>
-	</ul>
-	
-	<div class="message" ng-show="folder.error">{{ folder.error }}</div>
-</li>
diff --git a/templates/part.navigation.addfeed.php b/templates/part.navigation.addfeed.php
new file mode 100644
index 000000000..6afc31c5d
--- /dev/null
+++ b/templates/part.navigation.addfeed.php
@@ -0,0 +1,65 @@
+<li class="add-new">
+    <div class="heading icon-add">
+        <button
+            data-apps-slide-toggle="#new-feed"
+            news-focus="[name='address']"><?php p($l->t('Subscribe'))?></button>
+    </div>
+
+    <div class="add-new-popup" id="new-feed">
+
+        <form ng-submit="Navigation.createFeed(feed)" name="feedform">
+            <fieldset ng-disabled="Navigation.addingFeed">
+                <input type="text"
+                    ng-model="feed.url"
+                    ng-class="{'ng-invalid': !Navigation.addingFeed && Navigation.feedUrlExists(feed.url)}"
+                    placeholder="<?php p($l->t('Web address')); ?>"
+                    name="address"
+                    pattern="[^\s]+"
+                    required>
+
+                <p class="error"
+                    ng-show="!Navigation.addingFeed && Navigation.feedUrlExists(feed.url)">
+                    <?php p($l->t('Feed exists already!')); ?>
+                </p>
+
+                <!-- select a folder -->
+                <select name="folder"
+                    title="<?php p($l->t('Folder')); ?>"
+                    ng-if="!Navigation.newFolder"
+                    ng-model="$parent.feed.existingFolder"
+                    ng-options="folder.name for folder in Navigation.getFolders() track by folder.name">
+                    <option value="">-- <?php p($l->t('No folder')); ?> --</option>
+                </select>
+                <button type="button"
+                        class="icon-add add-new-folder-primary"
+                        ng-hide="Navigation.newFolder"
+                        title="<?php p($l->t('New folder')); ?>"
+                        ng-click="Navigation.newFolder=true"
+                        news-focus="#new-feed [name='folderName']"></button>
+
+                <!-- add a folder -->
+                <input type="text"
+                       ng-model="$parent.feed.newFolder"
+                       ng-class="{'ng-invalid': !Navigation.addingFeed && !Navigation.addingFeed && Navigation.newFolder && Navigation.folderNameExists($parent.feed.newFolder)}"
+                       placeholder="<?php p($l->t('Folder name')); ?>"
+                       name="folderName"
+                       ng-if="Navigation.newFolder"
+                       required>
+                <button type="button"
+                        ng-show="Navigation.newFolder"
+                        class="icon-close add-new-folder-primary"
+                        title="<?php p($l->t('Go back')); ?>"
+                        ng-click="Navigation.newFolder=false; feed.folder=''"></button>
+
+
+                <p class="error" ng-show="!Navigation.addingFeed && Navigation.folderNameExists(feed.newFolder)"><?php p($l->t('Folder exists already!')); ?></p>
+
+                <input type="submit"
+                    value="<?php p($l->t('Subscribe')); ?>"
+                    class="primary"
+                    ng-disabled="Navigation.feedUrlExists(feed.url) ||
+                                (Navigation.newFolder && Navigation.folderNameExists(folder.name))">
+            </fieldset>
+        </form>
+    </div>
+</li>