layoutRef: ticket macros

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

@@ -795,10 +795,19 @@ class TicketZoomRef extends App.ControllerContent
     '.article-text': 'articles'
     '.js-highlight-icon': 'highlightIcon'
 
+    '.buttonDropdown': 'buttonDropdown' 
+
   events:
     'click .js-highlight': 'toggleHighlight'
     'click .js-highlightColor': 'pickColor'
 
+    'mousedown .js-openDropdown': 'toggleDropdown'
+    'click .js-openDropdown': 'stopPropagation'
+    'mouseup .js-dropdownAction': 'performTicketMacro'
+
+  stopPropagation: (event) ->
+    event.stopPropagation()
+
   colors: [
     {
       name: 'Yellow'
@@ -956,6 +965,22 @@ class TicketZoomRef extends App.ControllerContent
 
     @storeHighlights()
 
+  toggleDropdown: =>
+    if @buttonDropdown.hasClass 'is-open'
+      @closeDropdown()
+    else
+      @buttonDropdown.addClass 'is-open'
+      $(document).bind 'click.buttonDropdown', @closeDropdown
+
+  closeDropdown: =>
+    @buttonDropdown.removeClass 'is-open'
+    $(document).unbind 'click.buttonDropdown'
+
+  performTicketMacro: (event) =>
+    console.log "perform action", $(event.currentTarget).text()
+    @closeDropdown()
+
+
 
 App.Config.set( 'layout_ref/ticket_zoom', TicketZoomRef, 'Routes' )
 

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

@@ -640,50 +640,15 @@
     </div>
   </div>
   <div class="attributeBar">
-    <form class="form-inline is-closed hide" role="form">
+    <div class="btn js-reset hide">Discard your unsaved changes.</div>
-      <div class="form-group">
+    <div class="buttonDropdown">
-        <label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
+      <div class="buttonDropdown-main btn btn--primary js-submit">Update</div>
-        <select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
+      <div class="buttonDropdown-toggle btn btn--primary btn--slim js-openDropdown"><%- @Icon('arrow-up') %></div>
-          <option value="4">closed</option>
+      <div class="buttonDropdown-dropdown">
-          <option value="1" selected="">new</option>
+        <div class="btn btn--primary js-dropdownAction">Update &amp; Close</div>
-          <option value="2">open</option>
+        <div class="btn btn--primary js-dropdownAction">Remind me in 2 weeks</div>
-          <option value="3">pending</option>
-        </select>
-        <%- @Icon('arrow-down', 'dropdown-arrow') %>
       </div>
-      <div class="form-group is-changed">
-        <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
-        <select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
-          <option value="1">1 low</option>
-          <option value="2" selected="">2 normal</option>
-          <option value="3">3 high</option>
-        </select>
-        <svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
     </div>
-      <div class="form-group">
-        <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
-        <select id="update_ticket_1_group_id123" class="form-control" name="group_id">
-          <option value="4">FillGroup::450863</option>
-          <option value="3">FillGroup::918672</option>
-          <option value="2">Twitter</option>
-          <option value="1" selected="">Users</option>
-        </select>
-        <svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
     </div>
-      <div class="form-group">
-        <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
-        <select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
-          <option value="">-</option>
-          <option value="3">Felix Niklas</option>
-        </select>
-        <svg class="icon icon-arrow-down dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
-      </div>
-    </form>
-    <form class="form-inline">
-    <div class="form-group">
-      <button type="submit" class="btn btn--primary js-submit pull-right">Update</button>
-      <button type="submit" class="btn js-reset pull-right hide">Discard your unsaved changes.</button>
-    </div>
-    </form>
   </div>
 </div>

app/assets/stylesheets/zammad.scss

@@ -571,6 +571,67 @@ span[data-tooltip]:hover:before {
   }
 }
 
+.buttonDropdown {
+  position: relative;
+  display: flex;
+  
+  .btn.buttonDropdown-main {
+    margin: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    
+    &:not(:active) {
+      border-right: none;
+    }
+
+    &:active + .btn {
+      border-left: none;
+    }
+  }
+
+  .btn.buttonDropdown-toggle {
+    margin: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    
+    .icon {
+      fill: white;
+      opacity: 1;
+    }
+  }
+
+  .buttonDropdown-dropdown {
+    position: absolute;
+    bottom: 40px;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    perspective: 200px;
+
+    .btn {
+      margin: 0;
+      transform: rotateX(90deg);
+      transform-origin: right bottom;
+      opacity: 0;
+      pointer-events: none;
+      // transition: 400ms;
+      
+      &:first-child {
+        transform-origin: right 82px;
+      }
+    }
+  }
+
+  &.is-open .buttonDropdown-dropdown .btn {
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+
 table {
   table-layout: fixed;
 }
@@ -3316,10 +3377,6 @@ footer {
     flex: 1 1 auto;
   }
 
-    .attributeBar.form-inline .form-group:last-child {
-      flex: 0 1 auto;
-    }
-
     .form-group.is-changed {
       position: relative;
     }
@@ -4367,6 +4424,9 @@ footer {
   background: white;
   transition: margin 250ms;
   flex-shrink: 0;
+  padding: 10px;
+  display: flex;
+  justify-content: flex-end;
   
   &.is-closed {
     margin-bottom: -60px;