fix #718

CHANGELOG.md

@@ -1,5 +1,6 @@
 owncloud-news (6.0.4)
 * **Bugfix**: Allow YouTube videos to go fullscreen, #857
+* **Enhancement**: Group plugins in menu, #718
 
 owncloud-news (6.0.3)
 * **Enhancement**: Allow to pin feeds, #848

css/content.css

@@ -285,6 +285,85 @@
         background-image: url('../img/active_star.svg');
     }
 
+    #app-content .utils .more button {
+        opacity: .3;
+    }
+
+    #app-content .utils .more button:hover {
+        opacity: 1;
+    }
+
+    #app-content .utils .more {
+        position: relative;
+    }
+
+    #app-content .article-actions {
+        display: none;
+        filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+        -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+        -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+        position: absolute;
+        top: 40px;
+        border-radius: 3px;
+        z-index: 1000;
+        border: 1px solid transparent;
+        background-color: #fff;
+        margin: 0;
+        padding: 0;
+    }
+
+    #app-content .article-actions ul {
+        display: flex;
+        float: left;
+    }
+
+    #app-content .article-actions li {
+        float: left;
+        width: 38px !important;
+    }
+
+    #app-content #articles:not(.compact) .article-actions {
+        left: 6px;
+    }
+
+    #app-content #articles:not(.compact) .article-actions:after,
+    #app-content #articles:not(.compact) .article-actions:before {
+        left: 20px;
+    }
+
+    #app-content #articles.compact .article-actions {
+        right: -10px;
+    }
+
+    #app-content #articles.compact .article-actions:after,
+    #app-content #articles.compact .article-actions:before {
+        right: 9px;
+    }
+
+    #app-content .article-actions:after,
+    #app-content .article-actions:before {
+    	bottom: 100%;
+    	border: solid transparent;
+    	content: " ";
+    	height: 0;
+    	width: 0;
+    	position: absolute;
+    	pointer-events: none;
+    }
+
+    #app-content .article-actions:after {
+    	border-color: rgba(255, 255, 255, 0);
+    	border-bottom-color: #fff;
+    	border-width: 5px;
+    	margin-left: -5px;
+    }
+    #app-content .article-actions:before {
+    	border-color: rgba(255, 255, 255, 0);
+    	border-bottom-color: #fff;
+    	border-width: 9px;
+    	margin-left: -9px;
+    }
+
     /**
      * Article title
      */

css/mobile.css

@@ -10,6 +10,10 @@
 }
 
 @media (max-width: 600px) {
+    #app-content .article-actions ul {
+        max-width: 164px;
+    }
+
     #app-content .heading .date {
         display: none;
     }
@@ -27,3 +31,9 @@
         padding-left: 44px;
     }
 }
+
+@media (max-width: 340px) {
+    #app-content .article-actions  {
+        max-width: 82px;
+    }
+}

js/build/app.js

@@ -2659,19 +2659,24 @@ app.directive('newsAddFeed', ["$rootScope", "$timeout", function ($rootScope, $t
 app.directive('newsArticleActions', function () {
     'use strict';
     return {
-        restrict: 'E',
+        restrict: 'A',
         scope: {
-            'article': '='
+            newsArticleActions: '='
         },
         link: function (scope, elem) {
             var plugins = News.getArticleActionPlugins();
 
             for (var i=0; i<plugins.length; i+=1) {
-                plugins[i](elem, scope.article);
+                plugins[i](elem, scope.newsArticleActions);
+            }
+
+            if (plugins.length === 0) {
+                $('#app-content .more').hide();
             }
         }
     };
 });
+
 app.directive('newsAutoFocus', ["$timeout", function ($timeout) {
     'use strict';
     return function (scope, elem, attrs) {
@@ -3076,6 +3081,22 @@ app.directive('newsTitleUnreadCount', ["$window", function ($window) {
     };
 
 }]);
+app.directive('newsToggleShow', function () {
+    'use strict';
+    return {
+        restrict: 'A',
+        scope: {
+            'newsToggleShow': '@'
+        },
+        link: function (scope, elem) {
+            elem.click(function () {
+                var target = $(scope.newsToggleShow);
+                target.toggle();
+            });
+        }
+    };
+});
+
 app.directive('newsTriggerClick', function () {
     'use strict';
 

js/directive/NewsArticleActions.js

@@ -10,16 +10,20 @@
 app.directive('newsArticleActions', function () {
     'use strict';
     return {
-        restrict: 'E',
+        restrict: 'A',
         scope: {
-            'article': '='
+            newsArticleActions: '='
         },
         link: function (scope, elem) {
             var plugins = News.getArticleActionPlugins();
 
             for (var i=0; i<plugins.length; i+=1) {
-                plugins[i](elem, scope.article);
+                plugins[i](elem, scope.newsArticleActions);
+            }
+
+            if (plugins.length === 0) {
+                $('#app-content .more').hide();
             }
         }
     };
-});
+});

js/directive/NewsToggleShow.js

@@ -0,0 +1,24 @@
+/**
+ * ownCloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <[email protected]>
+ * @copyright Bernhard Posselt 2014
+ */
+app.directive('newsToggleShow', function () {
+    'use strict';
+    return {
+        restrict: 'A',
+        scope: {
+            'newsToggleShow': '@'
+        },
+        link: function (scope, elem) {
+            elem.click(function () {
+                var target = $(scope.newsToggleShow);
+                target.toggle();
+            });
+        }
+    };
+});

templates/part.content.php

@@ -90,7 +90,12 @@ class="icon-toggle keep-unread"
                             ?>">
                         </button>
                     </li>
-                    <li><news-article-actions article="item" /></li>
+                    <li class="util more" news-stop-propagation>
+                        <button class="icon-more" news-toggle-show="#actions-{{item.id}}"></button>
+                        <div class="article-actions" id="actions-{{item.id}}">
+                            <ul news-article-actions="item"><ul>
+                        </div>
+                    </li>
                 </ul>
             </div>
 

templates/part.navigation.feed.php

@@ -95,6 +95,8 @@ class="icon-pinned"
                         class="icon-unpinned"
                         title="<?php p($l->t('Pin feed to the top')); ?>">
                 </button>
+            </li>
+            <li>
                 <button ng-click="Navigation.setOrdering(feed, 1)"
                         ng-show="feed.ordering == 0"
                         class="icon-caret-dark feed-no-ordering"