better actions for navigation entries

5 files changed, 165 insertions, 19 deletions

diff --git a/css/navigation.css b/css/navigation.css
index 21eb44f64..a7ddc359c 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -196,19 +196,6 @@
     text-transform: none;
 }
 
-.unread-counter {
-    padding: 8px 6px 8px 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-    font-size: 9pt;
-    display: none;
-}
-
-
-.unread .unread-counter {
-    display: block;
-}
 .starred .unread-counter {
     font-weight: normal !important;
 }
diff --git a/css/oc8.css b/css/oc8.css
new file mode 100644
index 000000000..27b75dbef
--- /dev/null
+++ b/css/oc8.css
@@ -0,0 +1,137 @@
+/**
+ * App navigation utils, buttons and counters for drop down menu
+ */
+.app-navigation-entry-utils {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 105;
+}
+
+    .app-navigation-entry-utils ul {
+        float: right;
+        display: block !important;
+    }
+
+
+    .app-navigation-entry-utils li {
+        float: left;
+        width: 44px !important;
+        height: 44px;
+        line-height: 44px;
+        display: none;
+    }
+
+    .active > .app-navigation-entry-utils li {
+        display: inline-block;
+    }
+
+    .app-navigation-entry-utils button {
+        height: 38px;
+        width: 38px;
+        line-height: 38px;
+        float: left;
+    }
+
+    .app-navigation-entry-utils-menu-button {
+        border: 0;
+        opacity: .7;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url('../img/actions/more.svg');
+    }
+
+    .app-navigation-entry-utils-menu-button:hover,
+    .app-navigation-entry-utils-menu-button:focus {
+        background-color: transparent;
+        opacity: 1;
+    }
+
+    .app-navigation-entry-utils-counter {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: right;
+        font-size: 9pt;
+        width: 38px;
+        line-height: 44px;
+        padding: 0 10px;
+    }
+
+.app-navigation-entry-utils ul,
+.app-navigation-entry-options ul {
+    list-style-type: none;
+}
+
+.app-navigation-entry-options {
+    display: none;
+    position: absolute;
+    background-color: #eee;
+    color: #333;
+    border-radius: 3px;
+    z-index: 110;
+    margin: -5px 10px;
+    right: 0;
+    border: 1px solid #bbb;
+    -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));
+    -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+    -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+    filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+}
+
+/* miraculous border arrow stuff */
+.app-navigation-entry-options:after, .app-navigation-entry-options:before {
+    bottom: 100%;
+    right: 5px; /* change this to adjust the arrow position */
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.app-navigation-entry-options:after {
+    border-color: rgba(238, 238, 238, 0);
+    border-bottom-color: #eee;
+    border-width: 10px;
+    margin-left: -10px;
+}
+.app-navigation-entry-options:before {
+    border-color: rgba(187, 187, 187, 0);
+    border-bottom-color: #bbb;
+    border-width: 11px;
+    margin-left: -11px;
+}
+
+.app-navigation-entry-options.app-navigation-entry-options-open {
+    display: block;
+}
+
+/* list of options for an entry */
+.app-navigation-entry-options ul {
+    display: block !important;
+}
+
+.app-navigation-entry-options li {
+    float: left;
+    width: 38px !important;
+}
+
+.app-navigation-entry-options li button {
+    float: right;
+    width: 36px !important;
+    height: 36px;
+    line-height: 36px;
+    border: 0;
+    opacity: .7;
+    background-color: transparent;
+}
+
+.app-navigation-entry-options li button:hover,
+.app-navigation-entry-options li button:focus {
+    opacity: 1;
+    background-color: transparent;
+}
\ No newline at end of file
diff --git a/img/actions/more.svg b/img/actions/more.svg
new file mode 100644
index 000000000..9ab5d4243
--- /dev/null
+++ b/img/actions/more.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/>
+ <path d="m3 6c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.105 0-2 0.8954-2 2s0.895 2 2 2 2-0.8954 2-2-0.895-2-2-2z" fill-rule="evenodd"/>
+</svg>
diff --git a/templates/main.php b/templates/main.php
index 9185eb2f7..b0b450493 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -10,6 +10,7 @@
 
 \OCP\Util::addStyle('news', 'bootstrap/tooltip');
 \OCP\Util::addStyle('news', 'app');
+\OCP\Util::addStyle('news', 'oc8');
 \OCP\Util::addStyle('news', 'navigation');
 \OCP\Util::addStyle('news', 'content');
 \OCP\Util::addStyle('news', 'settings');
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index 4024db31b..964d2f7e2 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -44,18 +44,34 @@
        {{ feed.title }}
     </a>
 
-    <span class="utils">
+    <div class="app-navigation-entry-utils">
+        <ul>
+            <li class="app-navigation-entry-utils-counter"
+                ng-show="feed.id && Navigation.getUnreadCount(feed.id) > 0 && !feed.error && !feed.editing">
+                {{ Navigation.getFeedUnreadCount(feed.id) | unreadCountFormatter }}
+            </li>
+            <li><button class="app-navigation-entry-utils-menu-button" ng-click="optionsId = (optionsId == feed.id ? -1 : feed.id)"></button></li>
+        </ul>
+    </div>
+
+    <div class="app-navigation-entry-options" ng-class="{'app-navigation-entry-options-open': optionsId == feed.id}">
+        <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>
+        </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>-->
 
-        <span class="unread-counter"
-            ng-show="feed.id && Navigation.getUnreadCount(feed.id) > 0 && !feed.error && !feed.editing">
-            {{ Navigation.getFeedUnreadCount(feed.id) | unreadCountFormatter }}
-        </span>
 
     <!--
         <button class="svg action mark-read-icon"
@@ -76,8 +92,8 @@
             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>