Get Started: add dashboard and overview links

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -937,6 +937,20 @@ App.Config.set( 'layout_ref/highlight', highlightRef, 'Routes' )
 class cluesRef extends App.ControllerContent
 
   clues: [
+    {
+      container: '.search-holder'
+      headline: 'Suche'
+      text: 'Um alles zu finden nutze den <kbd>*</kbd>-Platzhalter'
+    }
+    {
+      container: '.user-menu'
+      headline: 'Erstellen'
+      text: 'Hier kannst du Tickets, Kunden und Organisationen anlegen.'
+      actions: [
+        'click .add .js-action',
+        'hover .add'
+      ]
+    }
     {
       container: '.user-menu'
       headline: 'Persönliches Menü'
@@ -947,17 +961,19 @@ class cluesRef extends App.ControllerContent
       ]
     }
     {
-      container: '.search-holder'
+      container: '.main-navigation .overviews'
-      headline: 'Suche'
+      headline: 'Übersichten'
-      text: 'Um alles zu finden nutze den <kbd>*</kbd>-Platzhalter'
+      text: 'Hier findest du eine Liste aller Tickets.'
-    },
-    {
-      container: '.user-menu'
-      headline: 'Erstellen'
-      text: 'Hier kannst du Tickets, Kunden und Organisationen anlegen.'
       actions: [
-        'click .add .js-action',
+        'hover'
-        'hover .add'
+      ]
+    }
+    {
+      container: '.main-navigation .dashboard'
+      headline: 'Dashboard'
+      text: 'Hier siehst du auf einem Blick ob sich alle Agenten an die Spielregeln halten.'
+      actions: [
+        'hover'
       ]
     }
   ]
@@ -1102,7 +1118,6 @@ class cluesRef extends App.ControllerContent
 
     if moveArrow
       parameter = if position is 'above' or position is 'below' then 'left' else 'top'
-      console.log("move arrow", position, parameter, moveArrow)
       modalElement.find('.js-arrow').css(parameter, moveArrow)
 
   getVisibleBoundingBox: (el) ->
@@ -1144,12 +1159,18 @@ class cluesRef extends App.ControllerContent
 
   perform: (actions, container) ->
     for action in actions
-      eventName = action.substr 0, action.indexOf(' ')
+      if action.indexOf(" ") < 0
-      selector = action.substr action.indexOf(' ') + 1
+        # 'click'
+        eventName = action
+        target = container
+      else
+        # 'click .target'
+        eventName = action.substr 0, action.indexOf(' ')
+        target = container.find( action.substr action.indexOf(' ') + 1 )
 
       switch eventName
-        when 'click' then container.find(selector).trigger('click')
+        when 'click' then target.trigger('click')
-        when 'hover' then container.find(selector).toggleClass('is-hovered')
+        when 'hover' then target.toggleClass('is-hovered')
 
 App.Config.set( 'layout_ref/clues', cluesRef, 'Routes' )
 

app/assets/stylesheets/zammad.css.scss

@@ -1637,17 +1637,20 @@ footer {
     border-bottom-color: rgba(240, 250, 255, .08);
   }
 
-  .main-navigation > li.active > a {
+  .main-navigation > li.active > a,
+  .main-navigation > li.is-hovered > a {
     background: none;
     color: white;
   }
 
   .main-navigation > li.active .nav-icon,
-  .main-navigation > li.active .dropdown-icon {
+  .main-navigation > li.active .dropdown-icon,
+  .main-navigation > li.is-hovered .nav-icon {
     fill: currentColor;
   }
 
-  .main-navigation li.active > a {
+  .main-navigation li.active > a,
+  .main-navigation li.is-hovered > a {
     background: #389ed9;
   }