Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chat ticket: add box-fade

Browse source
This commit is contained in:
Felix Niklas 2016-01-15 10:32:07 +01:00
parent 5e667eb264
commit d780b05f09
4 changed files with 39 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/app/controllers/layout_ref.coffee
View file

@ -2183,11 +2183,19 @@ class ChatToTicketRef extends App.ControllerContent
elements: elements:
'.js-scrollHolder': 'scrollHolder' '.js-scrollHolder': 'scrollHolder'
'.js-boxFade': 'boxFade'
'.js-attachments': 'attachments'
'.js-chatBox': 'chatBox'
events:
'input .js-textInput': 'placeBoxFade'
constructor: -> constructor: ->
super super
@render() @render()
@scrollToBottom() @scrollToBottom()
@boxFade.height @chatBox.outerHeight()
@placeBoxFade()
render: -> render: ->
@html App.view('layout_ref/chat_to_ticket')() @html App.view('layout_ref/chat_to_ticket')()
@ -2195,6 +2203,14 @@ class ChatToTicketRef extends App.ControllerContent
scrollToBottom: -> scrollToBottom: ->
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight')) @scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
placeBoxFade: =>
y1 = @attachments.offset().top - @boxFade.offset().top
@boxFade.html App.view('layout_ref/boxFade')
width: @attachments.offset().left - @boxFade.offset().left
height: @boxFade.height()
y1: y1
y2: y1 + @attachments.outerHeight()
App.Config.set( 'layout_ref/chat_to_ticket', ChatToTicketRef, 'Routes' ) App.Config.set( 'layout_ref/chat_to_ticket', ChatToTicketRef, 'Routes' )

9
app/assets/javascripts/app/views/layout_ref/boxFade.jst.eco Normal file
View file

@ -0,0 +1,9 @@
<svg width="<%- @width %>px" height="<%- @height %>px">
<defs>
<linearGradient x1="0%" y1="0" x2="100%" y2="0" id="boxFadeGradient">
<stop stop-color="#389ED9" stop-opacity="0.05" offset="0%"></stop>
<stop stop-color="#D9D9D9" stop-opacity="0.28" offset="100%"></stop>
</linearGradient>
</defs>
<path d="M0,0 C0,0 <%- @width-15 %>,<%- @y1-15 %> <%- @width %>,<%- @y1 %> L<%- @width %>,<%- @y2 %> C<%- @width-15 %>,<%- @y2+15 %> 0,<%- @height %> 0,<%- @height %> L0,0 Z" fill="url(#boxFadeGradient)" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 538 B

8
app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco
View file

@ -1,5 +1,5 @@
<div class="newTicket newTicket--chatTicket"> <div class="newTicket newTicket--chatTicket">
<div class="box chatHistory"> <div class="box chatHistory js-chatBox">
<div class="page-header"> <div class="page-header">
<h1>Chat</h1> <h1>Chat</h1>
</div> </div>
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
</div> </div>
<%- @Icon('arrow-right', 'arrow--x2') %> <div class="boxFade js-boxFade"></div>
<div class="box"> <div class="box">
<div class="page-header"> <div class="page-header">
<h1>New Ticket</h1> <h1>New Ticket</h1>
@ -84,8 +84,8 @@
<label for="TicketArticle_204825_body">Text <span>*</span></label> <label for="TicketArticle_204825_body">Text <span>*</span></label>
</div> </div>
<div class="controls"><div class="richtext form-control"> <div class="controls"><div class="richtext form-control">
<div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class=""></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div> <div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class="js-textInput"></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div>
<div class="attachments attachments--list"> <div class="attachments attachments--list js-attachments">
<%- @Icon('paperclip') %> <%- @Icon('paperclip') %>
<div class="attachments-title">1 Attached File</div> <div class="attachments-title">1 Attached File</div>
<div class="attachment"> <div class="attachment">

12
app/assets/stylesheets/zammad.scss
View file

@ -1459,8 +1459,8 @@ input.time.time--12 {
.richtext.form-control .attachments.attachments--list:not(:empty) { .richtext.form-control .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04); border-top: 1px solid rgba(0,0,0,.04);
white-space: normal; white-space: normal;
margin: 0 -12px -14px; margin: 0 -12px -28px;
padding: 25px 20px 7px 72px; padding: 25px 20px 21px 72px;
position: relative; position: relative;
line-height: 1; line-height: 1;
} }
@ -5060,6 +5060,14 @@ footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.boxFade {
top: 34px;
height: 100%;
position: absolute;
margin-left: -34px;
z-index: 1;
}
} }
.box { .box {