styling for add new

3 files changed, 63 insertions, 150 deletions

diff --git a/css/navigation.css b/css/navigation.css
index f8135d1b5..ac15fc4b9 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -9,6 +9,7 @@
  */
 
 /* add new feed or folder */
+/* button */
 #app-navigation .add-new .heading {
     height: 44px;
     width: 100%;
@@ -31,75 +32,56 @@
     font-weight: normal;
 }
 
+/* actual form content */
 #app-navigation .add-new-popup {
-    display: none;
-    height: 150px;
-    padding: 15px 10px;
+    /*display: none;*/
+    padding: 10px;
     box-shadow: inset 0px 0px 10px #dedede;
     border-top: 1px solid #dedede;
     border-bottom: 1px solid #dedede;
 }
 
-#app-navigation .add-new-popup input[type=text] {
-    width: 170px;
-}
-
+#app-navigation .add-new-popup input,
 #app-navigation .add-new-popup select {
-    width: 170px;
-    margin-top: 1px !important;
-    height: 30px;
-    background-color: #eee;
-}
-
-#app-navigation .add-new-popup input {
-    margin-top: 15px;
-    box-sizing: border-box;
+    width: 100%;
+    height: 36px;
+    padding: 5px;
+    margin-right: 0;
 }
 
-#app-navigation .add-new-popup input,
 #app-navigation .add-new-popup select {
-    margin: 0 0 5px 0;
-    display: inline-block;
-    float: left;
+    width: calc(100% - 36px);
+    border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-right: 0;
+    float: left;
 }
 
-#app-navigation .add-new-popup button {
-    margin: 0 0 5px 0;
-    display: inline-block;
-    float: left;
+#app-navigation .add-new-popup .add-new-folder-primary,
+#app-navigation .add-new-popup .add-new-folder-secondary {
+    float: right;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    height: 30px !important;
-    margin-top: 1px;
+    width: 36px;
+    height: 36px;
+    margin-left: 0;
+    margin-right: 0;
 }
 
-#app-navigation .add-new-popup .action-button {
-    width: 30px;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-#app-navigation .add-new-popup .back-button {
+#app-navigation .add-new-popup .add-new-folder-secondary {
     border-radius: 0;
-    background-image: url('../img/delete.svg');
+    border-right: 0;
+    border-left: 0;
+    margin-left: 0;
 }
 
-#app-navigation .add-new-popup .new-button {
-    border-radius: 0;
-    background-image: url('../img/add.svg');
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+#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 .create-button {
-    border-radius: 0;
-    background-image: url('../img/mark_read.svg');
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
 
 #app-navigation .add-new-popup .error {
     padding: 0 0 10px 0;
@@ -135,42 +117,6 @@
     padding-right: 0px;
 }
 
-#app-navigation .utils {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-#app-navigation .utils > * {
-    float: right;
-}
-
-#app-navigation .utils button {
-    margin: 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    border: 0;
-    box-shadow: none;
-    display: none;
-    height: 30px;
-    width: 22px;
-}
-
-#app-navigation li:hover > .utils button {
-    display: block;
-}
-
-/* only display the delete button when the feed is active */
-#app-navigation li:hover > .utils .delete-button {
-    display: none;
-}
-
-#app-navigation li.active > .utils .delete-button {
-    display: block;
-}
-
 .folder {
     text-transform: uppercase;
 }
@@ -179,20 +125,6 @@
     text-transform: none;
 }
 
-.starred .unread-counter {
-    font-weight: normal !important;
-}
-
-
-button.action {
-    opacity: .5;
-}
-
-button.action:hover {
-    opacity: 1;
-}
-
-
 #app-navigation li:hover > .utils {
     display: block;
 }
@@ -205,18 +137,6 @@ button.action:hover {
     text-transform: uppercase;
 }
 
-.delete-icon {
-    background-image: url('../img/delete.svg');
-}
-
-.rename-feed-icon {
-    background-image: url('../img/rename.svg');
-}
-
-.mark-read-icon {
-    background-image: url('../img/mark_read.svg');
-}
-
 .rename-feed input {
     margin: 1px 0 0px 5px;
     border-right: 1px solid #ddd;
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
index afbbec642..6afc0f40f 100644
--- a/templates/part.addnew.php
+++ b/templates/part.addnew.php
@@ -2,61 +2,54 @@
     <div class="heading icon-add">
         <button
             data-apps-slide-toggle=".add-new-popup"
-            news-focus="[ng-model='feedUrl']"><?php p($l->t('Add Website'))?></button>
+            news-focus="[name='address']"><?php p($l->t('Subscribe'))?></button>
     </div>
 
     <div class="add-new-popup">
 
-        <p class="error">
-            <span ng-show="Navigation.feedExistsError">
-                <?php p($l->t('Error: address exists already!')); ?>
-            </span>
-            <span ng-show="Navigation.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="address"
-                autofocus>
-            <select name="folder"
-                    data-create="<?php p($l->t('New folder')); ?>"
+                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('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"></button>
-            <input type="text"
-                    ng-model="folderName"
-                    ng-if="addNewFolder"
-                    name="foldername"
-                    placeholder="<?php p($l->t('Folder name')); ?>"
-                    autofocus
-                    class="folder-input"
-                    ng-keyup="{13: 'Navigation.createFolder(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="Navigation.createFolder(folderName)"
-                    ng-disabled="!folderName.trim()"
-                    ng-class="{loading: Navigation.isAddingFolder()}"
-                    class="action-button create-button action">
+                    <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"
+                       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>
-            <button title="<?php p($l->t('Add')); ?>"
+            <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)"><?php p($l->t('Add')); ?></button>
+                    ng-click="createFeed(feedUrl, folderId.id)">
         </form>
 
     </div>
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index 0d3fcc761..569e415eb 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -38,7 +38,7 @@
         }"
         ng-hide="feed.editing"
         ng-href="#/items/feeds/{{ feed.id }}/"
-        class="title"
+        class="title  icon-loading"
         title="{{ feed.title }}">
 
        {{ feed.title }}