历史消息

talkview/src/js/controller/groupsinfoController.js

@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('appMessage').controller('GroupsinfoController', ['$scope', function($scope) {
+    //lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', '_Register', '', $scope);
+
+    $scope.actived = function($event) {
+        var activeClick = $($event.target);
+        console.log(activeClick);
+        if (activeClick[0].nodeName == "A") {
+            angular.element(".Li").removeClass("activeBackground");
+            angular.element(".Aa").removeClass("activeColor");
+            activeClick.addClass("activeColor");
+        } else if (activeClick[0].nodeName == "LI") {
+            angular.element(".Aa").removeClass("activeColor");
+            angular.element(".Li").removeClass("activeBackground");
+            activeClick.addClass("activeBackground");
+        } else {
+            angular.element(".Aa").removeClass("activeColor");
+            angular.element(".Li").removeClass("activeBackground");
+            $(activeClick[0].parentElement).addClass("activeBackground");
+            $(activeClick[0].parentElement.parentElement).addClass("activeBackground");
+        }
+    };
+
+}]);

talkview/src/js/controller/historyMsgController.js

@@ -5,7 +5,8 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
     $scope.count = true;
     $scope.appContent = {};
     $scope.historymessages = [];
-    $scope.selectName = "全部"
+    $scope.searchArea = "全部";
+    $scope.activeData = "全部";
     $scope.totalItems = 100;
     $scope.currentPage = Math.floor($scope.totalItems / 10) + 1; //初始当前页
     $scope.maxSize = 5; //最多显示7页其他的用···代替
@@ -17,11 +18,18 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
     $scope.actived = function($event) {
         var activeClick = $($event.target);
         console.log(activeClick);
-        if (activeClick[0].nodeName == "LI") {
-            angular.element(".li").removeClass("activeBackground");
+        if (activeClick[0].nodeName == "A") {
+            angular.element(".Li").removeClass("activeBackground");
+            angular.element(".Aa").removeClass("activeColor");
+            activeClick.addClass("activeColor");
+        } else if (activeClick[0].nodeName == "LI") {
+            angular.element(".Aa").removeClass("activeColor");
+            angular.element(".Li").removeClass("activeBackground");
             activeClick.addClass("activeBackground");
         } else {
-            angular.element(".li").removeClass("activeBackground");
+            angular.element(".Aa").removeClass("activeColor");
+            angular.element(".Li").removeClass("activeBackground");
+            $(activeClick[0].parentElement).addClass("activeBackground");
             $(activeClick[0].parentElement.parentElement).addClass("activeBackground");
         }
     };
@@ -40,6 +48,27 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
         }
     };
 
+    $scope.activeClick = function($event) {
+        var activeClick = $($event.target.firstElementChild);
+        $scope.activeData = $event.target.innerText;
+        angular.element(".active").addClass("hid");
+        activeClick.removeClass("hid");
+    };
+
+    $scope.onRefresh = function($event) {
+        var activeClick = $($event.target.parentElement.firstElementChild.lastElementChild.lastElementChild.firstElementChild.firstElementChild.firstElementChild);
+        console.log(activeClick)
+        $scope.activeData = "全部";
+        $scope.searchArea = "全部"
+        $scope.keyWords = "";
+        angular.element(".active").addClass("hid");
+        activeClick.removeClass("hid");
+    };
+
+    $scope.searchMsg = function() {
+        console.log($scope.searchArea, $scope.keyWords);
+    };
+
     $scope.voicePlay = function($event) {
         var audio = $($event.target.parentElement.nextElementSibling)[0];
         var unread = $($event.target.nextElementSibling);
@@ -94,12 +123,9 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
             return $filter("date")(item.ts, "yyyy-MM-dd HH:mm:ss");
     };
 
-    $scope.scrollWheel = function() {
-        if (document.body.scrollTop == 0) {
-            $scope.height = document.body.scrollHeight + 200;
-            lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', 'LoadHistoryMessages', '', $scope);
-            $scope.count = false;
-        }
+    $scope.previousPage = function() {
+        lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', 'LoadHistoryMessages', '', $scope);
+        $scope.count = false;
     };
 
     $scope.loadImages = function(data) {

talkview/src/js/router.js

@@ -7,7 +7,7 @@ angular.module('appMessage').run(['$rootScope', '$state', '$stateParams',
     function($stateProvider, $urlRouterProvider, $compileProvider) {
         $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local):/);
         $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local):/);
-        $urlRouterProvider.otherwise('/historyMsg'); //
+        $urlRouterProvider.otherwise('/groupsInfo'); //
         $stateProvider.state('messages', {
                 url: '/messages',
                 templateUrl: 'templates/messages.html',
@@ -32,6 +32,10 @@ angular.module('appMessage').run(['$rootScope', '$state', '$stateParams',
                 url: '/historyMsg',
                 templateUrl: 'templates/historyMsg.html',
                 controller: 'HistoryMsgController'
+            }).state('groupsInfo', {
+                url: '/groupsInfo',
+                templateUrl: 'templates/groupsInfo.html',
+                controller: 'GroupsinfoController'
             });
     }
 ]);

