From 4496f42b4a8242c443bdac6dfdfb92e38c23aedc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@googlemail.com>
Date: Mon, 20 Feb 2017 23:14:41 +0100
Subject: [PATCH 1/3] Fix app navigation entry menu

---
 css/style.css              | 48 +++++++++++---------------------------
 templates/confirmation.php | 19 +++++++--------
 templates/main.php         | 16 ++++++-------
 3 files changed, 30 insertions(+), 53 deletions(-)

diff --git a/css/style.css b/css/style.css
index aafaec16f..83ab89b03 100644
--- a/css/style.css
+++ b/css/style.css
@@ -50,22 +50,10 @@
   width: auto !important;
   opacity: 0.5;
   cursor: pointer;
-  height: 38px;
 }
 .sortorder-dropdown li.active {
   opacity: 1;
 }
-#app-navigation .app-navigation-entry-menu li>a,
-#app-navigation .app-navigation-entry-menu li>span,
-.sortorder-dropdown li>span {
-  width: 100%;
-  padding: 10px;
-  display: inline-block;
-  line-height: normal;
-  height: auto;
-  min-height: auto;
-  box-sizing: border-box;
-}
 
 #app-navigation .app-navigation-entry-menu li img,
 #app-navigation .app-navigation-entry-menu li span,
@@ -1640,15 +1628,6 @@ ol[dnd-list] .dndPlaceholder {
   box-shadow: 0 0 6px #f8b9b7;
 }
 
-.confirmed {
-  opacity: 1 !important;
-}
-.confirmed img {
-  margin-left: auto;
-  margin-right: auto !important;
-  display: block;
-}
-
 .confirmation-default {
   overflow: hidden;
 }
