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

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

@@ -795,7 +795,7 @@ class TicketZoomRef extends App.ControllerContent
     '.article-text': 'articles'
     '.js-highlight-icon': 'highlightIcon'
 
-    '.buttonDropdown': 'buttonDropdown'
+    '.js-submitDropdown': 'buttonDropdown'
 
   events:
     'click .js-highlight': 'toggleHighlight'
@@ -806,6 +806,7 @@ class TicketZoomRef extends App.ControllerContent
     'mouseup .js-dropdownAction': 'performTicketMacro'
     'mouseenter .js-dropdownAction': 'onActionMouseEnter'
     'mouseleave .js-dropdownAction': 'onActionMouseLeave'
+    'click .js-secondaryAction': 'chooseSecondaryAction'
 
   stopPropagation: (event) ->
     event.stopPropagation()
@@ -988,6 +989,12 @@ class TicketZoomRef extends App.ControllerContent
   onActionMouseLeave: (event) =>
     @$(event.currentTarget).removeClass('is-active')
 
+  chooseSecondaryAction: (event) =>
+    target = $(event.currentTarget)
+    target.siblings().find('.is-selected').removeClass('is-selected')
+    @$('.js-secondaryActionButtonLabel').text target.find('.js-secondaryActionLabel').text()
+    target.find('.js-selectedIcon').addClass('is-selected')
+
 
 
 App.Config.set( 'layout_ref/ticket_zoom', TicketZoomRef, 'Routes' )

app/assets/javascripts/app/controllers/ticket_zoom/higlighter.coffee

@@ -165,8 +165,8 @@ class App.TicketZoomHighlighter extends App.Controller
         #@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
 
   pickColor: (e) =>
-    @$('.js-highlightColor .visibility-change.is-active').removeClass('is-active')
+    @$('.js-highlightColor .is-selected').removeClass('is-selected')
-    $(e.currentTarget).find('.visibility-change').addClass('is-active')
+    $(e.currentTarget).find('.js-selectedIcon').addClass('is-selected')
 
     @activeColorIndex = $(e.currentTarget).attr('data-key')
     @setColor()

app/assets/javascripts/app/controllers/widget/avatar.coffee

@@ -9,12 +9,7 @@ class App.WidgetAvatar extends App.Controller
     App.User.unsubscribe(@subscribeId)
 
   render: (user) =>
-    @html App.view('avatar')(
+    @html user.avatar @size, @position, undefined, false, false, @type
-      user:     user
-      size:     @size
-      position: @position
-      type:     @type
-    )
 
     # start user popups
     @userPopups(@position)

app/assets/javascripts/app/models/user.coffee

@@ -46,55 +46,57 @@ class App.User extends App.Model
       return '??'
 
   avatar: (size = 40, placement = '', cssClass = '', unique = false, avatar, type = undefined) ->
-    cssClass += " size-#{size}"
+    size   = parseInt(size, 10)
+
+    cssClass += " " if cssClass
+    cssClass += "size-#{ size }"
 
     if placement
-      placement = "data-placement=\"#{placement}\""
+      placement = " data-placement='#{ placement }'"
 
-    # use system avatar for system actions
+    if !avatar
-    if @id is 1
+      if type is 'personal'
-      return "<span class='avatar' style='background: white'>#{App.Utils.icon('logo')}</span>"
+        vip = false
+        data = " data-id=\"#{@id}\""
+      else
+        cssClass += ' user-popover'
+        data      = " data-id=\"#{@id}\""
+    else
+      vip = false
+      data = " data-avatar-id=\"#{avatar.id}\""
 
-    # use generated avatar
-    if !@image || @image is 'none' || unique
-      return @uniqueAvatar(size, placement, cssClass, avatar, type)
-
-    # use image as avatar
-    image = @imageUrl()
     vip = @vip
     if type is 'personal'
       vip = false
     else
       cssClass += ' user-popover'
 
-    if vip
+    # use system avatar for system actions
-      return "<span class=\"avatar #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></span>"
+    if @id is 1
-    "<span class=\"avatar #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
+      return App.view('avatar_system')()
+    else if !@image || @image is 'none' || unique
+      width  = 300
+      height = 226
 
