ticketZoom attributeBar animation

This commit is contained in:
Felix Niklas 2014-11-14 16:44:59 +01:00
parent 3b0c5696a1
commit 62d92ef630
4 changed files with 21 additions and 8 deletions

View file

@ -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) ->

View file

@ -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">

View file

@ -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">

View file

@ -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);
}
}