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

Merge branch 'develop' of github.com:martini/zammad into develop

Browse source
This commit is contained in:
Martin Edenhofer 2015-11-25 15:09:36 +01:00
commit 4955a8434d
12 changed files with 120 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ class App.ChannelChat extends App.Controller
'click .js-widget': 'widget' 'click .js-widget': 'widget'
'change .js-params': 'updateParams' 'change .js-params': 'updateParams'
'keyup .js-params': 'updateParams' 'keyup .js-params': 'updateParams'
'submit .js-testurl': 'changeDemoWebsite' 'submit .js-demo-head': 'changeDemoWebsite'
'blur .js-testurl-input': 'changeDemoWebsite' 'blur .js-testurl-input': 'changeDemoWebsite'
'click .js-selectBrowserWidth': 'selectBrowserWidth' 'click .js-selectBrowserWidth': 'selectBrowserWidth'
'click .js-swatch': 'usePaletteColor' 'click .js-swatch': 'usePaletteColor'
@ -143,6 +143,12 @@ class App.ChannelChat extends App.Controller
@adjustBrowserWidth() @adjustBrowserWidth()
@updateParams() @updateParams()
# bind adjustBrowserWidth with parameter animate = false
$(window).on 'resize.chat-designer', => @adjustBrowserWidth false
release: ->
$(window).off 'resize.chat-designer'
selectBrowserWidth: (event) => selectBrowserWidth: (event) =>
tab = $(event.target).closest('[data-value]') tab = $(event.target).closest('[data-value]')
@ -151,12 +157,13 @@ class App.ChannelChat extends App.Controller
@browserWidth = tab.attr('data-value') @browserWidth = tab.attr('data-value')
@adjustBrowserWidth() @adjustBrowserWidth()
adjustBrowserWidth: -> adjustBrowserWidth: (animate = true) =>
width = parseInt @browserWidth, 10 width = parseInt @browserWidth, 10
# reset zoom # reset zoom
@chat @chat
.removeClass('is-fullscreen') .removeClass('is-fullscreen')
.toggleClass('no-transition', !animate)
.css 'transform', "translateY(#{ @getChatOffset() }px)" .css 'transform', "translateY(#{ @getChatOffset() }px)"
@browser.css('width', '') @browser.css('width', '')
@website.css @website.css
@ -197,7 +204,7 @@ class App.ChannelChat extends App.Controller
if !@url.startsWith('http') if !@url.startsWith('http')
@url = "http://#{ @url }" @url = "http://#{ @url }"
@urlInput.addClass('is-loading') @urlInput.addClass('is-loading').focus()
@palette.empty() @palette.empty()

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

@ -60,12 +60,13 @@
<label for="preview-iframe" class="formGroup-label"><%- @T('Preview') %></label> <label for="preview-iframe" class="formGroup-label"><%- @T('Preview') %></label>
<div class="browser chat-demo js-browser"> <div class="browser chat-demo js-browser">
<div class="browser-head js-demo-head"> <form class="browser-head js-demo-head" novalidate>
<form class="browser-input js-testurl" novalidate> <div class="browser-input">
<input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org"> <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
<div class="loading icon small muted"></div> <div class="loading icon small muted"></div>
</form>
</div> </div>
<input type="submit" class="btn" value="<%- @T('Load') %>">
</form>
<div class="browser-body js-browserBody"> <div class="browser-body js-browserBody">
<div class="browser-website js-website"> <div class="browser-website js-website">
<iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe> <iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
@ -73,7 +74,7 @@
</div> </div>
<style>@import "/assets/chat/chat.css";</style> <style>@import "/assets/chat/chat.css";</style>
<div class="chat-demo-animationHolder"> <div class="chat-demo-animationHolder">
<div class="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible is-open"> <div class="js-chat zammad-chat zammad-chat-is-shown zammad-chat-is-visible is-open">
<div class="zammad-chat-header js-toggle-chat js-backgroundColor js-chatHeader"> <div class="zammad-chat-header js-toggle-chat js-backgroundColor js-chatHeader">
<div class="zammad-chat-header-controls"> <div class="zammad-chat-header-controls">
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span> <span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>

2
app/assets/javascripts/app/views/channel/color_swatch.jst.eco
View file

@ -1 +1 @@
<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div> <div class="color-swatch js-swatch" style="color: <%= @color %>" data-color="<%= @color %>"></div>

2
app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
View file

@ -15,7 +15,7 @@
<li role="presentation"> <li role="presentation">
<a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>"> <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
<span class="dropdown-iconSpacer"> <span class="dropdown-iconSpacer">
<span class="color-swatch icon" style="background: <%= entry.color %>"></span> <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
</span> </span>
<%- @Ti(entry.name) %> <%- @Ti(entry.name) %>
<span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>"> <span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">

10
app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco
View file

@ -11,19 +11,19 @@
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
</ul> </ul>
</div> </div>

2
app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
View file

