聊天界面

talkview/src/js/controller/messageController.js

@@ -10,9 +10,9 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             $scope.appContent = JSON.parse(appContentJson);
         };
 
-        $scope.addMessage = function() {
-            scroll(document.body);
-        };
+        // $scope.addMessage = function() {
+        //     scroll(document.body);
+        // };
 
         $scope.showMessage = function(jsonStr) {
             console.log(jsonStr);

talkview/src/js/directive/currentmessage.js

@@ -84,10 +84,10 @@
                 }
                 //匹配网址
                 var i = 0;
-                var m = content.match(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW|[0-9]+)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))/ig);
+                var m = content.match(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))|(([0-9]+)(\.[0-9]+)(\.[0-9]+)(\.[0-9]+)([\/\w\W]*))/ig);
                 if (m == null)
                     return content;
-                content = content.replace(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW|[0-9]+)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))/ig, function() {
+                content = content.replace(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))|(([0-9]+)(\.[0-9]+)(\.[0-9]+)(\.[0-9]+)([\/\w\W]*))/ig, function() {
                     var html = '';
                     var g = (/((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)(\.[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))/ig).exec(m[i]);
                     if (getUserID()) {
@@ -226,9 +226,9 @@
                         html = '<div class="well m-l-xs m-t-xs fit-content" id="file-error"><span class="glyphicon glyphicon-remove-sign"></span><span>' + getFileInfo(content)[5] + '</span></div>';
                 } else if (ifSelf(content) && content.way == 1) {
                     if (getUserID())
-                        html = '';
+                        html = '<div class="well m-l-xs m-t-xs fit-content" id="file-info"><span class="glyphicon glyphicon-info-sign"></span><span>' + getFileInfo(content)[8] + '</span></div>';
                     else
-                        html = '<div class="well m-l-xs m-t-xs fit-content" id="file-info"><span class="glyphicon glyphicon-remove-sign"></span><span>' + getFileInfo(content)[8] + '</span></div>';
+                        html = '<div class="well m-l-xs m-t-xs fit-content" id="file-info"><span class="glyphicon glyphicon-info-sign"></span><span>' + getFileInfo(content)[8] + '</span></div>';
                 }
             } else if (scope.msg.contentType == 4) {
                 html = '<span class="text-message">' +
@@ -245,18 +245,16 @@
                 var html_g = html;
             } else {
                 if (getUserID()) {
-                    var html_g = '<p><strong>' +
+                    var html_g = '<div><p><strong>' +
                         scope.msg.senderDisplayName +
-                        '</strong><small class="text-muted">-' +
-                        getTime(scope.msg) + '</small></p>' +
+                        '</strong><small class="text-muted"></small></p></div>' +
                         '<div class="wellself m-l-xs m-t-xs fit-content" >' +
                         '<div class="text-point"></div>' + html +
                         '</div>';
                 } else {
-                    var html_g = '<p><strong>' +
+                    var html_g = '<div><p><strong>' +
                         scope.msg.senderDisplayName +
-                        '</strong><small class="text-muted">-' +
-                        getTime(scope.msg) + '</small></p>' +
+                        '</strong><small class="text-muted"></small></p></div>' +
                         '<div class="well m-l-xs m-t-xs fit-content" >' +
                         '<div class="text-point"></div>' + html +
                         '</div>';

talkview/src/js/directive/historymessages.js

@@ -91,10 +91,10 @@
                 }
                 //匹配网址
                 var i = 0;
-                var m = content.match(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW|[0-9]+)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))/ig);
+                var m = content.match(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))|(([0-9]+)(\.[0-9]+)(\.[0-9]+)(\.[0-9]+)([\/\w\W]*))/ig);
                 if (m == null)
                     return content;
