ticketZoom attributeBar animation

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

@@ -511,10 +511,12 @@ class App.Sidebar extends App.Controller
   toggleSidebar: ->
     @el.parent().find('.tabsSidebar-sidebarSpacer').toggleClass('is-closed')
     @el.parent().find('.tabsSidebar').toggleClass('is-closed')
+    @el.parent().next('.attributeBar').toggleClass('is-closed')
 
   showSidebar: ->
     @el.parent().find('.tabsSidebar-sidebarSpacer').removeClass('is-closed')
     @el.parent().find('.tabsSidebar').removeClass('is-closed')
+    @el.parent().next('.attributeBar').addClass('is-closed')
 
   toggleTab: (e) ->
 

app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco

@@ -1,6 +1,6 @@
 <form class="update-box bulkAction-form" role="form">
   <div class="horizontal center bulkAction-firstStep js-action-step">
-    <div id="form-ticket-bulk" class="form-inline form-inline--enclosed flex horizontal"></div>
+    <div id="form-ticket-bulk" class="form-inline form-inline--enclosed flex"></div>
     <div class="btn btn--primary js-confirm"><%- @T('Confirm') %></div>
   </div>
   <div class="vertical hide bulkAction-secondStep js-confirm-step">

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

@@ -53,7 +53,7 @@
     <div class="tabsSidebar vertical"></div>
   </div>
 
-  <form class="ticket-attributes bottom-form form-inline horizontal" role="form">
+  <form class="attributeBar form-inline is-closed" role="form">
     <div class="form-group">
       <label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
       <select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">

app/assets/stylesheets/zammad.css.scss

@@ -2641,6 +2641,10 @@ footer {
     background: white;
   }
 
+.form-inline {
+  @extend .horizontal;
+}
+
 .form-inline .input-group-addon,
 .form-inline .form-control:not(textarea) {
   background: white;
@@ -2655,7 +2659,7 @@ footer {
     @extend .flex-auto;
   }
 
-    .ticket-attributes.form-inline .form-group:last-child {
+    .attributeBar.form-inline .form-group:last-child {
       @extend .flex-shrink;
     }
 
@@ -2999,10 +3003,6 @@ footer {
   margin-bottom: 36px;
 }
 
-  .bottom-form {
-    background: white;
-  }
-
   .dropArea {
     background: white;
     border: 5px solid;
@@ -3507,6 +3507,16 @@ footer {
       opacity: 0.5;
     }
 
+.attributeBar {
+  height: 60px;
+  background: white;
+  transition: margin 250ms;
+  
+  &.is-closed {
+    margin-bottom: -60px;
+  }
+}
+
 .newTicket {
   padding: 34px;
 }
@@ -4580,7 +4590,8 @@ label + .wizard-buttonList {
   opacity: 0.4;
   
   .icon {
-    transform: scale(1.6);
+    -webkit-transform: scale(1.6);
+            transform: scale(1.6);
   }
 }