talkview/src/less/app.main.less

@@ -738,8 +738,9 @@ body {
                 }
             }
             .dropdown-menu{
-                top: -35px;
-                left: -295px;
+                font-size: 12px;
+                top: -30px;
+                left: -275px;
                 span {
                     float: left;
                     margin: 2px 10px 0px -10px;
@@ -756,7 +757,7 @@ body {
     width:100%;
     height: 100%;
     margin: 0px auto;
-    background: #F5F5F5;
+    background: #F5FAFE;
     font-size: 12px;
     font-family: "微软雅黑","宋体";
     border-bottom: 1px solid #ddd;
@@ -775,6 +776,9 @@ body {
             >select {
                 float: right;
                 width: 140px;
+                >option {
+                    margin-top: 5px;
+                }
             }
         }
         .input-group {
@@ -817,6 +821,18 @@ body {
                     margin-right: -4px;
                 }
             }
+            .dropdown-menu{
+                font-size: 12px;
+                top: 30px;
+                left: 0px;
+                span {
+                    float: left;
+                    margin: 2px 10px 0px -10px;
+                }
+                .hid {
+                    visibility:hidden;
+                }
+            }
         }
         .glyphicon-refresh {
             margin:8px -630px 0px 0px;
@@ -835,7 +851,7 @@ body {
         }
     }
     #leftList {
-        background: #F5F5F5;
+        background: #F5FAFE;
         float: left;
         width: 220px;
         height: 560px;
@@ -852,24 +868,30 @@ body {
                 border-right: none;
                 border-left: none;
                 .panel-heading {
-                    background: #F5F5F5;
+                    background: #F5FAFE;
                     span {
+                        margin-left: -3px;
                         font-size: 13px;
                         color: #444;
-                        }
+                    }
                     a {
+                        margin-left: 5px;
                         font-size: 13px;
                         color: #555;
                         text-decoration: none;
-                        }
+                    }
+                    .glyphicon-duplicate {
+                        margin: 0px 1px 0px -2px;
+                    }
                     .lt {
-                            font-size: 13px;
-                        }
+                        font-size: 13px;
+                    }
                     .rt {
-                            font-size: 13px;
-                            margin-left: -10px;
-                            margin-top: -10px;
-                        }
+                        margin-right: -2px;
+                        font-size: 13px;
+                        margin-left: -10px;
+                        margin-top: -10px;
+                    }
                     i {
                         margin-top: 2px;
                         font-weight: normal;
@@ -883,9 +905,34 @@ body {
                         overflow-x: hidden;
                         max-height: 255px;
                     }
+                    .groupList {
+                        span {
+                            margin-left: 12px;
+                            cursor: default;
+                        }
+                    }
+                    .activeColor {
+                        color: #007FFF;
+                    }
+                    p {
+                        margin-left: -2px;
+                        margin-top: -10px;
+                        margin-bottom: 18px;
+                        &:last-child {
+                            margin-bottom: -5px;
+                        }
+                        a {
+                            cursor: pointer;
+                            text-decoration: none;
+                            color: #333;
+                            &:hover,&:active,&:focus {
+                                color: #009BDB;
+                            }
+                        }
+                    }
                     ul {
                         list-style: none;
-                        margin: -15px 0px -11px -60px;
+                        margin: -15px 0px -10px -58px;
                         .activeBackground {
                             background: #ddd;
                         }
@@ -893,6 +940,7 @@ body {
                             width: 225px;
                             height: 25px;
                             font-family: "微软雅黑","宋体";
+                            margin-bottom: 1px;
                             padding-top:3px;
                             padding-bottom: 2px;
                             text-align: left;
@@ -961,4 +1009,23 @@ body {
             margin: 8px;
         }
     }
+}
+
+.groupinfo {
+    width: 660px;
+    height: 500px;
+    margin: 0px auto;
+    background: #F5FAFE;
+    #leftlist {
+        margin: auto;
+        width: 600px;
+        height: 50px;
+        background: #FFF;
+    }
+    #media {
+        
+    }
+    #set {
+        
+    }
 }

talkview/src/templates/groupsInfo.html

@@ -0,0 +1,15 @@
+<div class="groupinfo">
+    <div id="leftlist">
+        Tabbed pills with CSS classes
+        <uib-tabset type="pills">
+            <uib-tab heading="Default Size">Tab 1 content</uib-tab>
+            <uib-tab heading="Default Size">Tab 2 content</uib-tab>
+        </uib-tabset>
+    </div>
+    <div id="media">
+
+    </div>
+    <div id="set">
+
+    </div>
+</div>

talkview/src/templates/historyMsg.html

@@ -1,31 +1,32 @@
 <div class="historymsg">
     <div id="head">
         <div class="input-group">
-            <input type="text" class="form-control input-sm" aria-label="..." placeholder="请输入搜索关键字. . .">
+            <input type="text" class="form-control input-sm" aria-label="..." placeholder="请输入搜索关键字. . ." ng-model="keyWords">
             <div class="input-group-btn">
