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

chat designer: remove tabs, add documentation

Browse source
This commit is contained in:
Felix Niklas 2015-11-20 15:43:23 +01:00
parent f530720435
commit b60b0a8b5c
8 changed files with 445 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
app/assets/javascripts/app/controllers/_channel/chat.coffee
View file

@ -1,35 +1,4 @@
class App.ChannelChat extends App.ControllerTabs class App.ChannelChat extends App.Controller
header: 'Chat Widget'
addTab: true
constructor: ->
super
@title @header, true
@load()
load: =>
@tabs = []
@ajax(
id: 'chat_index'
type: 'GET'
url: @apiPath + '/chats'
processData: true
success: (data, status, xhr) =>
App.Collection.loadAssets(data.assets)
for chat in App.Chat.all()
tab =
name: chat.name
target: "chat-#{chat.id}"
controller: App.ChannelChatDesigner
params:
model: chat
@tabs.push tab
@render()
)
class App.ChannelChatDesigner extends App.Controller
events: events:
'click .js-add': 'new' 'click .js-add': 'new'
'click .js-edit': 'edit' 'click .js-edit': 'edit'
@ -48,6 +17,72 @@ class App.ChannelChatDesigner extends App.Controller
'.js-chat': 'chat' '.js-chat': 'chat'
'.js-testurl-input': 'urlInput' '.js-testurl-input': 'urlInput'
'.js-backgroundColor': 'chatBackground' '.js-backgroundColor': 'chatBackground'
'.js-paramsBlock': 'paramsBlock'
'.js-code': 'code'
apiOptions: [
{
name: 'channel'
default: "'default'"
type: 'String'
description: 'Name of the chat-channel.'
}
{
name: 'show'
default: true
type: 'Boolean'
description: 'Show the chat when ready.'
}
{
name: 'target'
default: "$('body')"
type: 'jQuery Object'
description: 'Where to append the chat to.'
}
{
name: 'host'
default: "(Empty)"
type: 'String'
description: "If left empty, the host gets auto-detected - in this case %s. The auto-detection reads out the host from the <script> tag. If you don't include it via a <script> tag you need to specify the host."
descriptionSubstitute: window.location.origin
}
{
name: 'port'
default: 6042
type: 'Int'
description: ''
}
{
name: 'debug'
default: false
type: 'Boolean'
description: 'Enables console logging.'
}
{
name: 'fontSize'
default: "undefined"
type: 'String'
description: 'CSS font-size with a unit like 12px, 1.5em. If left to undefined it inherits the font-size of the website.'
}
{
name: 'buttonClass'
default: "'open-zammad-chat'"
type: 'String'
description: 'Add this class to a button on your page that should open the chat.'
}
{
name: 'inactiveClass'
default: "'is-inactive'"
type: 'String'
description: 'This class gets added to the button on initialization and gets removed once the chat connection got established.'
}
{
name: 'title'
default: "'<strong>Chat</strong> with us!'"
type: 'String'
description: 'Welcome Title shown on the closed chat. Can contain HTML.'
}
]
constructor: -> constructor: ->
super super
@ -80,15 +115,14 @@ class App.ChannelChatDesigner extends App.Controller
@html App.view('channel/chat')( @html App.view('channel/chat')(
baseurl: window.location.origin baseurl: window.location.origin
chats: chats chats: chats
apiOptions: @apiOptions
) )
@code.each (i, block) ->
hljs.highlightBlock block
@updateParams() @updateParams()
new App.SettingsArea(
el: @$('.js-settings')
area: 'Chat::Base'
)
selectBrowserWidth: (event) => selectBrowserWidth: (event) =>
tab = $(event.target).closest('[data-value]') tab = $(event.target).closest('[data-value]')
@ -202,4 +236,8 @@ class App.ChannelChatDesigner extends App.Controller
paramString += " #{key}: '#{quote(value)}'" paramString += " #{key}: '#{quote(value)}'"
@$('.js-modal-params').html(paramString) @$('.js-modal-params').html(paramString)
App.Config.set( 'Chat', { prio: 4000, name: 'Chat', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' ) # highlight
@paramsBlock.each (i, block) ->
hljs.highlightBlock block
App.Config.set( 'Chat Widget', { prio: 4000, name: 'Chat Widget', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )

1
app/assets/javascripts/app/lib/base/highlight.pack.js Normal file
View file

File diff suppressed because one or more lines are too long

385
app/assets/javascripts/app/views/channel/chat.jst.eco
View file

@ -1,188 +1,239 @@
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p> <div class="page-header">
<div class="page-header-title">
<% if _.isEmpty(@chats): %> <h1><%- @T('Chat Widget') %> <small></small></h1>
<p><%- @T('You have no configured chat\'s right now.') %></p>
<% else: %>
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Name') %></th>
<th style="white-space: nowrap;"><%- @T('Note') %></th>
<th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
<th style="white-space: nowrap;"><%- @T('Delete') %></th>
</tr>
</thead>
<tbody>
<% for chat in @chats: %>
<tr data-id="<%= chat.id %>">
<td>
<label class="inline-label">
<a class="js-edit is-clickable"><%= chat.name %></a>
</label>
<td>
<label class="inline-label">
<%= chat.note %>
</label>
<td>
<label class="inline-label">
<%= chat.max_queue %>
</label>
<td>
<div class="settings-list-rowControls">
<div class="btn btn--text js-remove">
<%- @Icon('trash') %> <%- @T('Remove') %>
</div>
</div>
<% end %>
<tr class="settings-list-controlRow">
<td>
<td>
<td>
<td>
<div class="btn btn--text js-add">
<%- @Icon('plus-small') %> <%- @T('Add') %>
</div>
</tbody>
</table>
<% end %>
<h2><%- @T('Designer') %></h2>
<div class="form-group">
<label class="formGroup-label"><%- @T('Preview Width') %></label>
<div class="control">
<div class="select-tabs js-selectBrowserWidth">
<div class="tab" data-value="375">iPhone 6</div>
<div class="tab is-selected" data-value="fit"><%- @T('Fit Width') %></div>
<div class="tab" data-value="1280">MacBook</div>
</div>
</div> </div>
</div> </div>
<div class="page-content">
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
<div class="browser chat-demo js-browser"> <h2><%- @T('Channels') %></h2>
<div class="browser-head"> <p><%- @T('You can create multiple chat channels.') %></p>
<form class="browser-input js-testurl" novalidate> <table class="settings-list">
<input type="url" class="js-testurl-input" placeholder="zammad.org"> <thead>
</form> <tr>
</div> <th style="white-space: nowrap;"><%- @T('Name') %></th>
<div class="browser-body js-demo"> <th style="white-space: nowrap;"><%- @T('Note') %></th>
<iframe class="js-iframe"></iframe> <th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
<style>@import "/assets/chat/chat.css";</style> <th style="white-space: nowrap;"><%- @T('Delete') %></th>
<div class="chat-demo-animationHolder"> </tr>
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;"> </thead>
<div class="zammad-chat-header js-chat-open js-backgroundColor"> <tbody>
<div class="zammad-chat-header-controls"> <% for chat in @chats: %>
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span> <tr data-id="<%= chat.id %>">
<span class="zammad-chat-header-icon"> <td>
<svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg> <label class="inline-label">
<svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg> <a class="js-edit is-clickable"><%= chat.name %></a>
</span> </label>
<td>
<label class="inline-label">
<%= chat.note %>
</label>
<td>
<label class="inline-label">
<%= chat.max_queue %>
</label>
<td>
<div class="settings-list-rowControls">
<div class="btn btn--text js-remove">
<%- @Icon('trash') %> <%- @T('Remove') %>
</div>
</div> </div>
<div class="zammad-chat-agent"> <% end %>
<img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png"> <tr>
<span class="zammad-chat-agent-sentence"> <td colspan="4" class="settings-list-action-cell js-add">
<span class="zammad-chat-agent-name"><%- @T('John Smith') %></span> <%- @Icon('plus-small') %>
</span> </tbody>
</div> </table>
<div class="zammad-chat-welcome zammad-chat-is-hidden">
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg> <h2><%- @T('Designer') %></h2>
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
</div> <div class="form-group">
</div> <label class="formGroup-label"><%- @T('Preview Width') %></label>
<div class="zammad-chat-body"> <div class="control">
<div class="zammad-chat-timestamp"><strong><%- @T('Today') %></strong> 14:45</div> <div class="select-tabs js-selectBrowserWidth">
<div class="zammad-chat-message zammad-chat-message--customer"> <div class="tab" data-value="375">iPhone 6</div>
<span class="zammad-chat-message-body js-backgroundColor"><%- @T('Hello! I need help with your product.') %></span> <div class="tab is-selected" data-value="fit"><%- @T('Fit Width') %></div>
</div> <div class="tab" data-value="1280">MacBook</div>
<div class="zammad-chat-message zammad-chat-message--agent">
<span class="zammad-chat-message-body"><%- @T('Hi! Which one of our products?') %></span>
</div>
</div>
<form class="zammad-chat-controls">
<textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
<button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor"><%- @T('Send') %></button>
</form>
</div> </div>
</div> </div>
</div> </div>
</div>
<form class="js-params"> <div class="browser chat-demo js-browser">
<fieldset> <div class="browser-head">
<div class="input form-group formGroup--halfSize"> <form class="browser-input js-testurl" novalidate>
<div class="formGroup-label"> <input type="url" class="js-testurl-input" placeholder="zammad.org">
<label for="form-chat-title"><%- @T('Chat Title') %></label> </form>
</div>
<div class="controls">
<input type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
</div>
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
</div> </div>
<div class="input form-group formGroup--halfSize"> <div class="browser-body js-demo">
<div class="formGroup-label"> <iframe class="js-iframe"></iframe>
<label for="form-chat-background"><%- @T('Background color') %></label> <style>@import "/assets/chat/chat.css";</style>
<div class="chat-demo-animationHolder">
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
<div class="zammad-chat-header js-chat-open js-backgroundColor">
<div class="zammad-chat-header-controls">
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
<span class="zammad-chat-header-icon">
<svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
<svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
</span>
</div>
<div class="zammad-chat-agent">
<img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png">
<span class="zammad-chat-agent-sentence">
<span class="zammad-chat-agent-name"><%- @T('John Smith') %></span>
</span>
</div>
<div class="zammad-chat-welcome zammad-chat-is-hidden">
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
</div>
</div>
<div class="zammad-chat-body">
<div class="zammad-chat-timestamp"><strong><%- @T('Today') %></strong> 14:45</div>
<div class="zammad-chat-message zammad-chat-message--customer">
<span class="zammad-chat-message-body js-backgroundColor"><%- @T('Hello! I need help with your product.') %></span>
</div>
<div class="zammad-chat-message zammad-chat-message--agent">
<span class="zammad-chat-message-body"><%- @T('Hi! Which one of our products?') %></span>
</div>
</div>
<form class="zammad-chat-controls">
<textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
<button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor"><%- @T('Send') %></button>
</form>
</div>
</div> </div>
<div class="controls">
<input type="text" id="form-chat-background" name="background" value="">
</div>
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
</div> </div>
<div class="input form-group formGroup--halfSize"> </div>
<div class="formGroup-label">
<label for="form-chat-fontsize"><%- @T('Font size') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
</div>
<span class="help-block"><%- @T('The default font size is 12px.') %></span>
</div>
</fieldset>
<br> <form class="js-params">
<fieldset>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-title"><%- @T('Chat Title') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
</div>
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
</div>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-background"><%- @T('Background color') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-background" name="background" value="">
</div>
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
</div>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-fontsize"><%- @T('Font size') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
</div>
<span class="help-block"><%- @T('The default font size is 12px.') %></span>
</div>
</fieldset>
<br>
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Options') %></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="inline-label">
<span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="debug" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Enable debugging for implementation.') %>
</label>
<tr>
<td>
<label class="inline-label">
<span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="flat" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Flat design.') %>
</label>
</tbody>
</table>
</form>
<h2><%- @T('Usage') %></h2>
<p><%- @T('Insert the widget-code into the source code of every page the chat should be visible on. It should be placed at the end of the page source code before the `&lt;/body&gt;` closing tag.') %></p>
<h3>Requirements</h3>
<p><%- @T("Zammad Chat requires jQuery. If you don't already use it on your website include it like this:") %></p>
<pre><code class="language-html js-code">&lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;</code></pre>
<h3><%- @T('Auto-show chat') %></h3>
<p><%- @T('The chat will show up once the connection to the server got established and if there is someone online to chat with.') %></p>
<pre><code class="language-html js-paramsBlock">&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
new ZammadChat({
<span class="js-modal-params"></span>
});
});
&lt;/script&gt;</code></pre>
<h3><%- @T('Manually open chat') %></h3>
<p><%- marked(@T('If you want to open the chat by the press of a button set the option `show` to `false` and add the class `open-zammad-chat` to the button.')) %></p>
<pre><code class="language-html js-paramsBlock">&lt;button class="open-zammad-chat"&gt;Chat with us&lt;/button&gt;
&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
new ZammadChat({
<span class="js-modal-params"></span>
show: false
});
});
&lt;/script&gt;</code></pre>
<h3><%- @T("Why doesn't the chat show up?") %></h3>
<p>
<%- @T('There can be several reasons for the chat to not show up:') %>
<ol>
<li><%- @T('The browser is outdated. It does not support WebSocket - the technology we use for the chat.') %>
<li><%- @T('The is no agent online.') %>
<li><%- @T('The chat is turned off.') %>
<li><%- @T('There are too many people in queue for the chat.') %>
</ol>
<%- marked(@T('When you turn on debubbing by setting the option `debug` to `true` the reason gets printed to the javascript console.')) %>
</p>
<h3><%- @T('Options') %></h3>
<table class="settings-list"> <table class="settings-list">
<thead> <thead>
<tr> <tr>
<th style="white-space: nowrap;"><%- @T('Options') %></th> <th><%- @T('Options') %>
</tr> <th><%- @T('Default') %>
<th><%- @T('Type') %>
<th><%- @T('Description') %>
</thead> </thead>
<tbody> <tbody>
<% for option in @apiOptions: %>
<tr> <tr>
<td> <td><%- @T(option.name) %>
<label class="inline-label"> <td style="white-space: nowrap;"><code class="language-javascript js-code"><%= option.default %></code>
<span class="checkbox-replacement checkbox-replacement--inline"> <td style="white-space: nowrap;"><code class="language-javascript js-code"><%= option.type %></code>
<input type="checkbox" name="debug" value="true"> <td><%- @T(option.description, option.descriptionSubstitute) %>
<%- @Icon('checkbox', 'icon-unchecked') %> <% end %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Enable debugging for implementation.') %>
</label>
<tr>
<td>
<label class="inline-label">
<span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="flat" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Flat design.') %>
</label>
</tbody> </tbody>
</table> </table>
</div>
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
<pre>
&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
new ZammadChat({
<span class="js-modal-params"></span>
});
});
&lt;/script&gt;</pre>
</form>
<div class="js-settings"></div>

