diff --git a/public/css/game-pane.styl b/public/css/game-pane.styl index 67f33b6d8f..34ad09f5f9 100644 --- a/public/css/game-pane.styl +++ b/public/css/game-pane.styl @@ -67,8 +67,6 @@ background: white; border: 1px solid #a4a4a4; z-index: 10; - margin-left: -435px; - margin-top: -355px; } .list-at-user li { diff --git a/public/js/controllers/groupsCtrl.js b/public/js/controllers/groupsCtrl.js index 4c8e41685e..dff71085cf 100644 --- a/public/js/controllers/groupsCtrl.js +++ b/public/js/controllers/groupsCtrl.js @@ -79,7 +79,7 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A } ]) - .controller('AutocompleteCtrl', ['$scope', 'Groups', 'User', function ($scope,Groups,User) { + .controller('AutocompleteCtrl', ['$scope', 'Groups', 'User', 'InputCaret', function ($scope,Groups,User,InputCaret) { $scope.clearUserlist = function() { $scope.response = []; $scope.usernames = []; @@ -102,7 +102,25 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A } } + $scope.caretChanged = function(newCaretPos) { + var relativeelement = $('.-options'); + var textarea = $('.chat-textarea'); + var userlist = $('.list-at-user'); + var offset = { + x: textarea.offset().left - relativeelement.offset().left, + y: textarea.offset().top - relativeelement.offset().top, + }; + if(relativeelement) { + var caretOffset = InputCaret.getPosition(textarea); + userlist.css({ + left: caretOffset.left + offset.x, + top: caretOffset.top + offset.y + 16 + }); + } + } + $scope.$watch('group.chat',$scope.chatChanged); + $scope.$watch(function () { return $scope.caretPos; },$scope.caretChanged); }]) .controller('ChatCtrl', ['$scope', 'Groups', 'User', function($scope, Groups, User){ diff --git a/views/options/social/chat-box.jade b/views/options/social/chat-box.jade index 09a6460346..445d629e59 100644 --- a/views/options/social/chat-box.jade +++ b/views/options/social/chat-box.jade @@ -3,7 +3,7 @@ form(ng-submit='postChat(group,_chatMessage)') //FIXME ng-model makes this painfully slow! using jquery for now, which is really non-angular-like .control-group.option-large(ng-controller='AutocompleteCtrl') textarea.chat-textarea.option-content(style='height:6em;', ui-keypress='{13:"postChat(group,_chatMessage)"}', ng-model='_chatMessage', flag='@', at-user, auto-complete) - span.user-list(ng-show='!isAtListHidden', auto-follow='true') + span.user-list(ng-show='!isAtListHidden') ul.list-at-user li(ng-repeat='user in users | filter:query.text | limitTo: 5', ng-click='autoComplete(user)') span.username.label(class='label-contributor-{{user.contributor.level}}') {{user.user}}