add organisationList to recipientList
with fade animation and back button
This commit is contained in:
parent
b0452ca47d
commit
9acad47838
3 changed files with 212 additions and 95 deletions
|
@ -1,6 +1,6 @@
|
|||
class App.TicketCreate extends App.Controller
|
||||
elements:
|
||||
'.tabsSidebar' : 'sidebar'
|
||||
'.tabsSidebar' : 'sidebar'
|
||||
|
||||
events:
|
||||
'click .type-tabs .tab': 'changeFormType'
|
||||
|
@ -8,6 +8,8 @@ class App.TicketCreate extends App.Controller
|
|||
'submit form': 'submit'
|
||||
'click .submit': 'submit'
|
||||
'click .cancel': 'cancel'
|
||||
'click .js-organisation': 'showOrganisationMembers'
|
||||
'click .js-back': 'hideOrganisationMembers'
|
||||
|
||||
constructor: (params) ->
|
||||
super
|
||||
|
@ -37,6 +39,58 @@ class App.TicketCreate extends App.Controller
|
|||
@log 'notice', 'error', defaults
|
||||
@render(defaults)
|
||||
|
||||
showOrganisationMembers: (e) =>
|
||||
e.stopPropagation()
|
||||
|
||||
list = @$('.recipientList')
|
||||
organisationList = @$('.recipientList-organisationMembers')
|
||||
|
||||
# move organisation-list to the right and slide it in
|
||||
|
||||
$.Velocity.hook(organisationList, 'translateX', '100%')
|
||||
organisationList.removeClass('hide')
|
||||
|
||||
organisationList.velocity
|
||||
properties:
|
||||
translateX: 0
|
||||
options:
|
||||
speed: 300
|
||||
|
||||
# fade out list
|
||||
|
||||
list.velocity
|
||||
properties:
|
||||
translateX: '-100%'
|
||||
options:
|
||||
speed: 300
|
||||
complete: -> list.height(organisationList.height())
|
||||
|
||||
hideOrganisationMembers: (e) =>
|
||||
e && e.stopPropagation()
|
||||
list = @$('.recipientList')
|
||||
organisationList = @$('.recipientList-organisationMembers')
|
||||
|
||||
# fade list back in
|
||||
|
||||
list.velocity
|
||||
properties:
|
||||
translateX: 0
|
||||
options:
|
||||
speed: 300
|
||||
|
||||
# reset list height
|
||||
|
||||
list.height('')
|
||||
|
||||
# slide out organisation-list and hide it
|
||||
|
||||
organisationList.velocity
|
||||
properties:
|
||||
translateX: '100%'
|
||||
options:
|
||||
speed: 300
|
||||
complete: -> organisationList.addClass('hide')
|
||||
|
||||
changeFormType: (e) =>
|
||||
type = $(e.target).data('type')
|
||||
if !type
|
||||
|
|
|
@ -27,129 +27,154 @@
|
|||
<input type="hidden" name="formSenderType"/>
|
||||
<div class="form-group">
|
||||
<label for="customer_id">Customer</label>
|
||||
<div class="recipientList dropdown">
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
|
||||
<input id="customer_id" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
|
||||
<span class="caret"></span>
|
||||
</div>
|
||||
<div class="dropdown-menu" aria-labelledby="customer_id">
|
||||
<ul role="menu">
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<ul class="recipientList zIndex-1" role="menu">
|
||||
<li class="recipientList-entry u-clickable horizontal center js-organisation">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white organisation icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Albrecht & Bertschler GmbH
|
||||
<span class="recipientList-detail">- 4 Personen</span>
|
||||
</div>
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="white right arrow icon"></div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center js-organisation">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white organisation icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
BENCHMARK human resources
|
||||
<span class="recipientList-detail">- 2 Personen</span>
|
||||
</div>
|
||||
<div class="white right arrow icon"></div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white user icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Belinda Matt
|
||||
<span class="recipientList-detail">- Albrecht & Bertschler GmbG</span>
|
||||
</div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white user icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Benjamin Wahlers
|
||||
<span class="recipientList-detail">- Wahlers Würste GmbH</span>
|
||||
</div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white user icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat ">
|
||||
Benjamin Weiß
|
||||
<span class="recipientList-detail">- Zeughaus Werbeagentur GmbH</span>
|
||||
</div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white organisation icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Benteler SGL Composite Technology GmbH
|
||||
<span class="recipientList-detail"></span>
|
||||
</div>
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center js-organisation">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white team icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Support Team Berlin
|
||||
<span class="recipientList-detail">- 5 Personen</span>
|
||||
</div>
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="white right arrow icon"></div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center js-organisation">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white organisation icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Bernecker + Rainer Industrie-Elektronik Ges.m.b.H.
|
||||
<span class="recipientList-detail">- 3 Personen</span>
|
||||
</div>
|
||||
<li class="recipientList-entry u-clickable horizontal center">
|
||||
<label class="checkbox-replacement centered">
|
||||
<input type="checkbox" value="" name="select"/>
|
||||
<span class="checkbox icon"></span>
|
||||
</label>
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="white right arrow icon"></div>
|
||||
|
||||
<li class="recipientList-entry u-clickable horizontal center js-organisation">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white organisation icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
Bertsch Ecopower GmbH
|
||||
<span class="recipientList-detail">- 1 Person</span>
|
||||
</div>
|
||||
<div class="white right arrow icon"></div>
|
||||
|
||||
<li class="recipientList-entry recipientList-new u-clickable horizontal center">
|
||||
<div class="recipientList-icon centered">
|
||||
<div class="recipientList-iconSpacer centered">
|
||||
<div class="white plus icon"></div>
|
||||
</div>
|
||||
<div class="recipientList-name flex u-textTruncat">
|
||||
<%- @T('Create new Customer') %>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="recipientList-organisationMembers zIndex-3 hide">
|
||||
<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 ">
|
||||
Andreas Kramer
|
||||
<span class="recipientList-detail">- Albrecht & Bertschler GmbG</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 ">
|
||||
Belinda Matt
|
||||
<span class="recipientList-detail">- Albrecht & Bertschler GmbG</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 ">
|
||||
Damian Sprengler
|
||||
<span class="recipientList-detail">- Albrecht & Bertschler GmbG</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 ">
|
||||
Katharina Nussman
|
||||
<span class="recipientList-detail">- Albrecht & Bertschler GmbG</span>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3136,74 +3136,112 @@ footer {
|
|||
right: 10px;
|
||||
}
|
||||
|
||||
.recipientList .dropdown-menu {
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background: hsl(234,10%,19%);
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.recipientList .dropdown-menu ul {
|
||||
|
||||
.dropdown ul {
|
||||
margin: 0;
|
||||
background: hsl(234,10%,19%);
|
||||
}
|
||||
|
||||
.recipientList-entry {
|
||||
.dropdown li {
|
||||
height: 40px;
|
||||
padding-left: 5px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.recipientList-entry .checkbox-replacement {
|
||||
width: 30px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.recipientList-icon {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.recipientList-entry:not(.recipientList-new) .recipientList-icon {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.recipientList-name {
|
||||
margin-left: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.recipientList-entry:not(:last-child):not(:first-child) {
|
||||
.dropdown li:not(:first-child) {
|
||||
box-shadow: 0 1px rgba(255,255,255,.13) inset;
|
||||
}
|
||||
|
||||
.recipientList-entry:hover {
|
||||
.dropdown li:hover,
|
||||
.dropdown li.is-active {
|
||||
background: hsl(205,90%,60%);
|
||||
}
|
||||
|
||||
.recipientList-entry:hover + :not(:last-child):not(:first-child) {
|
||||
.dropdown li:not(.recipientList-controls):hover + li,
|
||||
.dropdown li.is-active + li {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.recipientList-entry:hover .recipientList-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.recipientList-entry .recipientList-iconSpacer {
|
||||
width: 20px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.recipientList-detail {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.recipientList-entry .icon:not(.plus) {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.recipientList-icon.plus {
|
||||
margin-left: 13px;
|
||||
}
|
||||
.recipientList-entry:hover .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recipientList-new {
|
||||
background: hsl(145,51%,45%);
|
||||
}
|
||||
.recipientList-name {
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.recipientList-new:hover {
|
||||
background: hsl(147,52%,43%);
|
||||
}
|
||||
.recipientList-detail {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.recipientList-icon.plus {
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
.recipientList-new {
|
||||
background: hsl(145,51%,45%);
|
||||
}
|
||||
|
||||
.dropdown .recipientList-new:hover {
|
||||
background: hsl(147,52%,43%);
|
||||
}
|
||||
|
||||
li.recipientList-controls,
|
||||
li.recipientList-controls:hover {
|
||||
padding: 0;
|
||||
background: hsl(206,7%,28%);
|
||||
}
|
||||
|
||||
.recipientList-backClickArea {
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.recipientList-backButton {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
border: 1px solid hsl(234,10%,10%);
|
||||
box-shadow: 0 1px rgba(255,255,255,.03) inset;
|
||||
}
|
||||
|
||||
.recipientList-backClickArea:active .recipientList-backButton {
|
||||
background: hsl(206,7%,25%);
|
||||
box-shadow: 0 1px rgba(0,0,0,.1) inset;
|
||||
}
|
||||
|
||||
.recipientList-backButton .icon {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.recipientList-organisationMembers {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
|
Loading…
Reference in a new issue