-                <button type="button" class="btn btn-default">查找</button>
+                <button type="button" class="btn btn-default" ng-click="searchMsg()">查找</button>
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul class="dropdown-menu">
-                    <li><a href="#">Action</a></li>
-                    <li><a href="#">Another action</a></li>
-                    <li><a href="#">Something else here</a></li>
-                    <li role="separator" class="divider"></li>
-                    <li><a href="#">Separated link</a></li>
+                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active"></span> 全部</a></li>
+                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active hid"></span> 最近一周</a></li>
+                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active hid"></span> 最近一个月</a></li>
                 </ul>
             </div>
         </div>
         <div class="selectData">
             <span>搜索范围</span>
-            <select class="form-control input-sm" ng-change="onSelectedChange()" ng-model="selectName">
+            <select class="form-control input-sm" ng-change="onSelectedChange()" ng-model="searchArea">
                 <option>全部</option>
-                <option>最近一周</option>
-                <option>最近一个月</option>
+                <option>最近联系人</option>
+                <option>单位部门</option>
+                <option>群组</option>
+                <option>手机短信</option>
+                <option>系统消息</option>
             </select>
         </div>
-        <button type="button" class="glyphicon glyphicon-refresh" title="刷新" ng-click="onRefresh()"></button>
+        <button type="button" class="glyphicon glyphicon-refresh" title="刷新" ng-click="onRefresh($event)"></button>
     </div>
     <div style="border-top:solid 1px #ddd;"></div>
     <div id="leftList">
@@ -40,27 +41,27 @@
                 <div id="collapseOne" class="panel-collapse collapse in">
                     <div class="panel-body">
                         <ul>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>杭州测试王巧巧(ls_wqq)</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
@@ -72,34 +73,34 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <span class="panel-title">
-                        <span class="glyphicon glyphicon-home"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 部门单位</a>
+                        <span class="glyphicon glyphicon-home"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 单位部门</a>
                     </span>
                     <i class="pull-right glyphicon glyphicon-chevron-right"></i>
                 </div>
                 <div id="collapseTwo" class="panel-collapse collapse">
                     <div class="panel-body">
                         <ul>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
                             </li>
-                            <li class="li" ng-click="actived($event)">
+                            <li class="Li" ng-click="actived($event)">
                                 <label class="lf">
                                     <img src="../img/自己头像.png"><span>郑连根</span>
                                 </label>
@@ -117,6 +118,37 @@
                 </div>
                 <div id="collapseThree" class="panel-collapse collapse">
                     <div class="panel-body">
+                        <ul class="groupList">
+                            <li class="Li" ng-click="actived($event)">
+                                <span>浙江万赛软件维护群</span>
+                            </li>
+                            <li class="Li" ng-click="actived($event)">
+                                <span>浙江万赛软件维护群</span>
+                            </li>
+                            <li class="Li" ng-click="actived($event)">
+                                <span>浙江万赛软件维护群</span>
+                            </li>
+                            <li class="Li" ng-click="actived($event)">
+                                <span>浙江万赛软件维护群</span>
+                            </li>
+                            <li class="Li" ng-click="actived($event)">
+                                <span>浙江万赛软件维护群</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <span class="panel-title">
+                        <span class="glyphicon glyphicon-duplicate"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 其他</a>
+                    </span>
+                    <i class="pull-right glyphicon glyphicon-chevron-right"></i>
+                </div>
+                <div id="collapseFour" class="panel-collapse collapse">
+                    <div class="panel-body">
+                        <p><a class="Aa" ng-click="actived($event)">- 手机短信</a></p>
+                        <p><a class="Aa" ng-click="actived($event)">- 系统消息</a></p>
                     </div>
                 </div>
             </div>
@@ -139,7 +171,7 @@
                 <div class="well m-l-xs m-t-xs fit-content">
                     <span class="text-message">
                         <a href="#" class="thumbnail">
-                            <img style="max-width:300px;max-height:250px;" src="../img/111.jpg" alt="通用的占位符缩略图">
+                            <img style="max-width:300px;max-height:250px;" src="../img/美女.jpg" alt="通用的占位符缩略图">
                         </a>
 					</span>
                 </div>
@@ -152,7 +184,7 @@
                 <div class="well m-l-xs m-t-xs fit-content">
                     <span class="text-message">
                         <a href="#" class="thumbnail">
-                            <img style="max-width:300px;max-height:250px;" src="../img/自己头像.png" alt="通用的占位符缩略图">
+                            <img style="max-width:300px;max-height:250px;" src="../img/111.jpg" alt="通用的占位符缩略图">
                         </a>
 					</span>
                 </div>
@@ -165,7 +197,7 @@
                 <div class="well m-l-xs m-t-xs fit-content">
                     <span class="text-message">
                         <a href="#" class="thumbnail">
-                            <img style="max-width:300px;max-height:250px;" src="../img/Lighthouse.jpg" alt="通用的占位符缩略图">
+                            <img style="max-width:300px;max-height:250px;" src="../img/自己头像.png" alt="通用的占位符缩略图">
                         </a>
 					</span>
                 </div>