ticketZoom: remove clickCatcher, improve ux
This commit is contained in:
parent
0840b521fa
commit
8ebf1bcfe3
2 changed files with 40 additions and 50 deletions
|
@ -23,10 +23,11 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
'click .js-selectedArticleType': 'showSelectableArticleType'
|
||||
'click .recipient-picker': 'toggle_recipients'
|
||||
'click .recipient-list': 'stopPropagation'
|
||||
'click .js-mail-inputs': 'stopPropagation'
|
||||
'click .js-writeArea': 'stopPropagation'
|
||||
'click .list-entry-type div': 'change_type'
|
||||
'submit .recipient-list form': 'add_recipient'
|
||||
'focus .js-textarea': 'openTextarea'
|
||||
'input .js-textarea': 'detectEmptyTextarea'
|
||||
#'dragenter': 'onDragenter'
|
||||
#'dragleave': 'onDragleave'
|
||||
#'drop': 'onFileDrop'
|
||||
|
@ -129,6 +130,9 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
if @subscribeIdTextModule
|
||||
App.Ticket.unsubscribe(@subscribeIdTextModule)
|
||||
|
||||
@(window).off 'click.ticket-zoom-select-type'
|
||||
$(window).on 'click.ticket-zoom-textarea'
|
||||
|
||||
render: ->
|
||||
|
||||
ticket = App.Ticket.fullLocal( @ticket_id )
|
||||
|
@ -182,7 +186,6 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
@attachmentPlaceholder.addClass('hide')
|
||||
@attachmentUpload.removeClass('hide')
|
||||
@cancelContainer.removeClass('hide')
|
||||
console.log('upload start')
|
||||
|
||||
onAborted: =>
|
||||
@attachmentPlaceholder.removeClass('hide')
|
||||
|
@ -202,7 +205,6 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
@progressText.text('')
|
||||
|
||||
@renderAttachment(response.data)
|
||||
console.log('upload complete', response.data )
|
||||
|
||||
# Called during upload progress, first parameter
|
||||
# is decimal value from 0 to 100.
|
||||
|
@ -212,7 +214,6 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
# hide cancel on 90%
|
||||
if parseInt(progress) >= 90
|
||||
@cancelContainer.addClass('hide')
|
||||
console.log('uploadProgress ', parseInt(progress))
|
||||
)
|
||||
)
|
||||
|
||||
|
@ -293,10 +294,10 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
add_recipient: (e) ->
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
console.log 'add recipient', e
|
||||
# store recipient
|
||||
|
||||
toggleVisibility: ->
|
||||
toggleVisibility: (event) ->
|
||||
event.stopPropagation()
|
||||
if @articleNewEdit.hasClass 'is-public'
|
||||
@articleNewEdit
|
||||
.removeClass 'is-public'
|
||||
|
@ -311,26 +312,24 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
|
||||
@$('[name=internal]').val ''
|
||||
|
||||
showSelectableArticleType: =>
|
||||
showSelectableArticleType: (event) =>
|
||||
event.stopPropagation()
|
||||
@el.find('.js-articleTypes').removeClass('is-hidden')
|
||||
$(window).on 'click.ticket-zoom-select-type', @hideSelectableArticleType
|
||||
|
||||
@selectTypeCatcher = new App.ClickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hideSelectableArticleType
|
||||
zIndexScale: 6
|
||||
|
||||
selectArticleType: (e) =>
|
||||
articleTypeToSet = $(e.target).closest('.pop-selectable').data('value')
|
||||
selectArticleType: (event) =>
|
||||
event.stopPropagation()
|
||||
articleTypeToSet = $(event.target).closest('.pop-selectable').data('value')
|
||||
@setArticleType( articleTypeToSet )
|
||||
@hideSelectableArticleType()
|
||||
|
||||
@selectTypeCatcher.remove()
|
||||
@selectTypeCatcher = null
|
||||
$(window).off 'click.ticket-zoom-select-type'
|
||||
|
||||
hideSelectableArticleType: =>
|
||||
@el.find('.js-articleTypes').addClass('is-hidden')
|
||||
|
||||
setArticleType: (type) ->
|
||||
wasScrolledToBottom = @isScrolledToBottom()
|
||||
@type = type
|
||||
@$('[name=type]').val(type)
|
||||
@articleNewEdit.attr('data-type', type)
|
||||
|
@ -377,11 +376,14 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
else
|
||||
@$('[data-name=body] [data-signature=true]').remove()
|
||||
|
||||
detectEmptyTextarea: =>
|
||||
if !@textarea.text().trim()
|
||||
@addTextareaCatcher()
|
||||
else
|
||||
@removeTextareaCatcher()
|
||||
@scrollToBottom() if wasScrolledToBottom
|
||||
|
||||
isScrolledToBottom: ->
|
||||
console.log 'isScrolledToBottom', @el.scrollParent().scrollTop() + @el.scrollParent().height(), @el.scrollParent().prop('scrollHeight')
|
||||
return @el.scrollParent().scrollTop() + @el.scrollParent().height() is @el.scrollParent().prop('scrollHeight')
|
||||
|
||||
scrollToBottom: ->
|
||||
@el.scrollParent().scrollTop @el.scrollParent().prop('scrollHeight')
|
||||
|
||||
openTextarea: (event, withoutAnimation) =>
|
||||
if @articleNewEdit.hasClass('is-open')
|
||||
|
@ -400,7 +402,7 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
options:
|
||||
duration: duration
|
||||
easing: 'easeOutQuad'
|
||||
complete: => @addTextareaCatcher()
|
||||
complete: => $(window).on 'click.ticket-zoom-textarea', @closeTextarea
|
||||
|
||||
@textBubble.velocity
|
||||
properties:
|
||||
|
@ -443,21 +445,9 @@ class App.TicketZoomArticleNew extends App.Controller
|
|||
options:
|
||||
duration: duration
|
||||
|
||||
addTextareaCatcher: =>
|
||||
if @articleNewEdit.is(':visible')
|
||||
@textareaCatcher = new App.ClickCatcher
|
||||
holder: @articleNewEdit.offsetParent()
|
||||
callback: @closeTextarea
|
||||
zIndexScale: 4
|
||||
|
||||
removeTextareaCatcher: ->
|
||||
return if !@textareaCatcher
|
||||
@textareaCatcher.remove()
|
||||
@textareaCatcher = null
|
||||
|
||||
closeTextarea: =>
|
||||
@removeTextareaCatcher()
|
||||
if !@textarea.text().trim() && !@attachments.length && not @isIE10()
|
||||
$(window).off 'click.ticket-zoom-textarea'
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
|
|
|
@ -45,16 +45,16 @@
|
|||
<div class="formGroup-label">
|
||||
<label for=""><%- @T('To') %></label>
|
||||
</div>
|
||||
<div class="controls"><input id="" type="text" name="to" value="<%= @article.to %>" class="form-control" required="required"></div>
|
||||
<div class="controls"><input id="" type="text" name="to" value="<%= @article.to %>" class="form-control js-mail-inputs" required="required"></div>
|
||||
</div>
|
||||
<div class="input form-group">
|
||||
<div class="formGroup-label">
|
||||
<label for=""><%- @T('Cc') %></label>
|
||||
</div>
|
||||
<div class="controls"><input id="" type="text" name="cc" value="<%= @article.cc %>" class="form-control"></div>
|
||||
<div class="controls"><input id="" type="text" name="cc" value="<%= @article.cc %>" class="form-control js-mail-inputs"></div>
|
||||
</div>
|
||||
|
||||
<div class="textBubble">
|
||||
<div class="textBubble js-writeArea">
|
||||
<div class="bubble-arrow"></div>
|
||||
<div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
|
||||
<!-- .textBubble grows with textarea (and expanding clone) -->
|
||||
|
|
Loading…
Reference in a new issue