basic integration of a static action menu

Author: kerphi

client/pfc-core.js

@@ -153,7 +153,7 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
       html.find('div.status').addClass('st-op');
     }
     if (pfc.options.show_avatar) {
-      html.find('div.avatar').append('<img src="http://www.gravatar.com/avatar/' + pfc.md5(user.email) + '?d=wavatar&amp;s=20" alt="" />');
+      html.find('div.avatar').append('<img src="http://www.gravatar.com/avatar/' + pfc.md5(user.email) + '?d=wavatar&amp;s=30" alt="" />');
     }
 
     // get all userids from the list (could be cached)

client/pfc-init.js

@@ -30,7 +30,8 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
     // load the interface
     pfc.loadHTML();
     pfc.loadResponsiveBehavior();
-    pfc.loadThemeUI();
+    pfc.loadActionMenu();
+    pfc.loadThemeUI();    
 
     // run quick tests
     pfc.checkServerConfig(pfc.startChatLogic);
@@ -469,7 +470,23 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
     }
 
   };
-  
+
+  /**
+   * Load action menu used for interactions with users in the list
+   */
+  pfc.loadActionMenu = function () {  
+    $(".avatar").live("mouseenter",function () {
+      var menu = '<div class="actions-menu"><ul class="menu">';
+      menu += '<li><a href="#">Give operator rights</a></li>';
+      menu += '<li><a href="#">Remove operator rights</a></li>';
+      menu += '<li><a href="#">Kick</a></li>';
+      menu += '<li><a href="#">Ban</a></li>';
+      menu += '</ul></div>';
+      $(this).append(menu);
+    }).live("mouseleave", function () {
+      $(".actions-menu").remove();
+    });
+  };
 
   /**
    * Load specific javascript defined by the theme

client/themes/default/img/bt-actions-menu.png

@@ -375,12 +375,51 @@ div.pfc-content {
           overflow: hidden;
         }
         .avatar {
-          max-height: @users-avatarlist-size;
-          max-width: @users-avatarlist-size;
+          height: @users-avatarlist-size;
+          width: @users-avatarlist-size;
           position: absolute;
           right: @users-avatar-position-right;
           top: @users-avatar-position-top;
           bottom: 0;
+          img {
+            height: @users-avatarlist-size;
+            width: @users-avatarlist-size;
+          }
+          .actions-menu {
+            position: absolute;
+            display: none;
+            height: @users-avatarlist-size;
+            width: @users-avatarlist-size;
+            top: 0;
+            left: 0;
+            background: @users-avatar-url-action-menu center center no-repeat;
+            .menu {
+                position: absolute;
+                top: @users-avatarlist-size;
+                right: 0;
+                width: 170px;
+                padding: 0;
+                border: 1px solid @footer-donate-bg-color-hover;
+                background: @dialog-bg-color;
+                z-index: 500;
+                li {
+                  height: auto;
+                  border: 0;
+                  a {
+                    display: block;
+                    padding: 5px 10px;
+                    &:hover {
+                      text-decoration: none;
+                      background-color: @footer-donate-bg-color-hover;
+                    }
+                  }
+                }
+            }
+          }
+          &:hover > .actions-menu {
+            display: block;
+            cursor: pointer;
+          }
         }
 
         .status {

client/themes/default/pfc-full.less

@@ -279,8 +279,9 @@
 @users-role-title-border-color: @users-border-color;
 
 @users-avatarlist-size: 30px;    
-@users-avatar-position-top: 5px;
+@users-avatar-position-top: 0;
 @users-avatar-position-right: 5px;
+@users-avatar-url-action-menu: url(img/bt-actions-menu.png);
 
 @users-icon-width: 16px;
 @users-icon-height: 16px;