add twitter conversation view layout ref
This commit is contained in:
Felix Niklas
parent
c5e23bb635
commit
962ccebe4e
5 changed files with 581 additions and 76 deletions
|
|
@ -2062,6 +2062,7 @@ class chatWindowRef extends Spine.Controller
|
||||||
scrollToBottom: ->
|
scrollToBottom: ->
|
||||||
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
|
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
|
||||||
|
|
||||||
|
|
||||||
class AdminLoadRef extends App.ControllerContent
|
class AdminLoadRef extends App.ControllerContent
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
|
|
@ -2073,4 +2074,102 @@ class AdminLoadRef extends App.ControllerContent
|
||||||
|
|
||||||
App.Config.set( 'layout_ref/admin_loading', AdminLoadRef, 'Routes' )
|
App.Config.set( 'layout_ref/admin_loading', AdminLoadRef, 'Routes' )
|
||||||
|
|
||||||
|
|
||||||
|
class TwitterConversationRef extends App.ControllerContent
|
||||||
|
elements:
|
||||||
|
'.js-textarea': 'textarea'
|
||||||
|
'.article-add': 'articleNewEdit'
|
||||||
|
'.article-add .textBubble': 'textBubble'
|
||||||
|
'.editControls-item': 'editControlItem'
|
||||||
|
'.js-letterCount': 'letterCount'
|
||||||
|
'.js-signature': 'signature'
|
||||||
|
|
||||||
|
events:
|
||||||
|
'input .js-textarea': 'updateLetterCount'
|
||||||
|
|
||||||
|
textareaHeight:
|
||||||
|
open: 88
|
||||||
|
closed: 20
|
||||||
|
|
||||||
|
maxTextLength: 140
|
||||||
|
warningTextLength: 10
|
||||||
|
|
||||||
|
constructor: ->
|
||||||
|
super
|
||||||
|
@render()
|
||||||
|
|
||||||
|
render: ->
|
||||||
|
@html App.view('layout_ref/twitter_conversation')()
|
||||||
|
|
||||||
|
@openTextarea null, true
|
||||||
|
@updateLetterCount()
|
||||||
|
|
||||||
|
updateLetterCount: (event) =>
|
||||||
|
textLength = @maxTextLength - @textarea.text().length - @signature.text().length - 2
|
||||||
|
className = switch
|
||||||
|
when textLength < 0 then 'label-danger'
|
||||||
|
when textLength < @warningTextLength then 'label-warning'
|
||||||
|
else ''
|
||||||
|
|
||||||
|
@letterCount
|
||||||
|
.text textLength
|
||||||
|
.removeClass 'label-danger label-warning'
|
||||||
|
.addClass className
|
||||||
|
|
||||||
|
openTextarea: (event, withoutAnimation) =>
|
||||||
|
if @articleNewEdit.hasClass('is-open')
|
||||||
|
return
|
||||||
|
|
||||||
|
duration = 300
|
||||||
|
|
||||||
|
if withoutAnimation
|
||||||
|
duration = 0
|
||||||
|
|
||||||
|
@articleNewEdit.addClass('is-open')
|
||||||
|
|
||||||
|
@textarea.velocity
|
||||||
|
properties:
|
||||||
|
minHeight: "#{ @textareaHeight.open - 38 }px"
|
||||||
|
options:
|
||||||
|
duration: duration
|
||||||
|
easing: 'easeOutQuad'
|
||||||
|
complete: => @addTextareaCatcher()
|
||||||
|
|
||||||
|
@textBubble.velocity
|
||||||
|
properties:
|
||||||
|
paddingBottom: 28
|
||||||
|
options:
|
||||||
|
duration: duration
|
||||||
|
easing: 'easeOutQuad'
|
||||||
|
|
||||||
|
# scroll to bottom
|
||||||
|
@textarea.velocity 'scroll',
|
||||||
|
container: @textarea.scrollParent()
|
||||||
|
offset: 99999
|
||||||
|
duration: 300
|
||||||
|
easing: 'easeOutQuad'
|
||||||
|
queue: false
|
||||||
|
|
||||||
|
@editControlItem
|
||||||
|
.removeClass('is-hidden')
|
||||||
|
.velocity
|
||||||
|
properties:
|
||||||
|
opacity: [ 1, 0 ]
|
||||||
|
translateX: [ 0, 20 ]
|
||||||
|
translateZ: 0
|
||||||
|
options:
|
||||||
|
duration: 300
|
||||||
|
stagger: 50
|
||||||
|
drag: true
|
||||||
|
|
||||||
|
addTextareaCatcher: =>
|
||||||
|
if @articleNewEdit.is(':visible')
|
||||||
|
@textareaCatcher = new App.ClickCatcher
|
||||||
|
holder: @articleNewEdit.offsetParent()
|
||||||
|
callback: @closeTextarea
|
||||||
|
zIndexScale: 4
|
||||||
|
|
||||||
|
App.Config.set( 'layout_ref/twitter_conversation', TwitterConversationRef, 'Routes' )
|
||||||
|
|
||||||
|
|
||||||
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><a href="#layout_ref/twitter_conversation">Twitter Conversation</a></li>
|
||||||
<li><a href="#layout_ref/admin_loading">Admin Loading Screen</a></li>
|
<li><a href="#layout_ref/admin_loading">Admin Loading Screen</a></li>
|
||||||
<li><a href="#layout_ref/customer_chat">Customer Chat</a></li>
|
<li><a href="#layout_ref/customer_chat">Customer Chat</a></li>
|
||||||
<li><a href="#layout_ref/ticket_zoom">Ticket Zoom</a></li>
|
<li><a href="#layout_ref/ticket_zoom">Ticket Zoom</a></li>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,451 @@
|
||||||
|
<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer is-closed">
|
||||||
|
<div class="ticketZoom">
|
||||||
|
<div class="ticketZoom-controls">
|
||||||
|
<div class="highlighter">
|
||||||
|
<div class="btn btn--action btn--split--first js-highlight centered">
|
||||||
|
<%- @Icon('marker', 'js-highlight-icon') %>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown dropdown--actions">
|
||||||
|
<div aria-expanded="true" class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown">
|
||||||
|
<%- @Icon('arrow-down', '') %>
|
||||||
|
</div>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||||
|
<li role="presentation">
|
||||||
|
<a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview-navigator"></div>
|
||||||
|
</div>
|
||||||
|
<!-- conversation: https://twitter.com/sksk805/status/657439712068661248 -->
|
||||||
|
<div class="ticketZoom-header">
|
||||||
|
<div class="flex vertical center">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-50 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-title">
|
||||||
|
<div class="ticket-title-update" contenteditable="true" data-placeholder="Enter Title...">
|
||||||
|
@DB_Bahn was sagen Sie als Arbeitgeber dazu, wenn ihre Mitarbeiter aufgrund von Verspätungen und Zugausfällen regelmäßig viel zu spät sind?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-meta">
|
||||||
|
<small class="task-subline">Ticket# <span class="ticket-number">10001</span> - created <time class="humanTimeFromNow" data-time="2015-10-05T12:56:33.000Z" title="10/05/2015 14:56">10/05/2015</time></small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-article">
|
||||||
|
<div class="ticket-article-item customer" data-id="1" id="article-1">
|
||||||
|
<div class="article-meta-clip top">
|
||||||
|
<div class="article-content-meta top hide">
|
||||||
|
<div class="article-meta top">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key u-textTruncate">
|
||||||
|
From
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value flex contain-text">
|
||||||
|
zander <span class="text-muted"><@sksk805></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-1">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="textBubble-content" data-id="1" id="article-content-1">
|
||||||
|
<a href="#">@DB_Bahn</a> was sagen Sie als Arbeitgeber dazu, wenn ihre Mitarbeiter aufgrund von Verspätungen und Zugausfällen regelmäßig viel zu spät sind?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-clip bottom">
|
||||||
|
<div class="article-content-meta bottom hide">
|
||||||
|
<div class="article-meta bottom">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key">
|
||||||
|
Channel
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value">
|
||||||
|
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="js-article-actions">
|
||||||
|
<div class="article-content article-actions horizontal stretch">
|
||||||
|
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="reply" href="#"><%- @Icon('reply', 'article-action-icon') %>reply</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/1"><%- @Icon('split', 'article-action-icon') %>split</a>
|
||||||
|
</div>
|
||||||
|
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-05T12:56:33.000Z" title="10/05/2015 14:56">10/05/2015</time></small>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-article-item agent" data-id="3" id="article-3">
|
||||||
|
<div class="article-meta-clip top">
|
||||||
|
<div class="article-content-meta top hide">
|
||||||
|
<div class="article-meta top">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key u-textTruncate">
|
||||||
|
From
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value flex contain-text">
|
||||||
|
Test Master Agent
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-1">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="textBubble-content" data-id="3" id="article-content-3">
|
||||||
|
<a href="#">@sksk805</a> Sorry, ich bin Mitarbeiter vom Twitter-Team und keine Führungskraft. Ich komme allerdings auch mit der DB und bin pünktlich. /je
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-clip bottom">
|
||||||
|
<div class="article-content-meta bottom hide">
|
||||||
|
<div class="article-meta bottom">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key">
|
||||||
|
Channel
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value">
|
||||||
|
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="js-article-actions">
|
||||||
|
<div class="article-content article-actions horizontal stretch">
|
||||||
|
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/3"><%- @Icon('split', 'article-action-icon') %>split</a>
|
||||||
|
</div>
|
||||||
|
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:23.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-article-item customer" data-id="4" id="article-4">
|
||||||
|
<div class="article-meta-clip top">
|
||||||
|
<div class="article-content-meta top hide">
|
||||||
|
<div class="article-meta top">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key u-textTruncate">
|
||||||
|
From
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value flex contain-text">
|
||||||
|
Test Master Agent
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-1">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="textBubble-content" data-id="4" id="article-content-4">
|
||||||
|
<a href="#">@DB_Bahn</a> ohne Witz? Das ist Ihre Antwort? Mal ganz unter uns...wie oft kommt ihre Bahn zu spät? Oder fahren Sie etwa heimlich Auto?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-clip bottom">
|
||||||
|
<div class="article-content-meta bottom hide">
|
||||||
|
<div class="article-meta bottom">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key">
|
||||||
|
Channel
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value">
|
||||||
|
<%- @Icon('note', 'article-meta-icon') %>note
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="js-article-actions">
|
||||||
|
<div class="article-content article-actions horizontal stretch">
|
||||||
|
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/4"><%- @Icon('split', 'article-action-icon') %>split</a>
|
||||||
|
</div>
|
||||||
|
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:27.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-article-item agent" data-id="3" id="article-3">
|
||||||
|
<div class="article-meta-clip top">
|
||||||
|
<div class="article-content-meta top hide">
|
||||||
|
<div class="article-meta top">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key u-textTruncate">
|
||||||
|
From
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value flex contain-text">
|
||||||
|
Test Master Agent
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-1">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="textBubble-content" data-id="3" id="article-content-3">
|
||||||
|
<a href="#">@sksk805</a> Ich darf ehrlich antworten. :) Ich wähle aber meine Verbindung auch so, dass ich nicht gleich bei +5 Min. zu spät komme. ;) /je
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-clip bottom">
|
||||||
|
<div class="article-content-meta bottom hide">
|
||||||
|
<div class="article-meta bottom">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key">
|
||||||
|
Channel
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value">
|
||||||
|
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="js-article-actions">
|
||||||
|
<div class="article-content article-actions horizontal stretch">
|
||||||
|
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/3"><%- @Icon('split', 'article-action-icon') %>split</a>
|
||||||
|
</div>
|
||||||
|
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:23.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-article-item customer" data-id="4" id="article-4">
|
||||||
|
<div class="article-meta-clip top">
|
||||||
|
<div class="article-content-meta top hide">
|
||||||
|
<div class="article-meta top">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key u-textTruncate">
|
||||||
|
From
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value flex contain-text">
|
||||||
|
Test Master Agent
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-1">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="2" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/550102263013056512/tq9PC8NT.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="textBubble-content" data-id="4" id="article-content-4">
|
||||||
|
<a href="#">@DB_Bahn</a> ich rede von 20min + und Zugausfällen. 5-10 Minuten plant man ja grundsätzlich ein
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-clip bottom">
|
||||||
|
<div class="article-content-meta bottom hide">
|
||||||
|
<div class="article-meta bottom">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key">
|
||||||
|
Channel
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value">
|
||||||
|
<%- @Icon('note', 'article-meta-icon') %>note
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="js-article-actions">
|
||||||
|
<div class="article-content article-actions horizontal stretch">
|
||||||
|
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/4"><%- @Icon('split', 'article-action-icon') %>split</a>
|
||||||
|
</div>
|
||||||
|
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:27.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
|
||||||
|
</div>
|
||||||
|
<div class="ticket-article-item agent" data-id="3" id="article-3">
|
||||||
|
<div class="article-meta-clip top">
|
||||||
|
<div class="article-content-meta top hide">
|
||||||
|
<div class="article-meta top">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key u-textTruncate">
|
||||||
|
From
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value flex contain-text">
|
||||||
|
Test Master Agent
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-1">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="textBubble-content" data-id="3" id="article-content-3">
|
||||||
|
<a href="#">@sksk805</a> Ist bei mir echt selten der Fall & bisher auch meist nur bei der Heimreise. Ich kann Ihren Ärger aber trotzdem gut verstehen. /je
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-clip bottom">
|
||||||
|
<div class="article-content-meta bottom hide">
|
||||||
|
<div class="article-meta bottom">
|
||||||
|
<div class="horizontal article-meta-row">
|
||||||
|
<div class="article-meta-key">
|
||||||
|
Channel
|
||||||
|
</div>
|
||||||
|
<div class="article-meta-value">
|
||||||
|
<%- @Icon('twitter', 'article-meta-icon') %>Twitter Mention
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="js-article-actions">
|
||||||
|
<div class="article-content article-actions horizontal stretch">
|
||||||
|
<a class="article-action u-clickable" data-type="internal" href=""><%- @Icon('lock', 'article-action-icon') %>set to internal</a> <a class="article-action u-clickable" data-type="split" href="#ticket/create/1/3"><%- @Icon('split', 'article-action-icon') %>split</a>
|
||||||
|
</div>
|
||||||
|
</div><small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2015-10-16T16:17:23.000Z" title="10/16/2015 18:17">6 days 16 hours ago</time></small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="article-new">
|
||||||
|
<form class="article-add is-public" data-type="twitter status">
|
||||||
|
<input name="type" type="hidden" value="twitter status"> <input name="internal" type="hidden" value=""> <input name="form_id" type="hidden" value=""> <input name="in_reply_to" type="hidden" value="">
|
||||||
|
<div class="editControls">
|
||||||
|
<div class="js-avatar">
|
||||||
|
<span class="avatar size-40 user-popover user-popover" data-id="3" data-original-title="" style="background-image: url(https://pbs.twimg.com/profile_images/473728709908647936/gc_1Mzqc.jpeg)" title=""></span>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-item is-hidden pop-select">
|
||||||
|
<div class="editControls-iconHolder centered js-selectedArticleType">
|
||||||
|
<div class="editControls-icon js-selectableTypes hide" data-type="note">
|
||||||
|
<%- @Icon('note', '') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon js-selectableTypes hide" data-type="email">
|
||||||
|
<%- @Icon('email', '') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon js-selectableTypes hide" data-type="facebook">
|
||||||
|
<%- @Icon('facebook', '') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon js-selectableTypes" data-type="twitter status">
|
||||||
|
<%- @Icon('twitter', '') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon js-selectableTypes hide" data-type="twitter direct-message">
|
||||||
|
<%- @Icon('twitter', '') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon js-selectableTypes hide" data-type="phone">
|
||||||
|
<%- @Icon('phone', '') %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop-selector is-hidden js-articleTypes">
|
||||||
|
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="note">
|
||||||
|
<%- @Icon('note', 'pop-selectable-icon') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="email">
|
||||||
|
<%- @Icon('email', 'pop-selectable-icon') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="facebook">
|
||||||
|
<%- @Icon('facebook', 'pop-selectable-icon') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="twitter status">
|
||||||
|
<%- @Icon('twitter', 'pop-selectable-icon') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="twitter direct-message">
|
||||||
|
<%- @Icon('twitter', 'pop-selectable-icon') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="phone">
|
||||||
|
<%- @Icon('phone', 'pop-selectable-icon') %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-item is-hidden js-toggleVisibility">
|
||||||
|
<div class="editControls-iconHolder">
|
||||||
|
<div class="editControls-icon icon-internal" title="set to public">
|
||||||
|
<%- @Icon('lock', '') %>
|
||||||
|
</div>
|
||||||
|
<div class="editControls-icon icon-public" title="set to internal">
|
||||||
|
<%- @Icon('lock-open', '') %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="article-content zIndex-5 bubble-gap">
|
||||||
|
<div class="internal-border">
|
||||||
|
<div class="input form-group hide">
|
||||||
|
<div class="formGroup-label">
|
||||||
|
<label for="">To</label>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<input class="form-control" id="" name="to" required="required" type="text" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input form-group hide">
|
||||||
|
<div class="formGroup-label">
|
||||||
|
<label for="">Cc</label>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<input class="form-control" id="" name="cc" type="text" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="textBubble">
|
||||||
|
<div class="bubble-arrow"></div>
|
||||||
|
<div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"></div>
|
||||||
|
<div class="shortcut dropdown">
|
||||||
|
<ul class="dropdown-menu" style="width: 360px; max-height: 200px;">
|
||||||
|
<li>
|
||||||
|
<a>-</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="textBubble-footer">
|
||||||
|
<div class="textBubble-signatur"><span class="js-signature">/je</span></div>
|
||||||
|
<div class="textBubble-letterCount js-letterCount">140</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
67
app/assets/stylesheets/bootstrap.css
vendored
67
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -3369,73 +3369,6 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.label {
|
|
||||||
display: inline;
|
|
||||||
padding: .2em .6em .3em;
|
|
||||||
font-size: 75%;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: baseline;
|
|
||||||
border-radius: .25em;
|
|
||||||
}
|
|
||||||
a.label:hover,
|
|
||||||
a.label:focus {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.label:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.btn .label {
|
|
||||||
position: relative;
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
.label-default {
|
|
||||||
background-color: #777;
|
|
||||||
}
|
|
||||||
.label-default[href]:hover,
|
|
||||||
.label-default[href]:focus {
|
|
||||||
background-color: #5e5e5e;
|
|
||||||
}
|
|
||||||
.label-primary {
|
|
||||||
background-color: #337ab7;
|
|
||||||
}
|
|
||||||
.label-primary[href]:hover,
|
|
||||||
.label-primary[href]:focus {
|
|
||||||
background-color: #286090;
|
|
||||||
}
|
|
||||||
.label-success {
|
|
||||||
background-color: #5cb85c;
|
|
||||||
}
|
|
||||||
.label-success[href]:hover,
|
|
||||||
.label-success[href]:focus {
|
|
||||||
background-color: #449d44;
|
|
||||||
}
|
|
||||||
.label-info {
|
|
||||||
background-color: #5bc0de;
|
|
||||||
}
|
|
||||||
.label-info[href]:hover,
|
|
||||||
.label-info[href]:focus {
|
|
||||||
background-color: #31b0d5;
|
|
||||||
}
|
|
||||||
.label-warning {
|
|
||||||
background-color: #f0ad4e;
|
|
||||||
}
|
|
||||||
.label-warning[href]:hover,
|
|
||||||
.label-warning[href]:focus {
|
|
||||||
background-color: #ec971f;
|
|
||||||
}
|
|
||||||
.label-danger {
|
|
||||||
background-color: #d9534f;
|
|
||||||
}
|
|
||||||
.label-danger[href]:hover,
|
|
||||||
.label-danger[href]:focus {
|
|
||||||
background-color: #c9302c;
|
|
||||||
}
|
|
||||||
.jumbotron {
|
.jumbotron {
|
||||||
padding: 30px 15px;
|
padding: 30px 15px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
|
||||||
|
|
@ -976,9 +976,9 @@ label,
|
||||||
|
|
||||||
/* circumventing the label:not(.inline-label) selector because it's too strong */
|
/* circumventing the label:not(.inline-label) selector because it's too strong */
|
||||||
.inline-label,
|
.inline-label,
|
||||||
.label.label-success,
|
.label-success,
|
||||||
.label.label-warning,
|
.label-warning,
|
||||||
.label.label-danger {
|
.label-danger {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
text-align: inherit;
|
text-align: inherit;
|
||||||
|
|
@ -995,24 +995,28 @@ label,
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label.label-success,
|
.label-success,
|
||||||
.label.label-warning,
|
.label-warning,
|
||||||
.label.label-danger {
|
.label-danger {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label.label-success {
|
.label-success {
|
||||||
color: $supergood-color;
|
color: $supergood-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label.label-warning {
|
.label-warning {
|
||||||
color: $ok-color;
|
color: $ok-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label.label-danger {
|
.label-danger {
|
||||||
color: $superbad-color;
|
color: $superbad-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-subtle {
|
||||||
|
color: hsl(0,0%,80%);
|
||||||
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0 -4px;
|
margin: 0 -4px;
|
||||||
@extend .clearfix;
|
@extend .clearfix;
|
||||||
|
|
@ -3917,6 +3921,23 @@ footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.textBubble-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 -12px -28px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textBubble-control {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textBubble-letterCount:not(.label-danger):not(.label-warning) {
|
||||||
|
color: hsl(0,0%,80%);
|
||||||
|
}
|
||||||
|
|
||||||
.textBubble-overflowContainer {
|
.textBubble-overflowContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue