add secondaryAction layoutRef in ticketZoom

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/views/layout_ref/ticket_zoom.jst.eco

@@ -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/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 {