add mt-scale directive to scale element

taobataoma · May 14, 2017 · 9b2ac8b · 9b2ac8b
1 parent 85cd88d
commit 9b2ac8b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/modules/chat/client/controllers/chat.client.controller.js b/modules/chat/client/controllers/chat.client.controller.js
@@ -148,9 +148,7 @@
       };
 
       // Emit a 'chatMessage' message event
-      Socket.emit('chatMessage', message, function (res) {
-        console.log(res);
-      });
+      Socket.emit('chatMessage', message);
 
       // Clear the message text
       vm.messageText = '';

diff --git a/modules/chat/client/less/chat.less b/modules/chat/client/less/chat.less
@@ -251,13 +251,7 @@
         .user-item-wrapper {
             padding-left: 35px;
             margin: 6px 6px;
-            transition-property: transform, opacity;
-            transition-duration: .5s;
-            transition-timing-function: ease;
             &:hover {
-                /* csslint ignore:start */
-                transform: scale(1.1);
-                /* csslint ignore:end */
                 .ban-kick {
                     display: inline;
                 }
@@ -268,10 +262,10 @@
                 color: @mt-base-color;
                 display: none;
                 float: right;
-                position: absolute;
-                right: 0;
-                top: 0;
-                padding: 8px 5px;
+                position: relative;
+                right: -10px;
+                top: -26px;
+                padding: 9px 5px;
                 width: 24px;
                 height: 100%;
                 border-top-right-radius: 3px;

diff --git a/modules/chat/client/views/chat.client.view.html b/modules/chat/client/views/chat.client.view.html
@@ -65,7 +65,7 @@
                 <div class="user-body">
                     <ul class="list-unstyled">
                         <li ng-repeat="u in vm.users | orderBy:['-isAdmin', '-isOper', '-isVip', 'username']">
-                            <div class="user-item-wrapper" ng-dblclick="vm.onUserListItemDblClicked(u);">
+                            <div class="user-item-wrapper" mt-scale="{scale: 1.1, duration: '.5s'}" ng-dblclick="vm.onUserListItemDblClicked(u);">
                                 <a class="user-item-avatar">
                                     <img title="@{{u.displayName}}" ng-src="/{{u.profileImageURL}}">
                                 </a>

diff --git a/modules/core/client/directives/mt-scale.client.directive.js b/modules/core/client/directives/mt-scale.client.directive.js
@@ -0,0 +1,36 @@
+(function () {
+  'use strict';
+
+  angular.module('core')
+    .directive('mtScale', mtScale);
+
+  function mtScale() {
+    var directive = {
+      restrict: 'A',
+      link: link
+    };
+
+    return directive;
+
+    function link(scope, element, attrs) {
+      if (attrs.mtScale) {
+        var mtScale = JSON.parse(JSON.stringify(eval('(' + attrs.mtScale + ')')));
+        console.log(mtScale);
+        element.css('transition-property', 'transform, opacity');
+        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) + ')');
+        });
+        element.on('mouseleave', function () {
+          element.css('transform', 'scale(1)');
+        });
+
+      }
+    }
+  }
+}());