attachment + animation
This commit is contained in:
Felix Niklas
parent
47d450181c
commit
f7b4ac30ad
4 changed files with 135 additions and 99 deletions
|
|
@ -318,8 +318,15 @@ class Sidebar extends App.Controller
|
|||
|
||||
class Edit extends App.Controller
|
||||
elements:
|
||||
'textarea' : 'textarea'
|
||||
'.js-edit-control' : 'editControls'
|
||||
'textarea' : 'textarea'
|
||||
'.edit-control-item' : 'editControlItem'
|
||||
'.edit-controls': 'editControls'
|
||||
'.recipient-picker': 'recipientPicker'
|
||||
'.recipient-list': 'recipientList'
|
||||
'.recipient-list .list-arrow': 'recipientListArrow'
|
||||
'.js-attachment': 'attachmentHolder'
|
||||
'.js-attachment-text': 'attachmentText'
|
||||
'.bubble-placeholder-hint': 'bubblePlaceholderHint'
|
||||
|
||||
events:
|
||||
'click .submit': 'update'
|
||||
|
|
@ -329,9 +336,9 @@ class Edit extends App.Controller
|
|||
'click .pop-selected': 'show_selectable_types'
|
||||
'focus textarea': 'open_textarea'
|
||||
'input textarea': 'detect_empty_textarea'
|
||||
'click .recipient-picker': 'show_recipients'
|
||||
'click .recipient-picker': 'toggle_recipients'
|
||||
'click .recipient-list': 'stopPropagation'
|
||||
'click .list-entry-type div': 'change_recipient_type'
|
||||
'click .list-entry-type div': 'change_type'
|
||||
'submit .recipient-list form': 'add_recipient'
|
||||
|
||||
constructor: ->
|
||||
|
|
@ -465,33 +472,36 @@ class Edit extends App.Controller
|
|||
)
|
||||
@subscribeIdTextModule = ticket.subscribe( callback )
|
||||
|
||||
show_recipients: =>
|
||||
toggle_recipients: =>
|
||||
if !@pickRecipientsCatcher
|
||||
@show_recipients()
|
||||
else
|
||||
@hide_recipients()
|
||||
|
||||
show_recipients: ->
|
||||
padding = 15
|
||||
toggle = @el.find('.recipient-picker')
|
||||
list = @el.find('.recipient-list')
|
||||
arrow = list.find('.list-arrow')
|
||||
|
||||
toggle.addClass('is-open')
|
||||
list.removeClass('hide')
|
||||
@recipientPicker.addClass('is-open')
|
||||
@recipientList.removeClass('hide')
|
||||
|
||||
toggleDimensions = toggle.get(0).getBoundingClientRect()
|
||||
availableHeight = toggle.scrollParent().outerHeight()
|
||||
pickerDimensions = @recipientPicker.get(0).getBoundingClientRect()
|
||||
availableHeight = @recipientPicker.scrollParent().outerHeight()
|
||||
|
||||
top = toggleDimensions.height/2 - list.height()/2
|
||||
bottomDistance = availableHeight - padding - (toggleDimensions.top + top + list.height())
|
||||
top = pickerDimensions.height/2 - @recipientList.height()/2
|
||||
bottomDistance = availableHeight - padding - (pickerDimensions.top + top + @recipientList.height())
|
||||
|
||||
if bottomDistance < 0
|
||||
top += bottomDistance
|
||||
|
||||
arrowCenter = -top + toggleDimensions.height/2
|
||||
arrowCenter = -top + pickerDimensions.height/2
|
||||
|
||||
arrow.css('top', arrowCenter)
|
||||
list.css('top', top)
|
||||
@recipientListArrow.css('top', arrowCenter)
|
||||
@recipientList.css('top', top)
|
||||
|
||||
$.Velocity.hook(list, 'transformOriginX', "0")
|
||||
$.Velocity.hook(list, 'transformOriginY', "#{ arrowCenter }px")
|
||||
$.Velocity.hook(@recipientList, 'transformOriginX', "0")
|
||||
$.Velocity.hook(@recipientList, 'transformOriginY', "#{ arrowCenter }px")
|
||||
|
||||
list.velocity
|
||||
@recipientList.velocity
|
||||
properties:
|
||||
scale: [ 1, 0 ]
|
||||
opacity: [ 1, 0 ]
|
||||
|
|
@ -499,26 +509,27 @@ class Edit extends App.Controller
|
|||
speed: 300
|
||||
easing: [ 0.34, 1.61, 0.7, 1 ]
|
||||
|
||||
@selectTypeCatcher = new App.clickCatcher
|
||||
@pickRecipientsCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_recipients
|
||||
zIndexScale: 6
|
||||
|
||||
hide_recipients: =>
|
||||
list = @el.find('.recipient-list')
|
||||
@pickRecipientsCatcher.remove()
|
||||
@pickRecipientsCatcher = null
|
||||
|
||||
@el.find('.recipient-picker').removeClass('is-open')
|
||||
@recipientPicker.removeClass('is-open')
|
||||
|
||||
list.velocity
|
||||
@recipientList.velocity
|
||||
properties:
|
||||
scale: [ 0, 1 ]
|
||||
opacity: [ 0, 1 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 500, 20 ]
|
||||
complete: -> list.addClass('hide')
|
||||
complete: -> @recipientList.addClass('hide')
|
||||
|
||||
change_recipient_type: (e) ->
|
||||
change_type: (e) ->
|
||||
$(e.target).addClass('active').siblings('.active').removeClass('active')
|
||||
# store $(this).data('value')
|
||||
|
||||
|
|
@ -548,6 +559,7 @@ class Edit extends App.Controller
|
|||
@set_type $(e.target).data('value')
|
||||
@hide_type()
|
||||
@selectTypeCatcher.remove()
|
||||
@selectTypeCatcher = null
|
||||
|
||||
hide_type: =>
|
||||
@el.find('.pop-selector').addClass('hide')
|
||||
|
|
@ -567,35 +579,43 @@ class Edit extends App.Controller
|
|||
|
||||
open_textarea: =>
|
||||
if !@textareaCatcher and !@textarea.val()
|
||||
@el.addClass('mode--edit')
|
||||
@el.addClass('is-open')
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.open - 38 }px"
|
||||
marginBottom: 38
|
||||
options:
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
# scroll to bottom
|
||||
@textarea.velocity "scroll",
|
||||
container: @textarea.scrollParent()
|
||||
offset: @textareaHeight.open - @textareaHeight.closed
|
||||
offset: 99999
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
queue: false
|
||||
|
||||
@textarea.velocity
|
||||
@editControlItem.velocity "transition.slideRightIn",
|
||||
duration: 300
|
||||
stagger: 50
|
||||
drag: true
|
||||
|
||||
# move attachment text to the left bottom (bottom happens automatically)
|
||||
|
||||
@attachmentHolder.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.open }px"
|
||||
translateX: -@attachmentText.position().left + "px"
|
||||
options:
|
||||
speed: 300
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
queue: false
|
||||
|
||||
@editControls.velocity
|
||||
@bubblePlaceholderHint.velocity
|
||||
properties:
|
||||
translateY: [
|
||||
(i) -> (i+1) * 38,
|
||||
'easeOutQuad',
|
||||
0
|
||||
]
|
||||
opacity: [ 1, [ 0.34, 1.61, 0.7, 1 ], 0]
|
||||
scale: [ 1, 'easeOutQuad', 0 ]
|
||||
opacity: 0
|
||||
options:
|
||||
speed: 300
|
||||
stagger: (i) -> i*100
|
||||
duration: 300
|
||||
|
||||
@add_textarea_catcher()
|
||||
|
||||
|
|
@ -613,28 +633,30 @@ class Edit extends App.Controller
|
|||
close_textarea: =>
|
||||
@remove_textarea_catcher()
|
||||
if !@textarea.val()
|
||||
@el.removeClass('mode--edit')
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.closed }px"
|
||||
marginBottom: 0
|
||||
options:
|
||||
speed: 300
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
complete: => @el.removeClass('is-open')
|
||||
|
||||
@attachmentHolder.velocity
|
||||
properties:
|
||||
translateX: 0
|
||||
options:
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
@editControls.velocity
|
||||
@bubblePlaceholderHint.velocity
|
||||
properties:
|
||||
translateY: [
|
||||
0,
|
||||
'easeOutQuad',
|
||||
(i) -> (i+1) * 38
|
||||
]
|
||||
scale: [ 0, [ 0.34, 1.61, 0.7, 1 ], 1 ]
|
||||
opacity: [ 0, 'easeOutQuad', 1 ]
|
||||
opacity: 1
|
||||
options:
|
||||
speed: 300
|
||||
stagger: 300
|
||||
backwards: true
|
||||
duration: 300
|
||||
|
||||
@editControlItem.css('display', 'none')
|
||||
|
||||
autosaveStop: =>
|
||||
@clearInterval( 'autosave' )
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="bubble-grid horizontal">
|
||||
<div class="vertical center u-positionOrigin">
|
||||
<div class="vertical center edit-controls">
|
||||
<div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="dark pop-select zIndex-7 js-edit-control">
|
||||
<div class="dark pop-select zIndex-7 edit-control-item">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-positionOrigin js-edit-control">
|
||||
<div class="recipient-picker zIndex-5 u-clickable horizontal centered">
|
||||
<div class="u-positionOrigin zIndex-7 edit-control-item">
|
||||
<div class="recipient-picker u-clickable horizontal centered">
|
||||
<div class="recipients icon"></div>
|
||||
<div class="recipient-count">3</div>
|
||||
</div>
|
||||
<div class="recipient-list zIndex-7 hide">
|
||||
<div class="recipient-list hide">
|
||||
<div class="list-arrow"></div>
|
||||
<div class="list-head horizontal">
|
||||
<%- @T('Recipients') %>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visibility-toggle zIndex-7 u-clickable js-edit-control">
|
||||
<div class="visibility-toggle zIndex-7 u-clickable edit-control-item">
|
||||
<div class="internal-visibility centered" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
|
|
@ -78,9 +78,13 @@
|
|||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<textarea></textarea>
|
||||
<div class="bubble-placeholder u-unclickable">
|
||||
Antwort eingeben oder
|
||||
<span class="highlight u-clickable js-upload">Dateien wählen</span>
|
||||
<!-- .text-bubble grows with textarea (and expanding clone) -->
|
||||
<div class="article-attachment js-attachment u-unclickable">
|
||||
<span class="bubble-placeholder-hint">Antwort eingeben oder</span>
|
||||
<span class="highlight u-clickable edit-upload-button js-attachment-text">
|
||||
Dateien wählen..
|
||||
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
//= require ./app/lib/core/jquery-ui-1.8.23.custom.min.js
|
||||
//= require ./app/lib/core/underscore-1.6.0.js
|
||||
|
||||
//= require ./app/lib/animations/jquery.velocity.min.js
|
||||
//= require ./app/lib/animations/velocity.min.js
|
||||
//= require ./app/lib/animations/velocity.ui.js
|
||||
|
||||
//not_used= require_tree ./app/lib/spine
|
||||
|
|
|
|||
|
|
@ -80,15 +80,14 @@ small {
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
background: rgba(255,255,0,.13);
|
||||
}
|
||||
|
||||
.clickCatcher + .clickCatcher {
|
||||
background: rgba(255,0,255,.13);
|
||||
.debug .clickCatcher {
|
||||
background: hsla(0,100%,50%,.13);
|
||||
}
|
||||
|
||||
.clickCatcher + .clickCatcher + .clickCatcher {
|
||||
background: rgba(0,255,128,.21);
|
||||
.debug .clickCatcher + .clickCatcher {
|
||||
background: hsla(50,100%,50%,.13);
|
||||
}
|
||||
|
||||
#app > nav {
|
||||
|
|
@ -2798,32 +2797,39 @@ footer {
|
|||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ticket-edit .js-edit-control {
|
||||
.edit-controls {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edit-control-item {
|
||||
width: 38px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: scale(0);
|
||||
top: 38px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ticket-edit .js-edit-control:not(:last-child) {
|
||||
.edit-control-item:nth-child(3) {
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.edit-control-item:nth-child(4) {
|
||||
top: 110px;
|
||||
}
|
||||
|
||||
.edit-control-item:not(:last-child) {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable .icon {
|
||||
.pop-selectable .icon {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable:hover .icon {
|
||||
.pop-selectable:hover .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ticket-edit button[type=submit] {
|
||||
margin: 5px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.visibility-toggle > * {
|
||||
height: 36px;
|
||||
width: 38px;
|
||||
|
|
@ -2970,20 +2976,18 @@ footer {
|
|||
border-color: #b3b3b3;
|
||||
white-space: normal;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ticket-edit textarea {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 10px 20px;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit .bubble-placeholder {
|
||||
opacity: 0;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.ticket-edit .bubble-arrow:after {
|
||||
|
|
@ -2991,23 +2995,29 @@ footer {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bubble-placeholder {
|
||||
position: absolute;
|
||||
color: #b3b3b3;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
.article-attachment {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 10px 0;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.edit-upload-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.pop-select {
|
||||
position: relative;
|
||||
.pop-selector {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pop-selector {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pop-selected,
|
||||
.pop-selectable {
|
||||
width: 38px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue