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) => showOrganisationMembers: (e) =>
e.stopPropagation() e.stopPropagation()
list = @$('.recipientList') listEntry = $(e.currentTarget)
organisationList = @$('.recipientList-organisationMembers') organisationId = listEntry.data('organisation')
@recipientList = @$('.recipientList')
@organisationList = @$("##{ organisationId }")
# move organisation-list to the right and slide it in # move organisation-list to the right and slide it in
$.Velocity.hook(organisationList, 'translateX', '100%') $.Velocity.hook(@organisationList, 'translateX', '100%')
organisationList.removeClass('hide') @organisationList.removeClass('hide')
organisationList.velocity @organisationList.velocity
properties: properties:
translateX: 0 translateX: 0
options: options:
@ -59,21 +62,21 @@ class App.TicketCreate extends App.Controller
# fade out list # fade out list
list.velocity @recipientList.velocity
properties: properties:
translateX: '-100%' translateX: '-100%'
options: options:
speed: 300 speed: 300
complete: -> list.height(organisationList.height()) complete: => @recipientList.height(@organisationList.height())
hideOrganisationMembers: (e) => hideOrganisationMembers: (e) =>
e && e.stopPropagation() e && e.stopPropagation()
list = @$('.recipientList')
organisationList = @$('.recipientList-organisationMembers') return if !@organisationList
# fade list back in # fade list back in
list.velocity @recipientList.velocity
properties: properties:
translateX: 0 translateX: 0
options: options:
@ -81,16 +84,16 @@ class App.TicketCreate extends App.Controller
# reset list height # reset list height
list.height('') @recipientList.height('')
# slide out organisation-list and hide it # slide out organisation-list and hide it
organisationList.velocity @organisationList.velocity
properties: properties:
translateX: '100%' translateX: '100%'
options: options:
speed: 300 speed: 300
complete: -> organisationList.addClass('hide') complete: => @organisationList.addClass('hide')
changeFormType: (e) => changeFormType: (e) =>
type = $(e.target).data('type') 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> <span class="caret"></span>
</div> </div>
<div class="dropdown-menu" aria-labelledby="customer_id"> <div class="dropdown-menu" aria-labelledby="customer_id">
<ul class="recipientList zIndex-1" role="menu"> <ul class="recipientList" role="menu">
<li class="recipientList-entry u-clickable horizontal center js-organisation"> <li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation="AlbrechtBertschlerGmbG">
<div class="recipientList-iconSpacer centered"> <div class="recipientList-iconSpacer centered">
<div class="white organisation icon"></div> <div class="white organisation icon"></div>
</div> </div>
@ -44,7 +44,7 @@
</div> </div>
<div class="white right arrow icon"></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="recipientList-iconSpacer centered">
<div class="white organisation icon"></div> <div class="white organisation icon"></div>
</div> </div>
@ -130,7 +130,7 @@
</ul> </ul>
<ul class="recipientList-organisationMembers zIndex-3 hide"> <ul class="recipientList-organisationMembers hide" id="AlbrechtBertschlerGmbG">
<li class="recipientList-controls u-clickable js-back"> <li class="recipientList-controls u-clickable js-back">
<div class="recipientList-backClickArea centered"> <div class="recipientList-backClickArea centered">
<div class="recipientList-backButton"> <div class="recipientList-backButton">
@ -175,6 +175,36 @@
<span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span> <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
</div> </div>
</ul> </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> </div>
</div> </div>