冲突解决

talkview/src/js/controller/messageController.js

@@ -1,12 +1,12 @@
-angular.module('appMessage').controller('MessageController', ['$scope', '$filter', '$location', '$anchorScroll', '$element', function($scope, $filter, $location, $anchorScroll, $element) {
+angular.module('appMessage').controller('MessageController', ['$scope', '$filter', '$location', '$anchorScroll', '$timeout', '$element', function($scope, $filter, $location, $anchorScroll, $timeout, $element) {
         lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', '_Register', '', $scope);
         $scope.glued = true;
         $scope.count = true;
         $scope.appContent = {};
         $scope.sendMark = 0;
         $scope.receiveMark = 0;
-        $scope.sMessage = [];
-        $scope.rMessage = [];
+        $scope.sMessageTime = [];
+        $scope.rMessageTime = [];
         $scope.sendmessages = [];
         $scope.historymessages = [];
 
@@ -18,6 +18,29 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             scroll(document.body);
         };
 
+        $scope.voicePlay = function($event) {
+            var audio = $($event.target.parentElement.nextElementSibling)[0];
+            var unread = $($event.target.nextElementSibling);
+            console.log($($event.target));
+            if (audio !== null) {
+                if (audio.paused) {
+                    unread.removeClass("app-voice-unread");
+                    $($event.target).removeClass("app-voice-pause");
+                    $($event.target).addClass("app-voice-play");
+                    $timeout(function() {
+                        $($event.target).removeClass("app-voice-play");
+                        $($event.target).addClass("app-voice-pause");
+                    }, 10000 * audio.duration);
+                    audio.play();
+                } else {
+                    $($event.target).removeClass("app-voice-play");
+                    $($event.target).addClass("app-voice-pause");
+                    audio.pause();
+                    audio.load();
+                }
+            }
+        };
+
         $scope.showMessage = function(jsonStr) {
             console.log(jsonStr);
             jsonStr = jsonStr.replace(/ /g, "&nbsp");
@@ -43,7 +66,17 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             $scope.historymessages.push(msg);
         };
 
-        $scope.getTime = function(item) {
+        $scope.getHisTime = function(item) {
+            var myDate = new Date();
+            var nowDate = $filter("date")(myDate.getTime(), "yyyy-MM-dd");
+            var messageDate = $filter("date")(item.ts, "yyyy-MM-dd");
+            if (messageDate == nowDate)
+                return $filter("date")(item.ts, "HH:mm:ss");
+            else
+                return $filter("date")(item.ts, "yyyy-MM-dd HH:mm:ss");
+        };
+
+        $scope.getCurTime = function(item) {
             var arr = $scope.appContent.directory.user.split("\\");
             var userself = arr[arr.length - 2];
             var getUserID = item.sender.indexOf(userself);
@@ -51,58 +84,30 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             var nowDate = $filter("date")(myDate.getTime(), "yyyy-MM-dd");
             var messageDate = $filter("date")(item.ts, "yyyy-MM-dd");
             if (getUserID !== -1) {
-                $scope.sMessage[$scope.sendMark] = item.ts;
+                $scope.sMessageTime[$scope.sendMark] = item.ts;
                 $scope.sendMark = $scope.sendMark + 1;
                 $scope.receiveMark = 0;
-                $scope.rMessage = [];
+                $scope.rMessageTime = [];
             } else {
-                $scope.rMessage[$scope.receiveMark] = item.ts;
+                $scope.rMessageTime[$scope.receiveMark] = item.ts;
                 $scope.receiveMark = $scope.receiveMark + 1;
                 $scope.sendMark = 0;
-                $scope.sMessage = [];
+                $scope.sMessageTime = [];
             }
-            if (messageDate == nowDate) {
-                if ($scope.sendMark == 1 || $scope.receiveMark == 1) {
-                    console.log("111");
-                    return $filter("date")(item.ts, "HH:mm:ss");
-                } else if ($scope.sendMark > 1 && Math.abs($scope.sMessage[$scope.sendMark - 1] - $scope.sMessage[0]) < 60000) {
-                    console.log("222");
-                    return '';
-                } else if ($scope.receiveMark > 1 && Math.abs($scope.rMessage[$scope.receiveMark - 1] - $scope.rMessage[0]) < 60000) {
-                    console.log("333");
-                    return '';
-                } else if ($scope.sendMark > 1 && Math.abs($scope.sMessage[$scope.sendMark - 1] - $scope.sMessage[0]) > 60000) {
-                    console.log("444");
-                    $scope.sendMark = 0;
-                    $scope.sMessage = [];
-                    return $filter("date")(item.ts, "HH:mm:ss");
-                } else if ($scope.receiveMark > 1 && Math.abs($scope.rMessage[$scope.receiveMark - 1] - $scope.rMessage[0]) > 60000) {
-                    console.log("555");
-                    $scope.receiveMark = 0;
-                    $scope.rMessage = [];
-                    return $filter("date")(item.ts, "HH:mm:ss");
-                }
-            } else {
-                if ($scope.sendMark == 1 || $scope.receiveMark == 1) {
-                    console.log("111");
-                    return $filter("date")(item.ts, "yyyy HH:mm:ss");
-                } else if ($scope.sendMark > 1 && Math.abs($scope.sMessage[$scope.sendMark - 1] - $scope.sMessage[0]) < 60000) {
-                    console.log("222");
-                    return $filter("date")(item.ts, "yyyy HH");
-                } else if ($scope.receiveMark > 1 && Math.abs($scope.rMessage[$scope.receiveMark - 1] - $scope.rMessage[0]) < 60000) {
-                    console.log("333");
-                    return $filter("date")(item.ts, "yyyy HH:mm");
-                } else if ($scope.sendMark > 1 && Math.abs($scope.sMessage[$scope.sendMark - 1] - $scope.sMessage[0]) > 60000) {
-                    console.log("444");
-                    $scope.sendMark = 0;
-                    $scope.sMessage = [];
-                    return $filter("date")(item.ts, "MM HH:mm:ss");
-                } else if ($scope.receiveMark > 1 && Math.abs($scope.rMessage[$scope.receiveMark - 1] - $scope.rMessage[0]) > 60000) {
-                    console.log("555");
-                    $scope.receiveMark = 0;
-                    $scope.rMessage = [];
-                    return $filter("date")(item.ts, "dd HH:mm:ss");
-                }
+            if ($scope.sendMark == 1 || $scope.receiveMark == 1 || Math.abs($scope.sMessageTime[$scope.sendMark - 1] - $scope.sMessageTime[0]) == 0 || Math.abs($scope.rMessageTime[$scope.receiveMark - 1] - $scope.rMessageTime[0]) == 0) {
+                return $filter("date")(item.ts, "HH:mm:ss");
+            } else if ($scope.sendMark > 1 && Math.abs($scope.sMessageTime[$scope.sendMark - 1] - $scope.sMessageTime[0]) <= 60000) {
+                return '';
+            } else if ($scope.receiveMark > 1 && Math.abs($scope.rMessageTime[$scope.receiveMark - 1] - $scope.rMessageTime[0]) <= 60000) {
+                return '';
+            } else if ($scope.sendMark > 1 && Math.abs($scope.sMessageTime[$scope.sendMark - 1] - $scope.sMessageTime[0]) > 60000) {
+                $scope.sMessageTime[0] = $scope.sMessageTime[$scope.sendMark - 1];
+                $scope.sendMark = 1;
+                return $filter("date")(item.ts, "HH:mm:ss");
+            } else if ($scope.receiveMark > 1 && Math.abs($scope.rMessageTime[$scope.receiveMark - 1] - $scope.rMessageTime[0]) > 60000) {
+                $scope.rMessageTime[0] = $scope.rMessageTime[$scope.receiveMark - 1];
+                $scope.receiveMark = 1;
+                return $filter("date")(item.ts, "HH:mm:ss");
             }
         };
 

talkview/src/js/directive/currentmessage.js

@@ -241,14 +241,14 @@
                 var html_g = html;
             } else {
                 if (getUserID()) {
-                    var html_g = '<div><p><strong>' +
+                    var html_g = '<div onSelectStart="return false"><p><strong>' +
                         scope.msg.senderDisplayName +
                         '</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 = '<div><p><strong>' +
+                    var html_g = '<div onSelectStart="return false"><p><strong>' +
                         scope.msg.senderDisplayName +
                         '</strong><small class="text-muted"></small></p></div>' +
                         '<div class="well m-l-xs m-t-xs fit-content" >' +

talkview/src/js/directive/historymessages.js

@@ -246,14 +246,14 @@
                 var html_g = html;
             } else {
                 if (getUserID()) {
-                    var html_g = '<div><p><strong>' +
+                    var html_g = '<div onSelectStart="return false"><p><strong>' +
                         scope.msg.senderDisplayName +
                         '</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 = '<div><p><strong>' +
+                    var html_g = '<div onSelectStart="return false"><p><strong>' +
                         scope.msg.senderDisplayName +
                         '</strong><small class="text-muted"></small></p></div>' +
                         '<div class="well m-l-xs m-t-xs fit-content" >' +

talkview/src/less/app.main.less

@@ -22,12 +22,15 @@
         }
     }
     .loadmore {
+        cursor:default;
         margin-top: -5px;
     }
     .sendmessage {
+        cursor:default;
         margin-top: -10px;
     }
     .curTime {
+        cursor:default;
         text-align: center;
         font-family: "微软雅黑","宋体";
         font-size: 12px;
@@ -41,10 +44,13 @@
     max-width: 700px;
     vertical-align: top;
     zoom: 1;
+    p{
+        margin-bottom: 7px;
+    }
     p>strong {
         float: left;
-        margin-left: 3px;
-        color: #336699;
+        margin-left: 5px;
+        color: #007FE0;
     }
     p>small {
         margin-left: 4px;
@@ -61,14 +67,14 @@
         float: left;
         word-wrap:break-word;
         word-break:break-all;
-        background-color: #DEDFDE;
+        background-color: #EEEEEE;
         color: #000000;
         border-radius: 6px;
         border: none;
         box-shadow: none;
         outline: none;
-        margin-left: 8px;
-        margin-top: -2px;
+        margin-left: 10px;
+        margin-top: 0px;
         margin-bottom: 0px;
         margin-right: 20px;
         padding: 7px 15px 7px 12px;
@@ -86,7 +92,7 @@
             border-bottom:solid 10px;
             border-right: solid 7px;
             border-left: solid 7px;
-            border-color:transparent transparent #DEDFDE transparent;
+            border-color:transparent transparent #EEEEEE transparent;
         }
     }
 }
@@ -95,14 +101,14 @@
         float: left;
         word-wrap:break-word;
         word-break:break-all;
-        background-color: #009BDB;
+        background-color: #009EE0;
         color: #000000;
         border-radius: 6px;
         border: none;
         box-shadow: none;
         outline: none;
-        margin-left: 8px;
-        margin-top: -2px;
+        margin-left: 10px;
+        margin-top: 0px;
         margin-bottom: 0px;
         margin-right: 20px;
         padding: 7px 15px 7px 12px;
@@ -120,7 +126,7 @@
             border-bottom:solid 10px;
             border-right: solid 7px;
             border-left: solid 7px;
-            border-color:transparent transparent #009BDB transparent;
+            border-color:transparent transparent #009EE0 transparent;
         }
 }
 .fit-content {
@@ -458,4 +464,71 @@ body {
     50%  {opacity:0.5;left:-50px; top:0px;}
     
 	100% {opacity:0;left:-150px; top:0px;}
+}
+
+.app-voice-pause,.app-voice-play {
+  cursor:pointer;
+  margin-left: 50px;
+  height: 25px;
+  width: 25px;
+  background-repeat: no-repeat;
+  background-size: 100px 30px;
+  opacity: 1;
+}
+.app-voice-you {
+    height: 25px;
+    width: 75px;
+    .app-voice-time {
+        float: left;
+        margin-top: 2.5px;
+    }
+    .app-voice-pause{
+        /*从未播放*/ 
+        background-position: -1.5px -5px;
+    }
+    .app-voice-unread {
+       height:4px; width:4px; border-radius:4px; 
+       background:#EC3300;
+       position: relative; top: -25px; right: -75px;
+    }
+}
+.app-voice-you .app-voice-play {
+  /*播放中（不需要过渡动画）*/
+  background-position: -1.5px -5px;
+  -webkit-animation: voiceplay 1.5s infinite step-start;
+  -moz-animation: voiceplay 1.5s infinite step-start;
+  -o-animation: voiceplay 1.5s infinite step-start;
+  animation: voiceplay 1.5s infinite step-start;
+}
+
+@keyframes voiceplay {
+
+  0%  {background-position: -5px -5px;}
+
+  33.333333% {
+    background-position: -27.5px -5px;
+  }
+
+  66.666666% {
+    background-position: -50px -5px;
+  }
+
+  100% {background-position: -72.5px -5px;}
+
+}
+
+@-webkit-keyframes voiceplay {
+
+  0%  {background-position: -5px -5px;}
+
+  33.333333% {
+    background-position: -27.5px -5px;
+  }
+
+  66.666666% {
+    background-position: -50px -5px;
+  }
+
+  100% {background-position: -72.5px -5px;}
+
 }

talkview/src/templates/messages.html

@@ -2,7 +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="curTime"><small class="text-muted">{{getHisTime(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>
@@ -15,7 +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="curTime"><small class="text-muted">{{getCurTime(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>
@@ -217,23 +217,58 @@
             </div>-->
 
         <!-- 语音 -->
-        <!--<div class="feed-element">
-                <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">
-                                <audio controls>
-                                    <source src="local://E:/LxtalkUIView/dist/img/111.mp3">
-                                    <source src="local://E:/LxtalkUIView/dist/img/111.ogg">
-                                    您的浏览器不支持 audio 元素。
-                                </audio>
-						</span>
-                    </div>
+        <div class="feed-element">
+            <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">
+                        <div class="app-voice-you">
+                            <div class="app-voice-time">
+                                1"
+                            </div>
+                            <div class="app-voice-state-bg">
+                                <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin.png);"></div>
+                                <div class="app-voice-unread"></div>
+                            </div>
+                            <audio >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                                您的浏览器不支持 audio 元素。
+                            </audio>
+                        </div>
+					</span>
                 </div>
-            </div>-->
+            </div>
+        </div>
+        <div class="feed-element">
+            <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">
+                        <div class="app-voice-you">
+                            <div class="app-voice-time">
+                                1"
+                            </div>
+                            <div class="app-voice-state-bg">
+                                <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin-self.png);"></div>
+                                <div class="app-voice-unread"></div>
+                            </div>
+                            <audio >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                                您的浏览器不支持 audio 元素。
+                            </audio>
+                        </div>
+					</span>
+                </div>
+            </div>
+        </div>
     </div>
     <div>
         <p></p>