Reworked on chatbox in base template.

bower.json

@@ -21,6 +21,7 @@
     "angular-ui-tree": "~2.10.0",
     "angular-gettext": "~2.1.2",
     "angular-xeditable": "~0.1.9",
+    "angular-scroll-glue": "~2.0.6",
     "ngBootbox": "~0.1.2",
     "sockjs": "~0.3.4",
     "font-awesome-bower": "~4.4.0",

openslides/core/static/css/app.css

@@ -71,6 +71,10 @@ body {
     margin-top: 5px;
 }
 
+.inline {
+   display: inline;
+}
+
 
 /* ngAnimate classes */
 .animate-item.ng-enter {
@@ -93,8 +97,23 @@ body {
     100% { opacity: 1; background: none; }
 }
 
-
+/* Chatbox */
-
+#chatbox {
+    position: fixed;
+    top: 50px;
+    right: 0;
+    width: 40%;
+    border-color: #dddddd;
+    border-width: 1px;
+    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
+    height: 200px;
+    padding: 0 10px 10px 10px;
+    z-index: 99;
+}
+#chatbox-text {
+    overflow-y: scroll;
+    height: 190px;
+}
 /* Header */
 #header {
     background-color: #333333;

openslides/core/static/js/core/base.js

@@ -101,8 +101,17 @@ angular.module('OpenSlidesApp.core', [
             // Loads all projector data
             Projector.findAll();
 
-            // Loads all chat messages data
+            // Loads all chat messages data and their user_ids
-            ChatMessage.findAll();
+            // TODO: add permission check if user has required chat permission
+            // error if include 'operator' here:
+            // "Circular dependency found: loadGlobalData <- operator <- loadGlobalData"
+            //if (operator.hasPerms("core.can_use_chat")) {
+                ChatMessage.findAll().then( function(chatmessages) {
+                    angular.forEach(chatmessages, function (chatmessage) {
+                        ChatMessage.loadRelations(chatmessage, 'user');
+                    });
+                });
+            //}
 
             // Loads server time and calculates server offset
             $http.get('/core/servertime/').then(function(data) {
@@ -172,20 +181,28 @@ angular.module('OpenSlidesApp.core', [
     }
 ])
 
-.factory('Tag', ['DS', function(DS) {
+.factory('Tag', [
+    'DS',
+    function(DS) {
         return DS.defineResource({
             name: 'core/tag',
         });
-}])
+    }
+])
 
-.factory('Config', ['DS', function(DS) {
+.factory('Config', [
+    'DS',
+    function(DS) {
         return DS.defineResource({
             name: 'core/config',
             idAttribute: 'key',
         });
-}])
+    }
+])
 
-.factory('ChatMessage', ['DS', function(DS) {
+.factory('ChatMessage', [
+    'DS',
+    function(DS) {
         return DS.defineResource({
             name: 'core/chatmessage',
             relations: {
@@ -197,7 +214,8 @@ angular.module('OpenSlidesApp.core', [
                 }
             }
         });
-}])
+    }
+])
 
 /* Model for a projector.
  *

openslides/core/static/js/core/site.js

@@ -13,6 +13,7 @@ angular.module('OpenSlidesApp.core.site', [
     'ngCsvImport',
     'ngSanitize',  // TODO: only use this in functions that need it.
     'ui.select',
+    'luegg.directives',
     'xeditable',
     'ckeditor',
 ])
@@ -752,22 +753,50 @@ angular.module('OpenSlidesApp.core.site', [
     };
 })
 
+// counter of new (unread) chat messages
+.value('NewChatMessages', [])
+
 // ChatMessage Controller
 .controller('ChatMessageCtrl', [
     '$scope',
     '$http',
     'ChatMessage',
-    function ($scope, $http, ChatMessage) {
+    'NewChatMessages',
+    function ($scope, $http, ChatMessage, NewChatMessages) {
         ChatMessage.bindAll({}, $scope, 'chatmessages');
+        $scope.unreadMessages = NewChatMessages.length;
+        $scope.chatboxIsCollapsed = true;
+        $scope.openChatbox = function () {
+            $scope.chatboxIsCollapsed = !$scope.chatboxIsCollapsed;
+            NewChatMessages = [];
+            $scope.unreadMessages = NewChatMessages.length;
+        }
         $scope.sendMessage = function () {
+            angular.element('#messageSendButton').addClass('disabled');
+            angular.element('#messageInput').attr('disabled', '');
             $http.post(
                 '/rest/core/chatmessage/',
                 {message: $scope.newMessage}
             )
             .success(function () {
                 $scope.newMessage = '';
+                angular.element('#messageSendButton').removeClass('disabled');
+                angular.element('#messageInput').removeAttr('disabled');
+            })
+            .error(function () {
+                angular.element('#messageSendButton').removeClass('disabled');
+                angular.element('#messageInput').removeAttr('disabled');
             });
         };
+        // increment unread messages counter for each new message
+        $scope.$watch('chatmessages', function (newVal, oldVal) {
+            // add new message id if there is really a new message which is not yet tracked
+            if ((oldVal[oldVal.length-1].id != newVal[newVal.length-1].id) &&
+                ($.inArray(newVal[newVal.length-1].id, NewChatMessages) == -1)) {
+                NewChatMessages.push(newVal[newVal.length-1].id);
+                $scope.unreadMessages = NewChatMessages.length;
+            }
+        })
     }
 ])
 

openslides/core/static/templates/index.html

@@ -21,10 +21,43 @@
       <span class="navbar-text optional">{{ config('general_event_name') }}</span>
     </div>
     <div class="navbar-right" ng-controller="userMenu">
-      <!-- login/logout button -->
       <div class="btn-group">
         <div ng-if="operator.isAuthenticated()">
 
+          <!-- chatbox -->
+          <div ng-controller="ChatMessageCtrl" os-perms="core.can_use_chat" class="inline">
+            <button ng-click="openChatbox()" class="btn btn-default">
+              <i class="fa fa-comment"></i>
+              <translate>Chat</translate>
+              <span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
+                {{ unreadMessages }}
+              </span>
+            </button>
+            <div id="chatbox" class="well" uib-collapse="chatboxIsCollapsed">
+              <div id="chatbox-text" scroll-glue>
+                <ul class="list-unstyled">
+                  <li ng-repeat="chatmessage in chatmessages">
+                    <small class="grey">{{ chatmessage.timestamp | date:'HH:mm:ss' }}</small>
+                    <small>{{ chatmessage.user.short_name }}:</small>
+                    {{ chatmessage.message }}
+                </ul>
+              </div>
+              <div id="chatbox-form">
+                <form ng-submit="sendMessage()">
+                  <div class="input-group">
+                    <input ng-model="newMessage" id="messageInput" class="form-control" type="text">
+                    <span class="input-group-btn">
+                      <button type="submit" class="btn btn-default" id="messageSendButton">
+                        <i class="fa fa-comment"></i>
+                      </button>
+                    </span>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+
+          <!-- user settings / logout button -->
           <div class="btn-group" dropdown is-open="status.isopen">
             <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
               <i class="fa fa-user"></i>
@@ -149,22 +182,10 @@
     </div><!--/#content-->
   </div><!--/.row-->
 
-  <div ng-controller="ChatMessageCtrl">
-    <ul>
-        <li ng-repeat="chatmessage in chatmessages">
-            {{ chatmessage.user.get_full_name() }} says {{ chatmessage.message }} on {{ chatmessage.timestamp }}
-    </ul>
-    <input ng-model="newMessage">
-    <button ng-click="sendMessage()" class="btn btn-primary" translate>
-        Chat
-     </button>
-  </div>
-
   <hr>
   <footer>
     <small>
-      &copy; Copyright 2011-2015 |
+      &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
-      Powered by <a href="http://openslides.org" target="_blank">OpenSlides</a> |
       <a ui-sref="version">Version</a>
     </small>
   </footer>