chat designer: remove tabs, add documentation
This commit is contained in:
Felix Niklas
parent
f530720435
commit
b60b0a8b5c
8 changed files with 445 additions and 219 deletions
|
|
@ -1,35 +1,4 @@
|
|||
class App.ChannelChat extends App.ControllerTabs
|
||||
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
|
||||
class App.ChannelChat extends App.Controller
|
||||
events:
|
||||
'click .js-add': 'new'
|
||||
'click .js-edit': 'edit'
|
||||
|
|
@ -48,6 +17,72 @@ class App.ChannelChatDesigner extends App.Controller
|
|||
'.js-chat': 'chat'
|
||||
'.js-testurl-input': 'urlInput'
|
||||
'.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: ->
|
||||
super
|
||||
|
|
@ -80,15 +115,14 @@ class App.ChannelChatDesigner extends App.Controller
|
|||
@html App.view('channel/chat')(
|
||||
baseurl: window.location.origin
|
||||
chats: chats
|
||||
apiOptions: @apiOptions
|
||||
)
|
||||
|
||||
@code.each (i, block) ->
|
||||
hljs.highlightBlock block
|
||||
|
||||
@updateParams()
|
||||
|
||||
new App.SettingsArea(
|
||||
el: @$('.js-settings')
|
||||
area: 'Chat::Base'
|
||||
)
|
||||
|
||||
selectBrowserWidth: (event) =>
|
||||
tab = $(event.target).closest('[data-value]')
|
||||
|
||||
|
|
@ -202,4 +236,8 @@ class App.ChannelChatDesigner extends App.Controller
|
|||
paramString += " #{key}: '#{quote(value)}'"
|
||||
@$('.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
1
app/assets/javascripts/app/lib/base/highlight.pack.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,188 +1,239 @@
|
|||
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
|
||||
|
||||
<% if _.isEmpty(@chats): %>
|
||||
<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 class="page-header">
|
||||
<div class="page-header-title">
|
||||
<h1><%- @T('Chat Widget') %> <small></small></h1>
|
||||
</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">
|
||||
<div class="browser-head">
|
||||
<form class="browser-input js-testurl" novalidate>
|
||||
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
||||
</form>
|
||||
</div>
|
||||
<div class="browser-body js-demo">
|
||||
<iframe class="js-iframe"></iframe>
|
||||
<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>
|
||||
<h2><%- @T('Channels') %></h2>
|
||||
<p><%- @T('You can create multiple chat channels.') %></p>
|
||||
<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>
|
||||
<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>
|
||||
<% end %>
|
||||
<tr>
|
||||
<td colspan="4" class="settings-list-action-cell js-add">
|
||||
<%- @Icon('plus-small') %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
<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="<strong>Chat</strong> with us!">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
|
||||
<div class="browser chat-demo js-browser">
|
||||
<div class="browser-head">
|
||||
<form class="browser-input js-testurl" novalidate>
|
||||
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
||||
</form>
|
||||
</div>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-background"><%- @T('Background color') %></label>
|
||||
<div class="browser-body js-demo">
|
||||
<iframe class="js-iframe"></iframe>
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<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="<strong>Chat</strong> 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 `</body>` 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"><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script></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"><script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
new ZammadChat({
|
||||
<span class="js-modal-params"></span>
|
||||
});
|
||||
});
|
||||
</script></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"><button class="open-zammad-chat">Chat with us</button>
|
||||
|
||||
<script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
new ZammadChat({
|
||||
<span class="js-modal-params"></span>
|
||||
show: false
|
||||
});
|
||||
});
|
||||
</script></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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;"><%- @T('Options') %></th>
|
||||
</tr>
|
||||
<th><%- @T('Options') %>
|
||||
<th><%- @T('Default') %>
|
||||
<th><%- @T('Type') %>
|
||||
<th><%- @T('Description') %>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for option in @apiOptions: %>
|
||||
<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>
|
||||
<td><%- @T(option.name) %>
|
||||
<td style="white-space: nowrap;"><code class="language-javascript js-code"><%= option.default %></code>
|
||||
<td style="white-space: nowrap;"><code class="language-javascript js-code"><%= option.type %></code>
|
||||
<td><%- @T(option.description, option.descriptionSubstitute) %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
|
||||
|
||||
<pre>
|
||||
<script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
new ZammadChat({
|
||||
<span class="js-modal-params"></span>
|
||||
});
|
||||
});
|
||||
</script></pre>
|
||||
</form>
|
||||
|
||||
<div class="js-settings"></div>
|
||||
</div>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
*= require ./sew.css
|
||||
*= require ./font.css
|
||||
*= require ./svg-dimensions.css
|
||||
*= require ./highlighter-github.css
|
||||
*= require ./zammad.scss
|
||||
*
|
||||
*= require_tree ./custom/
|
||||
|
|
|
|||
7
app/assets/stylesheets/bootstrap.css
vendored
7
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -687,13 +687,6 @@ pre,
|
|||
samp {
|
||||
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 {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
|
|
|
|||
123
app/assets/stylesheets/highlighter-github.css
Normal file
123
app/assets/stylesheets/highlighter-github.css
Normal 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;
|
||||
}
|
||||
|
|
@ -255,10 +255,9 @@ pre {
|
|||
color: #333;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background: hsl(197,20%,93%);
|
||||
border: 1px solid hsl(198,18%,86%);
|
||||
background: white;
|
||||
border: 1px solid hsl(0,0%,90%);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.05) inset;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
|
|
@ -269,6 +268,23 @@ pre code {
|
|||
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,
|
||||
.form-control::placeholder,
|
||||
.token-input::placeholder {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ do($ = window.jQuery, window) ->
|
|||
port: 6042
|
||||
debug: false
|
||||
fontSize: undefined
|
||||
buttonSelector: '.open-zammad-chat'
|
||||
hiddenButtonClass: 'is-inactive'
|
||||
buttonClass: 'open-zammad-chat'
|
||||
inactiveClass: 'is-inactive'
|
||||
title: '<strong>Chat</strong> with us!'
|
||||
|
||||
_messageCount: 0
|
||||
|
|
@ -87,6 +87,9 @@ do($ = window.jQuery, window) ->
|
|||
|
||||
@input = @el.find('.zammad-chat-input')
|
||||
|
||||
# disable open button
|
||||
$(".#{ @options.buttonClass }").addClass @inactiveClass
|
||||
|
||||
@el.find('.js-chat-open').click @open
|
||||
@el.find('.js-chat-close').click @close
|
||||
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
|
||||
|
|
@ -154,14 +157,14 @@ do($ = window.jQuery, window) ->
|
|||
@reopenSession pipe.data
|
||||
|
||||
onReady: =>
|
||||
$(@options.buttonSelector).click(@open).removeClass(@hiddenButtonClass)
|
||||
$(".#{ @options.buttonClass }").click(@open).removeClass(@inactiveClass)
|
||||
|
||||
if @options.show
|
||||
@show()
|
||||
|
||||
onError: (message) =>
|
||||
@log 'debug', message
|
||||
$(@options.buttonSelector).hide()
|
||||
$(".#{ @options.buttonClass }").hide()
|
||||
|
||||
reopenSession: (data) =>
|
||||
unfinishedMessage = sessionStorage.getItem 'unfinished_message'
|
||||
|
|
|
|||
Loading…
Reference in a new issue