| Задача: в ЛК клиента выводить чат по типу чатика ВК с менеджером клиента, и чтобы никому больше в компании клиент писать не мог |
Свой компонент
nikaverro:im.messenger
файл component.php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
if (isset($_REQUEST['AJAX_CALL']) && $_REQUEST['AJAX_CALL'] == 'Y')
return;
if (defined('IM_COMPONENT_INIT'))
return;
else
define("IM_COMPONENT_INIT", true);
if (intval($USER->GetID()) <= 0)
return;
if (!CModule::IncludeModule('im'))
return;
$arGroups = $USER->GetUserGroupArray();
if($USER ->IsAdmin() || in_array(20,$arGroups)){ //клиент
$rsUser = CUser::GetList($by, $order,
array("ID" => $USER->GetID()),
array(
"SELECT" => array("ID","NAME","UF_CONTACT","PERSONAL_PHOTO"),
)
);
if($arUser = $rsUser->Fetch()){
$companyId = $arUser["UF_CONTACT"];
if(intval($companyId)>0){
$arComp = CCrmCompany::GetByID(intval($companyId),false);
$managerId = $arComp["ASSIGNED_BY_ID"];
if($managerId >0 && ($USER->GetID() != $managerId)){
$chatId = CIMMessage::GetChatId($USER->GetID(), $managerId);
$rsUser = CUser::GetByID($managerId);
$arResult["MANAGER"] = $rsUser->Fetch();
if($arResult["MANAGER"]["NAME"] != ""){
$name[] = $arResult["MANAGER"]["NAME"];
}
if($arResult["MANAGER"]["LAST_NAME"] != ""){
$name[] = $arResult["MANAGER"]["LAST_NAME"];
}
$name = implode(" ", $name);
if($name == ""){
$name = "консультант";
}
$arResult["MANAGER"]["PRINT_NAME"] = $name;
if($chatId > 0){
$arResult["USER_ID"] = $USER->GetID();
$arResult["CHAT_ID"] = $chatId;
$arResult["MANAGER_ID"] = $managerId;
$arResult["MANAGER_AVATAR"] = CIMChat::GetAvatarImage($arResult["MANAGER"]["PERSONAL_PHOTO"]);
$arResult["USER_AVATAR"] = CIMChat::GetAvatarImage($arUser["PERSONAL_PHOTO"]);
$arResult["MESSAGES"] = array();
$CIMMessage = new CIMMessage();
$arUnreadMessages = array();
$arMessages = $CIMMessage->GetUnreadMessage();
foreach ($arMessages["message"] as $key => $arMes) {
if($arMes["chatId"]==$chatId){
$arUnreadMessages[$arMes["id"]] = $arMes["id"];
}
}
$arMessages = $CIMMessage->GetLastMessage($USER->GetID(), $managerId);
$month = array("", "января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря");
$today = date("Y-m-d");
foreach ($arMessages["message"] as &$arMes) {
$printDate = $arMes["date"]->format("j") ." ". $month[$arMes["date"]->format("n")];
$arMes["date_print"] = ($today == $arMes["date"]->format("Y-m-d"))? "Сегодня" : $printDate;
$arMes["date_unix"] = $arMes["date"]->getTimestamp();
$arMes['read'] = (isset($arUnreadMessages[$arMes["id"]]))?"N":"Y";
unset($arMes["date"]);
}
$cnt = count($arMessages["usersMessage"][$arResult["USER_ID"]]);
if($cnt == 0){
CIMMessage::Add(array(
'FROM_USER_ID' => $managerId,
'TO_USER_ID' => $USER->GetID(),
'MESSAGE' => 'Приветствую, я ваш менеджер. У вас есть вопросы? Напишите мне!',
));
//LocalRedirect($APPLICATION->GetCurPage());
}
else{
$tempMes = array();
for ($i=($cnt-1); $i >=0 ; $i--){
$idM = $arMessages["usersMessage"][$arResult["USER_ID"]][$i];
$tempMes[] = $arMessages["message"][$idM];
}
$arMessages["message_new"] = $tempMes;
$arResult["MESSAGES"] = $arMessages;
}
$tempMes = array();
$CIMNotify = new CIMNotify();
$arNotify = $CIMNotify->GetNotifyList();
foreach ($arNotify as &$arMes) {
$printDate = $arMes["date"]->format("j") ." ". $month[$arMes["date"]->format("n")];
$arMes["date_print"] = ($today == $arMes["date"]->format("Y-m-d"))? "Сегодня" : $printDate;
$arMes["date_unix"] = $arMes["date"]->getTimestamp();
unset($arMes["date"]);
$tempMes[] = $arMes;
}
$cnt = count($arNotify);
$arResult["NOTIFY"] = array();
for ($i=($cnt-1); $i >=0 ; $i--){
$arResult["NOTIFY"][] = $tempMes[$i];
}
$this->IncludeComponentTemplate();
}
else{
CIMMessage::Add(array(
'FROM_USER_ID' => $managerId,
'TO_USER_ID' => $USER->GetID(),
'MESSAGE' => 'Приветствую, я ваш менеджер. У вас есть вопросы? Напишите мне!',
));
LocalRedirect($APPLICATION->GetCurPage());
}
}
}
}
}
return $arResult;
?> |
<?
if (!defined('IM_AJAX_INIT'))
{
define("IM_AJAX_INIT", true);
define("PUBLIC_AJAX_MODE", true);
define("NO_KEEP_STATISTIC", "Y");
define("NO_AGENT_STATISTIC","Y");
define("NO_AGENT_CHECK", true);
define("DisableEventsCheck", true);
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
}
if (!CModule::IncludeModule("im")){
echo \Bitrix\Im\Common::objectEncode(Array('ERROR' => GetMessage('IM_MODULE_NOT_INSTALLED')));
CMain::FinalActions();
die();
}
if(!$USER->IsAuthorized()){
$USER->LoginByCookies();
}
if (intval($USER->GetID()) <= 0){
// TODO need change AUTHORIZE ERROR callbacks
//header("HTTP/1.0 401 Not Authorized");
//header("Content-Type: application/x-javascript");
//header("BX-Authorize: ".bitrix_sessid());
echo \Bitrix\Im\Common::objectEncode(Array(
'ERROR' => 'AUTHORIZE_ERROR',
'BITRIX_SESSID' => bitrix_sessid()
));
CMain::FinalActions();
die();
}
if (!(
$_POST['IM_START_WRITING'] == 'Y' ||
$_POST['IM_SEND_MESSAGE'] == 'Y' ||
$_POST['IM_READ_MESSAGE'] == 'Y' ||
$_POST['IM_READ_NOTIFICATION'] == 'Y' ||
$_POST['IM_GET_UNREAD_MESSAGES'] == 'Y' ||
$_POST['IM_GET_MESSAGES'] == 'Y'
)){
echo \Bitrix\Im\Common::objectEncode(Array(
'ERROR' => 'SCOPE_ERROR'
));
CMain::FinalActions();
die();
}
CUtil::decodeURIComponent($_POST);
if($_POST['IM_SEND_MESSAGE'] == 'Y'){
$_POST["MESSAGE"] = str_replace("<div><br></div>", "\r\r", $_POST["MESSAGE"]);
$insertID = CIMMessage::Add(array(
"FROM_USER_ID" => intval($USER->GetID()),
"TO_USER_ID" => intval($_POST['RECIPIENT_ID']),
'MESSAGE' => $_POST['MESSAGE'],
));
echo \Bitrix\Im\Common::objectEncode(array("ID"=>$insertID));
}
elseif($_POST['IM_GET_UNREAD_MESSAGES'] == 'Y'){
$arMessagesNew = array();
$arMessages = array();
if(isset($_POST["MANAGER_ID"]) && (intval($_POST["MANAGER_ID"])>0) && isset($_POST["CHAT_ID"]) && (intval($_POST["CHAT_ID"])>0)){
$arParams = array('SPEED_CHECK' => 'N', 'ORDER' => 'ASC', 'USE_SMILES' => 'N', 'USER_LOAD' => 'N', 'LOAD_DEPARTMENT' => 'N');
$CIMMessage = new CIMMessage();
$arMessages = $CIMMessage->GetUnreadMessage($arParams);
if($arMessages['countMessage']>0){
$arTemp = array();
foreach ($arMessages["unreadMessage"][intval($_POST["MANAGER_ID"])] as $mesId) {
$arTemp[] = $mesId;
if($arMessages["message"][$mesId]["chatId"] == intval($_POST["CHAT_ID"])){
$arMessagesNew[] = $arMessages["message"][$mesId];
}
}
}
}
echo \Bitrix\Im\Common::objectEncode(array("MESSAGES"=>$arMessagesNew));
}
elseif($_POST['IM_GET_MESSAGES'] == 'Y'){
if(isset($_POST["MANAGER_ID"]) && (intval($_POST["MANAGER_ID"])>0)){
$CIMMessage = new CIMMessage();
//$arMessages = $CIMMessage->GetLastMessage($USER->GetID(), $managerId);
}
}
elseif($_POST['IM_READ_MESSAGE'] == 'Y' ){
// echo \Bitrix\Im\Common::objectEncode(Array(
// 'ERROR' => 'sdfsdfs',
// 'BITRIX_SESSID' => bitrix_sessid()
// ));
if(isset($_POST["CHAT_ID"])&& (intval($_POST["CHAT_ID"])>0)){
$lastId = (isset($_POST["LAST_ID"])&& (intval($_POST["LAST_ID"])>0))? intval($_POST["LAST_ID"]) : null;
$CIMMessage = new CIMMessage();
//if($lastId>0){
$res = $CIMMessage->SetLastId($_POST["CHAT_ID"],$USER->GetID(),$lastId);
//}
//else{
// CIMMessage::SetReadMessageAll($fromUserId)
//}
// $chat = new CIMChat;
// $chat->SetReadMessage(intval($_POST["CHAT_ID"]),$lastId);
//echo $lastId;
echo \Bitrix\Im\Common::objectEncode($res);
}
//echo 2;
}
elseif($_POST['IM_READ_NOTIFICATION'] == 'Y' ){
if(isset($_POST["ID"]) && count($_POST["ID"]>0)){
$CIMNotify = new CIMNotify();
foreach ($_POST["ID"] as $idNot) {
$CIMNotify->MarkNotifyRead($idNot);
}
}
echo true;
}
CMain::FinalActions();
die(); |
template.php
<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
CJSCore::Init(array('ajax'));
$folder = $component->getPath();
?>
<div class="messenger" id="messengerClient">
<div class="messenger-wrapper">
<div class="header">
<div class="window-options"><div class="close"></div><div class="change-size"></div></div>
<div class="name"></div>
</div>
<div class="body" id="body-mes"></div>
<div class="body" id="body-not"></div>
<div class="new-msg-cell" id="new-msg-holder">
<div class="msg-placeholder" id="msg-placeholder">Ваше сообщение...</div>
<div class="new-msg" id="msg-input" contentEditable=true></div>
<div class="new-msg-send">Отправить</div>
</div>
</div>
</div>
<div class="messenger-panel">
<a class="consultantButton" href="#" data-type="notification" id="consultantButton-not">
<div class="manager-avatar-main"><div class="manager-avatar-main-img notification">!</div></div>
</a>
<a class="consultantButton" href="#" data-type="manager" id="consultantButton-man">
<div class="manager-avatar-main"><div class="manager-avatar-main-img" style="background-image:url(<?=$arResult["MANAGER_AVATAR"]?>)"></div></div>
</a>
</div>
<script>
$(document).ready(function(){
var timerId;
var prevSymb = "";
var last_mes = "";
var notIds = [];
var userId = <?=$arResult["USER_ID"]?>;
var user_avatar = '<div class="avatar-cell"><div class="avatar" style="background-image:url(<?=$arResult["USER_AVATAR"]?>);"></div></div>';
var man_avatar = '<div class="avatar-cell"><div class="avatar" style="background-image:url(<?=$arResult["MANAGER_AVATAR"]?>);"></div></div>';
function InitMessenger(messages,notify){
var mes;
var date = "";
var b = false;
$('#body-mes').html();
for (var i = 0; i < messages.length; i++) {
mes = messages[i];
//console.log(mes);
if((date == "") || (date != mes.date_print)){
$('#body-mes').append('<div class="date"><span>'+mes.date_print+'</span></div>');
date = mes.date_print;
}
if(mes["senderId"]==userId){
$('#body-mes').append('<div class="msg my" data-id="'+mes.id+'">'+user_avatar+'<div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
}
else{
$('#body-mes').append('<div class="msg" data-id="'+mes.id+'">'+man_avatar+'<div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
if(mes.read == "N"){
b = true;
}
}
last_mes = mes.id;
}
if(b){
$('#consultantButton-man').addClass('new');
}
date = "";
b = false;
for (var i = 0; i < notify.length; i++) {
mes = notify[i];
//console.log(mes);
if((date == "") || (date != mes.date_print)){
$('#body-not').append('<div class="date"><span>'+mes.date_print+'</span></div>');
date = mes.date_print;
if(mes.read == "N"){
b = true;
notIds.push(mes.id);
}
}
$('#body-not').append('<div class="msg" data-id="'+mes.id+'"><div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
}
if(b){
$('#consultantButton-not').addClass('new');
}
HideAvatars();
}
function SetReadMes(last_mes){
$('#consultantButton-man').removeClass('new');
setTimeout(function(){
var postData = {
'sessid': BX.bitrix_sessid(),
'IM_READ_MESSAGE': 'Y',
'site_id': BX.message('SITE_ID'),
'LAST_ID': last_mes,
'CHAT_ID': <?=$arResult["CHAT_ID"]?>,
'MANAGER_ID': <?=$arResult["MANAGER_ID"]?>
};
console.log(postData);
BX.ajax({
url: '<?=$folder;?>/ajax.php',
method: 'POST',
data: postData,
dataType: 'json',
onsuccess: function(result){
console.log(result);
}
});
},3000);
}
function SetReadNotification(){
$('#consultantButton-not').removeClass('new');
console.log(notIds);
if(notIds.length>0){
setTimeout(function(){
var postData = {
'sessid': BX.bitrix_sessid(),
'IM_READ_NOTIFICATION': 'Y',
'site_id': BX.message('SITE_ID'),
'ID': notIds,
};
console.log(postData);
BX.ajax({
url: '<?=$folder;?>/ajax.php',
method: 'POST',
data: postData,
dataType: 'json',
onsuccess: function(result){
notIds = [];
console.log(result);
}
});
},3000);
}
}
function HideAvatars(){
var prevelement = null;
$('#body-mes .msg').removeClass('first');
$('#body-mes>div').each(function(ind,el){
if(prevelement == null){
if($(el).hasClass('msg')){
$(el).addClass('first');
}
}
else{
if($(el).hasClass('msg')){
if($(prevelement).hasClass('date')){
$(el).addClass('first');
}
else if($(prevelement).hasClass('msg') && $(prevelement).hasClass('my') && !$(el).hasClass('my')){
$(el).addClass('first');
}
else if($(prevelement).hasClass('msg') && !$(prevelement).hasClass('my') && $(el).hasClass('my')){
$(el).addClass('first');
}
}
}
prevelement = el;
});
}
var messages = <?=CUtil::PhpToJSObject($arResult["MESSAGES"]["message_new"])?>;
var notify = <?=CUtil::PhpToJSObject($arResult["NOTIFY"])?>;
InitMessenger(messages,notify);
function setCursorToEnd(ele){
var range = document.createRange();
var sel = window.getSelection();
range.setStart(ele, 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ele.focus();
}
$('.consultantButton').click(function(e){
e.preventDefault();
$('#messengerClient .body').hide();
if($(this).data('type') =="manager"){
$('#messengerClient').removeClass('notification');
$('#body-mes').show();
$('#messengerClient .header .name').html('<?=$arResult["MANAGER"]["PRINT_NAME"]?>');
SetReadMes(last_mes);
}
else{
$('#messengerClient').addClass('notification');
$('#body-not').show();
$('#messengerClient .header .name').html('Уведомления');
SetReadNotification();
}
$('#messengerClient').addClass('show');
var div = $($('#messengerClient #body-mes')[0]);
div.scrollTop(div.prop('scrollHeight'));
div = $($('#messengerClient #body-not')[0]);
div.scrollTop(div.prop('scrollHeight'));
$($('#messengerClient .new-msg')[0]).focus();
});
$('.messenger .close').click(function(e){
e.preventDefault();
$('#messengerClient').removeClass('show');
});
$('.messenger .change-size').click(function(e){
e.preventDefault();
$('#messengerClient').toggleClass('big-window');
});
$('#msg-input').on('focus',function() {
prevSymb = "";
var x;
var showPlaceholder = true;
if($('#msg-placeholder').hasClass('hide')){
showPlaceholder = false;
}
timerId = setInterval(function() {
if (showPlaceholder && ($('#msg-input').html() != "")) {
showPlaceholder = false;
$('#msg-placeholder').addClass('hide');
}
else if(!showPlaceholder && $('#msg-input').html() == "" ){
showPlaceholder = true;
$('#msg-placeholder').removeClass('hide');
}
if($('#messengerClient').hasClass('big-window')){
x = $('#msg-input').height() - 109;
}
else{
x = $('#msg-input').height() - 49;
}
if(x>0){
$('#msg-input').addClass('scroll');
}
else{
$('#msg-input').removeClass('scroll');
}
}, 20);
});
$('#msg-input').on ('blur',function() {
clearInterval(timerId);
});
var maxText = "";
$('#msg-input').on('keydown',function(e) {
//var text = $('#msg-input').html();
if(e.keyCode === 13 && ($('#msg-input').html()!='')) {
//if(prevSymb != 17){
ConsultantSendMessage();
// }
// else{
// $('#msg-input').append("<div><br></div>");
// setCursorToEnd($('#msg-input')[0]);
// }
}
// else if(text.length > 1000){
// $('#msg-input').html(maxText);
// }
// else{
// maxText = text;
// }
prevSymb = e.keyCode;
});
$('#new-msg-holder .new-msg-send').click(function(){
ConsultantSendMessage();
});
function ConsultantSendMessage(){
if($('#msg-input').html()!=''){
var text = $('#msg-input').html().replace('<div><br></div>','').trim();
$('#msg-input').html('');
var postData = {
'sessid': BX.bitrix_sessid(),
'IM_SEND_MESSAGE': 'Y',
'site_id': BX.message('SITE_ID'),
'MESSAGE': text,
'RECIPIENT_ID': <?=$arResult["MANAGER_ID"]?>
};
BX.ajax({
url: '<?=$folder;?>/ajax.php',
method: 'POST',
data: postData,
dataType: 'json',
onsuccess: function(result){
if(result.ID>0){
//last_mes = result.ID;
setTimeout(function(){
// $('#body-mes').append('<div class="msg my" data-id="'+result.ID+'">'+user_avatar+'<div class="text-cell"><div class="text">'+text+'</div></div></div>');
// HideAvatars();
// var div = $($('#messengerClient .body')[0]);
// div.scrollTop(div.prop('scrollHeight'));
$('#msg-input').html('');
maxText = "";
},20);
}
}
});
}
}
BX.addCustomEvent("onPullEvent", function(module_id,command,params) {
// console.log(module_id);
// console.log(command);
// console.log(params);
if((module_id == 'im') &&(command =="message") && (params.chatId==<?=$arResult["CHAT_ID"]?>)){
var mes = params.message;
//console.log(mes);
//mes = messagesNew[i];
b = false;
$('#body-mes .msg').each(function(ind,el){
if(mes.id == $(el).data('id')){
b = true;
}
});
if(!b){
prev = mes.id +1;
$('#body-mes .msg').each(function(ind,el){
if(!b && (prev < mes.id) && (mes.id < $(el).data('id'))){
if(mes["senderId"] == userId){
$(el).before('<div class="msg my" data-id="'+mes.id+'">'+user_avatar+'<div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
}
else{
$(el).before('<div class="msg" data-id="'+mes.id+'">'+man_avatar+'<div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
$('#consultantButton-man').addClass('new');
}
var div = $($('#messengerClient .body')[0]);
div.scrollTop(div.prop('scrollHeight'));
b = true;
}
prev = $(el).data('id');
});
if(!b){
if(mes["senderId"]==userId){
$('#body-mes').append('<div class="msg my" data-id="'+mes.id+'">'+user_avatar+'<div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
}
else{
$('#body-mes').append('<div class="msg" data-id="'+mes.id+'">'+man_avatar+'<div class="text-cell"><div class="text">'+mes.text+'</div></div></div>');
$('#consultantButton-man').addClass('new');
}
if($('#messengerClient').hasClass('show') && (mes["senderId"]!=userId)){
last_mes = mes.id;
SetReadMes(last_mes);
}
HideAvatars();
var div = $($('#messengerClient #body-mes')[0]);
div.scrollTop(div.prop('scrollHeight'));
}
}
last_mes = mes.id;
}
else if((module_id == 'im') &&(command =="notify")){
$('#body-not').append('<div class="msg" data-id="'+params.id+'"><div class="text-cell"><div class="text">'+params.text+'</div></div></div>');
$('#consultantButton-not').addClass('new');
div = $($('#messengerClient #body-not')[0]);
div.scrollTop(div.prop('scrollHeight'));
notIds.push(params.id);
if($('#messengerClient').hasClass('show')){
SetReadNotification();
}
}
else{
}
});
});
</script> |
.consultantButton{
/* position: fixed;
bottom: 18px;
right: 44px;
text-transform: uppercase;
padding: 5px 15px;
font-size: 18px;*/
position: relative;
}
.consultantButton:after{
content: "";
display: block;
border-radius: 50%;
top: 6px;
left: 36px;
width: 7px;
height: 7px;
position: absolute;
background-color: transparent;
}
.consultantButton.new:after{
background-color: red;
}
.messenger-panel{
position: fixed;
bottom: 34px;
right: 10px;
}
.messenger-panel .manager-avatar-main{
width: 48px;
height: 63px;
padding: 10px 0;
border: 1px solid #b8bdc2;
background: #fff;
border-radius: 3px;
text-align: center;
}
.messenger-panel .manager-avatar-main-img{
width: 40px;
height: 40px;
border-radius: 50%;
background-size: cover;
display: inline-block;
}
.messenger-panel .manager-avatar-main-img.notification{
background-color: #edebeb;
font-size: 30px;
text-align: center;
line-height: 30px;
}
.messenger{
display: none;
position: fixed;
bottom: 34px;
right: 62px;
width: 335px;
background: #f0efef;
z-index: 200;
/* webkit-box-shadow: 2px 0 15px rgba(140,149,156,.1);
box-shadow: 2px 0 15px rgba(140,149,156,.1);*/
border-radius: 9px;
/* overflow: hidden;*/
border: 1px solid #bfc3c7;
}
.messenger.show{
display: block;
}
.messenger .messenger-wrapper{
position: relative;
height: 492px;
}
.messenger .header{
background: #b8bdc2;
background: linear-gradient(35deg, #acb2b7 0%, #acb2b7 48%, #b8bdc2 44%, #b8bdc2 100%);
position: relative;
border-radius: 8px;
z-index: 100;
}
.messenger .header:after{
display: none;
width:50%;
height: 62px;
content: "";
position: absolute;
top:0;
left: 0;
background: transparent;
background: linear-gradient(39deg, #9b9da3 0%, #a0a6ae 77%,#b4b9bf 77.2%, #b4b9bf 100%)
}
.messenger .header .window-options{
float: right;
margin-right: 19px;
margin-top: 19px;
}
.messenger .header .window-options .close,
.messenger .header .window-options .change-size{
cursor: pointer;
width: 17px;
height: 17px;
background: url(images/icons.png?8);
float: right;
margin-left: 5px;
opacity: 1;
}
.messenger .header .window-options .close:hover,
.messenger .header .window-options .change-size:hover{
opacity: 0.7;
}
.messenger .header .window-options .close{
background-position: -364px -7px;
}
.messenger .header .window-options .change-size{
background-position: -363px -28px;
}
.messenger .header .name{
padding: 19px 20px;
font-size: 16px;
}
.messenger .body{
height: 368px;
overflow-y: scroll;
padding: 10px;
position: relative;
margin-top: -10px;
}
.messenger.notification .body{
height: 435px;
}
.messenger .body::-webkit-scrollbar-track {
background: #cccccc;
}
.messenger .body::-webkit-scrollbar-thumb {
background: -webkit-gradient(linear,left top,left bottom,from(#8b6308),to(#c19625));
background: linear-gradient(0deg, #8b6308 0%, #c19625 95%, #c19625 100%);
-webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,.25), inset -1px -1px 3px rgba(0,0,0,.25);
box-shadow: inset 1px 1px 1px rgba(255,255,255,.25), inset -1px -1px 3px rgba(0,0,0,.25);
border-radius: 7px;
}
.messenger .body::-webkit-scrollbar {
width: 7px;
height: 30px;
}
.messenger .date{
text-align: center;
margin: 15px 0;
}
.messenger .date>span{
padding: 2px 5px;
border-radius: 14px;
background: #e0dede;
font-style: italic;
font-size: 13px;
}
.messenger .msg{
display: table;
width: 100%;
margin: 8px 0;
padding-right: 17px;
font-size: 16px;
line-height: 22px;
}
.messenger:not(.big-window) .msg.my{
padding-right: 0;
padding-left: 84px;
}
.messenger .msg .avatar-cell{
display: table-cell;
vertical-align: bottom;
width: 66px;
padding-left: 3px;
}
.messenger:not(.big-window) .msg.my .avatar-cell{
display: none;
}
.messenger .msg .avatar{
border-radius: 50%;
height: 55px;
width: 55px;
margin-right: 4px;
text-align: center;
background: #e0dede;
line-height: 35px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.messenger .msg .text-cell{
display: table-cell;
vertical-align: bottom;
}
.messenger .msg .text{
border-radius: 8px;
background: #f7f7f7;
float: left;
padding: 8px 13px 8px;
/*max-width: 220px;*/
word-break: break-word;
/*border: 1px solid #e0dede;*/
}
.messenger .msg.my .text{
background: #ece0d1;
}
.messenger:not(.big-window) .msg.my .text{
float: right;
}
.messenger.notification .new-msg-cell{
display: none;
}
.messenger .new-msg-cell{
border-top: 1px solid #e0dede;
padding: 1px;
position: absolute;
width: calc(100% - 1px);
bottom: 0;
left: 0;
z-index: 100;
background: #f0efef;
}
.messenger .msg-placeholder{
position: absolute;
color: #4d4d4d;
z-index: 1;
top: 8px;
left: 10px;
font-size: 18px;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: text;
pointer-events: none;
}
.messenger .msg-placeholder.hide{
display: none;
}
.messenger .new-msg{
padding: 5px;
min-height: 59px;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
}
.messenger .new-msg.scroll{
overflow-y: scroll;
overflow-x: hidden;
max-height: 60px;
padding-right: 0;
}
.messenger .new-msg:focus{
border: none;
outline-color: transparent;
}
.messenger .new-msg.scroll::-webkit-scrollbar-track {
background: #cccccc;
}
.messenger .new-msg.scroll::-webkit-scrollbar-thumb {
background: -webkit-gradient(linear,left top,left bottom,from(#8b6308),to(#c19625));
background: linear-gradient(0deg, #8b6308 0%, #c19625 95%, #c19625 100%);
-webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,.25), inset -1px -1px 3px rgba(0,0,0,.25);
box-shadow: inset 1px 1px 1px rgba(255,255,255,.25), inset -1px -1px 3px rgba(0,0,0,.25);
border-radius: 7px;
}
.messenger .new-msg.scroll::-webkit-scrollbar {
width: 7px;
height: 30px;
}
.new-msg-send{
display: block;
position: absolute;
bottom: -29px;
text-align: center;
left:0;
width: 100%;
background: #acb2b7;
/* background: linear-gradient(90deg, #8b6308 0%, #b8bdc2 95%, #c19625 100%); */
padding: 3px 5px;
border-radius: 4px;
}
@media(min-width: 601px){
.messenger.big-window{
width: calc(100% - 120px);
right: 60px;
top: 60px;
height: calc(100% - 95px);
/* bottom: 60px;*/
border-radius: 0;
}
.messenger.big-window .messenger-wrapper{
height: 100%;
}
.messenger.big-window .header{
border-radius: 0;
background: #b4b9bf;
background: linear-gradient(151deg, #b4b9bf 0%, #b4b9bf 74%, #d5d7da 74.2%, #d5d7da 100%);
}
.messenger.big-window .header:after{
/*display: inherit;*/
}
.messenger.big-window .header .window-options .change-size{
height: 2px;
margin-top: 18px;
background-position: -363px -33px;
}
.messenger.big-window .body{
height: calc(100% - 180px);
}
.messenger.big-window.notification .body{
height: calc(100% - 52px);
}
.messenger.big-window .date>span{
font-size: 16px;
padding: 7px 11px;
}
.messenger.big-window .msg:not(.first) .avatar{
opacity: 0;
height:0;
}
.messenger.big-window .new-msg{
min-height: 119px;
}
.messenger.big-window .new-msg.scroll{
overflow-y: scroll;
max-height: 120px;
}
.new-msg-send{
display: none;
}
} |
