editing

10 files changed, 118 insertions, 168 deletions

diff --git a/css/navigation.css b/css/navigation.css
index de0b39c9f..e19e6a594 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -117,118 +117,14 @@
     padding-right: 0px;
 }
 
-.folder {
+#app-navigation .folder {
     text-transform: uppercase;
 }
 
-.feed {
+#app-navigation .feed {
     text-transform: none;
 }
 
-#app-navigation li:hover > .utils {
-    display: block;
-}
-
-#app-navigation li:hover > .utils .unread-counter {
-    padding-left: 0;
-}
-
 #app-navigation .folder-input {
     text-transform: uppercase;
 }
-
-.rename-feed input {
-    margin: 1px 0 0px 5px;
-    border-right: 1px solid #ddd;
-    border-radius: 2px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0;
-    width: 208px;
-    height: 32px;
-}
-
-.rename-feed button {
-    margin: 5px 0 5px 0;
-    display: inline-block;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    width: 30px !important;
-    height: 30px !important;
-        padding: 0.6em;
-}
-
-.rename-feed .action-button {
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.rename-feed .back-button {
-    border-radius: 3px;
-    background-image: url('../img/delete.svg');
-}
-
-.rename-feed .create-button {
-    border-radius: 0;
-    background-image: url('../img/mark_read.svg');
-}
-
-.rss-icon {
-    background-image: url('../img/rss.svg');
-}
-
-#app-navigation .ui-draggable-dragging {
-    width: 100%;
-}
-
-#app-navigation .multiselect {
-    height:20px;
-}
-
-#app-navigation .progress-icon,
-#app-navigation .problem-icon {
-    width: 299px;
-    line-height: 44px;
-}
-
-.progress-icon {
-    background-image: url('../img/loading.gif');
-}
-
-.problem-icon {
-    background-image: url('../img/problem.svg') !important;
-}
-
-.failed {
-    background-color: #F2FF63 !important;
-    text-shadow: none !important;
-    font-weight: bold;
-}
-
-    .failed .title  {
-        background-color: #F2FF63 !important;
-        width: 299px !important;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        display: inline-block !important;
-    }
-
-    .failed a:hover,
-    .failed:hover a {
-        background-color: #F2FF63 !important;
-    }
-
-    .failed .message {
-        font-weight: normal;
-        padding: 5px 20px 5px 32px;
-    }
-
-    .folder .feed.failed .message {
-        padding-left: 48px;
-    }
-
-.tooltip {
-    text-shadow: none;
-    text-transform: none;
-}
\ No newline at end of file
diff --git a/js/app/Run.js b/js/app/Run.js
index 44c01a5e5..9b068910c 100644
--- a/js/app/Run.js
+++ b/js/app/Run.js
@@ -105,4 +105,5 @@ app.run(($rootScope, $location, $http, $q, $interval, Loading, ItemResource,
     $rootScope.$on('$routeChangeError', () => {
         $location.path('/items');
     });
+
 });
\ No newline at end of file
diff --git a/js/build/app.js b/js/build/app.js
index a3a749132..c718e3c2c 100644
--- a/js/build/app.js
+++ b/js/build/app.js
@@ -1536,6 +1536,35 @@ var $__build_47_app__ = function () {
           writable: true
         }), $__2;
       };
