Messages now allow HTML tags (Fixes #2127)

AUTHORS

@@ -22,3 +22,4 @@ Authors of OpenSlides in chronological order of first contribution:
     Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
     Maximilian Krambach <maximilian.krambach@gmx.de>
     Joel Macht <joel.macht@web.de>
+    Finn Stutzenstein <finn.stutzenstein@hotmail.de>

CHANGELOG

@@ -14,6 +14,7 @@ Agenda:
 Core:
 - Used Django Channels instead of Tornado.
 - Added support for big assemblies with lots of users.
+- Added HTML support for messages on the projector.
 
 Motions:
 - Added origin field.

openslides/core/static/css/app.css

@@ -455,10 +455,33 @@ img {
     padding: 5px 15px;
 }
 
+.col2 .message .panel-heading {
+    padding: 3px 15px;
+}
+
 .col2 .message .panel-body {
     padding: 10px 15px;
 }
 
+.col2 .message .projectorbtn {
+    float: left;
+    width: auto;
+    margin: 5px 10px 5px 0px;
+}
+
+.col2 .message .innermessage {
+    float: left;
+    width: 180px;
+    max-width: 170px;
+    overflow: hidden;
+}
+
+.col2 .message .panel-input {
+    width: 228px;
+    float: left;
+    margin-top: 10px;
+}
+
 .col2 .countdown_timer {
     font-size: 2.2em;
     font-weight: bold;

openslides/core/static/templates/core/projector-controls.html

@@ -170,37 +170,47 @@
       </a>
       <div uib-collapse="!isMessages" ng-cloak>
         <div ng-repeat="message in messages | orderBy: 'index'" id="{{message.uuid}}" class="message panel panel-default">
+
+          <div class="panel-heading">
+              <span>{{ 'Message' | translate }} {{ message.index + 1 }}</span>
+            <!-- remove message button -->
+            <button type="button" class="close"
+              ng-click="removeMessage(message)"
+              title="{{ 'Remove message' | translate}}">
+              <i class="fa fa-times"></i>
+            </button>
+            <button type="button" class="close editicon"
+              ng-click="editMessageFlag=true;"
+              title="{{ 'Edit message' | translate}}">
+              <i class="fa fa-pencil"></i>
+            </button>
+          </div>
+
           <div class="panel-body"
               ng-class="{ 'projected': message.visible }">
-            <!-- project message button -->
-            <a class="btn btn-default btn-sm"
+            <div class="projectorbtn">
+              <!-- project message button -->
+              <a class="btn btn-default btn-sm"
                 ng-model="message.visible"
                 ng-click="showMessage(message)"
                 ng-class="{ 'btn-primary': message.visible }"
-                title="{{ 'Project message' | translate }}">
-              <i class="fa fa-video-camera"></i>
-            </a>
-            &nbsp;&nbsp;
-            {{ message.message }}
-            <!-- remove message button -->
-            <button type="button" class="close"
-                ng-click="removeMessage(message)"
-                title="{{ 'Remove message' | translate}}">
-                <i class="fa fa-times"></i>
-            </button>
-            <button type="button" class="close editicon"
-                ng-click="editMessageFlag=true;"
-                title="{{ 'Edit message' | translate}}">
-                <i class="fa fa-pencil"></i>
-            </button>
-            <div ng-if="editMessageFlag" class="input-group">
-              <input ng-model="message.message" type="text" class="form-control input-sm">
-              <a ng-click="editMessage(message)"
-                  title="{{ 'Save' | translate}}"
-                 class="btn btn-sm btn-primary input-group-addon">
-                <i class="fa fa-check"></i>
+                title="{{ 'Project message' | translate }}" float="left">
+                <i class="fa fa-video-camera"></i>
               </a>
             </div>
+            &nbsp;&nbsp;
+            <div class="innermessage" ng-bind-html="message.message"> </div>
+
+            <div class="panel-input">
+              <div ng-if="editMessageFlag" class="input-group">
+                <input ng-model="message.message" type="text" class="form-control input-sm">
+                <a ng-click="editMessage(message)"
+                  title="{{ 'Save' | translate}}"
+                  class="btn btn-sm btn-primary input-group-addon">
+                  <i class="fa fa-check"></i>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
         <!-- Add message button -->

openslides/core/static/templates/core/slide_message.html

@@ -1,4 +1,4 @@
 <div ng-controller="SlideMessageCtrl">
   <div ng-if="visible" class="message_background"></div>
-  <div ng-if="visible" class="message well">{{ message }}</div>
+  <div ng-if="visible" class="message well" ng-bind-html="message"></div>
 </div>