chat client: fix line-height in input field
This commit is contained in:
parent
1f64705762
commit
a4e49a178e
4 changed files with 97 additions and 87 deletions
|
@ -211,7 +211,9 @@
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
|
|
||||||
.zammad-chat-message {
|
.zammad-chat-message {
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0; }
|
||||||
|
|
||||||
|
.zammad-chat-message-body {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
border-radius: 1em; }
|
border-radius: 1em; }
|
||||||
|
@ -308,6 +310,7 @@
|
||||||
float: left;
|
float: left;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
min-height: 1.4em !important;
|
||||||
max-height: 6em;
|
max-height: 6em;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
|
|
@ -59,6 +59,93 @@ window.zammadChatTemplates["agent"] = function (__obj) {
|
||||||
return __out.join('');
|
return __out.join('');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* ----------------------------------------------------------------------------
|
||||||
|
* "THE BEER-WARE LICENSE" (Revision 42):
|
||||||
|
* <jevin9@gmail.com> wrote this file. As long as you retain this notice you
|
||||||
|
* can do whatever you want with this stuff. If we meet some day, and you think
|
||||||
|
* this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
|
||||||
|
* ----------------------------------------------------------------------------
|
||||||
|
*
|
||||||
|
* Autogrow Textarea Plugin Version v3.0
|
||||||
|
* http://www.technoreply.com/autogrow-textarea-plugin-3-0
|
||||||
|
*
|
||||||
|
* THIS PLUGIN IS DELIVERD ON A PAY WHAT YOU WHANT BASIS. IF THE PLUGIN WAS USEFUL TO YOU, PLEASE CONSIDER BUYING THE PLUGIN HERE :
|
||||||
|
* https://sites.fastspring.com/technoreply/instant/autogrowtextareaplugin
|
||||||
|
*
|
||||||
|
* Date: October 15, 2012
|
||||||
|
*
|
||||||
|
* Zammad modification: remove overflow:hidden when maximum height is reached
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
jQuery.fn.autoGrow = function(options) {
|
||||||
|
return this.each(function() {
|
||||||
|
var settings = jQuery.extend({
|
||||||
|
extraLine: true,
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
var createMirror = function(textarea) {
|
||||||
|
jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
|
||||||
|
return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var sendContentToMirror = function (textarea) {
|
||||||
|
mirror.innerHTML = String(textarea.value)
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/ /g, ' ')
|
||||||
|
.replace(/\n/g, '<br />') +
|
||||||
|
(settings.extraLine? '.<br/>.' : '')
|
||||||
|
;
|
||||||
|
|
||||||
|
if (jQuery(textarea).height() != jQuery(mirror).height()) {
|
||||||
|
jQuery(textarea).height(jQuery(mirror).height());
|
||||||
|
|
||||||
|
var maxHeight = parseInt(jQuery(textarea).css('max-height'), 10);
|
||||||
|
var overflow = jQuery(mirror).height() > maxHeight ? '' : 'hidden'
|
||||||
|
jQuery(textarea).css('overflow', overflow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var growTextarea = function () {
|
||||||
|
sendContentToMirror(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a mirror
|
||||||
|
var mirror = createMirror(this);
|
||||||
|
|
||||||
|
// Style the mirror
|
||||||
|
mirror.style.display = 'none';
|
||||||
|
mirror.style.wordWrap = 'break-word';
|
||||||
|
mirror.style.whiteSpace = 'normal';
|
||||||
|
mirror.style.padding = jQuery(this).css('paddingTop') + ' ' +
|
||||||
|
jQuery(this).css('paddingRight') + ' ' +
|
||||||
|
jQuery(this).css('paddingBottom') + ' ' +
|
||||||
|
jQuery(this).css('paddingLeft');
|
||||||
|
|
||||||
|
mirror.style.width = jQuery(this).css('width');
|
||||||
|
mirror.style.fontFamily = jQuery(this).css('font-family');
|
||||||
|
mirror.style.fontSize = jQuery(this).css('font-size');
|
||||||
|
mirror.style.lineHeight = jQuery(this).css('line-height');
|
||||||
|
|
||||||
|
console.log(mirror.style.lineHeight);
|
||||||
|
|
||||||
|
// Style the textarea
|
||||||
|
this.style.overflow = "hidden";
|
||||||
|
this.style.minHeight = this.rows+"em";
|
||||||
|
|
||||||
|
// Bind the textarea's event
|
||||||
|
this.onkeyup = growTextarea;
|
||||||
|
|
||||||
|
// Fire the event for text already present
|
||||||
|
sendContentToMirror(this);
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
||||||
slice = [].slice,
|
slice = [].slice,
|
||||||
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
|
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
|
||||||
|
@ -1133,91 +1220,6 @@ 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);
|
||||||
|
|
||||||
/*!
|
|
||||||
* ----------------------------------------------------------------------------
|
|
||||||
* "THE BEER-WARE LICENSE" (Revision 42):
|
|
||||||
* <jevin9@gmail.com> wrote this file. As long as you retain this notice you
|
|
||||||
* can do whatever you want with this stuff. If we meet some day, and you think
|
|
||||||
* this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
|
|
||||||
* ----------------------------------------------------------------------------
|
|
||||||
*
|
|
||||||
* Autogrow Textarea Plugin Version v3.0
|
|
||||||
* http://www.technoreply.com/autogrow-textarea-plugin-3-0
|
|
||||||
*
|
|
||||||
* THIS PLUGIN IS DELIVERD ON A PAY WHAT YOU WHANT BASIS. IF THE PLUGIN WAS USEFUL TO YOU, PLEASE CONSIDER BUYING THE PLUGIN HERE :
|
|
||||||
* https://sites.fastspring.com/technoreply/instant/autogrowtextareaplugin
|
|
||||||
*
|
|
||||||
* Date: October 15, 2012
|
|
||||||
*
|
|
||||||
* Zammad modification: remove overflow:hidden when maximum height is reached
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
jQuery.fn.autoGrow = function(options) {
|
|
||||||
return this.each(function() {
|
|
||||||
var settings = jQuery.extend({
|
|
||||||
extraLine: true,
|
|
||||||
}, options);
|
|
||||||
|
|
||||||
var createMirror = function(textarea) {
|
|
||||||
jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
|
|
||||||
return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
var sendContentToMirror = function (textarea) {
|
|
||||||
mirror.innerHTML = String(textarea.value)
|
|
||||||
.replace(/&/g, '&')
|
|
||||||
.replace(/"/g, '"')
|
|
||||||
.replace(/'/g, ''')
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>')
|
|
||||||
.replace(/ /g, ' ')
|
|
||||||
.replace(/\n/g, '<br />') +
|
|
||||||
(settings.extraLine? '.<br/>.' : '')
|
|
||||||
;
|
|
||||||
|
|
||||||
if (jQuery(textarea).height() != jQuery(mirror).height()) {
|
|
||||||
jQuery(textarea).height(jQuery(mirror).height());
|
|
||||||
|
|
||||||
var maxHeight = parseInt(jQuery(textarea).css('max-height'), 10);
|
|
||||||
var overflow = jQuery(mirror).height() > maxHeight ? '' : 'hidden'
|
|
||||||
jQuery(textarea).css('overflow', overflow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var growTextarea = function () {
|
|
||||||
sendContentToMirror(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a mirror
|
|
||||||
var mirror = createMirror(this);
|
|
||||||
|
|
||||||
// Style the mirror
|
|
||||||
mirror.style.display = 'none';
|
|
||||||
mirror.style.wordWrap = 'break-word';
|
|
||||||
mirror.style.whiteSpace = 'normal';
|
|
||||||
mirror.style.padding = jQuery(this).css('paddingTop') + ' ' +
|
|
||||||
jQuery(this).css('paddingRight') + ' ' +
|
|
||||||
jQuery(this).css('paddingBottom') + ' ' +
|
|
||||||
jQuery(this).css('paddingLeft');
|
|
||||||
|
|
||||||
mirror.style.width = jQuery(this).css('width');
|
|
||||||
mirror.style.fontFamily = jQuery(this).css('font-family');
|
|
||||||
mirror.style.fontSize = jQuery(this).css('font-size');
|
|
||||||
mirror.style.lineHeight = jQuery(this).css('line-height');
|
|
||||||
|
|
||||||
// Style the textarea
|
|
||||||
this.style.overflow = "hidden";
|
|
||||||
this.style.minHeight = this.rows+"em";
|
|
||||||
|
|
||||||
// Bind the textarea's event
|
|
||||||
this.onkeyup = growTextarea;
|
|
||||||
|
|
||||||
// Fire the event for text already present
|
|
||||||
sendContentToMirror(this);
|
|
||||||
|
|
||||||
});
|
|
||||||
};
|
|
||||||
if (!window.zammadChatTemplates) {
|
if (!window.zammadChatTemplates) {
|
||||||
window.zammadChatTemplates = {};
|
window.zammadChatTemplates = {};
|
||||||
}
|
}
|
||||||
|
|
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
|
@ -220,6 +220,10 @@
|
||||||
|
|
||||||
.zammad-chat-message {
|
.zammad-chat-message {
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.zammad-chat-message-body {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
|
@ -312,6 +316,7 @@
|
||||||
float: left;
|
float: left;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
min-height: 1.4em !important;
|
||||||
max-height: 6em;
|
max-height: 6em;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
|
Loading…
Reference in a new issue