add folder drop down

14 files changed, 139 insertions, 124 deletions

diff --git a/css/content.css b/css/content.css
index 037a923f7..b99691cd0 100644
--- a/css/content.css
+++ b/css/content.css
@@ -23,11 +23,6 @@
     vertical-align: middle;
 }
 
-#content-container {
-    min-width: 100%;
-    min-height: 100%;
-}
-
 #content-container:after {
     content: '';
     display: block;
diff --git a/css/navigation.css b/css/navigation.css
index e19e6a594..69987b5c1 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -49,7 +49,8 @@
     margin-right: 0;
 }
 
-#app-navigation .add-new-popup select {
+#app-navigation .add-new-popup select,
+#app-navigation .add-new-popup .folder-input {
     width: calc(100% - 36px);
     border-right: 0;
     border-top-right-radius: 0;
@@ -57,8 +58,7 @@
     float: left;
 }
 
-#app-navigation .add-new-popup .add-new-folder-primary,
-#app-navigation .add-new-popup .add-new-folder-secondary {
+#app-navigation .add-new-popup .add-new-folder-primary {
     float: right;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
@@ -68,20 +68,6 @@
     margin-right: 0;
 }
 
-#app-navigation .add-new-popup .add-new-folder-secondary {
-    border-radius: 0;
-    border-right: 0;
-    border-left: 0;
-    margin-left: 0;
-}
-
-#app-navigation .add-new-popup input[name='folderName'] {
-    width: calc(100% - 72px);
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    float: left;
-}
-
 
 #app-navigation .add-new-popup .error {
     padding: 0 0 10px 0;
diff --git a/js/build/app.js b/js/build/app.js
index 47cf21bd3..deb23419b 100644
--- a/js/build/app.js
+++ b/js/build/app.js
@@ -382,15 +382,18 @@ var $__build_47_app__ = function () {
             var currentId = parseInt($route.current.params.id, 10);
             return $route.current && $route.current.$$route.type === FEED_TYPE.FEED && currentId === feedId;
           };
+          this.folderNameExists = function (folderName) {
+            return FolderResource.get(folderName) !== undefined;
+          };
+          this.createFolder = function (folderName) {
+            console.log(folderName);
+          };
           this.isAddingFolder = function () {
             return true;
           };
           this.createFeed = function (feedUrl, folderId) {
             console.log(feedUrl + folderId);
           };
-          this.createFolder = function (folderName) {
-            console.log(folderName);
-          };
           this.cancelRenameFolder = function (folderId) {
             console.log(folderId);
           };