+      app.run([
+        '$document',
+        '$rootScope',
+        function ($document, $rootScope) {
+          'use strict';
+          $document.click(function (event) {
+            $rootScope.$broadcast('documentClicked', event);
+          });
+        }
+      ]);
+      app.directive('appNavigationEntryUtils', function () {
+        'use strict';
+        return {
+          restrict: 'C',
+          link: function (scope, elm) {
+            var menu = elm.siblings('.app-navigation-entry-menu');
+            menu.hide();
+            var button = $(elm).find('.app-navigation-entry-utils-menu-button button');
+            button.click(function () {
+              menu.toggle();
+            });
+            scope.$on('documentClicked', function (scope, event) {
+              if (event.target !== button[0]) {
+                menu.hide();
+              }
+            });
+          }
+        };
+      });
       app.directive('newsAudio', function () {
         'use strict';
         return {
@@ -1563,7 +1592,11 @@ var $__build_47_app__ = function () {
       app.directive('newsAutoFocus', function () {
         'use strict';
         return function (scope, elem, attrs) {
-          $(attrs.newsAutofocus).focus();
+          if (attrs.newsAutofocus) {
+            $(attrs.newsAutofocus).focus();
+          } else {
+            elem.focus();
+          }
         };
       });
       app.directive('newsBindHtmlUnsafe', function () {
@@ -1610,11 +1643,12 @@ var $__build_47_app__ = function () {
       ]);
       app.directive('newsFocus', [
         '$timeout',
-        function ($timeout) {
+        '$interpolate',
+        function ($timeout, $interpolate) {
           'use strict';
           return function (scope, elem, attrs) {
             elem.click(function () {
-              var toReadd = $(attrs.newsFocus);
+              var toReadd = $($interpolate(attrs.newsFocus)(scope));
               $timeout(function () {
                 toReadd.focus();
               }, 500);
diff --git a/js/directive/AppNavigationEntryUtils.js b/js/directive/AppNavigationEntryUtils.js
new file mode 100644
index 000000000..8deb09b61
--- /dev/null
+++ b/js/directive/AppNavigationEntryUtils.js
@@ -0,0 +1,38 @@
+/**
+ * ownCloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright Bernhard Posselt 2014
+ */
+app.run(($document, $rootScope) => {
+    'use strict';
+    $document.click((event) => {
+        $rootScope.$broadcast('documentClicked', event);
+    });
+});
+
+app.directive('appNavigationEntryUtils', () => {
+    'use strict';
+    return {
+        restrict: 'C',
+        link: (scope, elm) => {
+            let menu = elm.siblings('.app-navigation-entry-menu');
+            menu.hide();
+            let button = $(elm)
+                .find('.app-navigation-entry-utils-menu-button button');
+
+            button.click(() => {
+                menu.toggle();
+            });
+
+            scope.$on('documentClicked', (scope, event) => {
+                if (event.target !== button[0]) {
+                    menu.hide();
+                }
+            });
+        }
+    };
+});
\ No newline at end of file
diff --git a/js/directive/NewsAutoFocus.js b/js/directive/NewsAutoFocus.js
index a66f4453c..e66f7b3bf 100644
--- a/js/directive/NewsAutoFocus.js
+++ b/js/directive/NewsAutoFocus.js
@@ -11,7 +11,11 @@ app.directive('newsAutoFocus', () => {
     'use strict';
 
     return (scope, elem, attrs) => {
-        $(attrs.newsAutofocus).focus();
+        if (attrs.newsAutofocus) {
+            $(attrs.newsAutofocus).focus();
+        } else {
+            elem.focus();
+        }
     };
 
 });
\ No newline at end of file
diff --git a/js/directive/NewsFocus.js b/js/directive/NewsFocus.js
index 3ab2a85aa..f5133fd20 100644
--- a/js/directive/NewsFocus.js
+++ b/js/directive/NewsFocus.js
@@ -7,12 +7,12 @@
  * @author Bernhard Posselt <dev@bernhard-posselt.com>
  * @copyright Bernhard Posselt 2014
  */
-app.directive('newsFocus', ($timeout) => {
+app.directive('newsFocus', ($timeout, $interpolate) => {
     'use strict';
 
     return (scope, elem, attrs) => {
         elem.click(() => {
-            let toReadd = $(attrs.newsFocus);
+            let toReadd = $($interpolate(attrs.newsFocus)(scope));
             $timeout(() => {
                 toReadd.focus();
             }, 500);
diff --git a/js/tests/unit/controller/NavigationControllerSpec.js b/js/tests/unit/controller/NavigationControllerSpec.js
index 6837160bf..1cfbb4012 100644
--- a/js/tests/unit/controller/NavigationControllerSpec.js
+++ b/js/tests/unit/controller/NavigationControllerSpec.js
@@ -278,4 +278,6 @@ describe('NavigationController', () => {
 
         expect(ctrl.isFolderActive(3)).toBe(true);
     }));
+
+
 });
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
index 6afc0f40f..5bc48b23d 100644
--- a/templates/part.addnew.php
+++ b/templates/part.addnew.php
@@ -34,6 +34,7 @@
                        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')); ?>"
diff --git a/templates/part.feed.unread.php b/templates/part.feed.unread.php
index f572f1d43..bef1cf6b7 100644
--- a/templates/part.feed.unread.php
+++ b/templates/part.feed.unread.php
@@ -21,7 +21,7 @@
         </ul>
     </div>
 
-    <div class="app-navigation-entry-menu" ng-class="{'app-navigation-entry-menu-open': optionsId == 'all'}">
+    <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>
         </ul>
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index 1c5cc3bc3..3673c4958 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -20,82 +20,56 @@
         revert: true
     }">
 
-    <div ng-if="feed.editing" class="rename-feed">
-          <input type="text" ng-model="feed.title" autofocus>
-          <button title="<?php p($l->t('Cancel')); ?>"
-        ng-click="cancelRenameFeed(feed.id)"
-        class="action-button back-button action"></button>
-      <button title="<?php p($l->t('Save')); ?>"
-        ng-click="Navigation.renameFeed(feed.id, feed.title)"
-        class="action-button create-button action">
-      </button>
-    </div>
-
     <a  ng-style="{ backgroundImage: 'url(' + feed.faviconLink + ')'}"
         ng-class="{
             'progress-icon': !feed.id,
             'problem-icon': feed.error
         }"
-        ng-hide="feed.editing"
+        ng-if="!feed.editing"
         ng-href="#/items/feeds/{{ feed.id }}/"
-        class="title  icon-loading"
+        class="title icon-loading"
         title="{{ feed.title }}">
-
        {{ feed.title }}
     </a>
 
-    <div class="app-navigation-entry-utils">
+    <div ng-if="feed.editing" class="app-navigation-entry-edit">
+        <input name="feedRename" type="text" value="{{ feed.title }}" news-auto-focus>
+        <button title="<?php p($l->t('Cancel')); ?>"
+                ng-click="feed.editing=false"
+                class="action icon-close"></button>
+        <button title="<?php p($l->t('Rename')); ?>"
+                ng-click="Navigation.renameFeed(feed.id, feed.title)"
+                class="action icon-checkmark">
+        </button>
+    </div>
+
+    <div class="app-navigation-entry-utils"
+         ng-show="feed.id && !feed.editing && !feed.error">
         <ul>
             <li class="app-navigation-entry-utils-counter"
-                ng-show="feed.id && Navigation.getUnreadCount(feed.id) > 0 && !feed.error && !feed.editing">
+                ng-show="feed.id && Navigation.getUnreadCount(feed.id) > 0">
                 {{ Navigation.getFeedUnreadCount(feed.id) | unreadCountFormatter }}
             </li>
-            <li class="app-navigation-entry-utils-menu-button"><button ng-click="optionsId = (optionsId == feed.id ? -1 : feed.id)"></button></li>
+            <li class="app-navigation-entry-utils-menu-button">
+                <button ng-click="App.toggleMenu('f' + feed.id)"></button>
+            </li>
         </ul>
     </div>
 
-    <div class="app-navigation-entry-menu" ng-class="{'app-navigation-entry-menu-open': optionsId == feed.id}">
+    <div class="app-navigation-entry-menu">
         <ul>
-            <li><button class="icon-rename" title="<?php p($l->t('Rename feed')); ?>"></button></li>
-            <li><button class="icon-delete" title="<?php p($l->t('Delete website')); ?>"></button></li>
-            <li><button class="icon-checkmark" title="<?php p($l->t('Read all')); ?>"></button></li>
+            <li><button ng-click="feed.editing=true"
+                        class="icon-rename"
+                        title="<?php p($l->t('Rename feed')); ?>"></button></li>
+            <li><button ng-click="Navigation.deleteFeed(feed.url)"
+                        class="icon-delete"
+                        title="<?php p($l->t('Delete website')); ?>"></button></li>
+            <li><button ng-show="Navigation.getUnreadCount(feed.id) > 0"
+                        class="icon-checkmark"
+                        title="<?php p($l->t('Read all')); ?>"></button></li>
         </ul>
     </div>
 
-    <!--<span class="utils">
-        <span class="unread-counter"
-            >
-
-        </span>-->
-        <!--<button ng-click="Navigation.deleteFeed(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>-->
-
-
-    <!--
-        <button class="svg action mark-read-icon"
-            ng-show="Navigation.getUnreadCount(feed.id) > 0 && feed.id && !feed.error && !feed.editing"
-            ng-click="Navigation.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="Navigation.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>