-  uniqueAvatar: (size, placement = '', cssClass = '', avatar, type) ->
+      rng = new Math.seedrandom(@id)
-    width  = 300
+      x   = rng() * (width - size)
-    height = 226
+      y   = rng() * (height - size)
-    size   = parseInt(size, 10)
-    vip    = @vip
 
-    rng = new Math.seedrandom(@id)
+      return App.view('avatar_unique')
-    x   = rng() * (width - size)
+        data: data
-    y   = rng() * (height - size)
+        cssClass: cssClass
-
+        placement: placement
-    if !avatar
+        vip: vip
-      if type is 'personal'
+        x: x
-        vip = false
+        y: y
-        data = "data-id=\"#{@id}\""
+        initials: @initials()
-      else
-        cssClass += ' user-popover'
-        data      = "data-id=\"#{@id}\""
     else
-      vip = false
+      return App.view('avatar')
-      data = "data-avatar-id=\"#{avatar.id}\""
+        data: data
-
+        cssClass: cssClass
-    if vip
+        placement: placement
-      return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg>#{ @initials() }</span>"
+        vip: vip
-    "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
+        url: @imageUrl()
 
   imageUrl: ->
     return if !@image

app/assets/javascripts/app/views/avatar.jst.eco

@@ -1 +1,3 @@
-<%- @user.avatar(@size, @position, @class, false, false, @type) %>
+<span class="avatar <%- @cssClass %>" style="background-image: url(<%- @url %>)"<%- @placement %><%- @data %>>
+  <%- @Icon('crown') if @vip %>
+</span>

app/assets/javascripts/app/views/avatar_system.jst.eco

@@ -0,0 +1,3 @@
+<span class="avatar <%- @cssClass %>" style="background: white">
+  <%- @Icon('logo') %>
+</span>

app/assets/javascripts/app/views/avatar_unique.jst.eco

@@ -0,0 +1,4 @@
+<span class="avatar <%- @cssClass %> unique" style="background-position: -<%- @x %>px -<%- @y %>px;"<%- @placement %><%- @data %>>
+  <%- @Icon('crown') if @vip %>
+  <%= @initials %>
+</span>

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

@@ -13,28 +13,6 @@
 
       <div class="dropdown dropdown--actions">
         <div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown"></div>
-
-        <ul class="dropdown-menu dropdown-menu-right">
-          <li>
-            <a class="js-highlightColor" data-key="0" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-activeSpacer visibility-change is-active"></span></a>
-          </li>
-
-          <li>
-            <a class="js-highlightColor" data-key="1" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-activeSpacer visibility-change"></span></a>
-          </li>
-
-          <li>
-            <a class="js-highlightColor" data-key="2" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-activeSpacer visibility-change"></span></a>
-          </li>
-
-          <li>
-            <a class="js-highlightColor" data-key="3" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-activeSpacer visibility-change"></span></a>
-          </li>
-
-          <li>
-            <a class="js-highlightColor" data-key="4" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-activeSpacer visibility-change"></span></a>
-          </li>
-        </ul>
       </div>
     </div>
 
@@ -49,28 +27,6 @@
 
           <div class="dropdown dropdown--actions">
             <div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown"></div>
-
-            <ul class="dropdown-menu dropdown-menu-right">
-              <li>
-                <a class="js-highlightColor" data-key="0" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-activeSpacer visibility-change is-active"></span></a>
-              </li>
-
-              <li>
-                <a class="js-highlightColor" data-key="1" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-activeSpacer visibility-change"></span></a>
-              </li>
-
-              <li>
-                <a class="js-highlightColor" data-key="2" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-activeSpacer visibility-change"></span></a>
-              </li>
-
-              <li>
-                <a class="js-highlightColor" data-key="3" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-activeSpacer visibility-change"></span></a>
-              </li>
-
-              <li>
-                <a class="js-highlightColor" data-key="4" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-activeSpacer visibility-change"></span></a>
-              </li>
-            </ul>
           </div>
         </div>
 

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

