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

chat designer: responsive preview

Browse source
This commit is contained in:
Felix Niklas 2015-11-17 01:43:36 +01:00
parent 95d9b3c5f6
commit 96d24ff4d7
9 changed files with 148 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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

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

@ -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>

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

@ -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));
}
}
}
/*
----------------

6
public/assets/chat/chat.coffee
View file

@ -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')

50
public/assets/chat/chat.css
View file

@ -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; } }

10
public/assets/chat/chat.js
View file

@ -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
View file

File diff suppressed because one or more lines are too long

53
public/assets/chat/chat.scss
View file

@ -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 {
@ -346,27 +374,4 @@
.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;
flex: 1;
}
.zammad-chat,
.zammad-chat-header {
border-radius: 0 !important;
}
}

2
public/assets/chat/views/chat.eco
View file

@ -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>