Merge branch 'develop' of github.com:martini/zammad into develop

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

@@ -36,7 +36,7 @@ class Content extends App.ControllerContent
 
     holder.addClass 'unique'
 
-    rng = new Math.seedrandom(id);
+    rng = new Math.seedrandom(id)
     x = rng() * (width - size)
     y = rng() * (height - size)
     holder.css('background-position', "-#{ x }px -#{ y }px")
@@ -133,7 +133,7 @@ class CommunicationOverview extends App.ControllerContent
         height: container.attr('data-height')
       options:
         duration: 300
-        complete: -> overflowContainer.addClass('hide');
+        complete: -> overflowContainer.addClass('hide')
 
   render: ->
     @html App.view('layout_ref/communication_overview')()
@@ -369,7 +369,7 @@ class LayoutRefCommunicationReply extends App.ControllerContent
     @attachmentPlaceholder.addClass('hide')
     @attachmentUpload.removeClass('hide')
 
-    progress = 0;
+    progress = 0
     duration = fileSize / 1024
 
     for i in [0..100]
@@ -712,7 +712,7 @@ class RichText extends App.ControllerContent
 
         # add marker for cursor
         getFirstRange = ->
-          sel = rangy.getSelection();
+          sel = rangy.getSelection()
           if sel.rangeCount
             sel.getRangeAt(0)
           else
@@ -735,8 +735,8 @@ class RichText extends App.ControllerContent
 
       return
     )
-    #editable.style.borderColor = '#54c8eb';
-    #aloha(editable);
+    #editable.style.borderColor = '#54c8eb'
+    #aloha(editable)
     return
 
   render: ->
@@ -933,4 +933,126 @@ class highlightRef extends App.ControllerContent
 
 App.Config.set( 'layout_ref/highlight', highlightRef, 'Routes' )
 
+
+class cluesRef extends App.ControllerContent
+
+  clues: [
+    {
+      container: '.search'
+      headline: 'Suche'
+      text: 'Hier finden sie alles!'
+    },
+    {
+      container: '.user-menu'
+      headline: 'Erstellen'
+      text: 'Hier können sie Tickets, Kunden und Organisationen anlegen.'
+      action: 'click .add .js-action'
+    }
+  ]
+
+  events:
+    'click .js-next': 'next'
+    'click .js-previous': 'previous'
+
+  constructor: ->
+    super
+
+    ###
+
+    options
+      clues: list of clues
+      onComplete: a callback for when the user is done
+
+    ###
+
+    @options.onComplete = ->
+    @position = 0
+    @render()
+
+  next: (event) =>
+    event.stopPropagation()
+    @navigate 1
+
+  previous: (event) =>
+    event.stopPropagation()
+    @navigate -1
+
+  navigate: (direction) ->
+    @cleanUp()
+    @position += direction
+
+    if @position < @clues.length
+      @render()
+    else
+      @onComplete()
+
+  cleanUp: ->
+    clue = @clues[@position]
+    container = $(clue.container)
+    container.removeClass('selected-clue')
+
+    # maybe undo perform
+
+    @el.find('.clue').remove()
+
+  render: ->
+    clue = @clues[@position]
+    container = $(clue.container)
+    container.addClass('selected-clue')
+
+    center =
+      x: container.offset().left + container.width()/2
+      y: container.offset().top + container.height()/2
+
+    @html App.view('layout_ref/clues')
+      headline: clue.headline
+      text: clue.text
+      width: container.outerWidth()
+      height: container.outerHeight()
+      center: center
+      position: @position
+      max: @clues.length
+
+    if clue.action
+      @perform clue.action, container
+
+    @placeWindow(container)
+
+  placeWindow: (container) ->
+    clueWindow = @el.find('.clue-window')
+
+    # see if we can place it above or below target
+    if clueWindow.outerHeight() + container.outerHeight() < $(window).outerHeight()
+      clueWindow.css('left', container.offset().left)
+
+      # below or above ?
+      if container.offset().top + container.outerHeight() + clueWindow.outerHeight() < $(window).outerHeight()
+        # place below
+        clueWindow.css('top', container.offset().top + container.outerHeight())
+      else
+        # place above
+        clueWindow.css('top', container.offset().top - container.outerHeight() - clueWindow.outerHeight())
+    else
+      clueWindow.css('top', container.offset().top)
+      # okay, let's try right or left then
+      if container.offset().left + container.outerWidth() + clueWindow.outerWidth() < $(window).outerWidth()
+        # place right
+        clueWindow.css('left', container.offset().left + container.outerWidth())
+      else
+        # place left
+        clueWindow.css('left', container.offset().left - container.outerWidth() - clueWindow.outerWidth())
+
+    # show window
+    clueWindow.addClass('is-visible')
+
+
+  perform: (action, container) ->
+    eventName = action.substr 0, action.indexOf(' ')
+    selector = action.substr action.indexOf(' ') + 1
+    container.find(selector)[0][eventName]()
+
+App.Config.set( 'layout_ref/clues', cluesRef, 'Routes' )
+
+
+
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

