Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
xiongzhu
/
O2OA
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

聊天界面布局

fancy 5 lat temu
rodzic
e371e70c2c
commit
18edbca460
5 zmienionych plików z 579 dodań i 13 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 20 2
      o2web/source/x_component_IMV2/$Main/default/chat.html
  2. 337 0
      o2web/source/x_component_IMV2/$Main/default/chattest.html
  3. BIN
      o2web/source/x_component_IMV2/$Main/default/icons/icon-emoji.png
  4. 191 1
      o2web/source/x_component_IMV2/$Main/default/style.css
  5. 31 10
      o2web/source/x_component_IMV2/Main.js

+ 20 - 2
o2web/source/x_component_IMV2/$Main/default/chat.html
Wyświetl plik 

@@ -1,3 +1,21 @@
 
-<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>
 
 </div>

+ 337 - 0
o2web/source/x_component_IMV2/$Main/default/chattest.html
Wyświetl plik 

@@ -0,0 +1,337 @@
 
+<!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>

BIN
o2web/source/x_component_IMV2/$Main/default/icons/icon-emoji.png
Wyświetl plik


+ 191 - 1
o2web/source/x_component_IMV2/$Main/default/style.css
Wyświetl plik 

@@ -152,4 +152,194 @@
 
     overflow: hidden; 
     overflow: hidden; 
     background-color: rgb(255, 255, 255); 
     background-color: rgb(255, 255, 255); 
     opacity: 1;
 
     opacity: 1;
 
-}
 
+    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;
 
+  }

+ 31 - 10
o2web/source/x_component_IMV2/Main.js
Wyświetl plik 

@@ -48,8 +48,8 @@ MWF.xApplication.IMV2.Main = new Class({
 
 			if (chat.type && chat.type === "single") {
 
 			if (chat.type && chat.type === "single") {
 
 				var chatPerson = "";
 
 				var chatPerson = "";
 
 				if (chat.personList && chat.personList instanceof Array) {
 
 				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) {
 
 						if (person !== distinguishedName) {
 
 							chatPerson = person;
 
 							chatPerson = person;
 
 						}
 
 						}
 
@@ -71,23 +71,44 @@ MWF.xApplication.IMV2.Main = new Class({
 
 					data.time = time;
 
 					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("结束");
 
 		console.log("结束");
 
 	},
 
 	},
 
 	//点击
 
 	//点击
 
-	tapConv: function (e) {
 
+	tapConv: function (conv) {
 
 		console.log("clickConversationvvvvvv");
 
 		console.log("clickConversationvvvvvv");
 
-		console.log(e);
 
 		var url = this.path + this.options.style + "/chat.html";
 
 		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));
 
 		}.bind(this));
 
 	},
 
 	},
 
-
 
+	//发送消息
 
+	sendMsg: function() {
 
+		console.log("click send Msg btn................");
 
+		var text = this.chatBottomAreaTextareaNode.value;
 
+		console.log(text);
 
+	},
 
 
 
 
 
 	_getIcon: function (id) {
 
 	_getIcon: function (id) {