add article Read More prototype
This commit is contained in:
Felix Niklas
parent
5c14424437
commit
df1fd1f646
3 changed files with 84 additions and 13 deletions
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue