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