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

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

@ -1,9 +1,14 @@
<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">
<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>
<% if _.isEmpty(@chats): %> <h2><%- @T('Channels') %></h2>
<p><%- @T('You have no configured chat\'s right now.') %></p> <p><%- @T('You can create multiple chat channels.') %></p>
<% else: %> <table class="settings-list">
<table class="settings-list">
<thead> <thead>
<tr> <tr>
<th style="white-space: nowrap;"><%- @T('Name') %></th> <th style="white-space: nowrap;"><%- @T('Name') %></th>
@ -13,7 +18,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<% for chat in @chats: %> <% for chat in @chats: %>
<tr data-id="<%= chat.id %>"> <tr data-id="<%= chat.id %>">
<td> <td>
<label class="inline-label"> <label class="inline-label">
@ -33,23 +38,16 @@
<%- @Icon('trash') %> <%- @T('Remove') %> <%- @Icon('trash') %> <%- @T('Remove') %>
</div> </div>
</div> </div>
<% end %> <% end %>
<tr class="settings-list-controlRow"> <tr>
<td> <td colspan="4" class="settings-list-action-cell js-add">
<td> <%- @Icon('plus-small') %>
<td>
<td>
<div class="btn btn--text js-add">
<%- @Icon('plus-small') %> <%- @T('Add') %>
</div>
</tbody> </tbody>
</table> </table>
<% end %>
<h2><%- @T('Designer') %></h2> <h2><%- @T('Designer') %></h2>
<div class="form-group"> <div class="form-group">
<label class="formGroup-label"><%- @T('Preview Width') %></label> <label class="formGroup-label"><%- @T('Preview Width') %></label>
<div class="control"> <div class="control">
<div class="select-tabs js-selectBrowserWidth"> <div class="select-tabs js-selectBrowserWidth">
@ -58,9 +56,9 @@
<div class="tab" data-value="1280">MacBook</div> <div class="tab" data-value="1280">MacBook</div>
</div> </div>
</div> </div>
</div> </div>
<div class="browser chat-demo js-browser"> <div class="browser chat-demo js-browser">
<div class="browser-head"> <div class="browser-head">
<form class="browser-input js-testurl" novalidate> <form class="browser-input js-testurl" novalidate>
<input type="url" class="js-testurl-input" placeholder="zammad.org"> <input type="url" class="js-testurl-input" placeholder="zammad.org">
@ -106,9 +104,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<form class="js-params"> <form class="js-params">
<fieldset> <fieldset>
<div class="input form-group formGroup--halfSize"> <div class="input form-group formGroup--halfSize">
<div class="formGroup-label"> <div class="formGroup-label">
@ -170,19 +168,72 @@
</label> </label>
</tbody> </tbody>
</table> </table>
</form>
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>: <h2><%- @T('Usage') %></h2>
<pre> <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>
&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
<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; &lt;script&gt;
$(function() { $(function() {
new ZammadChat({ new ZammadChat({
<span class="js-modal-params"></span> <span class="js-modal-params"></span>
});
}); });
}); &lt;/script&gt;</code></pre>
&lt;/script&gt;</pre>
</form>
<div class="js-settings"></div> <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">
<thead>
<tr>
<th><%- @T('Options') %>
<th><%- @T('Default') %>
<th><%- @T('Type') %>
<th><%- @T('Description') %>
</thead>
<tbody>
<% for option in @apiOptions: %>
<tr>
<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>
</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'