edit ticket visibility & type UI
This commit is contained in:
Felix Niklas
parent
ba670dbc33
commit
277f8ff05e
5 changed files with 198 additions and 55 deletions
|
|
@ -322,6 +322,9 @@ class Edit extends App.Controller
|
|||
events:
|
||||
'click .submit': 'update'
|
||||
'click [data-type="reset"]': 'reset'
|
||||
'click .visibility.toggle': 'toggle_visibility'
|
||||
'click .pop-selectable': 'select_type'
|
||||
'click .pop-selected': 'show_selectable_types'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
|
@ -336,8 +339,14 @@ class Edit extends App.Controller
|
|||
|
||||
ticket = App.Ticket.fullLocal( @ticket.id )
|
||||
|
||||
console.log ticket
|
||||
|
||||
# gets referenced in @set_type
|
||||
@type = 'email'
|
||||
|
||||
@html App.view('ticket_zoom/edit')(
|
||||
ticket: ticket
|
||||
type: @type
|
||||
isCustomer: @isRole('Customer')
|
||||
formChanged: !_.isEmpty( App.TaskManager.get(@task_key).state )
|
||||
)
|
||||
|
|
@ -442,6 +451,28 @@ class Edit extends App.Controller
|
|||
)
|
||||
@subscribeIdTextModule = ticket.subscribe( callback )
|
||||
|
||||
toggle_visibility: ->
|
||||
if @el.hasClass('state--public')
|
||||
@el.removeClass('state--public')
|
||||
@el.addClass('state--internal')
|
||||
else
|
||||
@el.addClass('state--public')
|
||||
@el.removeClass('state--internal')
|
||||
|
||||
show_selectable_types: =>
|
||||
@el.find('.pop-selector').removeClass('hide')
|
||||
|
||||
select_type: (e) =>
|
||||
@set_type $(e.target).data('value')
|
||||
@el.find('.pop-selector').addClass('hide')
|
||||
|
||||
set_type: (type) ->
|
||||
typeIcon = @el.find('.pop-selected .icon')
|
||||
if @type
|
||||
typeIcon.removeClass @type
|
||||
@type = type
|
||||
typeIcon.addClass @type
|
||||
|
||||
autosaveStop: =>
|
||||
@clearInterval( 'autosave' )
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="ticket-edit sidebar-tabs--spacing"></div>
|
||||
<div class="ticket-edit state--public sidebar-tabs--spacing"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<div class="article-content 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 text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
|
||||
<div class="flex bubble-gap text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
|
||||
</div>
|
||||
|
||||
<div class="article-meta-clip bottom">
|
||||
|
|
@ -63,8 +63,8 @@
|
|||
<% if article.actions: %>
|
||||
<div class="article-actions horizontal stretch">
|
||||
<% for action in article.actions: %>
|
||||
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action<% if action.class: %> <%= action.class %><% end %>">
|
||||
<span class="<%= action.type %> icon"></span><%- @T( action.name ) %>
|
||||
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action clickable<% if action.class: %> <%= action.class %><% end %>">
|
||||
<span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,43 @@
|
|||
<!--
|
||||
<div class="horizontal bubble-grid new-article <% if @formChanged: %>form-changed<% end %>">
|
||||
<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="flex text-bubble">
|
||||
<div class="dark pop-select">
|
||||
<div class="pop-selected clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<div class="pop-selectable clickable centered" data-value="email">
|
||||
<div class="white email channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable clickable centered" data-value="facebook">
|
||||
<div class="white facebook channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable clickable centered" data-value="twitter">
|
||||
<div class="white twitter channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable clickable centered" data-value="phone">
|
||||
<div class="white phone channel icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="visibility toggle clickable centered">
|
||||
<div class="public visibility icon"></div>
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex article-content bubble-gap">
|
||||
<div class="internal-border">
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<textarea></textarea>
|
||||
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
|
||||
-->
|
||||
<div class="ticket-article-view">
|
||||
<div class="ticket-article well ticket-edit <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="avatar">
|
||||
<img class="thumbnail user-popover" data-id="<%= @S('id') %>" src="<%- @S('imageUrl') %>" alt="">
|
||||
</div>
|
||||
<div class="ticket-article-message">
|
||||
<div class="edit-title">
|
||||
<h4><%- @T('Edit') %>
|
||||
<small class="reset-message<% if !@formChanged: %> hide<% end %>">
|
||||
<a href="#" data-type="reset"><%- @T('Discard your unsaved changes.') %></a> <href="#" class="glyphicon glyphicon-repeat" data-type="reset"></a>
|
||||
</small>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="edit-content">
|
||||
<form class="form-stacked ticket-update">
|
||||
<div class="form-ticket-update"></div>
|
||||
<div class="form-article-update"></div>
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
|
||||
</form>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -1102,7 +1102,6 @@ ol.tabs li {
|
|||
background-position: -170px -141px;
|
||||
}
|
||||
|
||||
.white.phone.channel.icon,
|
||||
.white.received-calls.channel.icon {
|
||||
background-position: -187px -141px;
|
||||
}
|
||||
|
|
@ -1123,6 +1122,14 @@ ol.tabs li {
|
|||
background-position: -255px -141px;
|
||||
}
|
||||
|
||||
.white.phone.channel.icon {
|
||||
background-position: -272px -141px;
|
||||
}
|
||||
|
||||
.gray.phone.channel.icon {
|
||||
background-position: -289px -141px;
|
||||
}
|
||||
|
||||
.mood.icon {
|
||||
width: 60px;
|
||||
height: 59px;
|
||||
|
|
@ -1290,24 +1297,36 @@ ol.tabs li {
|
|||
background-position: -42px -311px;
|
||||
}
|
||||
|
||||
.split.icon {
|
||||
.split.action.icon {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
background-position: 0 -336px;
|
||||
}
|
||||
|
||||
.reply.icon {
|
||||
.reply.action.icon {
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
background-position: -24px -336px;
|
||||
}
|
||||
|
||||
.internal.icon {
|
||||
.internal.action.icon {
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background-position: -44px -336px;
|
||||
}
|
||||
|
||||
.public.visibility.icon {
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
background-position: 0 -356px;
|
||||
}
|
||||
|
||||
.internal.visibility.icon {
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
background-position: -14px -356px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
|
||||
|
|
@ -1415,6 +1434,8 @@ footer {
|
|||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.customer_info {
|
||||
|
|
@ -1556,12 +1577,6 @@ footer {
|
|||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.form-changed {
|
||||
border: 1px solid #fbeed5;
|
||||
border-radius: 4px;
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
|
||||
#splash {
|
||||
background-color: #eee;
|
||||
position: absolute;
|
||||
|
|
@ -1995,6 +2010,7 @@ footer {
|
|||
height: 40px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: rgba(0,0,0,.05);
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
|
|
@ -2406,12 +2422,15 @@ footer {
|
|||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 21px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bubble-grid .avatar {
|
||||
.bubble-gap {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.customer.ticket-article-item .bubble-gap {
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
background: rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.ticket-article-item {
|
||||
|
|
@ -2419,11 +2438,6 @@ footer {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.customer.ticket-article-item .avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/*
|
||||
clip the article-meta to not stand out on the other side
|
||||
of the text-bubble if the text bubble is small
|
||||
|
|
@ -2522,14 +2536,14 @@ footer {
|
|||
border-color: hsl(300,43%,84%);
|
||||
}
|
||||
|
||||
.new-article .text-bubble {
|
||||
.ticket-edit .text-bubble {
|
||||
padding: 0;
|
||||
border-color: #b3b3b3;
|
||||
white-space: normal;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.new-article textarea {
|
||||
.ticket-edit textarea {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 10px 20px;
|
||||
|
|
@ -2540,15 +2554,15 @@ footer {
|
|||
transition: 500ms;
|
||||
}
|
||||
|
||||
.new-article textarea:focus {
|
||||
.ticket-edit textarea:focus {
|
||||
height: 105px;
|
||||
}
|
||||
|
||||
.new-article textarea:focus + .bubble-placeholder {
|
||||
.ticket-edit textarea:focus + .bubble-placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-article .bubble-arrow:after {
|
||||
.ticket-edit .bubble-arrow:after {
|
||||
border-color: #b3b3b3;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -2638,6 +2652,92 @@ footer {
|
|||
background: white;
|
||||
}
|
||||
|
||||
.ticket-edit .internal-border {
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
margin: -5px -5px 0;
|
||||
}
|
||||
|
||||
.ticket-edit.state--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;
|
||||
}
|
||||
|
||||
.ticket-edit .avatar {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable .icon {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable:hover .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ticket-edit button[type=submit] {
|
||||
margin-top: 5px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ticket-edit hr {
|
||||
border-color: #e6e6e6;
|
||||
width: 38px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visibility.toggle {
|
||||
width: 38px;
|
||||
height: 34px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.state--public .internal.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.state--internal .visibility.toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.state--internal .public.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pop-select {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pop-selector {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pop-selected,
|
||||
.pop-selectable {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.pop-selectable {
|
||||
background: hsl(234,10%,19%);
|
||||
}
|
||||
|
||||
.pop-selectable:hover {
|
||||
background: hsl(234,10%,29%);
|
||||
}
|
||||
|
||||
.pop-selectable:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.pop-selectable:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.ticket-zoom .sidebar {
|
||||
width: 280px;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
|
|
|
|||
Loading…
Reference in a new issue