add chat message bold/italic font style

modules/chat/client/controllers/chat.client.controller.js

@@ -34,7 +34,6 @@
 
       // Add an event listener to the 'chatMessage' event
       Socket.on('chatMessage', function (message) {
-        var e = angular.element('#chat-body');
         vm.messages.push(message);
       });
 
@@ -70,6 +69,20 @@
     $scope.$watch('vm.messages.length', function (newValue, oldValue) {
       //console.log('vm.messages changed');
     });
+    $scope.$watch('vm.fontStyleBold', function (newValue, oldValue) {
+      if (newValue) {
+        angular.element('#messageText').css('font-weight', 'bold');
+      } else {
+        angular.element('#messageText').css('font-weight', 'normal');
+      }
+    });
+    $scope.$watch('vm.fontStyleItalic', function (newValue, oldValue) {
+      if (newValue) {
+        angular.element('#messageText').css('font-style', 'italic');
+      } else {
+        angular.element('#messageText').css('font-style', 'normal');
+      }
+    });
 
     /**
      * onMessageRepeatDone
@@ -101,11 +114,27 @@
       vm.messageText = '';
     };
 
+    /**
+     * sanitizeHTML
+     * @param msg
+     * @param white
+     * @param black
+     * @returns {*}
+     */
     function sanitizeHTML(msg, white, black) {
-      if (!white) white = 'b|i|p|u|img';//allowed tags
+      if (!white) white = 'b|i|p|u';//allowed tags
       if (!black) black = 'script|object|embed';//complete remove tags
       var e = new RegExp('(<(' + black + ')[^>]*>.*</\\2>|(?!<[/]?(' + white + ')(\\s[^<]*>|[/]>|>))<[^<>]*>|(?!<[^<>\\s]+)\\s[^</>]+(?=[/>]))', 'gi');
-      return msg.replace(e, '');
+      msg = msg.replace(e, '');
+
+      if (vm.fontStyleBold) {
+        msg = '<b>' + msg + '</b>';
+      }
+      if (vm.fontStyleItalic) {
+        msg = '<i>' + msg + '</i>';
+      }
+
+      return msg;
     }
 
     /**
@@ -244,5 +273,22 @@
       vm.messageText += atu;
       angular.element('#messageText').trigger('focus');
     }
+
+    /**
+     * onCleanClicked
+     */
+    vm.onCleanClicked = function () {
+      vm.messages = [];
+
+      var m = {};
+      m.type = 'status';
+      m.text = $translate.instant('CHAT_MESSAGE_ALREADY_CLEAN');
+      m.created = Date.now();
+      m.profileImageURL = vm.user.profileImageURL;
+      m.username = vm.user.username;
+      m.displayName = vm.user.displayName;
+
+      vm.messages.push(m);
+    }
   }
 }());

modules/chat/client/less/chat.less

@@ -194,6 +194,25 @@
             height: 40px;
             border-bottom: solid 1px lighten(@gray-light, 45%);
             background-color: lighten(@gray-light, 48%);
+            .glyphicon {
+                color: @mt-base-color;
+                margin: 10px 2px;
+                cursor: pointer;
+                &:hover {
+                    color: darken(@mt-base-color, 10%);
+                }
+            }
+            .font-style-list {
+                label {
+                    cursor: pointer;
+                    font-weight: normal;
+                    font-size: 12px;
+                    margin-top: 10px;
+                    &:not(:last-child) {
+                        margin-right: 10px;
+                    }
+                }
+            }
         }
         .footer-input {
             textarea {

modules/chat/client/views/chat.client.view.html

@@ -32,7 +32,18 @@
 
                 <div class="chat-footer">
                     <div class="footer-function">
-
+                        <div class="pull-right margin-right-20">
+                            <span class="glyphicon glyphicon-refresh" title="{{'CHAT_CLEAN_MESSAGE' | translate}}" aria-hidden="true"
+                                  ng-click="vm.onCleanClicked();"></span>
+                        </div>
+                        <div class="pull-right margin-right-20 font-style-list">
+                            <label title="{{'CHAT_BOLD_MESSAGE' | translate}}">
+                                <input type="checkbox" ng-model="vm.fontStyleBold"> <b>Font Bold</b>
+                            </label>
+                            <label title="{{'CHAT_ITALIC_MESSAGE' | translate}}">
+                                <input type="checkbox" ng-model="vm.fontStyleItalic"> <i>Font Italic</i>
+                            </label>
+                        </div>
                     </div>
                     <div class="footer-input">
                         <textarea class="form-control" id="messageText" name="messageText" ng-model="vm.messageText"

modules/core/client/app/trans-string-en.js

@@ -288,6 +288,10 @@
     CHAT_PLACEHOLDER_INPUT: 'input new message and press enter',
     CHAT_USER_JOIN: 'is now connected and join the room.',
     CHAT_USER_QUIT: 'is now disconnect and quit the room.',
+    CHAT_CLEAN_MESSAGE: 'Clean message list',
+    CHAT_BOLD_MESSAGE: 'Bold font style, please use tag: <b>message</b>',
+    CHAT_ITALIC_MESSAGE: 'Italic font style, please use tag: <i>message</i>',
+    CHAT_MESSAGE_ALREADY_CLEAN: '*** chat messages list already be cleaned',
 
     //footer view
     MIT_PROTOCOL: 'The source of this project is protected by <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> open source protocol',

modules/core/client/app/trans-string-zh.js

@@ -288,6 +288,10 @@
     CHAT_PLACEHOLDER_INPUT: '输入聊天消息，按回车键发送',
     CHAT_USER_JOIN: '已加入聊天室~',
     CHAT_USER_QUIT: '已退出聊天室~',
+    CHAT_CLEAN_MESSAGE: '清空聊天记录',
+    CHAT_BOLD_MESSAGE: '粗体字风格',
+    CHAT_ITALIC_MESSAGE: '斜体字风格',
+    CHAT_MESSAGE_ALREADY_CLEAN: '*** 聊天消息已被清空',
 
     //footer view
     MIT_PROTOCOL: '本项目源码受 <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> 开源协议保护',

modules/core/client/less/margin.less

@@ -42,6 +42,46 @@
     margin-bottom: 50px;
 }
 
+.margin-right-10 {
+    margin-right: 10px;
+}
+
+.margin-right-20 {
+    margin-right: 20px;
+}
+
+.margin-right-30 {
+    margin-right: 30px;
+}
+
+.margin-right-40 {
+    margin-right: 40px;
+}
+
+.margin-right-50 {
+    margin-right: 50px;
+}
+
+.margin-left-10 {
+    margin-left: 10px;
+}
+
+.margin-left-20 {
+    margin-left: 20px;
+}
+
+.margin-left-30 {
+    margin-left: 30px;
+}
+
+.margin-left-40 {
+    margin-left: 40px;
+}
+
+.margin-left-50 {
+    margin-left: 50px;
+}
+
 .padding-top-10 {
     padding-top: 10px;
 }