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:
'.js-scrollHolder': 'scrollHolder'
'.js-boxFade': 'boxFade'
'.js-attachments': 'attachments'
'.js-chatBox': 'chatBox'
events:
'input .js-textInput': 'placeBoxFade'
constructor: ->
super
@render()
@scrollToBottom()
@boxFade.height @chatBox.outerHeight()
@placeBoxFade()
render: ->
@html App.view('layout_ref/chat_to_ticket')()
@ -2195,6 +2203,14 @@ class ChatToTicketRef extends App.ControllerContent
scrollToBottom: ->
@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' )

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="box chatHistory">
<div class="box chatHistory js-chatBox">
<div class="page-header">
<h1>Chat</h1>
</div>
@ -36,7 +36,7 @@
</div>
</div>
</div>
<%- @Icon('arrow-right', 'arrow--x2') %>
<div class="boxFade js-boxFade"></div>
<div class="box">
<div class="page-header">
<h1>New Ticket</h1>
@ -84,8 +84,8 @@
<label for="TicketArticle_204825_body">Text <span>*</span></label>
</div>
<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 class="attachments attachments--list">
<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 js-attachments">
<%- @Icon('paperclip') %>
<div class="attachments-title">1 Attached File</div>
<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) {
border-top: 1px solid rgba(0,0,0,.04);
white-space: normal;
margin: 0 -12px -14px;
padding: 25px 20px 7px 72px;
margin: 0 -12px -28px;
padding: 25px 20px 21px 72px;
position: relative;
line-height: 1;
}
@ -5060,6 +5060,14 @@ footer {
display: flex;
flex-direction: column;
}
.boxFade {
top: 34px;
height: 100%;
position: absolute;
margin-left: -34px;
z-index: 1;
}
}
.box {