聊天界面

talkview/src/js/controller/messageController.js

@@ -75,6 +75,15 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             $scope.historymessages.push(msg);
         };
 
+        $scope.getUserhead = function(item) {
+            var arr = $scope.appContent.directory.user.split("\\");
+            var userself = arr[arr.length - 2];
+            if (item.sender.indexOf(userself) !== -1)
+                return 'user-head user-head-rt';
+            else
+                return 'user-head user-head-lf';
+        };
+
         $scope.getHisTime = function(item) {
             var myDate = new Date();
             var nowDate = $filter("date")(myDate.getTime(), "yyyy-MM-dd");

talkview/src/js/directive/historymessages.js

@@ -242,20 +242,17 @@
                     '</span>';
             }
 
+
             if (scope.msg.contentType == 3 && content.status !== 2) {
                 var html_g = html;
             } else {
                 if (getUserID()) {
-                    var html_g = '<div onSelectStart="return false"><p><strong>' +
-                        scope.msg.senderDisplayName +
-                        '</strong><small class="text-muted"></small></p></div>' +
+                    var html_g =
                         '<div class="wellself m-l-xs m-t-xs fit-content" >' +
                         '<div class="text-point"></div>' + html +
                         '</div>';
                 } else {
-                    var html_g = '<div onSelectStart="return false"><p><strong>' +
-                        scope.msg.senderDisplayName +
-                        '</strong><small class="text-muted"></small></p></div>' +
+                    var html_g =
                         '<div class="well m-l-xs m-t-xs fit-content" >' +
                         '<div class="text-point"></div>' + html +
                         '</div>';

talkview/src/less/app.main.less

@@ -41,11 +41,11 @@
     font-family: "微软雅黑","宋体";
     font-size: 13px;
     width: 0px;
-    max-width: 700px;
+    max-width: 1000px;
     vertical-align: top;
     zoom: 1;
     p{
-        margin-bottom: 7px;
+        cursor:pointer;
     }
     p>strong {
         float: left;
@@ -59,12 +59,32 @@
     }
 }
 
+.user-head {
+    position: relative;
+    cursor:pointer;
+    width: 40px;
+    height: 40px;
+    margin: 1px 0px 10px 1px;
+    border-radius: 100%;
+    border:1px solid #ddd;
+    background: #96CEDF;
+    img {
+        border-radius: 100%;
+        width: 100%;
+        height: 100%;
+    }
+}
+.user-head-lf {
+    float: left;
+}
+.user-head-rt {
+    float: right;
+}
+
 .feed-element {
     padding-bottom: 4px;
     overflow: hidden;
     .well {
-        position: relative;
-        float: left;
         word-wrap:break-word;
         word-break:break-all;
         background-color: #EEEEEE;
@@ -74,60 +94,60 @@
         box-shadow: none;
         outline: none;
         margin-left: 10px;
-        margin-top: 0px;
+        margin-top: 10px;
         margin-bottom: 0px;
         margin-right: 20px;
-        padding: 7px 15px 7px 12px;
+        padding: 7px 12px 7px 12px;
         font-size: 12px;
         line-height: 16px;
         .text-point {
-            z-index: -99;
+            z-index: 99;
             position:absolute;
-            top:-17px;
-            left:7px;
+            top:50px;
+            left:50px;
             width:0;
             height:0;
             font-size:0;
-            border-top:solid 10px;
-            border-bottom:solid 10px;
-            border-right: solid 7px;
-            border-left: solid 7px;
-            border-color:transparent transparent #EEEEEE transparent;
+            border-top:solid 6px;
+            border-bottom:solid 6px;
+            border-right: solid 10px;
+            border-left: solid 10px;
+            border-color:transparent #000 transparent transparent;
         }
     }
 }
 .wellself {
-        position: relative;
-        float: left;
-        word-wrap:break-word;
-        word-break:break-all;
-        background-color: #009EE0;
-        color: #000000;
-        border-radius: 6px;
-        border: none;
-        box-shadow: none;
-        outline: none;
-        margin-left: 10px;
-        margin-top: 0px;
-        margin-bottom: 0px;
-        margin-right: 20px;
-        padding: 7px 15px 7px 12px;
-        font-size: 12px;
-        line-height: 16px;
-        .text-point {
-            z-index: -99;
-            position:absolute;
-            top:-17px;
-            left:7px;
-            width:0;
-            height:0;
-            font-size:0;
-            border-top:solid 10px;
-            border-bottom:solid 10px;
-            border-right: solid 7px;
-            border-left: solid 7px;
-            border-color:transparent transparent #009EE0 transparent;
-        }
+    position: absolute;
+    right:5px; 
+    word-wrap:break-word;
+    word-break:break-all;
+    background-color: #009EE0;
+    color: #000000;
+    border-radius: 6px;
+    border: none;
+    box-shadow: none;
+    outline: none;
+    margin-left: 20px;
+    margin-top: 10px;
+    margin-bottom: 0px;
+    margin-right: 50px;
+    padding: 7px 12px 7px 12px;
+    font-size: 12px;
+    line-height: 16px;
+    .text-point {
+        z-index: -99;
+        position:absolute;
+        top:7px;
+        left:97px;
+        width:0;
+        height:0;
+        font-size:0;
+        border-top:solid 6px;
+        border-bottom:solid 6px;
+        border-right: solid 10px;
+        border-left: solid 10px;
+        border-color:transparent transparent transparent #009EE0;
+    }
 }
 .fit-content {
     width: fit-content;
@@ -454,6 +474,7 @@ body {
             height: 100px;
         }
         .input-file {
+            float: left;
             margin-bottom: 5px;
             width: 100px;;
             font-size: 12px;

talkview/src/templates/details-right.html

@@ -40,7 +40,7 @@
         <button type="button" class="btn btn-danger inConnect hide" ng-show="false">断开</button>
     </div>
 
-    <div id="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true">
+    <div id="inputBox" ng-show="true" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true">
 
     </div>
 </div>

talkview/src/templates/messages.html

@@ -3,6 +3,9 @@
     <div class="feed-activity-list p-l-xs p-t-xs p-r-xs loadmore" ng-cloak>
         <div class="feed-element" ng-repeat="item in historymessages | orderBy:item.index:'desc'">
             <div class="curTime"><small class="text-muted">{{getHisTime(item)}}</small></div>
+            <div ng-class="getUserhead(item)">
+                <a><img src="../img/头像.png"></a>
+            </div>
             <div class="media-body" ng-history-msg="item" ng-app-content="appContent" ng-count="count" ng-height="height">
                 <!--<p>
                     <strong>{{item.senderDisplayName === undefined || item.senderDisplayName == ''? item.sender : item.senderDisplayName}}</strong><small>-2017-2-6 15:57:17 {{item.ts}}</small>
@@ -217,11 +220,11 @@
             </div>-->
 
         <!-- 语音 -->
-        <div class="feed-element">
+        <!--<div class="feed-element">
+            <div class="user-head user-head-lf">
+                <a><img src="../img/头像.png"></a>
+            </div>
             <div class="media-body">
-                <p>
-                    <strong>陆趣趣</strong><small class="text-muted">-Today 2:10 pm - 12.06.2014</small>
-                </p>
                 <div class="well m-l-xs m-t-xs fit-content">
                     <div class="text-point"></div>
                     <span class="text-message">
@@ -234,7 +237,7 @@
                                 <div class="app-voice-unread"></div>
                             </div>
                             <audio>
-                                <!--<source src="local://E:/LxtalkUIView/dist/img/222.mp3" >-->
+                                
                                 <source src="local://E:/LxtalkUIView/dist/img/FreeFlight.ogg" >
                                 您的浏览器不支持 audio 元素。
                             </audio>
@@ -244,10 +247,10 @@
             </div>
         </div>
         <div class="feed-element">
+            <div class="user-head user-head-rt">
+                <a><img src="../img/头像.png"></a>
+            </div>
             <div class="media-body">
-                <p>
-                    <strong>陆趣趣</strong><small class="text-muted">-Today 2:10 pm - 12.06.2014</small>
-                </p>
                 <div class="wellself m-l-xs m-t-xs fit-content">
                     <div class="text-point"></div>
                     <span class="text-message">
@@ -260,7 +263,7 @@
                                 <div class="app-voice-unread"></div>
                             </div>
                             <audio>
-                                <!--<source src="local://E:/LxtalkUIView/dist/img/111.mp3" >-->
+                               
                                 <source src="local://E:/LxtalkUIView/dist/img/Radiation.ogg" >
                                 您的浏览器不支持 audio 元素。
                             </audio>
@@ -268,7 +271,7 @@
 					</span>
                 </div>
             </div>
-        </div>
+        </div>-->
     </div>
     <div>
         <p></p>