ticketZoom attributeBar animation
This commit is contained in:
parent
3b0c5696a1
commit
62d92ef630
4 changed files with 21 additions and 8 deletions
|
@ -511,10 +511,12 @@ class App.Sidebar extends App.Controller
|
||||||
toggleSidebar: ->
|
toggleSidebar: ->
|
||||||
@el.parent().find('.tabsSidebar-sidebarSpacer').toggleClass('is-closed')
|
@el.parent().find('.tabsSidebar-sidebarSpacer').toggleClass('is-closed')
|
||||||
@el.parent().find('.tabsSidebar').toggleClass('is-closed')
|
@el.parent().find('.tabsSidebar').toggleClass('is-closed')
|
||||||
|
@el.parent().next('.attributeBar').toggleClass('is-closed')
|
||||||
|
|
||||||
showSidebar: ->
|
showSidebar: ->
|
||||||
@el.parent().find('.tabsSidebar-sidebarSpacer').removeClass('is-closed')
|
@el.parent().find('.tabsSidebar-sidebarSpacer').removeClass('is-closed')
|
||||||
@el.parent().find('.tabsSidebar').removeClass('is-closed')
|
@el.parent().find('.tabsSidebar').removeClass('is-closed')
|
||||||
|
@el.parent().next('.attributeBar').addClass('is-closed')
|
||||||
|
|
||||||
toggleTab: (e) ->
|
toggleTab: (e) ->
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<form class="update-box bulkAction-form" role="form">
|
<form class="update-box bulkAction-form" role="form">
|
||||||
<div class="horizontal center bulkAction-firstStep js-action-step">
|
<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 class="btn btn--primary js-confirm"><%- @T('Confirm') %></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vertical hide bulkAction-secondStep js-confirm-step">
|
<div class="vertical hide bulkAction-secondStep js-confirm-step">
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
<div class="tabsSidebar vertical"></div>
|
<div class="tabsSidebar vertical"></div>
|
||||||
</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">
|
<div class="form-group">
|
||||||
<label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
|
<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">
|
<select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
|
||||||
|
|
|
@ -2641,6 +2641,10 @@ footer {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-inline {
|
||||||
|
@extend .horizontal;
|
||||||
|
}
|
||||||
|
|
||||||
.form-inline .input-group-addon,
|
.form-inline .input-group-addon,
|
||||||
.form-inline .form-control:not(textarea) {
|
.form-inline .form-control:not(textarea) {
|
||||||
background: white;
|
background: white;
|
||||||
|
@ -2655,7 +2659,7 @@ footer {
|
||||||
@extend .flex-auto;
|
@extend .flex-auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-attributes.form-inline .form-group:last-child {
|
.attributeBar.form-inline .form-group:last-child {
|
||||||
@extend .flex-shrink;
|
@extend .flex-shrink;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2999,10 +3003,6 @@ footer {
|
||||||
margin-bottom: 36px;
|
margin-bottom: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-form {
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropArea {
|
.dropArea {
|
||||||
background: white;
|
background: white;
|
||||||
border: 5px solid;
|
border: 5px solid;
|
||||||
|
@ -3507,6 +3507,16 @@ footer {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attributeBar {
|
||||||
|
height: 60px;
|
||||||
|
background: white;
|
||||||
|
transition: margin 250ms;
|
||||||
|
|
||||||
|
&.is-closed {
|
||||||
|
margin-bottom: -60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.newTicket {
|
.newTicket {
|
||||||
padding: 34px;
|
padding: 34px;
|
||||||
}
|
}
|
||||||
|
@ -4580,7 +4590,8 @@ label + .wizard-buttonList {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
transform: scale(1.6);
|
-webkit-transform: scale(1.6);
|
||||||
|
transform: scale(1.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue