App to css guidelines (#220)

* Editing and deletion

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

* Always collapsible

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

css/navigation.css

@@ -119,14 +119,6 @@
     font-weight: bold;
 }
 
-#app-navigation .entry-loading {
-    background-image: url('../img/loading.gif') !important;
-}
-
-#app-navigation input.entry-loading {
-    background-size: 20px;
-}
-
 #app-navigation p.error {
     line-height: 25px;
 }

templates/part.navigation.feed.php

@@ -1,7 +1,10 @@
 <li ng-class="{
         active: Navigation.isFeedActive(feed.id),
         unread: Navigation.isFeedUnread(feed.id),
-        updateerror: feed.updateErrorCount>50
+        updateerror: feed.updateErrorCount>50,
+        deleted: feed.deleted,
+        editing: feed.editing,
+        'icon-loading-small': !(feed.id || feed.error)
     }"
     ng-repeat="feed in Navigation.getFeedsOfFolder(<?php p($_['folderId']); ?>)
         | orderBy:['-pinned', 'title.toLowerCase()'] track by feed.url"
@@ -29,7 +32,7 @@
     }">
 
     <a  ng-style="{ backgroundImage: 'url(' + feed.faviconLink + ')'}"
-        ng-show="!feed.editing && !feed.deleted && !feed.error && feed.id"
+        ng-show="!feed.error && feed.id"
         ng-href="#/items/feeds/{{ feed.id }}/"
         class="title"
         ng-class="{'icon-rss': !feed.faviconLink}"
@@ -37,8 +40,8 @@
        {{ feed.title }}
     </a>
 
-    <a ng-hide="feed.id || feed.error"
+    <a ng-if="!(feed.id || feed.error)"
-        class="entry-loading title"
+        class="title"
         title="{{ feed.title }}">
        {{ feed.title }}
     </a>

templates/part.navigation.folder.php

@@ -1,8 +1,9 @@
 <li ng-class="{
         active: Navigation.isFolderActive(folder.id),
         open: folder.opened || folder.getsFeed,
-        collapsible: Navigation.hasFeeds(folder.id) || folder.getsFeed,
+        unread: Navigation.isFolderUnread(folder.id),
-        unread: Navigation.isFolderUnread(folder.id)
+        deleted: folder.deleted,
+        editing: folder.editing
     }"
     ng-repeat="folder in Navigation.getFolders() | orderBy:'name.toLowerCase()'"
     ng-show="Navigation.isFolderUnread(folder.id)
@@ -12,7 +13,7 @@
             || !folder.id
             || folder.getsFeed
             || !Navigation.hasFeeds(folder.id)"
-    class="folder with-counter with-menu animate-show"
+    class="folder with-counter with-menu animate-show collapsible"
     data-id="{{ folder.id }}"
     news-droppable>
     <button class="collapse"
@@ -20,6 +21,16 @@
             title="<?php p($l->t('Collapse'));?>"
             ng-click="Navigation.toggleFolder(folder.name)"></button>
 
+    <a ng-href="#/items/folders/{{ folder.id }}/"
+        class="title icon-folder"
+        ng-if="!folder.error && folder.id">
+       {{ folder.name }}
+    </a>
+
+    <a class="title icon-loading-small" ng-if="!(folder.id || folder.error)">
+       {{ folder.name }}
+    </a>
+
     <div ng-if="folder.deleted"
         class="app-navigation-entry-deleted"
         news-timeout="Navigation.deleteFolder(folder)">
@@ -40,30 +51,29 @@
                 Navigation.folderNameExists(folderName))
             }">
         <form ng-submit="Navigation.renameFolder(folder, folderName)">
-            <fieldset ng-disabled="Navigation.renamingFolder">
+            <input name="folderName"
-                <input name="folderName"
+                type="text"
-                    type="text"
+                ng-init="folderName=folder.name"
-                    ng-init="folderName=folder.name"
+                ng-class="{
-                    ng-class="{
+                    'ng-invalid':
-                        'ng-invalid':
+                        folderName != folder.name &&
-                            folderName != folder.name &&
-                            !Navigation.renamingFolder &&
-                            Navigation.folderNameExists(folderName)
-                    }"
-                    ng-model="folderName"
-                    ng-model-options="{updateOn:'submit'}"
-                    required
-                    news-auto-focus>
-                <input type="submit"
-                    value=""
-                    ng-class="{'entry-loading': Navigation.renamingFolder}"
-                    title="<?php p($l->t('Rename')); ?>"
-                    class="action icon-checkmark"
-                    ng-disabled="folderName != folder.name &&
                         !Navigation.renamingFolder &&
-                        Navigation.folderNameExists(folderName)">
+                        Navigation.folderNameExists(folderName)
-                </button>
+                }"
-            </fieldset>
+                ng-model="folderName"
+                ng-model-options="{updateOn:'submit'}"
+                ng-disabled="Navigation.renamingFolder"
+                required
+                news-auto-focus>
+            <input type="submit"
+                value=""
+                ng-class="{'icon-loading-small': Navigation.renamingFolder}"
+                title="<?php p($l->t('Rename')); ?>"
+                class="action icon-checkmark"
+                ng-disabled="folderName != folder.name &&
+                    !Navigation.renamingFolder &&
+                    Navigation.folderNameExists(folderName)">
+            </button>
             <p class="error" ng-show="folderName != folder.name &&
                 !Navigation.renamingFolder &&
                 Navigation.folderNameExists(folderName)">
@@ -75,19 +85,6 @@
         </form>
     </div>
 
-    <a ng-href="#/items/folders/{{ folder.id }}/"
-        class="title icon-folder"
-        ng-show="!folder.editing &&
-            !folder.error &&
-            !folder.deleted &&
-            folder.id">
-       {{ folder.name }}
-    </a>
-
-    <a class="title entry-loading" ng-hide="folder.id || folder.error">
-       {{ folder.name }}
-    </a>
-
     <div class="app-navigation-entry-utils"
          ng-show="folder.id &&
             !folder.editing &&