1
app/assets/stylesheets/application.css
View file

@ -11,6 +11,7 @@
*= require ./sew.css *= require ./sew.css
*= require ./font.css *= require ./font.css
*= require ./svg-dimensions.css *= require ./svg-dimensions.css
*= require ./highlighter-github.css
*= require ./zammad.scss *= require ./zammad.scss
* *
*= require_tree ./custom/ *= require_tree ./custom/

7
app/assets/stylesheets/bootstrap.css vendored
View file

@ -687,13 +687,6 @@ pre,
samp { samp {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
} }
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
kbd kbd { kbd kbd {
padding: 0; padding: 0;
font-size: 100%; font-size: 100%;

123
app/assets/stylesheets/highlighter-github.css Normal file
View file

@ -0,0 +1,123 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
-webkit-text-size-adjust: none;
}
.hljs-comment,
.diff .hljs-header {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #008080;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-doctag,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.hljs-list .hljs-keyword,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rule .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.hljs-name {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}

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

@ -255,10 +255,9 @@ pre {
color: #333; color: #333;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
background: hsl(197,20%,93%); background: white;
border: 1px solid hsl(198,18%,86%); border: 1px solid hsl(0,0%,90%);
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.05) inset;
} }
pre code { pre code {
padding: 0; padding: 0;
@ -269,6 +268,23 @@ pre code {
border-radius: 0; border-radius: 0;
} }
.hljs,
code {
background: none;
padding: 2px 4px;
font-size: 0.88em;
}
code:not(.hljs) {
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
white-space: nowrap;
}
pre code.hljs {
font-size: 1em;
}
.textarea::placeholder, .textarea::placeholder,
.form-control::placeholder, .form-control::placeholder,
.token-input::placeholder { .token-input::placeholder {

11
public/assets/chat/chat.coffee
View file

@ -14,8 +14,8 @@ do($ = window.jQuery, window) ->
port: 6042 port: 6042
debug: false debug: false
fontSize: undefined fontSize: undefined
buttonSelector: '.open-zammad-chat' buttonClass: 'open-zammad-chat'
hiddenButtonClass: 'is-inactive' inactiveClass: 'is-inactive'
title: '<strong>Chat</strong> with us!' title: '<strong>Chat</strong> with us!'
_messageCount: 0 _messageCount: 0
@ -87,6 +87,9 @@ do($ = window.jQuery, window) ->
@input = @el.find('.zammad-chat-input') @input = @el.find('.zammad-chat-input')
# disable open button
$(".#{ @options.buttonClass }").addClass @inactiveClass
@el.find('.js-chat-open').click @open @el.find('.js-chat-open').click @open
@el.find('.js-chat-close').click @close @el.find('.js-chat-close').click @close
@el.find('.zammad-chat-controls').on 'submit', @onSubmit @el.find('.zammad-chat-controls').on 'submit', @onSubmit
@ -154,14 +157,14 @@ do($ = window.jQuery, window) ->
@reopenSession pipe.data @reopenSession pipe.data
onReady: => onReady: =>
$(@options.buttonSelector).click(@open).removeClass(@hiddenButtonClass) $(".#{ @options.buttonClass }").click(@open).removeClass(@inactiveClass)
if @options.show if @options.show
@show() @show()
onError: (message) => onError: (message) =>
@log 'debug', message @log 'debug', message
$(@options.buttonSelector).hide() $(".#{ @options.buttonClass }").hide()
reopenSession: (data) => reopenSession: (data) =>
unfinishedMessage = sessionStorage.getItem 'unfinished_message' unfinishedMessage = sessionStorage.getItem 'unfinished_message'