Skip to content

o2oa
o2oa

浙江兰德纵横网络技术股份有限公司 / o2oa

通知 339
Star 10
Fork 6
o2oa
o2oa

体验新版 GitCode，发现更多精彩内容 >>

提交 18edbca4 编写于 作者: F fancy
浏览文件
操作

聊天界面布局

上级 e371e70c
隐藏空白更改
内联 并排
Showing with 579 addition and 13 deletion
o2web/source/x_component_IMV2/$Main/default/chat.html
浏览文件 @ 18edbca4
<div>
this is Chat !!!
<!-- title -->
<div class="chat-title" data-o2-element="chatTitleNode">
<span>{{$.convName}}</span>
</div>
<!-- 聊天内容 -->
<div class="chat-content" data-o2-element="chatContentNode">
</div>
<!-- 聊天操作 -->
<div class="chat-bottom-area" data-o2-element="chatBottomAreaNode">
<div class="chat-bottom-area-tool" data-o2-element="chatBottomAreaToolNode">
<img src="./x_component_IMV2/$Main/default/icons/icon-emoji.png" data-o2-element="chatBottomAreaToolEmojiNode" />
</div>
<div class="chat-bottom-area-textarea">
<textarea data-o2-element="chatBottomAreaTextareaNode" placeholder="输入消息内容"></textarea>
</div>
<div class="chat-bottom-area-send-space">
<div class="chat-bottom-area-send" data-o2-element="chatBottomAreaSendAreaNode">
<span class="chat-bottom-area-send-btn" data-o2-element="chatBottomAreaSendBtnNode" data-o2-events="click:sendMsg">发送</span>
</div>
</div>
</div>
\ No newline at end of file
o2web/source/x_component_IMV2/$Main/default/chattest.html 0 → 100644
浏览文件 @ 18edbca4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聊天</title>
<style>
body {
padding: 0;
margin: 0;
font-family: -apple-system;
font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
}
.chat-title {
height: 50px;
width: 100%;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: #ffffff;
border-bottom: 1px solid #F1F1F1;
}
.chat-title span {
line-height: 50px;
}
.chat-content {
background-color: #ebebeb;
overflow: auto;
position: absolute;
bottom: 156px;
top: 85px;
left: 0px;
width: 100%;
}
.chat-bottom-area {
height: 155px;
overflow: hidden;
border-top: 1px solid #F1F1F1;
display: block;
position: absolute;
bottom: 0px;
background: #ffffff;
width: 100%;
z-index: 100;
}
.chat-bottom-area-tool {
position: relative;
padding: 0 8px;
height: 38px;
line-height: 38px;
font-size: 0;
}
.chat-bottom-area-tool img {
margin: 7px 10px;
}
.chat-bottom-area-textarea {
margin-left: 10px;
}
.chat-bottom-area-textarea textarea {
display: block;
width: 100%;
padding: 5px 0 0;
height: 68px;
line-height: 20px;
border: none;
overflow: auto;
resize: none;
background: 0 0;
}
.chat-bottom-area-send-space {
position: relative;
height: 46px;
}
.chat-bottom-area-send {
position: absolute;
right: 15px;
top: 3px;
height: 32px;
line-height: 32px;
cursor: pointer;
}
.chat-bottom-area-send-btn {
border-radius: 3px 0 0 3px;
}
.chat-bottom-area-send span {
display: inline-block;
vertical-align: top;
font-size: 14px;
line-height: 32px;
margin-left: 5px;
padding: 0 20px;
background-color: #5FB878;
color: #fff;
border-radius: 3px;
}
.chat-sender {
clear: both;
font-size: 80%;
}
.chat-sender div:nth-of-type(1) {
float: left;
}
.chat-sender div:nth-of-type(2) {
margin: 0 50px 2px 50px;
padding: 0px;
color: #848484;
font-size: 70%;
text-align: left;
}
.chat-sender div:nth-of-type(3) {
background-color: white;
/*float: left;*/
margin: 0 50px 10px 50px;
padding: 10px 10px 10px 10px;
border-radius: 7px;
text-indent: -12px;
}
.chat-receiver {
clear: both;
font-size: 80%;
}
.chat-receiver div:nth-of-type(1) {
float: right;
}
.chat-receiver div:nth-of-type(2) {
margin: 0px 50px 2px 50px;
padding: 0px;
color: #848484;
font-size: 70%;
text-align: right;
}
.chat-receiver div:nth-of-type(3) {
/*float:right;*/
background-color: #b2e281;
margin: 0px 50px 10px 50px;
padding: 10px 10px 10px 10px;
border-radius: 7px;
}
.chat-receiver div:first-child img,
.chat-sender div:first-child img {
width: 40px;
height: 40px;
/*border-radius: 10%;*/
}
.chat-left_triangle {
height: 0px;
width: 0px;
border-width: 6px;
border-style: solid;
border-color: transparent white transparent transparent;
position: relative;
left: -22px;
top: 3px;
}
.chat-right_triangle {
height: 0px;
width: 0px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent #b2e281;
position: relative;
right: -22px;
top: 3px;
}
.chat-notice {
clear: both;
font-size: 70%;
color: white;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
.chat-notice span {
background-color: #cecece;
line-height: 25px;
border-radius: 5px;
padding: 5px 10px;
}
</style>
</head>
<body>
<!-- title -->
<div class="chat-title">
<span>姓名或群名</span>
</div>
<div class="chat-content">
<!-- Left -->
<div class="chat-sender">
<div><img src="https://git.o2oa.net/uploads/-/system/project/avatar/20/logo_o2_1000_round.png?width=64"></div>
<div>阿奔 Ben</div>
<div>
<div class="chat-left_triangle"></div>
<span> 苹果增加三款配件的颜色选项</span>
</div>
</div>
<!-- Right -->
<div class="chat-receiver">
<div><img src="img/max.png"></div>
<div>好人·马克思</div>
<div>
<div class="chat-right_triangle"></div>
<span> 但是如果你正在再发新的APP跨平台项目，我建议你考虑一下Ionic2/Ionic3。 ionic2/Ionic3的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。</span>
</div>
</div>
<!-- Right -->
<div class="chat-sender">
<div><img src="img/adam.jpg"></div>
<div>阿达姆 Adam</div>
<div>
<div class="chat-left_triangle"></div>
<span> 一款接近原生的Html5移动App开发框架</span>
</div>
</div>
<!-- Notice/Center -->
<div class="chat-notice">
<span>2017年12月10日 23:13</span>
</div>
<!-- Left -->
<div class="chat-sender">
<div><img src="img/perry.png" /></div>
<div>佩里 Perry</div>
<div>
<div class="chat-left_triangle"></div>
<span> Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。</span>
</div>
</div>
<!-- Left -->
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
<div>
<div class="chat-left_triangle"></div>
<span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
</div>
</div>
<!-- Right -->
<div class="chat-receiver">
<div><img src="img/max.png"></div>
<div>好人·马克思</div>
<div>
<div class="chat-right_triangle"></div>
<span> 最后但并非最不重要的是</span>
</div>
</div>
<!-- Notice/Center -->
<div class="chat-notice">
<span>你被群主移除群聊</span>
</div>
<!-- Left -->
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
<div>
<div class="chat-left_triangle"></div>
<span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
</div>
</div>
<!-- Right -->
<div class="chat-receiver">
<div><img src="img/max.png"></div>
<div>好人·马克思</div>
<div>
<div class="chat-right_triangle"></div>
<span> 最后但并非最不重要的是</span>
</div>
</div>
<!-- Notice/Center -->
<div class="chat-notice">
<span>你被群主移除群聊</span>
</div>
<!-- Left -->
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
<div>
<div class="chat-left_triangle"></div>
<span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
</div>
</div>
<!-- Right -->
<div class="chat-receiver">
<div><img src="img/max.png"></div>
<div>好人·马克思</div>
<div>
<div class="chat-right_triangle"></div>
<span> 最后但并非最不重要的是</span>
</div>
</div>
<!-- Notice/Center -->
<div class="chat-notice">
<span>你被群主移除群聊</span>
</div>
</div>
<div class="chat-bottom-area">
<div class="chat-bottom-area-tool">
<img src="./icons/icon-emoji.png" />
</div>
<div class="chat-bottom-area-textarea"><textarea></textarea></div>
<div class="chat-bottom-area-send-space">
<div class="chat-bottom-area-send">
<span class="chat-bottom-area-send-btn">发送</span>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
o2web/source/x_component_IMV2/$Main/default/style.css
浏览文件 @ 18edbca4
......@@ -152,4 +152,194 @@
overflow: hidden;
background-color: rgb(255, 255, 255);
opacity: 1;
}
\ No newline at end of file
display: flex;
display: -webkit-box;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
}
/* 聊天界面 */
.chat-title {
height: 50px;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: #ffffff;
border-bottom: 1px solid #F1F1F1;
}
.chat-title span {
line-height: 50px;
}
.chat-content {
background-color: #ebebeb;
overflow: auto;
flex:1;
}
.chat-bottom-area {
height: 155px;
overflow: hidden;
border-top: 1px solid #F1F1F1;
background: #ffffff;
z-index: 100;
}
.chat-bottom-area-tool {
position: relative;
padding: 0 8px;
height: 38px;
line-height: 38px;
font-size: 0;
}
.chat-bottom-area-tool img {
margin: 7px 10px;
}
.chat-bottom-area-textarea {
margin-left: 10px;
}
.chat-bottom-area-textarea textarea {
display: block;
width: 100%;
padding: 5px 0 0;
height: 68px;
line-height: 20px;
border: none;
overflow: auto;
resize: none;
background: 0 0;
}
.chat-bottom-area-send-space {
position: relative;
height: 46px;
}
.chat-bottom-area-send {
position: absolute;
right: 15px;
top: 3px;
height: 32px;
line-height: 32px;
cursor: pointer;
}
.chat-bottom-area-send-btn {
border-radius: 3px 0 0 3px;
}
.chat-bottom-area-send span {
display: inline-block;
vertical-align: top;
font-size: 14px;
line-height: 32px;
margin-left: 5px;
padding: 0 20px;
background-color: #5FB878;
color: #fff;
border-radius: 3px;
}
.chat-sender {
clear: both;
font-size: 80%;
}
.chat-sender div:nth-of-type(1) {
float: left;
}
.chat-sender div:nth-of-type(2) {
margin: 0 50px 2px 50px;
padding: 0px;
color: #848484;
font-size: 70%;
text-align: left;
}
.chat-sender div:nth-of-type(3) {
background-color: white;
/*float: left;*/
margin: 0 50px 10px 50px;
padding: 10px 10px 10px 10px;
border-radius: 7px;
text-indent: -12px;
}
.chat-receiver {
clear: both;
font-size: 80%;
}
.chat-receiver div:nth-of-type(1) {
float: right;
}
.chat-receiver div:nth-of-type(2) {
margin: 0px 50px 2px 50px;
padding: 0px;
color: #848484;
font-size: 70%;
text-align: right;
}
.chat-receiver div:nth-of-type(3) {
/*float:right;*/
background-color: #b2e281;
margin: 0px 50px 10px 50px;
padding: 10px 10px 10px 10px;
border-radius: 7px;
}
.chat-receiver div:first-child img,
.chat-sender div:first-child img {
width: 40px;
height: 40px;
/*border-radius: 10%;*/
}
.chat-left_triangle {
height: 0px;
width: 0px;
border-width: 6px;
border-style: solid;
border-color: transparent white transparent transparent;
position: relative;
left: -22px;
top: 3px;
}
.chat-right_triangle {
height: 0px;
width: 0px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent #b2e281;
position: relative;
right: -22px;
top: 3px;
}
.chat-notice {
clear: both;
font-size: 70%;
color: white;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
.chat-notice span {
background-color: #cecece;
line-height: 25px;
border-radius: 5px;
padding: 5px 10px;
}
\ No newline at end of file
o2web/source/x_component_IMV2/Main.js
浏览文件 @ 18edbca4
......@@ -48,8 +48,8 @@ MWF.xApplication.IMV2.Main = new Class({
if (chat.type && chat.type === "single") {
var chatPerson = "";
if (chat.personList && chat.personList instanceof Array) {
for (var i = 0; i < chat.personList.length; i++) {
var person = chat.personList[i];
for (var j = 0; j < chat.personList.length; j++) {
var person = chat.personList[j];
if (person !== distinguishedName) {
chatPerson = person;
}
......@@ -71,23 +71,44 @@ MWF.xApplication.IMV2.Main = new Class({
data.time = time;
}
}
this.chatItemListNode.loadHtml(url, { "bind": data, "module": this }, function (html) {
//bind event
var chatItemNode = new Element("div", {"class": "item"}).inject(this.chatItemListNode);
var baseClass = "base";
if (i == 0) {
baseClass = "base check";
}
var chatItemBaseNode = new Element("div", {"class": baseClass}).inject(chatItemNode);
var avatarNode = new Element("div", {"class": "avatar"}).inject(chatItemBaseNode);
var avatarImg = new Element("img", {"src": data.avatarUrl, "class": "img"}).inject(avatarNode);
var bodyNode = new Element("div", {"class": "body"}).inject(chatItemBaseNode);
var bodyUpNode = new Element("div", {"class": "body_up"}).inject(bodyNode);
var bodyTitleNode = new Element("div", {"class": "body_title", "text": data.title}).inject(bodyUpNode);
var bodyTimeNode = new Element("div", {"class": "body_time", "text": data.time}).inject(bodyUpNode);
var bodyDownNode = new Element("div", {"class": "body_down", "text": data.lastMessage}).inject(bodyNode);
var _self = this;
chatItemNode.addEvents({
"click": function(){
_self.tapConv(chat);
}
});
console.log(html);
}.bind(this));
}
console.log("结束");
},
//点击
tapConv: function (e) {
tapConv: function (conv) {
console.log("clickConversationvvvvvv");
console.log(e);
var url = this.path + this.options.style + "/chat.html";
this.chatNode.loadHtml(url, { "bind": {}, "module": this }, function () {
var data = {"convName": conv.title};
this.chatNode.loadHtml(url, { "bind": data, "module": this }, function () {
}.bind(this));
},
//发送消息
sendMsg: function() {
console.log("click send Msg btn................");
var text = this.chatBottomAreaTextareaNode.value;
console.log(text);
},
_getIcon: function (id) {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或