历史消息

talkview/src/html/index.html

@@ -19,6 +19,7 @@
     <script src="../bower_components/ngDraggable/ngDraggable.js"></script>
     <script src="../bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
+    <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>
 
     <script src="app.js"></script>

talkview/src/js/app.js

@@ -3,6 +3,7 @@ var appMessage = angular.module('appMessage', [
     'ui.router',
     'templatescache',
     'infinite-scroll',
+    'ui.bootstrap',
     'ngDraggable',
     'ngAnimate'
 ]);

talkview/src/js/controller/historyMsgController.js

@@ -6,6 +6,9 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
     $scope.appContent = {};
     $scope.historymessages = [];
     $scope.selectName = "全部"
+    $scope.currentPage = 2; //初始当前页
+    $scope.maxSize = 5; //最多显示7页其他的用···代替
+    $scope.totalItems = 16;
 
     $scope.initAppContent = function(appContentJson) {
         $scope.appContent = JSON.parse(appContentJson);

talkview/src/less/app.main.less

@@ -857,36 +857,84 @@ body {
                 margin-bottom: -10px;
                 border-radius: 0px;
                 border-right: none;
+                border-left: none;
                 .panel-heading {
                     background: #F5F5F5;
                     a {
+                        font-size: 13px;
+                        color: #555;
                         text-decoration: none;
                         span {
-                            color: #333;
+                            color: #444;
                         }
                         .lt {
-                            font-size: 15px;
+                            font-size: 13px;
                         }
                         .rt {
-                            font-size: 15px;
-                            margin-left: -11px;
+                            font-size: 13px;
+                            margin-left: -10px;
                             margin-top: -10px;
                         }
                     }
                 }
                 .panel-collapse {
-                
+                    .panel-body {
+                        overflow-y: auto;
+                        overflow-x: hidden;
+                        max-height: 258px;
+                    }
+                    ul {
+                        list-style: none;
+                        margin: -15px 0px -5px -50px;
+                        >li {
+                            width: 170px;
+                            height: 25px;
+                            font-family: "微软雅黑","宋体";
+                            padding-top:4px;
+                            padding-bottom: 1px;
+                            text-align: left;
+                            font-size: 12px;
+                            color: #444;
+                            white-space: nowrap; /* 自适应宽度,不换行*/
+                            overflow: hidden;
+                            .lf {
+                                cursor:default;
+                                width: 20px;
+                                height: 20px;
+                                margin: 1px 0px 10px 1px;
+                                border-radius: 100%;
+                                border:1px solid #ddd;
+                                background: #96CEDF;
+                                img {
+                                    border-radius: 100%;
+                                    width: 100%;
+                                    height: 100%;
+                                }
+                                input {
+                                    margin-left: 5px;
+                                    border: none;
+                                    outline: none;
+                                    background: #fff;
+                                    width: 800%;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
-
     }
     #media {
         overflow-y: auto;
-        margin-left: 180px;
-        height: 550px;
-        width: 620px;
+        margin-left: 200px;
+        height: 500px;
+        width: 600px;
+        padding-bottom: 10px;
         background: #FFF;
+        border-bottom: 1px solid #eee;
         .well {
             background: #FFF;
             padding-left: 11px;
@@ -894,4 +942,18 @@ body {
             margin-bottom: -8px;
         }
     }
+    #paginationTab {
+        height: 50px;
+        width: 600px;
+        margin-left: 200px;
+        background: #FFF;
+        text-align: right;
+        >span {
+            float: left;
+            margin: 13px;
+        }
+        >ul {
+            margin: 8px;
+        }
+    }
 }

talkview/src/templates/historyMsg.html

@@ -32,20 +32,87 @@
         <div class="panel-group" id="accordion">
             <div class="panel panel-default" id="first">
                 <div class="panel-heading">
-                    <h5 class="panel-title">
+                    <span class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-user"></span> 最近联系人</a>
-                    </h5>
+                    </span>
                 </div>
                 <div id="collapseOne" class="panel-collapse collapse in">
                     <div class="panel-body">
+                        <ul>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣陆趣趣陆趣趣陆趣趣陆趣趣陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                            <li>
+                                <div class="lf">
+                                    <a><img src="../img/自己头像.png"></a><input type="text" readonly="readonly" value="陆趣趣">
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h5 class="panel-title">
+                    <span class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-home"></span> 部门单位</a>
-                    </h5>
+                    </span>
                 </div>
                 <div id="collapseTwo" class="panel-collapse collapse">
                     <div class="panel-body">
@@ -54,9 +121,9 @@
             </div>
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h5 class="panel-title">
+                    <span class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user lt"></span><span class="glyphicon glyphicon-user rt"></span> 群组</a>
-                    </h5>
+                    </span>
                 </div>
                 <div id="collapseThree" class="panel-collapse collapse">
                     <div class="panel-body">
@@ -82,7 +149,7 @@
                 <div class="well m-l-xs m-t-xs fit-content">
                     <span class="text-message">
                         <a href="#" class="thumbnail">
-                            <img src="../img/Lighthouse.jpg" alt="通用的占位符缩略图">
+                            <img style="max-width:300px;max-height:250px;" src="../img/111.jpg" alt="通用的占位符缩略图">
                         </a>
 					</span>
                 </div>
@@ -95,7 +162,7 @@
                 <div class="well m-l-xs m-t-xs fit-content">
                     <span class="text-message">
                         <a href="#" class="thumbnail">
-                            <img src="../img/自己头像.png" alt="通用的占位符缩略图">
+                            <img style="max-width:300px;max-height:250px;" src="../img/自己头像.png" alt="通用的占位符缩略图">
                         </a>
 					</span>
                 </div>
@@ -108,7 +175,7 @@
                 <div class="well m-l-xs m-t-xs fit-content">
                     <span class="text-message">
                         <a href="#" class="thumbnail">
-                            <img src="../img/HappyNewYear.jpg" alt="通用的占位符缩略图">
+                            <img style="max-width:300px;max-height:250px;" src="../img/Lighthouse.jpg" alt="通用的占位符缩略图">
                         </a>
 					</span>
                 </div>
@@ -163,4 +230,8 @@
             </div>
         </div>
     </div>
+    <div id="paginationTab">
+        <span>共{{0+totalItems}}条数据</span>
+        <ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" max-size="maxSize" force-ellipses="true" previous-text="上页" next-text="下页" first-text="首页" last-text="尾页"></ul>
+    </div>
 </div>