add folder drop down

6 files changed, 99 insertions, 74 deletions

diff --git a/templates/main.php b/templates/main.php
index e879c8a18..19e98bf56 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -25,7 +25,8 @@
 		<news-title-unread-count unread-count="{{ Navigation.getUnreadCount() }}"></news-title-unread-count>
 
 		<ul class="with-icon" data-folder-id="0" news-droppable>
-			<?php print_unescaped($this->inc('part.addnew')) ?>
+			<?php print_unescaped($this->inc('part.addfeed')) ?>
+			<?php print_unescaped($this->inc('part.addfolder')) ?>
 			<?php print_unescaped($this->inc('part.feed.unread')) ?>
 			<?php print_unescaped($this->inc('part.feed.starred')) ?>
 			<?php print_unescaped($this->inc('part.listfeed', ['folderId' => '0'])) ?>
@@ -42,21 +43,20 @@
 	<!-- content -->
 	<script type="text/ng-template" id="content.html"><?php print_unescaped($this->inc('part.content')) ?></script>
 
-	<div id="app-content"></div>
-		<div
-		id="content-container"
-		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(itemIds)">
+	<div id="app-content">
+		<div id="app-content-wrapper"
+			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(itemIds)">
 
 		</div>
 </div>
diff --git a/templates/part.addfeed.php b/templates/part.addfeed.php
new file mode 100644
index 000000000..73b66bf92
--- /dev/null
+++ b/templates/part.addfeed.php
@@ -0,0 +1,52 @@
+<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.url, feed.folder)" name="feedform">
+            <input type="text"
+                ng-model="feed.url"
+                placeholder="<?php p($l->t('Web address')); ?>"
+                name="address"
+                pattern="[^\s]+"
+                required>
+
+            <!-- select a folder -->
+            <select name="folder"
+                title="<?php p($l->t('Folder')); ?>"
+                ng-if="!Navigation.newFolder"
+                ng-model="feed.folder"
+                ng-options="folder.name for folder in Navigation.getAllFolders() track by folder.name">
+                <option value="" selected="selected">-- <?php p($l->t('None')); ?> --</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"></button>
+
+            <!-- add a folder -->
+            <input type="text"
+                   ng-model="feed.folder"
+                   placeholder="<?php p($l->t('Folder name')); ?>"
+                   name="folderName"
+                   class="folder-input"
+                   ng-if="Navigation.newFolder"
+                   required
+                   news-auto-focus>
+            <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"></button>
+
+            <input type="submit"
+                value="<?php p($l->t('Subscribe')); ?>"
+                class="primary">
+        </form>
+    </div>
+</li>
diff --git a/templates/part.addfolder.php b/templates/part.addfolder.php
new file mode 100644
index 000000000..3fb48526e
--- /dev/null
+++ b/templates/part.addfolder.php
@@ -0,0 +1,26 @@
+<li class="add-new">
+    <div class="heading icon-add">
+        <button
+            data-apps-slide-toggle="#new-folder"
+            news-focus="[name='folderName']"><?php p($l->t('New Folder'))?></button>
+    </div>
+
+    <div class="add-new-popup" id="new-folder">
+
+        <form ng-submit="Navigation.createFolder(folderName)" name="folderform">
+
+            <!-- add a folder -->
+            <input type="text"
+                   ng-model="folderName"
+                   placeholder="<?php p($l->t('Folder name')); ?>"
+                   title="<?php p($l->t('Folder name')); ?>"
+                   name="folderName"
+                   required
+                   news-auto-focus>
+
+            <input type="submit"
+                value="<?php p($l->t('Subscribe')); ?>"
+                class="primary">
+        </form>
+    </div>
+</li>
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
deleted file mode 100644
index 5bc48b23d..000000000
--- a/templates/part.addnew.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<li class="add-new">
-    <div class="heading icon-add">
-        <button
-            data-apps-slide-toggle=".add-new-popup"
-            news-focus="[name='address']"><?php p($l->t('Subscribe'))?></button>
-    </div>
-
-    <div class="add-new-popup">
-
-        <form>
-            <input type="text"
-                ng-model="feedUrl"
-                placeholder="<?php p($l->t('Web-Address')); ?>"
-                name="address">
-
-            <!-- standard folder select box -->
-            <div ng-hide="Navigation.newFolder">
-                <select name="folder"
-                    title="<?php p($l->t('Folder')); ?>"
-                    ng-model="folderId"
-                    ng-options="folder.name for folder in Navigation.getAllFolders() track by folder.name"
-                    ng-hide="addNewFolder">
-                    <option value="" selected="selected"><?php p($l->t('Top Level')); ?></option>
-                </select>
-                <button class="icon-add add-new-folder-primary"
-                        title="<?php p($l->t('New Folder')); ?>"
-                        ng-click="Navigation.newFolder=true"
-                        news-focus="[name='folderName']">
-            </div>
-
-            <!-- adding a new folder -->
-            <div ng-show="Navigation.newFolder">
-                <input type="text"
-                       ng-model="folderName"
-                       placeholder="<?php p($l->t('Folder-Name')); ?>"
-                       name="folderName"
-                       class="folder-input"
-                       ng-if="Navigation.newFolder">
-                <button class="icon-checkmark add-new-folder-primary"
-                        title="<?php p($l->t('Create folder')); ?>"
-                        ng-click="Navigation.newFolder=false">
-                <button class="icon-close add-new-folder-secondary"
-                        title="<?php p($l->t('Cancel')); ?>"
-                        ng-click="Navigation.newFolder=false">
-            </div>
-
-            </button>
-            <input title="<?php p($l->t('Subscribe')); ?>"
-                    value="<?php p($l->t('Subscribe')); ?>"
-                    class="primary"
-                    type="submit"
-                    ng-disabled="!feedUrl.trim()"
-                    ng-click="createFeed(feedUrl, folderId.id)">
-        </form>
-
-    </div>
-</li>
diff --git a/templates/part.feed.starred.php b/templates/part.feed.starred.php
index 56c0b394b..4d70b4c39 100644
--- a/templates/part.feed.starred.php
+++ b/templates/part.feed.starred.php
@@ -3,6 +3,7 @@
 		unread: Navigation.getStarredCount() > 0
 	}"
 	class="starred">
+
 	<a class="icon-starred" ng-href="#/items/starred/">
 	   <?php p($l->t('Starred')) ?>
 	</a>
diff --git a/templates/part.feed.unread.php b/templates/part.feed.unread.php
index bef1cf6b7..867ba1792 100644
--- a/templates/part.feed.unread.php
+++ b/templates/part.feed.unread.php
@@ -23,7 +23,10 @@
 
     <div class="app-navigation-entry-menu">
         <ul>
-        	<li><button class="icon-checkmark" title="<?php p($l->t('Read all')); ?>" ng-click="Navigation.markRead()"></button></li>
+        	<li><button class="icon-checkmark"
+                        title="<?php p($l->t('Read all')); ?>"
+                        ng-click="Navigation.markRead()"></button>
+            </li>
         </ul>
     </div>