@ -10,7 +10,7 @@
<li role="presentation"> <li role="presentation">
<a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>"> <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
<span class="dropdown-iconSpacer"> <span class="dropdown-iconSpacer">
<span class="color-swatch icon" style="background: <%= entry.color %>"></span> <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
</span> </span>
<%- @Ti(entry.name) %> <%- @Ti(entry.name) %>
<span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>"> <span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">

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

@ -2332,13 +2332,18 @@ ol.tabs li {
} }
.color-swatch { .color-swatch {
border-radius: 100%; padding: 2px;
width: 11px; margin: -2px 0;
height: 11px;
cursor: pointer; cursor: pointer;
& + .color-swatch { /* :after technique for bigger click area */
margin-left: 4px; &:after {
content: "";
display: inline-block;
height: 11px;
width: 11px;
border-radius: 100%;
background: currentColor;
} }
} }
@ -7440,7 +7445,7 @@ output {
position: relative; position: relative;
height: 100%; height: 100%;
transform-origin: left top; transform-origin: left top;
overflow: auto; overflow: hidden;
&[data-mode=screenshot] iframe, &[data-mode=screenshot] iframe,
&[data-mode=iframe] img { &[data-mode=iframe] img {
@ -7466,13 +7471,13 @@ output {
.browser-head { .browser-head {
display: flex; display: flex;
align-items: center;
padding: 10px; padding: 10px;
border-bottom: 1px solid hsl(0,0%,90%); border-bottom: 1px solid hsl(0,0%,90%);
.browser-input { .browser-input {
flex: 1;
position: relative; position: relative;
flex: 1;
margin-right: 10px;
input { input {
min-width: 0; min-width: 0;
@ -7513,6 +7518,10 @@ output {
user-select: none; user-select: none;
will-change: transform; will-change: transform;
&.no-transition {
transition: none;
}
.zammad-chat-welcome { .zammad-chat-welcome {
display: block !important; display: block !important;
} }

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

@ -278,8 +278,7 @@ do($ = window.jQuery, window) ->
if !@sessionId if !@sessionId
@showLoader() @showLoader()
@el @el.addClass('zammad-chat-is-open')
.addClass('zammad-chat-is-visible')
if !@sessionId if !@sessionId
@el.animate { bottom: 0 }, 500, @onOpenAnimationEnd @el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
@ -309,6 +308,7 @@ do($ = window.jQuery, window) ->
@closeWindow() @closeWindow()
closeWindow: => closeWindow: =>
@el.removeClass('zammad-chat-is-open')
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight() remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
@ -327,12 +327,12 @@ do($ = window.jQuery, window) ->
@onWebSocketOpen() @onWebSocketOpen()
hide: -> hide: ->
@el.removeClass('zammad-chat-is-visible') @el.removeClass('zammad-chat-is-shown')
show: -> show: ->
return @state if @state is 'off' or @state is 'unsupported' return @state if @state is 'off' or @state is 'unsupported'
@el.addClass('zammad-chat-is-visible') @el.addClass('zammad-chat-is-shown')
if !@inputInitialized if !@inputInitialized
@inputInitialized = true @inputInitialized = true

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

@ -25,7 +25,7 @@
height: 100vh; height: 100vh;
border-radius: 0 !important; } } border-radius: 0 !important; } }
.zammad-chat.zammad-chat-is-visible { .zammad-chat.zammad-chat-is-shown {
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; } display: flex; }
@ -54,7 +54,7 @@
.zammad-chat.is-fullscreen .zammad-chat-header { .zammad-chat.is-fullscreen .zammad-chat-header {
border-radius: 0 !important; } border-radius: 0 !important; }
.zammad-chat.zammad-chat-is-visible .zammad-chat-header { .zammad-chat.zammad-chat-is-open .zammad-chat-header {
cursor: default; } cursor: default; }
.zammad-chat-welcome-text { .zammad-chat-welcome-text {
@ -80,10 +80,10 @@
width: 1.3em; } width: 1.3em; }
.zammad-chat-header-icon-close, .zammad-chat-header-icon-close,
.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-open { .zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
display: none; } display: none; }
.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-close { .zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
display: inline; } display: inline; }
.zammad-chat-agent { .zammad-chat-agent {
@ -105,7 +105,7 @@
margin: 0 1em; margin: 0 1em;
display: inline-block; display: inline-block;
line-height: 2em; line-height: 2em;
padding: 0 .7em; padding: 0 0.7em;
border-radius: 1em; border-radius: 1em;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; } box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }

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

@ -375,7 +375,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
if (!this.sessionId) { if (!this.sessionId) {
this.showLoader(); this.showLoader();
} }
this.el.addClass('zammad-chat-is-visible'); this.el.addClass('zammad-chat-is-open');
if (!this.sessionId) { if (!this.sessionId) {
this.el.animate({ this.el.animate({
bottom: 0 bottom: 0
@ -410,6 +410,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.closeWindow = function() { ZammadChat.prototype.closeWindow = function() {
var remainerHeight; var remainerHeight;
this.el.removeClass('zammad-chat-is-open');
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight(); remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
return this.el.animate({ return this.el.animate({
bottom: -remainerHeight bottom: -remainerHeight
@ -429,7 +430,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
}; };
ZammadChat.prototype.hide = function() { ZammadChat.prototype.hide = function() {
return this.el.removeClass('zammad-chat-is-visible'); return this.el.removeClass('zammad-chat-is-shown');
}; };
ZammadChat.prototype.show = function() { ZammadChat.prototype.show = function() {
@ -437,7 +438,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
if (this.state === 'off' || this.state === 'unsupported') { if (this.state === 'off' || this.state === 'unsupported') {
return this.state; return this.state;
} }
this.el.addClass('zammad-chat-is-visible'); this.el.addClass('zammad-chat-is-shown');
if (!this.inputInitialized) { if (!this.inputInitialized) {
this.inputInitialized = true; this.inputInitialized = true;
this.input.autoGrow({ this.input.autoGrow({
@ -683,6 +684,67 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return window.ZammadChat = ZammadChat; return window.ZammadChat = ZammadChat;
})(window.jQuery, window); })(window.jQuery, window);
if (!window.zammadChatTemplates) {
window.zammadChatTemplates = {};
}
window.zammadChatTemplates["agent"] = function (__obj) {
if (!__obj) __obj = {};
var __out = [], __capture = function(callback) {
var out = __out, result;
__out = [];
callback.call(this);
result = __out.join('');
__out = out;
return __safe(result);
}, __sanitize = function(value) {
if (value && value.ecoSafe) {
return value;
} else if (typeof value !== 'undefined' && value != null) {
return __escape(value);
} else {
return '';
}
}, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
__safe = __obj.safe = function(value) {
if (value && value.ecoSafe) {
return value;
} else {
if (!(typeof value !== 'undefined' && value != null)) value = '';
var result = new String(value);
result.ecoSafe = true;
return result;
}
};
if (!__escape) {
__escape = __obj.escape = function(value) {
return ('' + value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
};
}
(function() {
(function() {
if (this.agent.avatar) {
__out.push('\n<img class="zammad-chat-agent-avatar" src="');
__out.push(__sanitize(this.agent.avatar));
__out.push('">\n');
}
__out.push('\n<span class="zammad-chat-agent-sentence">\n <span class="zammad-chat-agent-name">');
__out.push(__sanitize(this.agent.name));
__out.push('</span>\n</span>');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
/*! /*!
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
* "THE BEER-WARE LICENSE" (Revision 42): * "THE BEER-WARE LICENSE" (Revision 42):
@ -760,67 +822,6 @@ jQuery.fn.autoGrow = function(options) {
}); });
}; };
if (!window.zammadChatTemplates) {
window.zammadChatTemplates = {};
}
window.zammadChatTemplates["agent"] = function (__obj) {
if (!__obj) __obj = {};
var __out = [], __capture = function(callback) {
var out = __out, result;
__out = [];
callback.call(this);
result = __out.join('');
__out = out;
return __safe(result);
}, __sanitize = function(value) {
if (value && value.ecoSafe) {
return value;
} else if (typeof value !== 'undefined' && value != null) {
return __escape(value);
} else {
return '';
}
}, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
__safe = __obj.safe = function(value) {
if (value && value.ecoSafe) {
return value;
} else {
if (!(typeof value !== 'undefined' && value != null)) value = '';
var result = new String(value);
result.ecoSafe = true;
return result;
}
};
if (!__escape) {
__escape = __obj.escape = function(value) {
return ('' + value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
};
}
(function() {
(function() {
if (this.agent.avatar) {
__out.push('\n<img class="zammad-chat-agent-avatar" src="');
__out.push(__sanitize(this.agent.avatar));
__out.push('">\n');
}
__out.push('\n<span class="zammad-chat-agent-sentence">\n <span class="zammad-chat-agent-name">');
__out.push(__sanitize(this.agent.name));
__out.push('</span>\n</span>');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
if (!window.zammadChatTemplates) { if (!window.zammadChatTemplates) {
window.zammadChatTemplates = {}; window.zammadChatTemplates = {};
} }

2
public/assets/chat/chat.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -26,7 +26,7 @@
border-radius: 0 !important; border-radius: 0 !important;
} }
} }
.zammad-chat.zammad-chat-is-visible { .zammad-chat.zammad-chat-is-shown {
display: flex; display: flex;
} }
@ -62,7 +62,7 @@
border-radius: 0 !important; border-radius: 0 !important;
} }
.zammad-chat.zammad-chat-is-visible .zammad-chat-header { .zammad-chat.zammad-chat-is-open .zammad-chat-header {
cursor: default; cursor: default;
} }
@ -93,11 +93,11 @@
} }
.zammad-chat-header-icon-close, .zammad-chat-header-icon-close,
.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-open { .zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
display: none; display: none;
} }
.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-close { .zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
display: inline; display: inline;
} }