@@ -18,8 +18,8 @@
                   <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
                 </span>
                 <%- @Ti(entry.name) %>
-                <span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
+                <span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">
-                  <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
+                  <%- @Icon('checkmark') %>
                 </span>
               </a>
             <% end %>
@@ -634,8 +634,31 @@
     </div>
   </div>
   <div class="attributeBar">
-    <div class="btn js-reset">Discard your unsaved changes.</div>
+    <div class="btn js-reset hide">Discard your unsaved changes.</div>
-    <div class="buttonDropdown dropdown dropup">
+    <div class="buttonDropdown dropdown dropdown--actions dropup">
+      <div class="btn btn--text btn--icon--last" data-toggle="dropdown">
+        <span class="js-secondaryActionButtonLabel">Stay on Ticket</span> <%- @Icon('arrow-up') %>
+      </div>
+      <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="secondaryAction">
+        <li class="js-secondaryAction" role="menuitem">
+          <span class="js-secondaryActionLabel">Close tab</span>
+          <span class="dropdown-selectedSpacer js-selectedIcon is-selected">
+            <%- @Icon('checkmark') %>
+          </span>
+        <li class="js-secondaryAction" role="menuitem">
+          <span class="js-secondaryActionLabel">Next ticket in view</span>
+          <span class="dropdown-selectedSpacer js-selectedIcon">
+            <%- @Icon('checkmark') %>
+          </span>
+        <li class="js-secondaryAction" role="menuitem">
+          <span class="js-secondaryActionLabel">Stay on ticket</span>
+          <span class="dropdown-selectedSpacer js-selectedIcon">
+            <%- @Icon('checkmark') %>
+          </span>
+      </ul>
+    </div>
+
+    <div class="buttonDropdown dropdown dropup js-submitDropdown">
       <div class="btn btn--primary btn--split--first js-submit">Update</div>
       <div class="btn btn--primary btn--slim btn--split--last js-openDropdown"><%- @Icon('arrow-up') %></div>
       <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">

app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco

@@ -13,8 +13,8 @@
           <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
         </span>
         <%- @Ti(entry.name) %>
-        <span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
+        <span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">
-          <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
+          <%- @Icon('checkmark') %>
         </span>
       </a>
     <% end %>

app/assets/stylesheets/zammad.scss

@@ -265,6 +265,10 @@ blockquote {
     vertical-align: middle;
     margin-top: -3px;
   }
+
+  &.btn--icon--last .icon {
+    margin-left: 5px; // so far only used in ticket_zoom secondaryAction dropup
+  }
   
   &:focus {
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
@@ -397,6 +401,11 @@ blockquote {
     vertical-align: baseline;
     text-align: left;
     
+    .icon {
+      fill: currentColor;
+      opacity: 1;
+    }
+    
     &:active {
       color: hsl(203,65%,40%);
     }
@@ -467,7 +476,8 @@ blockquote {
 }
 
 .btn + .btn,
-.btn + .buttonDropdown {
+.btn + .buttonDropdown,
+.buttonDropdown + .buttonDropdown {
   margin-left: 10px;
 }
 
@@ -533,6 +543,7 @@ blockquote {
 
 .buttonDropdown {
   display: flex;
+  align-items: center;
   position: relative;
   user-select: none;
   
@@ -543,6 +554,11 @@ blockquote {
   &.is-open .dropdown-menu {
     display: block;
   }
+
+  .btn--text {
+    padding-left: 3px;
+    padding-right: 3px;
+  }
 }
 
 .status-fields {
@@ -5032,7 +5048,7 @@ footer {
     }
 
     .dropdown-iconSpacer,
-    .dropdown-activeSpacer {
+    .dropdown-selectedSpacer {
       display: flex;
       align-items: center;
     }
@@ -5041,10 +5057,19 @@ footer {
       width: 25px;
     }
 
-    .dropdown-activeSpacer {
+    .dropdown-selectedSpacer {
       width: 34px;
       margin-left: auto;
       justify-content: flex-end;
+      opacity: 0;
+      
+      .icon {
+        fill: white;
+      }
+      
+      &.is-selected {
+        opacity: 1;
+      }
     }
 
     a {