From b7f87be94ec3d61c4bb354a3ef78eee1a442b0ae Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Sun, 14 May 2017 18:42:26 +0800
Subject: [PATCH] add chat message font color style select function

---
 .../controllers/chat.client.controller.js     | 59 ++++++++++++++++++-
 modules/chat/client/less/chat.less            | 28 +++++++--
 .../chat/client/views/chat.client.view.html   | 29 ++++++++-
 modules/core/client/app/trans-string-en.js    |  1 +
 modules/core/client/app/trans-string-zh.js    |  1 +
 .../directives/mt-scale.client.directive.js   | 11 ++--
 modules/core/client/less/popover.less         | 30 ----------
 7 files changed, 116 insertions(+), 43 deletions(-)
 delete mode 100644 modules/core/client/less/popover.less

diff --git a/modules/chat/client/controllers/chat.client.controller.js b/modules/chat/client/controllers/chat.client.controller.js
index 2ba51e43..a1ae4522 100644
--- a/modules/chat/client/controllers/chat.client.controller.js
+++ b/modules/chat/client/controllers/chat.client.controller.js
@@ -17,6 +17,27 @@
     vm.messageText = '';
     vm.scrollAtBottom = true;
 
+    vm.selectedFontColor = '#000';
+    vm.fontColorPopover = {
+      templateUrl: 'fontColor.html',
+      isOpen: false
+    };
+
+    vm.colorList = [
+      '#000000',
+      '#000080',
+      '#0000FF',
+      '#00CC00',
+      '#008000',
+      '#008080',
+      '#800000',
+      '#800080',
+      '#808000',
+      '#DC143C',
+      '#FF1493',
+      '#FF4500'
+    ];
+
     init();
 
     /**
@@ -144,7 +165,8 @@
     vm.sendMessage = function () {
       // Create a new message object
       var message = {
-        text: sanitizeHTML(vm.messageText)
+        text: sanitizeHTML(vm.messageText),
+        fontColor: vm.selectedFontColor
       };
 
       // Emit a 'chatMessage' message event
@@ -298,6 +320,10 @@
         newmsg = newmsg.replace(m, atulink);
       });
 
+      if (msg.fontColor) {
+        newmsg = '<font color="' + msg.fontColor + '">' + newmsg + '</font>'
+      }
+
       return newmsg || '&nbsp;';
     };
 
@@ -387,5 +413,36 @@
           Socket.emit('ban', message);
         });
     };
+
+    /**
+     * onColorItemClicked
+     * @param c
+     */
+    vm.onColorItemClicked = function (c) {
+      angular.element('#font-color-icon').css('color', c);
+      angular.element('#messageText').css('color', c);
+
+      vm.fontColorPopover.isOpen = false;
+      vm.selectedFontColor = c;
+      angular.element('#messageText').trigger('focus');
+    };
+
+    /**
+     * onColorItemMouseEnter
+     * @param c
+     */
+    vm.onColorItemMouseEnter = function (c) {
+      angular.element('#font-color-icon').css('color', c);
+      angular.element('#messageText').css('color', c);
+    };
+
+    /**
+     * onColorItemMouseLeave
+     * @param c
+     */
+    vm.onColorItemMouseLeave = function (c) {
+      angular.element('#font-color-icon').css('color', vm.selectedFontColor);
+      angular.element('#messageText').css('color', vm.selectedFontColor);
+    };
   }
 }());