app/assets/javascripts/app/views/layout_ref/clues.jst.eco

@@ -0,0 +1,29 @@
+<div class="clue">
+  <div class="clue-backdrop" style="background: 
+    radial-gradient(
+      ellipse <%= @width + 400 %>px <%= @height + 400 %>px 
+      at <%= @center.x %>px <%= @center.y %>px,
+      hsla(202,68%,54%,.4),
+      hsla(202,68%,54%,.8)
+    )
+  "></div>
+  <div class="clue-window">
+    <div class="clue-inner">
+      <div class="clue-header"><%= @headline %></div>
+      <div class="clue-body"><%= @text %></div>
+      <div class="clue-controls">
+        <div class="clue-control">
+          <div class="<% if @position is 0: %>is-disabled <% end %>btn btn--text js-previous"><%- @T( 'Previous' ) %></div>
+        </div>
+        <div class="clue-control clue-count"><%= @position+1 %>/<%= @max %></div>
+        <div class="clue-control">
+          <% if @position+1 is @max: %>
+            <div class="btn btn--text js-next"><%- @T( 'Finish' ) %></div>
+          <% else: %>
+            <div class="btn btn--text js-next"><%- @T( 'Next' ) %></div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/assets/javascripts/app/views/layout_ref/index.jst.eco

@@ -4,6 +4,7 @@
 
 
   <ul>
+    <li><a href="#layout_ref/clues">First Steps (Clues)</a></li>
     <li><a href="#layout_ref/highlight">Highlight</a></li>
     <li>Content <a href="#layout_ref/content">Example</a></li>
     <li>Content + Sidebar Right <a href="#layout_ref/content_sidebar_right">Example</a></li>

app/assets/javascripts/app/views/navigation/personal.jst.eco

@@ -1,7 +1,7 @@
 <% for item in @items: %>
   <% if item.child: %>
     <li class="<% if item.class: %><%- item.class %><% end %> dropup <% if @open_tab[item.target] : %>open<% end %>">
-      <a class="list-button dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<% if item.translate: %><%- @Ti( item.name ) %><% else: %><%= item.name %><% end %>">
+      <a class="list-button dropdown-toggle js-action" data-toggle="dropdown" href="<%= item.target %>" title="<% if item.translate: %><%- @Ti( item.name ) %><% else: %><%= item.name %><% end %>">
         <span class="dropdown-nose"></span>
         <% if item.class is 'user': %>
           <span class="js-avatar"></span>

app/assets/stylesheets/zammad.css.scss

@@ -906,6 +906,75 @@ textarea,
   }
 }
 
+.selected-clue {
+  @extend .zIndex-9;
+}
+
+.clue {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  @extend .zIndex-8;
+}
+
+.clue-backdrop {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.clue-window {
+  position: absolute;
+  opacity: 1;
+  padding: 18px;
+  
+  &.is-visible {
+    opacity: 1;
+  }
+}
+
+.clue-inner {
+  min-width: 260px;
+  padding: 24px 24px 14px;
+  background: white;
+  color: hsl(60,1%,34%);
+  box-shadow:
+    0 8px 17px 0 rgba(0, 0, 0, 0.1),
+    0 6px 20px 0 rgba(0, 0, 0, 0.05);
+}
+
+.clue-controls {
+  background: hsl(210,5%,97%);
+  margin: 24px -24px -14px;
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.clue-control {
+  padding-left: 14px;
+  padding-right: 14px;
+  
+  .btn.is-disabled {
+    opacity: 1;
+    color: hsl(240,5%,83%);
+  }
+}
+
+.clue-header {
+  margin-bottom: 7px;
+  font-size: 18px;
+}
+
+.clue-body {
+  max-width: 340px;
+}
+
 .form-stacked .checkbox label {
   color: inherit;
   font-size: 13px;
@@ -1763,6 +1832,7 @@ footer {
   border-bottom: 1px solid rgba(240, 250, 255, .05);
   flex-shrink: 0;
   display: flex;
+  background-color: inherit;
 }
   
   .search-holder {