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

chat designer: allow to toggle the chat and change title

Browse source
This commit is contained in:
Felix Niklas 2015-11-24 15:21:05 +01:00
parent 1bbf80c80a
commit 8fb4e393b0
3 changed files with 54 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,8 @@ class App.ChannelChat extends App.Controller
'blur .js-testurl-input': 'changeDemoWebsite'
'click .js-selectBrowserWidth': 'selectBrowserWidth'
'click .js-swatch': 'usePaletteColor'
'click .js-toggle-chat': 'toggleChat'
'input .js-chatTitle': 'changeTitle'
elements:
'.js-browser': 'browser'
@ -23,6 +25,7 @@ class App.ChannelChat extends App.Controller
'.js-color': 'colorField'
'.js-screenshot': 'screenshot'
'.js-website': 'website'
'.js-chat-welcome': 'chatWelcome'
apiOptions: [
{
@ -178,11 +181,11 @@ class App.ChannelChat extends App.Controller
@urlInput.addClass('is-loading')
# clear palette and iframe
@palette.empty()
@website.attr('data-mode', '')
@iframe.attr('src', '')
@screenshot.attr('src', '')
@website.attr('data-mode', 'iframe')
@iframe.attr('src', @url)
$.ajax
url: 'https://images.zammad.com/api/v1/webpage/combined'
@ -196,12 +199,9 @@ class App.ChannelChat extends App.Controller
imageSource = data['data_url']
if imageSource
console.log "renderDemoWebsite", typeof imageSource, imageSource
@screenshot.attr 'src', imageSource
@iframe.attr('src', '')
@website.attr('data-mode', 'screenshot')
else
@iframe.attr 'src', @url
@website.attr('data-mode', 'iframe')
@renderPalette data['palette']
@ -235,6 +235,12 @@ class App.ChannelChat extends App.Controller
@colorField.val code
@updateParams()
toggleChat: =>
@chat.toggleClass('is-open')
changeTitle: (event) ->
@chatWelcome.html $(event.currentTarget).val()
new: (e) =>
new App.ControllerGenericNew(
pageData:
@ -294,6 +300,7 @@ class App.ChannelChat extends App.Controller
params.flat = true
else
@chat.removeClass('zammad-chat--flat')
@chatWelcome.html params.title
if @permanent
for key, value of @permanent

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

@ -60,7 +60,7 @@
<label for="preview-iframe" class="formGroup-label"><%- @T('Preview') %></label>
<div class="browser chat-demo js-browser">
<div class="browser-head">
<div class="browser-head js-demo-head">
<form class="browser-input js-testurl" novalidate>
<input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
<div class="loading icon small muted"></div>
@ -68,18 +68,18 @@
</div>
<div class="browser-body js-demo">
<div class="browser-website js-website">
<iframe class="js-iframe" sandbox></iframe>
<iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
<img class="js-screenshot">
</div>
<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="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible">
<div class="zammad-chat-header js-toggle-chat 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>
<svg class="zammad-chat-header-icon-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">
@ -90,7 +90,7 @@
</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>
<span class="zammad-chat-welcome-text js-chat-welcome"><strong>Chat</strong> with us!</span>
</div>
</div>
<div class="zammad-chat-body">
@ -118,7 +118,7 @@
<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!">
<input class="js-chatTitle" 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>

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

@ -7484,7 +7484,7 @@ output {
.loading.icon {
position: absolute;
right: 11px;
top: 11px;
top: 10px;
display: none;
}
}
@ -7508,9 +7508,38 @@ output {
position: absolute;
transform-origin: right bottom;
transition: 500ms;
bottom: -318px;
.zammad-chat-welcome {
display: block !important;
}
.zammad-chat-header-icon-open {
display: inline !important;
}
.zammad-chat-agent-status,
.zammad-chat-header-icon-close,
.zammad-chat-agent {
display: none !important;
}
&.is-open {
bottom: 0;
.zammad-chat-agent {
display: block !important;
}
.zammad-chat-header-icon-close,
.zammad-chat-agent-status {
display: inline-block !important;
}
.zammad-chat-body {
transition: 500ms;
.zammad-chat-welcome,
.zammad-chat-header-icon-open {
display: none !important;
}
}
&.is-fullscreen {
@ -7533,7 +7562,7 @@ output {
width: 100%;
height: 100%;
animation: slide-up 500ms;
pointer-events: none;
// pointer-events: none;
}
}