diff --git a/modules/chat/client/less/chat.less b/modules/chat/client/less/chat.less
index a902f74b..8119c967 100644
--- a/modules/chat/client/less/chat.less
+++ b/modules/chat/client/less/chat.less
@@ -139,14 +139,14 @@
                 display: inline-block;
                 .chat-message-item {
                     position: relative;
-                    border: 1px solid @chat-message-me-border;
+                    border: 1px solid lighten(@chat-message-me-border, 15%);
                     border-radius: 3px;
                     &:after {
                         content: '';
                         position: absolute;
                         border-style: solid;
                         border-width: 6px 0 6px 6px;
-                        border-color: transparent @chat-message-me-background;
+                        border-color: transparent lighten(@chat-message-me-background, 30%);
                         display: block;
                         width: 0;
                         z-index: 1;
@@ -158,7 +158,7 @@
                         position: absolute;
                         border-style: solid;
                         border-width: 6px 0 6px 6px;
-                        border-color: transparent @chat-message-me-border;
+                        border-color: transparent lighten(@chat-message-me-border, 15%);
                         display: block;
                         width: 0;
                         z-index: 0;
@@ -168,7 +168,7 @@
                     .chat-message-body {
                         text-align: left;
                         padding: 6px;
-                        background-color: @chat-message-me-background;
+                        background-color: lighten(@chat-message-me-background, 30%);
                         border-radius: 3px;
                     }
                 }
@@ -307,4 +307,22 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+.font-color-popover {
+    max-width: 150px;
+    max-height: 130px;
+    width: auto;
+    height: auto;
+}
+
+.color-list {
+    margin: 4px -14px -12px -7px;
+    .color-item {
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        margin-top: -6px;
+        margin-right: 4px;
+    }
+}
diff --git a/modules/chat/client/views/chat.client.view.html b/modules/chat/client/views/chat.client.view.html
index 5068957b..f6578f78 100644
--- a/modules/chat/client/views/chat.client.view.html
+++ b/modules/chat/client/views/chat.client.view.html
@@ -9,7 +9,8 @@
 
                 <div class="chat-body" id="chat-body" mt-scroll="vm.onMessageScroll($event);">
                     <ul class="list-unstyled">
-                        <li class="chat-message-list {{message.type}}" ng-class="{'me': (message.user.username == vm.user.username) && (message.type == 'message')}"
+                        <li class="chat-message-list {{message.type}}"
+                            ng-class="{'me': (message.user.username == vm.user.username) && (message.type == 'message')}"
                             ng-repeat="message in vm.messages" repeat-done="vm.onMessageRepeatDone();">
                             <div ng-class="(message.user.username == vm.user.username) && (message.type == 'message') ? 'chat-message-header-me' : 'chat-message-header'">
                                 <div class="chat-message-header-text">{{message.user.displayName}}　{{message.created | date:'MM-dd HH:mm'}}
@@ -44,6 +45,16 @@
                                 <input type="checkbox" ng-model="vm.fontStyleItalic"> <i>{{'CHAT_FONT_ITALIC' | translate}}</i>
                             </label>
                         </div>
+                        <div class="pull-right margin-right-20">
+                            <span class="glyphicon glyphicon-text-color"
+                                  style="color: {{vm.selectedFontColor}}"
+                                  id="font-color-icon"
+                                  title="{{'CHAT_FONT_COLOR' | translate}}" aria-hidden="true"
+                                  uib-popover-template="vm.fontColorPopover.templateUrl"
+                                  popover-trigger="'outsideClick'"
+                                  popover-placement="top" popover-is-open="vm.fontColorPopover.isOpen"
+                                  popover-class="font-color-popover"></span>
+                        </div>
                     </div>
                     <div class="footer-input">
                         <textarea class="form-control" id="messageText" name="messageText" ng-model="vm.messageText"
@@ -75,7 +86,8 @@
                                          ng-class="{'user-is-admin': u.isAdmin, 'user-is-oper': !u.isAdmin && u.isOper, 'user-is-vip': u.isVip}"
                                          ng-bind="u.displayName"></div>
                                     <span class="glyphicon glyphicon-flash ban-kick" title="{{'CHAT_BAN_KICK' | translate}}" aria-hidden="true"
-                                            ng-click="vm.banKickUser(u);" ng-show="vm.user.isOper && !u.isOper && u.username != vm.user.username"></span>
+                                          ng-click="vm.banKickUser(u);"
+                                          ng-show="vm.user.isOper && !u.isOper && u.username != vm.user.username"></span>
                                 </div>
                             </div>
                         </li>
@@ -84,4 +96,17 @@
             </div>
         </div>
     </div>
+
+
+    <script type="text/ng-template" id="fontColor.html">
+        <div class="color-list">
+            <label ng-repeat="c in vm.colorList">
+                <div style="background-color: {{c}}" class="color-item" mt-scale="{scale: 1.2, duration: '.5s'}"
+                     ng-click="vm.onColorItemClicked(c);"
+                     ng-mouseenter="vm.onColorItemMouseEnter(c);"
+                     ng-mouseleave="vm.onColorItemMouseLeave(c);"></div>
+            </label>
+        </div>
+    </script>
+
 </section>
diff --git a/modules/core/client/app/trans-string-en.js b/modules/core/client/app/trans-string-en.js
index 7ec7ca00..71a363d2 100644
--- a/modules/core/client/app/trans-string-en.js
+++ b/modules/core/client/app/trans-string-en.js
@@ -303,6 +303,7 @@
     CHAT_CONFIRM_BAN_HEADER_TEXT: 'Ban & Kick Confirm',
     CHAT_CONFIRM_BAN_BODY_TEXT: 'Are you sure want to kick this user and ban the ip?',
     CHAT_DISCONNECT: 'disconnect from server, please check your network or chat server is down',
+    CHAT_FONT_COLOR: 'Font color',
 
     //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',
diff --git a/modules/core/client/app/trans-string-zh.js b/modules/core/client/app/trans-string-zh.js
index fd625e33..fc55b518 100644
--- a/modules/core/client/app/trans-string-zh.js
+++ b/modules/core/client/app/trans-string-zh.js
@@ -303,6 +303,7 @@
     CHAT_CONFIRM_BAN_HEADER_TEXT: '踢出确认',
     CHAT_CONFIRM_BAN_BODY_TEXT: '你确定要把该用户踢出聊天室并禁止他的ip登录吗?',
     CHAT_DISCONNECT: '已与服务器断开连接，请检查网络或聊天服务器已关闭',
+    CHAT_FONT_COLOR: '字体颜色',
 
     //footer view
     MIT_PROTOCOL: '本项目源码受 <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> 开源协议保护',
diff --git a/modules/core/client/directives/mt-scale.client.directive.js b/modules/core/client/directives/mt-scale.client.directive.js
index 6a23ae81..1da3faaa 100644
--- a/modules/core/client/directives/mt-scale.client.directive.js
+++ b/modules/core/client/directives/mt-scale.client.directive.js
@@ -13,16 +13,17 @@
     return directive;
 
     function link(scope, element, attrs) {
-      if (attrs.mtScale) {
+      scope.$watch(attrs.mtScale, function (s) {
+
         var mtScale = JSON.parse(JSON.stringify(eval('(' + attrs.mtScale + ')')));
+
         console.log(mtScale);
+
         element.css('transition-property', 'transform, opacity');
-        console.log('mtScale.duration=' + mtScale['duration']);
+        console.log('mtScale.duration=' + mtScale.duration);
         element.css('transition-duration', mtScale.duration || '.5s');
-        console.log('mtScale.function=' + mtScale.function);
         element.css('transition-timing-function', mtScale.function || 'ease');
 
-        console.log('mtScale.scale=' + mtScale.scale);
         element.on('mouseenter', function () {
           element.css('transform', 'scale(' + (mtScale.scale || 1.1) + ')');
         });
@@ -30,7 +31,7 @@
           element.css('transform', 'scale(1)');
         });
 
-      }
+      });
     }
   }
 }());
diff --git a/modules/core/client/less/popover.less b/modules/core/client/less/popover.less
deleted file mode 100644
index 51d7a6c3..00000000
--- a/modules/core/client/less/popover.less
+++ /dev/null
@@ -1,30 +0,0 @@
-@import (reference) "../../../core/client/less/mt-var.less";
-
-.popover {
-    width: 300px;
-    max-width: none;
-}
-.popover-200 .popover {
-    width: 200px;
-    max-width: none;
-}
-.popover-150 .popover {
-    width: 150px;
-    max-width: none;
-}
-.popover-400 .popover {
-    width: 400px;
-    max-width: none;
-}
-.popover-500 .popover {
-    width: 500px;
-    max-width: none;
-}
-.popover-600 .popover {
-    width: 600px;
-    max-width: none;
-}
-.popover-800 .popover {
-    width: 800px;
-    max-width: none;
-}