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

add article Read More prototype

Browse source
This commit is contained in:
Felix Niklas 2015-01-15 01:13:08 +01:00
parent 5c14424437
commit df1fd1f646
3 changed files with 84 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -104,6 +104,8 @@ App.Config.set( 'layout_ref/content', Content, 'Routes' )
class CommunicationOverview extends App.ControllerContent
events:
'click .js-unfold': 'unfold'
constructor: ->
super
@ -116,6 +118,22 @@ class CommunicationOverview extends App.ControllerContent
scrollHolder = pageHeader.scrollParent()
scrollBody = scrollHolder.get(0).scrollHeight - scrollHolder.height()
unfold: (e) ->
container = $(e.currentTarget).parents('.textBubble-content')
container.find('.textBubble-overflowContainer').velocity
properties:
opacity: 0
options:
duration: 300
container.velocity
properties:
height: container.attr('data-height')
options:
duration: 300
complete: -> container.parents('.textBubble').removeClass('is-overflowing')
render: ->
@html App.view('layout_ref/communication_overview')()
@ -133,7 +151,7 @@ class LayoutRefCommunicationReply extends App.ControllerContent
'.attachmentUpload': 'attachmentUpload'
'.attachmentUpload-progressBar':'progressBar'
'.js-percentage': 'progressText'
'.text-bubble': 'textBubble'
'.textBubble': 'textBubble'
events:
'focus .js-textarea': 'open_textarea'

20
app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
View file

@ -196,12 +196,30 @@ Grüße, Peter</div>
<div class="article-content zIndex-1">
<span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
<div class="flex bubble-gap internal-border">
<div class="text-bubble"><div class="bubble-arrow"></div>Lieber HP,<br>
<div class="textBubble is-overflowing"><div class="bubble-arrow"></div>
<div class="textBubble-content" style="height: 300px" data-height="539">Lieber HP,<br>
anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
Wünsche dir einen guten Auftritt in Hamburg.<br>
<br>
Deine Frau bekommt ein Kind haben wir gehört.<br>
Gratulation dazu! Wir schicken dir was liebes.<br>
<br>
Und wenn du noch mal Probleme mit der Stimme hast sag bescheid – ich kenn da ein Wundermittel.<br>
<br>
Das ist eine Pille von einem Druiden aus dem Bayerischen Wald. Die ölt einem so richtig die Stimmbänder.<br>
<br>
Verwende ich immer wenn ich meine Frau anschreien will. Die macht meinen Tenor richtig zum Löwen.<br>
<br>
Ach ja und dein Freund Tim. Richt dem mal aus dass er das doch bitte sein lassen soll mit den Anrufen.<br>
<br>Ich weiß schon dass ich ein hübscher bin. Aber ich hab ihm schon tausend mal gesagt, dass ich seine Gefühle leider nicht erwiedern kann.<br>
<br>
Bin verheiratet, hab Kind. Is doch offensichtlich, Junge!<br>
Alles gute,<br>
Oliver<br>
<div class="textBubble-overflowContainer">
<div class="btn btn--text js-unfold">See More</div>
</div>
</div>
<div class="attachments">
<div class="paperclip icon"></div>
<h3>2 <%- @T('Attached Files') %></h3>

55
app/assets/stylesheets/zammad.css.scss
View file

@ -3121,7 +3121,7 @@ footer {
display: none;
}
.text-bubble {
.textBubble {
padding: 10px 20px;
background: white;
border-radius: 2px;
@ -3130,32 +3130,67 @@ footer {
position: relative;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* email css reset */
.text-bubble p {
p {
margin: 0;
}
.text-bubble blockquote,
.text-bubble pre
{
blockquote,
pre {
margin: 0px;
padding: 8px 12px 8px 12px;
}
}
.ticket-article-item.state--folde-out .text-bubble {
.ticket-article-item.state--folde-out .textBubble {
border-color: hsl(0,0%,90%);
}
.customer.ticket-article-item .text-bubble {
.textBubble-content {
overflow: hidden;
position: relative;
}
.is-overflowing .textBubble-overflowContainer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: white;
.btn {
padding: 7px 0;
}
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -30px;
height: 30px;
background: linear-gradient(transparent, white);
}
}
.customer .is-overflowing .textBubble-overflowContainer {
background: #e5f0f5;
&:before {
background: linear-gradient(transparent, #e5f0f5);
}
}
.customer.ticket-article-item .textBubble {
background: #e5f0f5;
border-color: hsl(199,38%,92%);
box-shadow: none;
&.is-overflowing:after {
background: linear-gradient(transparent, #e5f0f5 60px);
}
}
.customer.ticket-article-item.state--folde-out .text-bubble {
.customer.ticket-article-item.state--folde-out .textBubble {
border-color: hsl(199,44%,85%);
}