chat designer: responsive preview
This commit is contained in:
Felix Niklas
parent
95d9b3c5f6
commit
96d24ff4d7
9 changed files with 148 additions and 82 deletions
|
|
@ -6,13 +6,13 @@ 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'
|
||||
'submit .js-testurl': 'changeDemoWebsite'
|
||||
'blur .js-testurl-input': 'changeDemoWebsite'
|
||||
'click .js-selectBrowserWidth': 'selectBrowserWidth'
|
||||
|
||||
elements:
|
||||
'.js-demo': 'demo'
|
||||
'.js-browser': 'browser'
|
||||
'.js-iframe': 'iframe'
|
||||
'.js-chat': 'chat'
|
||||
'.js-testurl-input': 'urlInput'
|
||||
|
|
@ -58,27 +58,43 @@ class App.ChannelChat extends App.Controller
|
|||
area: 'Chat::Base'
|
||||
)
|
||||
|
||||
zoomOut: =>
|
||||
if @demo.width() < 1024
|
||||
percentage = @demo.width()/1024
|
||||
selectBrowserWidth: (event) =>
|
||||
tab = $(event.target).closest('[data-value]')
|
||||
|
||||
# select tab
|
||||
tab.addClass('is-selected').siblings().removeClass('is-selected')
|
||||
|
||||
value = tab.attr('data-value')
|
||||
width = parseInt value, 10
|
||||
|
||||
# reset zoom
|
||||
@chat.css('transform', "")
|
||||
@demo.css('width', "")
|
||||
@chat.removeClass('is-fullscreen')
|
||||
@iframe.css
|
||||
transform: ""
|
||||
width: ""
|
||||
height: ""
|
||||
|
||||
return if value is 'fit'
|
||||
|
||||
if width < @demo.width()
|
||||
@chat.addClass('is-fullscreen')
|
||||
@demo.css('width', "#{ width }px")
|
||||
else
|
||||
percentage = @demo.width()/width
|
||||
@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) =>
|
||||
changeDemoWebsite: (event) =>
|
||||
event.preventDefault() if event
|
||||
|
||||
return if @urlInput.val() is @url
|
||||
# fire both on enter and blur
|
||||
# but cache url
|
||||
return if @urlInput.val() is "" or @urlInput.val() is @url
|
||||
@url = @urlInput.val()
|
||||
|
||||
src = @url
|
||||
|
|
|
|||
|
|
@ -8,13 +8,16 @@
|
|||
|
||||
<h2><%- @T('Designer') %></h2>
|
||||
|
||||
<div class="browser chat-demo">
|
||||
<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 class="browser-control zoom-out js-zoom-out"><%- @Icon('zoom-out') %></div>
|
||||
<div class="browser-control zoom-in js-zoom-in"><%- @Icon('zoom-in') %></div>
|
||||
<div class="select-tabs js-selectBrowserWidth">
|
||||
<div class="tab" data-value="375">iPhone 6</div>
|
||||
<div class="tab is-selected" data-value="fit">Fit Width</div>
|
||||
<div class="tab" data-value="1280">MacBook</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="browser-body js-demo">
|
||||
<iframe class="js-iframe"></iframe>
|
||||
|
|
|
|||
|
|
@ -6529,6 +6529,7 @@ output {
|
|||
color: hsl(60,1%,34%);
|
||||
background: white;
|
||||
table-layout: auto;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.is-invalid {
|
||||
border-radius: 3px;
|
||||
|
|
@ -7327,16 +7328,16 @@ output {
|
|||
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;
|
||||
height: 450px;
|
||||
width: 100%;
|
||||
transition: 500ms;
|
||||
background: #eee;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
|
|
@ -7351,17 +7352,21 @@ output {
|
|||
|
||||
.browser-head {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid hsl(0,0%,90%);
|
||||
|
||||
.browser-input {
|
||||
flex: 1;
|
||||
margin: 5px;
|
||||
margin-right: 10px;
|
||||
|
||||
input {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.browser-control {
|
||||
width: 39px;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -7370,11 +7375,22 @@ output {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-demo {
|
||||
.zammad-chat {
|
||||
position: absolute;
|
||||
transform-origin: right bottom;
|
||||
transition: 500ms;
|
||||
|
||||
.zammad-chat-body {
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
&.is-fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat-header {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -7393,6 +7409,22 @@ output {
|
|||
from { transform: translateY(100%); }
|
||||
}
|
||||
|
||||
.select-tabs {
|
||||
display: flex;
|
||||
border: 1px solid hsla(206,100%,3%,0.08);
|
||||
border-radius: 3px;
|
||||
|
||||
.tab {
|
||||
height: 39px;
|
||||
padding-top: 11px;
|
||||
color: hsl(199,18%,72%);
|
||||
|
||||
&.is-selected {
|
||||
background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
----------------
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ do($ = window.jQuery, window) ->
|
|||
fontSize: undefined
|
||||
buttonSelector: '.open-zammad-chat'
|
||||
hiddenButtonClass: 'is-inactive'
|
||||
title: '<strong>Chat</strong> with us!'
|
||||
|
||||
_messageCount: 0
|
||||
isOpen: true
|
||||
|
|
@ -30,7 +31,6 @@ do($ = window.jQuery, window) ->
|
|||
initialQueueDelay: 10000
|
||||
wsReconnectEnable: true
|
||||
strings:
|
||||
'<strong>Chat</strong> with us!': '<strong>Chatten</strong> sie mit uns!'
|
||||
'Online': 'Online'
|
||||
'Offline': 'Offline'
|
||||
'Connecting': 'Verbinden'
|
||||
|
|
@ -80,7 +80,9 @@ do($ = window.jQuery, window) ->
|
|||
return
|
||||
|
||||
@options = $.extend {}, @defaults, options
|
||||
@el = $(@view('chat')())
|
||||
@el = $(@view('chat')(
|
||||
title: @options.title
|
||||
))
|
||||
@options.target.append @el
|
||||
|
||||
@input = @el.find('.zammad-chat-input')
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
bottom: 0;
|
||||
font-size: 12px;
|
||||
width: 33em;
|
||||
height: 30em;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
|
|
@ -12,6 +13,17 @@
|
|||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
.zammad-chat.is-fullscreen {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border-radius: 0 !important; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border-radius: 0 !important; } }
|
||||
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: -webkit-flex;
|
||||
|
|
@ -35,6 +47,12 @@
|
|||
border-radius: 5px 5px 0 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat-header {
|
||||
border-radius: 0 !important; } }
|
||||
|
||||
.zammad-chat.is-fullscreen .zammad-chat-header {
|
||||
border-radius: 0 !important; }
|
||||
|
||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
||||
cursor: default; }
|
||||
|
|
@ -168,9 +186,17 @@
|
|||
|
||||
.zammad-chat-body {
|
||||
padding: 0.5em 1em;
|
||||
height: 25em;
|
||||
overflow: auto;
|
||||
background: white; }
|
||||
background: white;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; } }
|
||||
|
||||
.zammad-chat-timestamp {
|
||||
text-align: center;
|
||||
|
|
@ -343,23 +369,3 @@
|
|||
.zammad-chat--flat .zammad-chat-button,
|
||||
.zammad-chat--flat .zammad-chat-status {
|
||||
box-shadow: none; }
|
||||
|
||||
/*
|
||||
|
||||
Mobile Design
|
||||
|
||||
*/
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: 100vh; }
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; }
|
||||
.zammad-chat,
|
||||
.zammad-chat-header {
|
||||
border-radius: 0 !important; } }
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
debug: false,
|
||||
fontSize: void 0,
|
||||
buttonSelector: '.open-zammad-chat',
|
||||
hiddenButtonClass: 'is-inactive'
|
||||
hiddenButtonClass: 'is-inactive',
|
||||
title: '<strong>Chat</strong> with us!'
|
||||
};
|
||||
|
||||
ZammadChat.prototype._messageCount = 0;
|
||||
|
|
@ -104,7 +105,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
ZammadChat.prototype.wsReconnectEnable = true;
|
||||
|
||||
ZammadChat.prototype.strings = {
|
||||
'<strong>Chat</strong> with us!': '<strong>Chatten</strong> sie mit uns!',
|
||||
'Online': 'Online',
|
||||
'Offline': 'Offline',
|
||||
'Connecting': 'Verbinden',
|
||||
|
|
@ -201,7 +201,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
return;
|
||||
}
|
||||
this.options = $.extend({}, this.defaults, options);
|
||||
this.el = $(this.view('chat')());
|
||||
this.el = $(this.view('chat')({
|
||||
title: this.options.title
|
||||
}));
|
||||
this.options.target.append(this.el);
|
||||
this.input = this.el.find('.zammad-chat-input');
|
||||
this.el.find('.js-chat-open').click(this.open);
|
||||
|
|
@ -861,7 +863,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
|
|||
|
||||
__out.push('>\n <div class="zammad-chat-header-controls">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <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"/></svg>\n <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"/></svg>\n </span>\n </div>\n <div class="zammad-chat-agent zammad-chat-is-hidden">\n </div>\n <div class="zammad-chat-welcome">\n <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"/></svg>\n <span class="zammad-chat-welcome-text">');
|
||||
|
||||
__out.push(this.T('<strong>Chat</strong> with us!'));
|
||||
__out.push(this.title);
|
||||
|
||||
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <textarea class="zammad-chat-input" rows="1" placeholder="');
|
||||
|
||||
|
|
|
|||
2
public/assets/chat/chat.min.js
vendored
2
public/assets/chat/chat.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -5,11 +5,26 @@
|
|||
bottom: 0;
|
||||
font-size: 12px;
|
||||
width: 33em;
|
||||
height: 30em;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
||||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
&.is-fullscreen {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: flex;
|
||||
|
|
@ -37,6 +52,14 @@
|
|||
border-radius: 5px 5px 0 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat.is-fullscreen .zammad-chat-header {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
||||
|
|
@ -171,9 +194,14 @@
|
|||
|
||||
.zammad-chat-body {
|
||||
padding: 0.5em 1em;
|
||||
height: 25em;
|
||||
overflow: auto;
|
||||
background: white;
|
||||
flex: 1;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zammad-chat-timestamp {
|
||||
|
|
@ -347,26 +375,3 @@
|
|||
.zammad-chat--flat .zammad-chat-status {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Mobile Design
|
||||
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.zammad-chat {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
}
|
||||
.zammad-chat,
|
||||
.zammad-chat-header {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="zammad-chat-welcome">
|
||||
<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"/></svg>
|
||||
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
|
||||
<span class="zammad-chat-welcome-text"><%- @title %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zammad-chat-body"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue