Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

recipientList add dynamic targets

Browse source 
using data-organisation for reference
This commit is contained in:
Felix Niklas 2014-09-18 11:29:25 +02:00
parent 4f64494313
commit 367e6ab8be
2 changed files with 50 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
View file

@ -43,15 +43,18 @@ class App.TicketCreate extends App.Controller
showOrganisationMembers: (e) =>
e.stopPropagation()
list = @$('.recipientList')
organisationList = @$('.recipientList-organisationMembers')
listEntry = $(e.currentTarget)
organisationId = listEntry.data('organisation')
@recipientList = @$('.recipientList')
@organisationList = @$("##{ organisationId }")
# move organisation-list to the right and slide it in
$.Velocity.hook(organisationList, 'translateX', '100%')
organisationList.removeClass('hide')
$.Velocity.hook(@organisationList, 'translateX', '100%')
@organisationList.removeClass('hide')
organisationList.velocity
@organisationList.velocity
properties:
translateX: 0
options:
@ -59,21 +62,21 @@ class App.TicketCreate extends App.Controller
# fade out list
list.velocity
@recipientList.velocity
properties:
translateX: '-100%'
options:
speed: 300
complete: -> list.height(organisationList.height())
complete: => @recipientList.height(@organisationList.height())
hideOrganisationMembers: (e) =>
e && e.stopPropagation()
list = @$('.recipientList')
organisationList = @$('.recipientList-organisationMembers')
return if !@organisationList
# fade list back in
list.velocity
@recipientList.velocity
properties:
translateX: 0
options:
@ -81,16 +84,16 @@ class App.TicketCreate extends App.Controller
# reset list height
list.height('')
@recipientList.height('')
# slide out organisation-list and hide it
organisationList.velocity
@organisationList.velocity
properties:
translateX: '100%'
options:
speed: 300
complete: -> organisationList.addClass('hide')
complete: => @organisationList.addClass('hide')
changeFormType: (e) =>
type = $(e.target).data('type')

38
app/assets/javascripts/app/views/agent_ticket_create.jst.eco
View file

@ -33,8 +33,8 @@
<span class="caret"></span>
</div>
<div class="dropdown-menu" aria-labelledby="customer_id">
<ul class="recipientList zIndex-1" role="menu">
<li class="recipientList-entry u-clickable horizontal center js-organisation">
<ul class="recipientList" role="menu">
<li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation="AlbrechtBertschlerGmbG">
<div class="recipientList-iconSpacer centered">
<div class="white organisation icon"></div>
</div>
@ -44,7 +44,7 @@
</div>
<div class="white right arrow icon"></div>
<li class="recipientList-entry u-clickable horizontal center js-organisation">
<li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation="BENCHMARKhumanresources">
<div class="recipientList-iconSpacer centered">
<div class="white organisation icon"></div>
</div>
@ -130,7 +130,7 @@
</ul>
<ul class="recipientList-organisationMembers zIndex-3 hide">
<ul class="recipientList-organisationMembers hide" id="AlbrechtBertschlerGmbG">
<li class="recipientList-controls u-clickable js-back">
<div class="recipientList-backClickArea centered">
<div class="recipientList-backButton">
@ -175,6 +175,36 @@
<span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
</div>
</ul>
<ul class="recipientList-organisationMembers hide" id="BENCHMARKhumanresources">
<li class="recipientList-controls u-clickable js-back">
<div class="recipientList-backClickArea centered">
<div class="recipientList-backButton">
<div class="white arrow left icon"></div>
<%- @T('Back') %>
</div>
</div>
<li class="recipientList-entry u-clickable horizontal center">
<div class="recipientList-iconSpacer centered">
<div class="white user icon"></div>
</div>
<div class="recipientList-name flex u-textTruncat ">
Hubert Lang
<span class="recipientList-detail">- BENCHMARK human resources</span>
</div>
<li class="recipientList-entry u-clickable horizontal center">
<div class="recipientList-iconSpacer centered">
<div class="white user icon"></div>
</div>
<div class="recipientList-name flex u-textTruncat ">
Mario Steibel
<span class="recipientList-detail">- BENCHMARK human resources</span>
</div>
</ul>
</div>
</div>
</div>