diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee
index ccb90c5c4..f4329949c 100644
--- a/app/assets/javascripts/app/controllers/_channel/chat.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee
@@ -6,6 +6,17 @@ class App.ChannelChat extends App.Controller
'click .js-widget': 'widget'
'change .js-params': 'updateParams'
'keyup .js-params': 'updateParams'
+ 'submit .js-testurl': 'changeTestWebsite'
+ 'blur .js-testurl-input': 'changeTestWebsite'
+ 'click .js-zoom-in': 'zoomIn'
+ 'click .js-zoom-out': 'zoomOut'
+
+ elements:
+ '.js-demo': 'demo'
+ '.js-iframe': 'iframe'
+ '.js-chat': 'chat'
+ '.js-testurl-input': 'urlInput'
+ '.js-backgroundColor': 'chatBackground'
constructor: ->
super
@@ -14,6 +25,8 @@ class App.ChannelChat extends App.Controller
@widgetDesignerPermanentParams =
id: 'id'
+ $(window).on 'resize.chat-designer', @resizeDemo
+
load: =>
@startLoading()
@ajax(
@@ -37,6 +50,7 @@ class App.ChannelChat extends App.Controller
baseurl: window.location.origin
chats: chats
)
+
@updateParams()
new App.SettingsArea(
@@ -44,6 +58,35 @@ class App.ChannelChat extends App.Controller
area: 'Chat::Base'
)
+ zoomOut: =>
+ if @demo.width() < 1024
+ percentage = @demo.width()/1024
+ @chat.css('transform', "scale(#{ percentage })")
+ @iframe.css
+ transform: "scale(#{ percentage })"
+ width: @demo.width() / percentage
+ height: @demo.height() / percentage
+
+ zoomIn: =>
+ @chat.css('transform', "")
+ @iframe.css
+ transform: ""
+ width: ""
+ height: ""
+
+
+ changeTestWebsite: (event) =>
+ event.preventDefault() if event
+
+ return if @urlInput.val() is @url
+ @url = @urlInput.val()
+
+ src = @url
+ if !src.startsWith('http')
+ src = "http://#{ src }"
+
+ @iframe.attr 'src', src
+
new: (e) =>
new App.ControllerGenericNew(
pageData:
@@ -94,6 +137,11 @@ class App.ChannelChat extends App.Controller
.replace(/\>/g, '>')
value
params = @formParam(@$('.js-params'))
+
+ if parseInt(params.fontSize, 10) > 2
+ @chat.css('font-size', params.fontSize)
+ @chatBackground.css('background', params.background)
+
if @permanent
for key, value of @permanent
params[key] = value
diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco
index 581572704..de301491e 100644
--- a/app/assets/javascripts/app/views/channel/chat.jst.eco
+++ b/app/assets/javascripts/app/views/channel/chat.jst.eco
@@ -1,10 +1,140 @@
-
<%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %>
+
<%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %>
+
+
<%- @T('Designer') %>
+
+
+
+
+
<%- @Icon('zoom-out') %>
+
<%- @Icon('zoom-in') %>
+
+
+
+
+
+
+
+
+
Heute 14:45
+
+ Hello! I need help with your product.
+
+
+ Hi! Which one of our products?
+
+
+
+
+
+
+
+
+
+
+ <%- @T('You need to add the following Java Script code snipped to your web page') %>:
+
+
+<script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
+
+<script>
+$(function() {
+ new ZammadChat({
+
+ });
+});
+</script>
+
@@ -60,82 +190,4 @@
<% end %>
- <%- @T('Widget Designer') %>
-
-
-
diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
index 65954e67a..7085e16b5 100644
--- a/app/assets/stylesheets/svg-dimensions.css
+++ b/app/assets/stylesheets/svg-dimensions.css
@@ -45,7 +45,7 @@
.icon-mood-ok { width: 60px; height: 59px; }
.icon-mood-super-bad { width: 60px; height: 59px; }
.icon-mood-supergood { width: 60px; height: 59px; }
-.icon-note { width: 17px; height: 16px; }
+.icon-note { width: 16px; height: 16px; }
.icon-one-ticket { width: 48px; height: 10px; }
.icon-organization { width: 16px; height: 16px; }
.icon-outbound-calls { width: 17px; height: 17px; }
@@ -80,4 +80,6 @@
.icon-trash { width: 16px; height: 16px; }
.icon-twitter-button { width: 29px; height: 22px; }
.icon-twitter { width: 17px; height: 17px; }
-.icon-user { width: 16px; height: 16px; }
\ No newline at end of file
+.icon-user { width: 16px; height: 16px; }
+.icon-zoom-in { width: 20px; height: 20px; }
+.icon-zoom-out { width: 20px; height: 20px; }
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 7e08d6cbd..e8d330259 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -1837,6 +1837,7 @@ kbd {
.help-block {
margin: 0;
color: #bcbcbc;
+ font-size: 12px;
&.help-block--center {
text-align: center;
@@ -1844,7 +1845,7 @@ kbd {
}
.help-block:not(:empty) {
- margin: 8px 2px 10px;
+ margin: 6px 2px 10px;
}
/* replace music icon with attachment */
@@ -7322,6 +7323,76 @@ output {
overflow: auto;
}
+.browser {
+ margin: 0 0 20px;
+ border: 1px solid hsl(0,0%,90%);
+ border-radius: 5px;
+ height: 500px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+.browser-body {
+ position: relative;
+ overflow: hidden;
+ flex: 1;
+
+ iframe {
+ position: absolute;
+ border: none;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ transform-origin: left top;
+ }
+}
+
+.browser-head {
+ display: flex;
+ padding: 5px;
+ border-bottom: 1px solid hsl(0,0%,90%);
+
+ .browser-input {
+ flex: 1;
+ margin: 5px;
+ }
+
+ .browser-control {
+ width: 39px;
+ margin: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ fill: hsl(202,8%,28%);
+ cursor: pointer;
+ }
+}
+
+
+.chat-demo {
+ .zammad-chat {
+ position: absolute;
+ transform-origin: right bottom;
+ pointer-events: auto;
+ }
+
+ .chat-demo-animationHolder {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ animation: slide-up 500ms;
+ pointer-events: none;
+ }
+}
+
+@keyframes slide-up {
+ from { transform: translateY(100%); }
+}
+
/*
----------------
diff --git a/contrib/icon-sprite.sketch b/contrib/icon-sprite.sketch
index 1812c3ace..43fd28eda 100644
Binary files a/contrib/icon-sprite.sketch and b/contrib/icon-sprite.sketch differ
diff --git a/public/assets/chat/chat.css b/public/assets/chat/chat.css
index 1bbf8a852..ea490364a 100644
--- a/public/assets/chat/chat.css
+++ b/public/assets/chat/chat.css
@@ -168,7 +168,7 @@
.zammad-chat-body {
padding: 0.5em 1em;
- height: 300px;
+ height: 25em;
overflow: auto;
background: white; }
@@ -277,6 +277,7 @@
.zammad-chat-input {
float: left;
+ height: auto;
font-family: inherit;
line-height: inherit;
font-size: inherit;
diff --git a/public/assets/chat/chat.scss b/public/assets/chat/chat.scss
index 1c7ef2a04..f6499f79b 100644
--- a/public/assets/chat/chat.scss
+++ b/public/assets/chat/chat.scss
@@ -171,7 +171,7 @@
.zammad-chat-body {
padding: 0.5em 1em;
- height: 300px;
+ height: 25em;
overflow: auto;
background: white;
}
@@ -276,6 +276,7 @@
.zammad-chat-input {
float: left;
+ height: auto;
font-family: inherit;
line-height: inherit;
font-size: inherit;
diff --git a/public/assets/images/chat-demo-avatar.png b/public/assets/images/chat-demo-avatar.png
new file mode 100644
index 000000000..58a83eebc
Binary files /dev/null and b/public/assets/images/chat-demo-avatar.png differ
diff --git a/public/assets/images/icons.svg b/public/assets/images/icons.svg
index 3fff74520..6b45dd781 100644
--- a/public/assets/images/icons.svg
+++ b/public/assets/images/icons.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/assets/images/icons/arrow-down.svg b/public/assets/images/icons/arrow-down.svg
index 7b9411111..a21599116 100644
--- a/public/assets/images/icons/arrow-down.svg
+++ b/public/assets/images/icons/arrow-down.svg
@@ -1,6 +1,6 @@