-                content = content.replace(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW|[0-9]+)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))/ig, function() {
+                content = content.replace(/(((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)|www|WWW)(\.(?!gif|jpg|png|mp3)[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))|(([0-9]+)(\.[0-9]+)(\.[0-9]+)(\.[0-9]+)([\/\w\W]*))/ig, function() {
                     var html = '';
                     var g = (/((((http|ftp|https|HTTP|FTP|HTTPS):\/\/)[\w\-_]+)(\.[\w\-_]+)+([\w\-\.,@?^=%:/~\+#]*[\w\-\@?^=%/~\+#\r\n]))/ig).exec(m[i]);
                     if (getUserID()) {
@@ -231,9 +231,9 @@
                         html = '<div class="well m-l-xs m-t-xs fit-content" id="file-error"><span class="glyphicon glyphicon-remove-sign"></span><span>' + getFileInfo(content)[5] + '</span></div>';
                 } else if (ifSelf(content) && content.way == 1) {
                     if (getUserID())
-                        html = '';
+                        html = '<div class="well m-l-xs m-t-xs fit-content" id="file-info"><span class="glyphicon glyphicon-info-sign"></span><span>' + getFileInfo(content)[8] + '</span></div>';
                     else
-                        html = '<div class="well m-l-xs m-t-xs fit-content" id="file-info"><span class="glyphicon glyphicon-remove-sign"></span><span>' + getFileInfo(content)[8] + '</span></div>';
+                        html = '<div class="well m-l-xs m-t-xs fit-content" id="file-info"><span class="glyphicon glyphicon-info-sign"></span><span>' + getFileInfo(content)[8] + '</span></div>';
                 }
             } else if (scope.msg.contentType == 4) {
                 html = '<span class="text-message">' +
@@ -250,18 +250,16 @@
                 var html_g = html;
             } else {
                 if (getUserID()) {
-                    var html_g = '<p><strong>' +
+                    var html_g = '<div><p><strong>' +
                         scope.msg.senderDisplayName +
-                        '</strong><small class="text-muted">-' +
-                        getTime(scope.msg) + '</small></p>' +
+                        '</strong><small class="text-muted"></small></p></div>' +
                         '<div class="wellself m-l-xs m-t-xs fit-content" >' +
                         '<div class="text-point"></div>' + html +
                         '</div>';
                 } else {
-                    var html_g = '<p><strong>' +
+                    var html_g = '<div><p><strong>' +
                         scope.msg.senderDisplayName +
-                        '</strong><small class="text-muted">-' +
-                        getTime(scope.msg) + '</small></p>' +
+                        '</strong><small class="text-muted"></small></p></div>' +
                         '<div class="well m-l-xs m-t-xs fit-content" >' +
                         '<div class="text-point"></div>' + html +
                         '</div>';

talkview/src/less/app.main.less

@@ -27,6 +27,12 @@
     .sendmessage {
         margin-top: -10px;
     }
+    .curTime {
+        text-align: center;
+        font-family: "微软雅黑","宋体";
+        font-size: 12px;
+        margin-bottom: -5px;
+    }
 }
 
 .media-body {
@@ -36,12 +42,12 @@
     max-width: 700px;
     vertical-align: top;
     zoom: 1;
-    >p>strong {
+    p>strong {
         float: left;
         margin-left: 2px;
         color: #336699;
     }
-    >p>small {
+    p>small {
         margin-left: 4px;
         font-size: 10px;
         vertical-align: bottom;

talkview/src/templates/messages.html

@@ -2,6 +2,7 @@
     <div class="getMore"><a role="button" class="i-More"><small ng-click="getMore()">加载更多消息</small></a><small class="n-More hide">当前没有更多消息</small></div>
     <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">{{getTime(item)}}</small></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>
@@ -14,6 +15,7 @@
     </div>
     <div class="feed-activity-list p-l-xs p-t-xs p-r-xs sendmessage" ng-cloak>
         <div class="feed-element animate" ng-repeat="item in sendmessages track by $index">
+            <div class="curTime"><small class="text-muted">{{getTime(item)}}</small></div>
             <div class="media-body" ng-current-msg="item" ng-app-content="appContent">
                 <!--<p>
                     <strong>{{item.senderDisplayName === undefined || item.senderDisplayName == ''? item.sender : item.senderDisplayName}}</strong><small class="text-muted">-{{getTime(item)}}</small>