@@ -636,21 +639,14 @@ var $__build_47_app__ = function () {
               var feed = {
                   url: url,
                   folderId: folderId,
-                  title: title
+                  title: title,
+                  faviconLink: '../css/loading.gif'
                 };
               if (!this.get(url)) {
                 this.add(feed);
               }
               this.updateFolderCache();
-              return this.http({
-                method: 'POST',
-                url: this.BASE_URL + '/feeds',
-                data: {
-                  url: url,
-                  parentFolderId: folderId,
-                  title: title
-                }
-              });
+              console.log(feed);
             },
             undoDelete: function () {
               if (this.deleted) {
@@ -1146,7 +1142,7 @@ var $__build_47_app__ = function () {
         'use strict';
         var scrollArea = $('#app-content');
         var noInputFocused = function (element) {
-          return !(element.is('input') && element.is('select') && element.is('textarea') && element.is('checkbox'));
+          return !(element.is('input') || element.is('select') || element.is('textarea') || element.is('checkbox'));
         };
         var noModifierKey = function (event) {
           return !(event.shiftKey || event.altKey || event.ctrlKey || event.metaKey);
@@ -1554,11 +1550,11 @@ var $__build_47_app__ = function () {
             var menu = elm.siblings('.app-navigation-entry-menu');
             var button = $(elm).find('.app-navigation-entry-utils-menu-button button');
             button.click(function () {
-              menu.toggle();
+              menu.toggleClass('open');
             });
             scope.$on('documentClicked', function (scope, event) {
               if (event.target !== button[0]) {
-                menu.hide();
+                menu.removeClass('open');
               }
             });
           }
diff --git a/js/controller/NavigationController.js b/js/controller/NavigationController.js
index a848a4b39..d5e159de9 100644
--- a/js/controller/NavigationController.js
+++ b/js/controller/NavigationController.js
@@ -111,6 +111,14 @@ function ($route, FEED_TYPE, FeedResource, FolderResource, ItemResource,
             currentId === feedId;
     };
 
+    this.folderNameExists = (folderName) => {
+        return FolderResource.get(folderName) !== undefined;
+    };
+
+    this.createFolder = (folderName) => {
+        console.log(folderName);
+    };
+
     // TBD
     this.isAddingFolder = () => {
         return true;
@@ -120,10 +128,6 @@ function ($route, FEED_TYPE, FeedResource, FolderResource, ItemResource,
         console.log(feedUrl + folderId);
     };
 
-    this.createFolder = (folderName) => {
-        console.log(folderName);
-    };
-
     this.cancelRenameFolder = (folderId) => {
         console.log(folderId);
     };
diff --git a/js/directive/AppNavigationEntryUtils.js b/js/directive/AppNavigationEntryUtils.js
index 2c7953bd2..146d0f22a 100644
--- a/js/directive/AppNavigationEntryUtils.js
+++ b/js/directive/AppNavigationEntryUtils.js
@@ -24,12 +24,12 @@ app.directive('appNavigationEntryUtils', () => {
                 .find('.app-navigation-entry-utils-menu-button button');
 
             button.click(() => {
-                menu.toggle();
+                menu.toggleClass('open');
             });
 
             scope.$on('documentClicked', (scope, event) => {
                 if (event.target !== button[0]) {
-                    menu.hide();
+                    menu.removeClass('open');
                 }
             });
         }
diff --git a/js/gui/KeyboardShortcuts.js b/js/gui/KeyboardShortcuts.js
index 92e34c57c..b5f27e8a0 100644
--- a/js/gui/KeyboardShortcuts.js
+++ b/js/gui/KeyboardShortcuts.js
@@ -20,9 +20,9 @@
 
     const noInputFocused = (element) => {
         return !(
-            element.is('input') &&
-            element.is('select') &&
-            element.is('textarea') &&
+            element.is('input') ||
+            element.is('select') ||
+            element.is('textarea') ||
             element.is('checkbox')
         );
     };
diff --git a/js/service/FeedResource.js b/js/service/FeedResource.js
index 1bbb3cbd2..4466b502a 100644
--- a/js/service/FeedResource.js
+++ b/js/service/FeedResource.js
@@ -183,7 +183,8 @@ app.factory('FeedResource', (Resource, $http, BASE_URL) => {
             let feed = {
                 url: url,
                 folderId: folderId,
-                title: title
+                title: title,
+                faviconLink: '../css/loading.gif'
             };
 
             if (!this.get(url)) {
@@ -192,7 +193,9 @@ app.factory('FeedResource', (Resource, $http, BASE_URL) => {
 
             this.updateFolderCache();
 
-            return this.http({
+            console.log(feed);
+
+            /*return this.http({
                 method: 'POST',
                 url: `${this.BASE_URL}/feeds`,
                 data: {
@@ -200,7 +203,7 @@ app.factory('FeedResource', (Resource, $http, BASE_URL) => {
                     parentFolderId: folderId,
                     title: title
                 }
-            });
+            });*/
         }
 
 
diff --git a/js/tests/unit/controller/NavigationControllerSpec.js b/js/tests/unit/controller/NavigationControllerSpec.js
index 1cfbb4012..8c646640f 100644
--- a/js/tests/unit/controller/NavigationControllerSpec.js
+++ b/js/tests/unit/controller/NavigationControllerSpec.js
@@ -280,4 +280,10 @@ describe('NavigationController', () => {
     }));
 
 
+    it('should expose check if folder exists', inject((FolderResource) => {
+        expect(controller.folderNameExists('hi')).toBe(false);
+        FolderResource.add({name: 'hi'});
+        expect(controller.folderNameExists('hi')).toBe(true);
+    }));
+
 });
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>