@@ -1660,13 +1639,12 @@ ol[dnd-list] .dndPlaceholder {
 .confirmation-confirm, .confirmation-abort {
   width: 50% !important;
   display: none !important;
-  overflow: hidden;
-  float: right;
-  height: 100% !important;
+  padding-right: 0px !important;
+  background-position: center !important;
 }
 
-.confirmation-confirm, .confirmation-confirm span {
-  background-color: red;
+.confirmation-confirm {
+  background-color: red !important;
   cursor: default !important;
 }
 
@@ -1674,23 +1652,23 @@ ol[dnd-list] .dndPlaceholder {
   display: inline-block !important;
 }
 
-.confirmed .confirmation-confirm img {
-  display: none;
-}
+.app-navigation-entry-menu li > a:not(:empty).confirmation-confirm {
+  padding-right: 0 !important;
+ }
 
-.countdown {
+.app-navigation-entry-menu li > a span.countdown {
+  background-color: inherit;
   color: white;
   display: block;
   text-align: center;
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
+  filter: alpha(opacity=100) !important;
+  opacity: 1 !important;
 }
 
 .confirmed.active .confirmation-confirm{
   cursor: pointer !important;
 }
-.confirmed.active .confirmation-confirm span.countdown {
+.confirmed.active .countdown {
   display: none;
 }
-
-.confirmed.active .confirmation-confirm img {
-  display: block;
-}
diff --git a/templates/confirmation.php b/templates/confirmation.php
index 1987570b6..fe7c574a3 100644
--- a/templates/confirmation.php
+++ b/templates/confirmation.php
@@ -1,11 +1,10 @@
-<span class="confirmation-default">
-	<img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete.svg'))?>"/>
-	<span><?php p($l->t('Delete')); ?></span>
-</span>
-<span class="confirmation-confirm">
+<a class="confirmation-default">
+    <span class="icon-delete svg"></span>
+    <span><?php p($l->t('Delete')); ?></span>
+</a>
+<a class="confirmation-abort icon-close svg" title="<?php p($l->t('Cancel')); ?>">
+    <span></span>
+</a>
+<a class="confirmation-confirm icon-delete-white no-permission svg">
     <span class="countdown">33 &nbsp;</span>
-    <img class="icon-delete svg" src="<?php p(image_path('core', 'actions/delete-white.svg'))?>"/>
-</span>
-<span class="confirmation-abort" title="<?php p($l->t('Cancel')); ?>">
-    <img class="icon-close svg" src="<?php p(image_path('core', 'actions/close.svg'))?>"/>
-</span>
+</a>
diff --git a/templates/main.php b/templates/main.php
index ef56a3cd2..9a0eafdc7 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -59,20 +59,20 @@ class="collection"
                 <div class="app-navigation-entry-menu" ng-show="calendar.writable">
                     <ul>
                         <li>
-                            <span ng-click="startEdit(calendar)">
-                                <img class="icon-rename svg" src="<?php p(image_path('core', 'actions/rename.svg'))?>"/>
+                            <a ng-click="startEdit(calendar)">
+                                <span class="icon-rename svg"></span>
                                 <span><?php p($l->t('Edit')); ?></span>
-                            </span>
+                            </a>
                         </li>
                         <li>
-                            <span ng-click="showCalDAVUrl(calendar)">
-                                <img class="icon-public svg" src="<?php p(image_path('core', 'actions/public.svg'))?>"/>
+                            <a ng-click="showCalDAVUrl(calendar)">
+                                <span class="icon-public svg"></span>
                                 <span><?php p($l->t('Link')); ?></span>
-                            </span>
+                            </a>
                         </li>
                         <li>
                             <a href="{{calendar.exportUrl}}" download="{{calendar.uri}}.ics">
-                                <img class="icon-download svg" src="<?php p(image_path('core', 'actions/download.svg'))?>"/>
+                                <span class="icon-download svg"></span>
                                 <span><?php p($l->t('Download')); ?></span>
                             </a>
                         </li>
@@ -144,7 +144,7 @@ class="collection"
 
     <div id="app-content" ng-controller="TasksController" ng-class="{'details-visible':route.taskID}">
         <div class="content-wrapper">
-        	<div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
+            <div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
                 <a class="input-star">
                     <span class="icon input-star"></span>
                 </a>

From 9356893a6e05652e718d42204f69aeab7c4ed60f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@googlemail.com>
Date: Mon, 20 Feb 2017 23:23:23 +0100
Subject: [PATCH 2/3] Hide three-dots-icon-menu when not active

---
 css/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css/style.css b/css/style.css
index 83ab89b03..aaf3fdc05 100644
--- a/css/style.css
+++ b/css/style.css
@@ -44,6 +44,9 @@
 #app-navigation .app-navigation-entry-utils li {
   font-size: 100%;
 }
+#app-navigation li.list:not(.active) .app-navigation-entry-utils-menu-button {
+   display: none;
+ }
 #app-navigation .app-navigation-entry-menu li,
 .sortorder-dropdown li {
   float: inherit;

From 9fe895c35c472197989173967e181356737883d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@googlemail.com>
Date: Mon, 20 Feb 2017 23:47:28 +0100
Subject: [PATCH 3/3] Fix sortorder dropdown

---
 css/style.css      | 28 ++++++++++++++++------------
 templates/main.php | 24 ++++++++++++------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/css/style.css b/css/style.css
index aaf3fdc05..27c2df6a2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -47,17 +47,26 @@
 #app-navigation li.list:not(.active) .app-navigation-entry-utils-menu-button {
    display: none;
  }
-#app-navigation .app-navigation-entry-menu li,
-.sortorder-dropdown li {
+#app-navigation .app-navigation-entry-menu li {
   float: inherit;
   width: auto !important;
   opacity: 0.5;
   cursor: pointer;
 }
-.sortorder-dropdown li.active {
-  opacity: 1;
+.sortorder-dropdown li {
+  float: inherit;
+  width: auto !important;
+  cursor: pointer;
+ }
+.sortorder-dropdown li.active a {
+  opacity: 1 !important;
+}
+.sortorder-dropdown a {
+  width: 100% !important;
+}
+.app-navigation-entry-menu.sortorder-dropdown li > a span {
+  opacity: 1 !important;
 }
-
 #app-navigation .app-navigation-entry-menu li img,
 #app-navigation .app-navigation-entry-menu li span,
 .sortorder-dropdown li img,
@@ -592,15 +601,10 @@
   display: block;
 }
 .sortorder-dropdown .icon {
-  margin-top: -2px;
-  margin-right: 3px;
+  margin: 12px 8px;
 }
 .sort-indicator {
-  width: 10px;
-  height: 8px;
-  margin-left: 5px;
-  display: inline-block;
-  vertical-align: text-bottom;
+  margin-left: auto;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
   filter: alpha(opacity=80);
   opacity: 0.8;
diff --git a/templates/main.php b/templates/main.php
index 9a0eafdc7..8d993d78b 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -167,46 +167,46 @@ class="collection"
             <div class="app-navigation-entry-menu bubble sortorder-dropdown">
                 <ul>
                     <li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
-                        <span>
+                        <a>
                             <span class="icon list-list"></span>
                             <span><?php p($l->t('Default')); ?></span>
                             <span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
-                        </span>
+                        </a>
                     </li>
                     <li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
-                        <span>
+                        <a>
                             <span class="icon detail-date"></span>
                             <span><?php p($l->t('Due date')); ?></span>
                             <span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
-                        </span>
+                        </a>
                     </li>
                     <li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
-                        <span>
+                        <a>
                             <span class="icon detail-start"></span>
                             <span><?php p($l->t('Start date')); ?></span>
                             <span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
-                        </span>
+                        </a>
                     </li>
                     <li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
-                        <span>
+                        <a>
                             <span class="icon detail-priority"></span>
                             <span><?php p($l->t('Priority')); ?></span>
                             <span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
-                        </span>
+                        </a>
                     </li>
                     <li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
-                        <span>
+                        <a>
                             <span class="icon sort-alphabetically"></span>
                             <span><?php p($l->t('Alphabetically')); ?></span>
                             <span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
-                        </span>
+                        </a>
                     </li>
 <!--                     <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
-                        <span>
+                        <a>
                             <span class="icon sort-manual"></span>
                             <span><?php p($l->t('Manually')); ?></span>
                             <span class="sort-indicator" ng-class="{'icon-triangle-n': settingsmodel.getById('various').sortDirection, 'icon-triangle-s': !settingsmodel.getById('various').sortDirection}"></span>
-                        </span>
+                        </a>
                     </li> -->
                 </ul>
             </div>