add click catchers
they are visible right now for testing purposes
This commit is contained in:
Felix Niklas
parent
9999caf2d9
commit
4676b51498
6 changed files with 221 additions and 110 deletions
|
|
@ -0,0 +1,20 @@
|
|||
class App.clickCatcher extends Spine.Controller
|
||||
# clickCatcher has no template because it's a plain <div>
|
||||
className: 'clickCatcher'
|
||||
|
||||
constructor: (holder, callback, zIndexScale) ->
|
||||
super
|
||||
@render() if @callback and @holder
|
||||
|
||||
triggerCallback: (event) =>
|
||||
event.stopPropagation()
|
||||
@callback()
|
||||
@remove()
|
||||
|
||||
render: ->
|
||||
@el.addClass("zIndex-#{ @zIndexScale }") if @zIndexScale
|
||||
@el.on('click', @triggerCallback)
|
||||
@el.appendTo(@holder)
|
||||
|
||||
remove: ->
|
||||
@el.remove()
|
||||
|
|
@ -317,15 +317,18 @@ class Sidebar extends App.Controller
|
|||
|
||||
|
||||
class Edit extends App.Controller
|
||||
elements:
|
||||
'textarea' : 'textarea'
|
||||
|
||||
events:
|
||||
'click .submit': 'update'
|
||||
'click [data-type="reset"]': 'reset'
|
||||
'click .visibility.toggle': 'toggle_visibility'
|
||||
'click .visibility-toggle': 'toggle_visibility'
|
||||
'click .pop-selectable': 'select_type'
|
||||
'click .pop-selected': 'show_selectable_types'
|
||||
'focus textarea': 'show_controls'
|
||||
'blur textarea': 'hide_controls'
|
||||
'click .recipient-picker': 'toggle_recipients'
|
||||
'input textarea': 'detect_empty_textarea'
|
||||
'click .recipient-picker': 'show_recipients'
|
||||
'click .recipient-list': 'stopPropagation'
|
||||
'click .list-entry-type div': 'change_recipient_type'
|
||||
'submit .recipient-list form': 'add_recipient'
|
||||
|
|
@ -446,7 +449,7 @@ class Edit extends App.Controller
|
|||
# show text module UI
|
||||
if !@isRole('Customer')
|
||||
textModule = new App.WidgetTextModule(
|
||||
el: @el.find('textarea')
|
||||
el: @textarea
|
||||
data:
|
||||
ticket: ticket
|
||||
)
|
||||
|
|
@ -456,50 +459,58 @@ class Edit extends App.Controller
|
|||
)
|
||||
@subscribeIdTextModule = ticket.subscribe( callback )
|
||||
|
||||
toggle_recipients: =>
|
||||
show_recipients: =>
|
||||
padding = 15
|
||||
toggle = @el.find('.recipient-picker')
|
||||
list = @el.find('.recipient-list')
|
||||
arrow = list.find('.list-arrow')
|
||||
|
||||
if toggle.hasClass('state--open')
|
||||
toggle.removeClass('state--open')
|
||||
list.velocity
|
||||
properties:
|
||||
scale: [ 0, 1 ]
|
||||
opacity: [ 0, 1 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 500, 20 ]
|
||||
complete: -> list.addClass('hide')
|
||||
else
|
||||
toggle.addClass('state--open')
|
||||
list.removeClass('hide')
|
||||
toggle.addClass('is-open')
|
||||
list.removeClass('hide')
|
||||
|
||||
toggleDimensions = toggle.get(0).getBoundingClientRect()
|
||||
availableHeight = toggle.scrollParent().outerHeight()
|
||||
toggleDimensions = toggle.get(0).getBoundingClientRect()
|
||||
availableHeight = toggle.scrollParent().outerHeight()
|
||||
|
||||
top = toggleDimensions.height/2 - list.height()/2
|
||||
bottomDistance = availableHeight - padding - (toggleDimensions.top + top + list.height())
|
||||
top = toggleDimensions.height/2 - list.height()/2
|
||||
bottomDistance = availableHeight - padding - (toggleDimensions.top + top + list.height())
|
||||
|
||||
if bottomDistance < 0
|
||||
top += bottomDistance
|
||||
if bottomDistance < 0
|
||||
top += bottomDistance
|
||||
|
||||
arrowCenter = -top + toggleDimensions.height/2
|
||||
arrowCenter = -top + toggleDimensions.height/2
|
||||
|
||||
arrow.css('top', arrowCenter)
|
||||
list.css('top', top)
|
||||
arrow.css('top', arrowCenter)
|
||||
list.css('top', top)
|
||||
|
||||
$.Velocity.hook(list, 'transformOriginX', "0")
|
||||
$.Velocity.hook(list, 'transformOriginY', "#{ arrowCenter }px")
|
||||
$.Velocity.hook(list, 'transformOriginX', "0")
|
||||
$.Velocity.hook(list, 'transformOriginY', "#{ arrowCenter }px")
|
||||
|
||||
list.velocity
|
||||
properties:
|
||||
scale: [ 1, 0 ]
|
||||
opacity: [ 1, 0 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 0.34, 1.61, 0.7, 1 ]
|
||||
list.velocity
|
||||
properties:
|
||||
scale: [ 1, 0 ]
|
||||
opacity: [ 1, 0 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 0.34, 1.61, 0.7, 1 ]
|
||||
|
||||
@selectTypeCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_recipients
|
||||
zIndexScale: 6
|
||||
|
||||
hide_recipients: =>
|
||||
list = @el.find('.recipient-list')
|
||||
|
||||
@el.find('.recipient-picker').removeClass('is-open')
|
||||
|
||||
list.velocity
|
||||
properties:
|
||||
scale: [ 0, 1 ]
|
||||
opacity: [ 0, 1 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 500, 20 ]
|
||||
complete: -> list.addClass('hide')
|
||||
|
||||
change_recipient_type: (e) ->
|
||||
$(e.target).addClass('active').siblings('.active').removeClass('active')
|
||||
|
|
@ -512,18 +523,27 @@ class Edit extends App.Controller
|
|||
# store recipient
|
||||
|
||||
toggle_visibility: ->
|
||||
if @el.hasClass('state--public')
|
||||
@el.removeClass('state--public')
|
||||
@el.addClass('state--internal')
|
||||
if @el.hasClass('is-public')
|
||||
@el.removeClass('is-public')
|
||||
@el.addClass('is-internal')
|
||||
else
|
||||
@el.addClass('state--public')
|
||||
@el.removeClass('state--internal')
|
||||
@el.addClass('is-public')
|
||||
@el.removeClass('is-internal')
|
||||
|
||||
show_selectable_types: =>
|
||||
@el.find('.pop-selector').removeClass('hide')
|
||||
|
||||
@selectTypeCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_type
|
||||
zIndexScale: 6
|
||||
|
||||
select_type: (e) =>
|
||||
@set_type $(e.target).data('value')
|
||||
@hide_type()
|
||||
@selectTypeCatcher.remove()
|
||||
|
||||
hide_type: =>
|
||||
@el.find('.pop-selector').addClass('hide')
|
||||
|
||||
set_type: (type) ->
|
||||
|
|
@ -533,13 +553,33 @@ class Edit extends App.Controller
|
|||
@type = type
|
||||
typeIcon.addClass @type
|
||||
|
||||
detect_empty_textarea: =>
|
||||
if !@textarea.val()
|
||||
@add_textarea_catcher()
|
||||
else
|
||||
@remove_textarea_catcher()
|
||||
|
||||
show_controls: =>
|
||||
@el.addClass('mode--edit')
|
||||
# scroll to bottom
|
||||
@el.scrollParent().scrollTop(99999)
|
||||
if !@textareaCatcher and !@textarea.val()
|
||||
@el.addClass('mode--edit')
|
||||
# scroll to bottom
|
||||
@el.scrollParent().scrollTop(99999)
|
||||
@add_textarea_catcher()
|
||||
|
||||
add_textarea_catcher: ->
|
||||
@textareaCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_controls
|
||||
zIndexScale: 4
|
||||
|
||||
remove_textarea_catcher: ->
|
||||
return if !@textareaCatcher
|
||||
@textareaCatcher.remove()
|
||||
@textareaCatcher = null
|
||||
|
||||
hide_controls: =>
|
||||
if !@el.find('textarea').val()
|
||||
@remove_textarea_catcher()
|
||||
if !@textarea.val()
|
||||
@el.removeClass('mode--edit')
|
||||
|
||||
autosaveStop: =>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="fit ticket-zoom vertical">
|
||||
<div class="flex relative">
|
||||
<div class="flex u-positionOrigin">
|
||||
<div class="main no-padding">
|
||||
<div class="flex-overflow sidebar-tabs--spacing">
|
||||
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
|
||||
<div class="page-header horizontal">
|
||||
<div class="flex vertical center">
|
||||
<div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
|
||||
<div class="ticket-article"></div>
|
||||
|
||||
</div>
|
||||
<div class="ticket-edit is-public"></div>
|
||||
|
||||
<div class="ticket-edit state--public sidebar-tabs--spacing"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-content horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
|
||||
<div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
|
||||
<div class="avatar user-popover" data-placement="<% if article.sender.name isnt 'Agent': %>left<% else: %>right<% end %>" data-id="<%= article.created_by_id %>" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
|
||||
<div class="flex bubble-gap text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="bubble-grid horizontal">
|
||||
<div class="vertical center">
|
||||
<div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="edit-controls">
|
||||
<div class="dark pop-select">
|
||||
<div class="dark pop-select zIndex-7">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
|
|
@ -25,10 +25,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="recipient-picker u-clickable horizontal centered">
|
||||
<div class="recipients icon"></div>
|
||||
<div class="recipient-count">3</div>
|
||||
<div class="recipient-list hide">
|
||||
<div class="u-positionOrigin">
|
||||
<div class="recipient-picker zIndex-5 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="list-arrow"></div>
|
||||
<div class="list-head horizontal">
|
||||
<%- @T('Recipients') %>
|
||||
|
|
@ -42,7 +44,7 @@
|
|||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="list-entry horizontal centered">
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Julia Maier</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
|
|
@ -57,41 +59,35 @@
|
|||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<form class="list-edit">
|
||||
<input type="email" class="list-entry" placeholder="<%- @T('Add recipients..') %>"></input>
|
||||
<input type="submit" tabindex="-1"></input>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="visibility-toggle zIndex-7 u-clickable centered">
|
||||
<div class="internal-visibility" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
<div class="public-visibility" title="<%- @T("set internal") %>">
|
||||
<div class="public visibility icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex article-content bubble-gap">
|
||||
<div class="flex article-content zIndex-5 bubble-gap">
|
||||
<div class="internal-border">
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<textarea></textarea>
|
||||
<div class="bubble-placeholder">
|
||||
<span class="u-unclickable">Antwort eingeben oder </span>
|
||||
<div class="bubble-placeholder u-unclickable">
|
||||
Antwort eingeben oder
|
||||
<span class="highlight u-clickable js-upload">Dateien wählen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-controls">
|
||||
<div class="horizontal justify-end center">
|
||||
<div class="visibility toggle u-clickable centered">
|
||||
<div class="internal-visibility">
|
||||
<div class="internal visibility icon"></div>
|
||||
<div class="visibility-label">internal</div>
|
||||
</div>
|
||||
<div class="public-visibility">
|
||||
<div class="public visibility icon"></div>
|
||||
<div class="visibility-label">public</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -19,11 +19,78 @@ small {
|
|||
}
|
||||
|
||||
.u-clickable {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.u-positionOrigin {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zIndex-1,
|
||||
.zIndex-2,
|
||||
.zIndex-3,
|
||||
.zIndex-4,
|
||||
.zIndex-5,
|
||||
.zIndex-6,
|
||||
.zIndex-7,
|
||||
.zIndex-8,
|
||||
.zIndex-9,
|
||||
.zIndex-10 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zIndex-1 {
|
||||
z-index: 100;
|
||||
}
|
||||
.zIndex-2 {
|
||||
z-index: 200;
|
||||
}
|
||||
.zIndex-3 {
|
||||
z-index: 300;
|
||||
}
|
||||
.zIndex-4 {
|
||||
z-index: 400;
|
||||
}
|
||||
.zIndex-5 {
|
||||
z-index: 500;
|
||||
}
|
||||
.zIndex-6 {
|
||||
z-index: 600;
|
||||
}
|
||||
.zIndex-7 {
|
||||
z-index: 700;
|
||||
}
|
||||
.zIndex-8 {
|
||||
z-index: 800;
|
||||
}
|
||||
.zIndex-9 {
|
||||
z-index: 900;
|
||||
}
|
||||
.zIndex-10 {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.clickCatcher {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
background: rgba(255,255,0,.13);
|
||||
}
|
||||
|
||||
.clickCatcher + .clickCatcher {
|
||||
background: rgba(255,0,255,.13);
|
||||
}
|
||||
|
||||
.clickCatcher + .clickCatcher + .clickCatcher {
|
||||
background: rgba(0,255,128,.21);
|
||||
}
|
||||
|
||||
#app > nav {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -34,7 +101,6 @@ a[data-tooltip],
|
|||
time[data-tooltip],
|
||||
span[data-tooltip] {
|
||||
position: relative;
|
||||
z-index: 99000;
|
||||
}
|
||||
a[data-tooltip]:before,
|
||||
time[data-tooltip]:before,
|
||||
|
|
@ -2495,6 +2561,11 @@ footer {
|
|||
transition: 500ms;
|
||||
}
|
||||
|
||||
.ticket-zoom .flex-overflow {
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ticket-zoom.state--sidebar-hidden .main {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -2552,6 +2623,7 @@ footer {
|
|||
}
|
||||
|
||||
.article-content {
|
||||
position: relative;
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
||||
|
|
@ -2565,10 +2637,6 @@ footer {
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.article-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
background: #2c2d36;
|
||||
|
|
@ -2708,13 +2776,9 @@ footer {
|
|||
|
||||
.ticket-edit {
|
||||
margin-top: auto;
|
||||
margin-bottom: 37px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bottom-form {
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -2722,10 +2786,10 @@ footer {
|
|||
.ticket-edit .internal-border {
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
margin: -5px -5px 0;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.ticket-edit.state--internal .internal-border {
|
||||
.ticket-edit.is-internal .internal-border {
|
||||
background: repeating-linear-gradient(45deg, hsl(18,79%,89%), hsl(18,79%,89%) 5px, transparent 5px, transparent 6px);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
|
@ -2762,53 +2826,45 @@ footer {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.visibility.toggle {
|
||||
margin-right: 10px;
|
||||
.visibility-toggle {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.visibility.toggle,
|
||||
.visibility-toggle,
|
||||
.recipient-picker {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.visibility-label {
|
||||
margin-left: 5px;
|
||||
min-width: 53px;
|
||||
line-height: 19px;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.state--public .internal-visibility {
|
||||
.ticket-edit.is-public .internal-visibility {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.state--internal .visibility.toggle {
|
||||
.ticket-edit.is-internal .visibility-toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.state--internal .public-visibility {
|
||||
.ticket-edit.is-internal .public-visibility {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ticket-edit .recipient-picker {
|
||||
height: 38px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
.ticket-edit .recipient-picker.state--open {
|
||||
.ticket-edit .recipient-picker.is-open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recipient-picker .icon {
|
||||
margin-top: -8px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.recipient-count {
|
||||
margin-top: 5px;
|
||||
margin-left: 3px;
|
||||
margin-top: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -2819,7 +2875,7 @@ footer {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.recipient-picker.state--open .recipient-list {
|
||||
.recipient-picker.is-open .recipient-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2924,7 +2980,7 @@ footer {
|
|||
}
|
||||
|
||||
.ticket-edit.mode--edit textarea {
|
||||
height: 115px;
|
||||
height: 155px;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit .bubble-placeholder {
|
||||
|
|
@ -2945,7 +3001,6 @@ footer {
|
|||
|
||||
.pop-select {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pop-selector {
|
||||
|
|
|
|||
Loading…
Reference in a new issue