From 338c48f3d4662e5816ded7bb79cc9ef518d24497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B0=E5=B9=BF=E9=93=B6?= <273650669@qq.com>
Date: Thu, 2 Nov 2017 14:35:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AE=80=E5=8D=95emoji?=
=?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/css/client.css | 25 ++++-
public/css/server.css | 199 +++++++++++++++++++++++++++++++++++++
public/js/client/client.js | 12 +++
public/js/server/index.js | 13 ++-
views/client/index.ejs | 21 +++-
views/server/index.ejs | 197 ++++--------------------------------
6 files changed, 284 insertions(+), 183 deletions(-)
create mode 100644 public/css/server.css
diff --git a/public/css/client.css b/public/css/client.css
index 16c6afa..3df7cf8 100644
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -232,4 +232,27 @@ a {
.msg-agent-img img{
width: 10rem;
-}
\ No newline at end of file
+}
+
+.emoji-list{
+ display: none;
+ position: fixed;
+ border-top: solid 1px #e9e9e9;
+ background: #fff;
+ bottom: 50px;
+ width: 100%;
+}
+
+.emoji-list ul{
+ overflow: auto;
+ padding-left: 0.5rem;
+}
+
+.emoji-list li{
+ list-style-type:none;
+ float: left;
+ width: 30px;
+ cursor: pointer;
+ height: 30px;
+}
+
diff --git a/public/css/server.css b/public/css/server.css
new file mode 100644
index 0000000..4c70bb8
--- /dev/null
+++ b/public/css/server.css
@@ -0,0 +1,199 @@
+.friend {
+ position: relative;
+ float: left;
+ width: 300px;
+ height: 100%;
+ background: #fbfcfe;
+ border-right: 1px solid #e9e9e9;
+}
+
+.chat {
+ position: relative;
+ float: left;
+ width: calc(100% - 301px);
+ height: 100%;
+}
+
+.friend-head {
+ display: block;
+ cursor: pointer;
+ height: 51px;
+ padding: 0 12px;
+ font-size: 15px;
+ line-height: 50px;
+ color: #767d85;
+ background-color: #fff;
+ border-top: 1px solid #e9e9e9;
+ border-bottom: 1px solid #e9e9e9;
+}
+
+.friend-head-right {
+ float: right;
+}
+
+.message-agent,.message-client{
+ overflow: auto;
+ margin-bottom: 10px;
+ margin-top: 10px;
+}
+
+.message-container{
+ padding: 0 20px 0 20px;
+ overflow: auto;
+}
+
+.message-time-sender{
+ line-height: 1;
+ margin-bottom: 5px;
+ font-size: 12px;
+ color: #adb2bb;
+}
+
+.message-agent-time-sender{
+ text-align: right;
+}
+
+.message-content{
+ border-radius: 3px;
+ padding: 8px 12px;
+ font-size: 13px;
+ line-height: 22px;
+ word-wrap: break-word;
+ word-break: break-all;
+ border: 1px dashed transparent;
+}
+
+.message-agent-content{
+ position: relative;
+ float: right;
+ background-color: #f0f1f3;
+ color: #161e26;
+}
+.message-client-content{
+ position: relative;
+ float: left ;
+ background-color: #e7f4ff;
+ color: #161e26;
+}
+
+.message-sender{
+ position: absolute;
+ bottom: 0;
+ height: 180px;
+ border-top: 1px solid #e9e9e9;
+ width: 100%;
+
+}
+
+.sender-editor{
+ height: calc(100% - 40px);
+}
+
+.message-sender textarea{
+ resize: none;
+ border: none;
+ border-radius: 6px;
+ font-size: 15px;
+ color: #161e26;
+ line-height: 22px;
+ background-color: #fff;
+ height: calc(100% - 40px);
+ padding: 20px;
+ width: calc(100% - 40px);
+}
+
+.btnMsgSend{
+ z-index: 1;
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+}
+
+.user-info{
+ height: 60px;
+ background: #ffffff;
+ line-height: 60px;
+ font-size: 16px;
+ color: #767d85;
+ border-bottom: 1px solid #e9e9e9;
+}
+
+.chat-user{
+ overflow: auto;
+}
+
+.user-info img{
+ width: 50px;
+}
+
+.user-info .user-avatar{
+ text-align: center;
+}
+
+.user-info .user-name{
+ font-size: 12px;
+}
+
+.empty-status{
+ width: 150px;
+ margin: 0 auto;
+ text-align: center;
+ margin-top: 200px;
+}
+
+.empty-status img{
+ width: 100px;
+}
+
+.msg-tips{
+ margin-top: 25px;
+ display: none;
+}
+
+.msg-client-img{
+ text-align: left;
+}
+
+.msg-client-img img{
+ width: 10rem;
+}
+
+.msg-agent-img{
+ text-align: right;
+}
+
+.msg-agent-img img{
+ width: 10rem;
+}
+
+.layui-icon{
+ cursor: pointer;
+}
+
+.message-emoji-picture{
+ height: 40px;
+ line-height: 40px;
+ padding-left: 20px;
+}
+
+.emoji-list{
+ display: none;
+ position: fixed;
+ left: 300px;
+ bottom:230px;
+ border: solid 1px #e9e9e9;
+ border-radius: 3px;
+ box-shadow: 0 15px 30px 0 rgba(52,63,75,.2);
+}
+
+.emoji-list ul{
+ overflow: auto;
+}
+
+.emoji-list li{
+ float: left;
+ width: 30px;
+ cursor: pointer;
+ height: 30px;
+}
+
diff --git a/public/js/client/client.js b/public/js/client/client.js
index 1835422..9e4ccbf 100644
--- a/public/js/client/client.js
+++ b/public/js/client/client.js
@@ -178,6 +178,16 @@ $(function(){
});
+ $(".emoji-list li").click(function () {
+ var content = $("#textarea").val();
+ $("#textarea").val(content + " " +$(this).html()+ " " );
+ $(".emoji-list").toggle();
+ });
+
+ $(".emoji-send").click(function () {
+ $(".emoji-list").toggle();
+ });
+
//连接服务器
socket.on('connect', function () {
//uuid = 'chat'+ guid();
@@ -203,4 +213,6 @@ $(function(){
insert_agent_html(msg);
scrollToBottom();
});
+
+
});
\ No newline at end of file
diff --git a/public/js/server/index.js b/public/js/server/index.js
index a2b8159..27656e6 100644
--- a/public/js/server/index.js
+++ b/public/js/server/index.js
@@ -35,7 +35,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
// 下面写你的发送消息的代码
msg_send();
}
- }
+ };
}
//聊天窗口自动滚到底
@@ -153,6 +153,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
//发送消息
function msg_send() {
var msg = $("#msg-send-textarea").val();
+
if(msg){
var msg_sender = {
"type":'private',
@@ -285,6 +286,16 @@ layui.use(['layer', 'form', 'jquery'], function () {
});
+ $(".emoji-list li").click(function () {
+ var content = $("#msg-send-textarea").val();
+ $("#msg-send-textarea").val(content + " " +$(this).html()+ " " );
+ $(".emoji-list").toggle();
+ });
+
+ $("#emojiBtn").click(function () {
+ $(".emoji-list").toggle();
+ });
+
//连接服务器
socket.on('connect', function () {
console.log('连接成功...');
diff --git a/views/client/index.ejs b/views/client/index.ejs
index 5c8bf04..598581a 100644
--- a/views/client/index.ejs
+++ b/views/client/index.ejs
@@ -27,23 +27,39 @@
+
+
+
+ - 😁
+ - 😂
+ - 😃
+ - 😄
+ - 😅
+ - 😆
+ - 😇
+ - 😈
+ - 😉
+ - 😊
+ - 😋
+ - 😌
+
+