diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index d25b6a427..eb8f428a0 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -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' ) diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco index 0f9bdbd1f..c58aafc24 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco @@ -1,8 +1,8 @@
-
+
-
+
@@ -23,12 +23,12 @@
-
-
+
+
3
-
+
<%- @T('Recipients') %> @@ -64,7 +64,7 @@
-
+
">
@@ -78,9 +78,13 @@
-
- Antwort eingeben oder - Dateien wählen + +
+ Antwort eingeben oder + + Dateien wählen.. + +
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 028975953..4c48a0809 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -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 diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index 5af8d4624..9f54c85d2 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -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;