Start clues on initial login for every agent.

app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee

@@ -1,18 +1,22 @@
 class App.FirstStepsClues extends App.Controller
   clues: [
+    {
+      container: '.js-dashboardMenuItem'
+      headline: 'Dashboard'
+      text: 'Here you see a quick overview about your and other agents performance.'
+      actions: [
+        'hover'
+      ]
+    }
     {
       container: '.search-holder'
       headline: 'Search'
-      text: 'Here you can search for ticket, customers and organizations. To find everything use the <kbd>*</kbd>-Placeholder'
+      text: 'Here you can search for ticket, customers and organizations. To find everything use the §*§-Placeholder'
-      #headline: 'Suche'
-      #text: 'Um alles zu finden nutze den <kbd>*</kbd>-Platzhalter'
     }
     {
       container: '.user-menu'
       headline: 'Create'
       text: 'Here you can create new tickets. Also if you have the permissions you can create new customers and organizations.'
-      #headline: 'Erstellen'
-      #text: 'Hier kannst du Tickets, Kunden und Organisationen anlegen.'
       actions: [
         'click .add .js-action',
         'hover .add'
@@ -22,8 +26,6 @@ class App.FirstStepsClues extends App.Controller
       container: '.user-menu'
       headline: 'Personal Settings'
       text: 'Here you can sign out, change the frontend language or see your latest views items.'
-      #headline: 'Persönliches Menü'
-      #text: 'Hier findest du den Logout, den Weg zu deinen Einstellungen und deinen Verlauf.'
       actions: [
         'click .user .js-action',
         'hover .user'
@@ -33,18 +35,6 @@ class App.FirstStepsClues extends App.Controller
       container: '.js-overviewsMenuItem'
       headline: 'Overviews'
       text: 'Here you find your ticket overviews for open, my assigned or escalated tickets.'
-      #headline: 'Übersichten'
-      #text: 'Hier findest du eine Liste aller Tickets.'
-      actions: [
-        'hover'
-      ]
-    }
-    {
-      container: '.js-dashboardMenuItem'
-      headline: 'Dashboard'
-      text: 'Here you see a quick overview about your and other agents performance.'
-      #headline: 'Dashboard'
-      #text: 'Hier siehst du auf einem Blick ob sich alle Agenten an die Spielregeln halten.'
       actions: [
         'hover'
       ]
@@ -78,8 +68,6 @@ class App.FirstStepsClues extends App.Controller
       onComplete: a callback for when the user is done
 
     ###
-
-    @options.onComplete = -> null
     @position = 0
     @render()
 
@@ -235,7 +223,7 @@ class App.FirstStepsClues extends App.Controller
       left = maxWidth - modal.width
 
     if top < 0
-      moveArrow = modal.height/2 + height
+      moveArrow = modal.height/2 + top
       top = 0
     else if top + modal.height > maxHeight
       moveArrow = modal.height/2 + maxHeight - (top + modal.height)

app/assets/javascripts/app/controllers/dashboard.coffee

@@ -18,6 +18,11 @@ class App.Dashboard extends App.Controller
       return if !@authenticate(true)
       @render()
 
+    # start intro
+    preferences = @Session.get('preferences')
+    if !preferences['intro']
+      @clues()
+
   render: ->
 
     @html App.view('dashboard')(
@@ -35,9 +40,18 @@ class App.Dashboard extends App.Controller
     )
 
   clues: (e) =>
-    e.preventDefault()
+    if e
+      e.preventDefault()
     new App.FirstStepsClues(
       el: @el
+      onComplete: =>
+        @ajax(
+          id:          'preferences'
+          type:        'PUT'
+          url:         @apiPath + '/users/preferences'
+          data:        JSON.stringify({user:{intro:true}})
+          processData: true
+        )
     )
 
   active: (state) =>

app/assets/javascripts/app/lib/app_post/i18n.coffee

@@ -184,6 +184,12 @@ class _i18nSingleton extends Spine.Module
 
     translated = App.Utils.htmlEscape(@translate(string, args))
 
+    # apply inline markup
+    translated
+      .replace(/\*(.+?)\*/gm, '<b>$1</b>')
+      .replace(/_(.+?)_/gm, '<u>$1</u>')
+      .replace(/§(.+?)§/gm, '<kbd>$1</kbd>')
+
   translatePlain: (string, args) =>
     @translate(string, args)
 

app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco

@@ -4,7 +4,7 @@
     <%- @Icon('diagonal-cross') %>
   </div>
   <div class="modal-header"><%- @T(@headline) %></div>
-  <div class="modal-body"><%- @text %></div>
+  <div class="modal-body"><%- @T(@text) %></div>
   <div class="modal-controls">
     <div class="modal-control">
       <div class="<% if @position is 0: %>is-disabled <% end %>btn btn--text js-previous"><%- @T( 'Previous' ) %></div>

public/assets/tests/core.js

@@ -274,6 +274,18 @@ test( "i18n", function() {
   translated = App.i18n.translateContent('%s %s test', 123, 'xxx');
   equal( translated, '123 xxx test', 'de-de - %s %s' );
 
+  translated = App.i18n.translateContent('*%s* %s test', 123, 'xxx');
+  equal( translated, '<b>123</b> xxx test', 'de-de - *%s* %s' );
+
+  translated = App.i18n.translateContent('_%s_ %s test', 123, 'xxx');
+  equal( translated, '<u>123</u> xxx test', 'de-de - _%s_ %s' );
+
+  translated = App.i18n.translateContent('§%s§ %s test', 123, 'xxx');
+  equal( translated, '<kbd>123</kbd> xxx test', 'de-de - §%s§ %s' );
+
+  translated = App.i18n.translateContent('\'%s\' %s test', 123, 'xxx');
+  equal( translated, '&#39;123&#39; xxx test', 'de-de - \'%s\' %s' );
+
   translated = App.i18n.translateContent('<test&now>//*äöüß');
   equal( translated, '&lt;test&amp;now&gt;//*äöüß', 'de - <test&now>//*äöüß' );
 
@@ -299,6 +311,18 @@ test( "i18n", function() {
   translated = App.i18n.translateContent('%s %s test', 123, 'xxx');
   equal( translated, '123 xxx test', 'en-us - %s %s' );
 
+  translated = App.i18n.translateContent('*%s* %s test', 123, 'xxx');
+  equal( translated, '<b>123</b> xxx test', 'en-us - *%s* %s' );
+
+  translated = App.i18n.translateContent('_%s_ %s test', 123, 'xxx');
+  equal( translated, '<u>123</u> xxx test', 'en-us - _%s_ %s' );
+
+  translated = App.i18n.translateContent('§%s§ %s test', 123, 'xxx');
+  equal( translated, '<kbd>123</kbd> xxx test', 'en-us - §%s§ %s' );
+
+  translated = App.i18n.translateContent('\'%s\' %s test', 123, 'xxx');
+  equal( translated, '&#39;123&#39; xxx test', 'en-us - \'%s\' %s' );
+
   translated = App.i18n.translateContent('<test&now>');
   equal( translated, '&lt;test&amp;now&gt;', 'en-us - <test&now>' );
 

test/browser_test_helper.rb

@@ -156,6 +156,13 @@ class TestCase < Test::Unit::TestCase
           fail 'auto wizard login failed'
         end
         assert(true, 'auto wizard login ok')
+
+        # remove clues
+        clues = instance.find_elements({ css: '.js-modal--clue .js-close' })[0]
+        if clues
+          clues.click
+        end
+
         return
       end
       screenshot(browser: instance, comment: 'login_failed')
@@ -182,6 +189,13 @@ class TestCase < Test::Unit::TestCase
       screenshot(browser: instance, comment: 'login_failed')
       fail 'login failed'
     end
+
+    # remove clues
+    clues = instance.find_elements({ css: '.js-modal--clue .js-close' })[0]
+    if clues
+      clues.click
+    end
+
     screenshot(browser: instance, comment: 'login_ok')
     assert(true, 'login ok')
     login