Use do-plugin's user task button w/ overlay

Motivation
----------
Since we do not have a dashboard it would be useful to directly see
one's task on click upon the respective icon. Also this is most likely
the dominating reason of the dashboard-usage.

Implementation Decisions
------------------------
* Use SVG: Since we move towards using SVG everywhere in DokuWiki, I
decided to use a SVG icon here as well. This makes it compatible with
other templates too, without introducing an icon-font there.
* Using a `<span>` instead of a `<strong>`: I do not see the semantic reason
behind using a `<strong>` here.

Other Changes
-------------
* The styles related to the do-plugin have been moved from
css/area_nav-usertools.less to css/plugins/do_tasks.less

This needs the respective pull request merged from the do-plugin:
https://github.com/cosmocode/do/pull/31

SPR-962

css/area_nav-usertools.less

@@ -46,7 +46,7 @@
                 margin-bottom: @headericons-margin-xxs;
             }
 
-            > strong,
+            > span,
             > a {
                 display: block;
                 width: auto;
@@ -68,6 +68,10 @@
                 @media @screen_max-md {
                     min-height: @toggle-size;
                 }
+
+                @media @screen_only-lg {
+                    min-width: 2rem;
+                }
             }
 
             &.user {
@@ -222,46 +226,6 @@
                     }
                 }
             } // user
-
-            &.user-task {
-                position: relative;
-
-                a {
-                    position: relative;
-                    overflow: visible;
-                    white-space: normal;
-                    text-indent: 0;
-
-                    &::before {
-                        content: '';
-                        position: absolute;
-                    }
-                }
-
-                .prefix {
-                    .btn-prefix();
-                    .icon-clipboard();
-
-                    display: block;
-                    font-size: 1.2rem;
-                    text-align: center;
-                    margin-bottom: -1px;
-                }
-            } // user-task
-
-            &.noopentasks {
-                strong {
-                    background-color: @ini_background;
-                    border-color: @noopentasks-border;
-                    color: @ini_text_webframe;
-                }
-
-                .num {
-                    background-color: @noopentasks-border; // fix
-                    color: @noopentasks-color; // fix
-                    margin-top: 1px;
-                }
-            }
         } // li
 
 

css/plugins/do_tasks.less

@@ -24,3 +24,60 @@ ul.page-attributes {
         }
     }
 }
+
+#dokuwiki__usertools.nav-usertools {
+    ul {
+        li {
+            &.user-task {
+                position: relative;
+
+                a {
+                    overflow: visible;
+                    white-space: normal; // Is this still needed?
+                    text-indent: 0;
+
+                    &::before {
+                        content: ''; // remove when fontello is removed from usertools
+                    }
+                }
+
+                svg {
+                    width: 20px;
+                    margin-top: 2px;
+
+                    @media @screen_max-md {
+                        margin-top: 4px;
+                    }
+                }
+
+                &:hover {
+                    :not(.noopentasks) {
+                        svg path {
+                            fill: @ini_background;
+                        }
+                    }
+                }
+
+                .noopentasks {
+                        background-color: @ini_background;
+                        border-color: @noopentasks-border;
+                        color: @ini_text_webframe;
+
+                    .num {
+                        background-color: @noopentasks-border; // fix
+                        color: @noopentasks-color; // fix
+                        margin-top: 1px;
+                    }
+                }
+
+                @media @screen_max-sm {
+                    display: none;
+                }
+            } // user-task
+        } // li
+    } // ul
+}
+
+.plugin__do_usertasks_list {
+    z-index: 5;
+}

lang/de/lang.php

@@ -35,7 +35,6 @@ $lang['tab_tags']                   = 'Tags';
 $lang['quality_trigger']            = 'Seitenanalyse ein- bzw. ausblenden';
 
 $lang['prefix_tasks']               = 'offene Aufgaben: ';
-$lang['prefix_tasks_user']          = 'Ihre offenen Aufgaben: ';
 $lang['prefix_tasks_page']          = 'offene Aufgaben auf dieser Seite: ';
 $lang['tasks_page_none']            = 'keine offenen Aufgaben für diese Seite';
 

lang/en/lang.php

@@ -37,13 +37,10 @@ $lang['tab_issues']                 = 'Issues';
 $lang['quality_trigger']            = 'toggle page analysis';
 
 $lang['prefix_tasks']               = 'open tasks: ';
-$lang['prefix_tasks_user']          = 'your open tasks: ';
 $lang['prefix_tasks_page']          = 'open tasks for this page: ';
 $lang['tasks_page_none']            = 'There are no open tasks for this page.';
 $lang['tasks_page_intime']          = 'There are %1$d open tasks on this page.';
 $lang['tasks_page_late']            = 'There are %1$d open tasks on this page, %2$d are late.';
-$lang['tasks_user_none']            = 'You have no open tasks.';
-$lang['tasks_user_intime']          = 'You have %1$d open tasks.';
 
 $lang['discussion']                 = 'Discussion';
 $lang['back_to_article']            = 'Back to article';

tpl/nav-usertools-buttons.php

@@ -23,25 +23,12 @@
                 /** @var \helper_plugin_do $doplugin */
                 $doplugin = plugin_load('helper','do');
                 if ($doplugin !== null && isset($_SERVER['REMOTE_USER'])) {
-                    $tasks = $doplugin->loadTasks(array('status' => array('undone'),'user'   => $_SERVER['REMOTE_USER']));
+                    $icon = $doplugin->tpl_getUserTasksIconHTML();
-                    $num = count($tasks);
+                    if ($icon) {
-                    if ($num === 0) {
+                        echo '<li class="user-task">' . $icon . '</li>';
-                        $title = tpl_getLang('tasks_user_none');
-                    } else {
-                        $title = sprintf(tpl_getLang('tasks_user_intime'), $num);
                     }
-
+                }
-                    $doInner = "<span class=\"prefix\">".tpl_getLang('prefix_tasks_user')." </span><span class=\"num\">".count($tasks)."</span>";
+                ?>
-
-                    $userpage = $doplugin->getConf('userpage');
-                    if ($userpage && $_SERVER['REMOTE_USER'] && $num > 0) {
-                        $linktarget = sprintf($userpage, $_SERVER['REMOTE_USER']) . ':' . 'dashboard';
-                        $linktarget = str_replace('::', ':', $linktarget);
-                        echo '<li class="user-task" title="'.$title.'"><a href="'.wl($linktarget).'">'.$doInner.'</a></li>';
-                    } else {
-                        echo '<li class="user-task" title="'.$title.'"><strong>'.$doInner.'</strong></li>';
-                    }
-                } ?>
 
             </ul>
         </nav><!-- #dokuwiki__usertools -->