Pin personal note.

CHANGELOG

@@ -38,6 +38,7 @@ Motions:
   change recommendations [#3288]
 - Added inline Editing for motion reason [#3361].
 - Added multiselect filter for motion comments [#3372].
+- Added support for pinning personal notes to the window [#3360].
 
 Users:
 - User without permission to see users can now see agenda item speakers,

openslides/core/static/css/app.css

@@ -742,6 +742,31 @@ img {
     display: none;
 }
 
+/** Motion personal note **/
+#personalNote.pinned {
+    position: fixed;
+    z-index: 1000;
+    bottom: 0;
+    margin: 0px 20px;
+    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
+    -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
+    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
+}
+
+#personalNote.pinned .col-sm-12 {
+    overflow-x: auto;
+    max-height: 200px;
+}
+
+#personalNoteSpacer {
+    display: none;
+    height: 220px;
+}
+
+#personalNoteSpacer.activeSpace {
+    display: block;
+}
+
 /** Projector sidebar column **/
 
 #content .col2 {
@@ -1340,6 +1365,15 @@ img {
     white-space: nowrap;
 }
 
+.rotate-45-deg-right {
+    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
 .optional { /* show optional column */
     display: auto;
 }
@@ -1907,4 +1941,7 @@ tr.selected td {
     #groups-table .perm-head {
         width: 150px;
     }
+    .personalNoteFixed {
+        width: 100%;
+    }
 }

openslides/core/static/templates/index.html

@@ -210,7 +210,7 @@
     </div>
 
     <!-- col1 -->
-    <div class="col1" ng-class="{
+    <div id="main-column" class="col1" ng-class="{
         'sidebar-max': isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
         'sidebar-min': !isProjectorSidebar && operator.hasPerms('core.can_see_projector'),
         'sidebar-none': !operator.hasPerms('core.can_see_projector') }">

openslides/motions/static/js/motions/site.js

@@ -1485,6 +1485,10 @@ angular.module('OpenSlidesApp.motions.site', [
             return Boolean(isAllowed);
         };
         // personal note
+        // For pinning the personal note container we need to adjust the width with JS. We
+        // do not use angular here, because on every window resize a digist cycle would trigger.
+        // This costs too much performance. We use JQuery here, because it is fast for DOM
+        // manipulation and very responsive.
         $scope.toggleStar = function () {
             if ($scope.motion.personalNote) {
                 $scope.motion.personalNote.star = !$scope.motion.personalNote.star;
@@ -1493,6 +1497,22 @@ angular.module('OpenSlidesApp.motions.site', [
             }
             PersonalNoteManager.saveNote($scope.motion, $scope.motion.personalNote);
         };
+        $scope.personalNotePinned = false;
+        $scope.pinPersonalNote = function () {
+            $scope.personalNotePinned = !$scope.personalNotePinned;
+            if ($scope.personalNotePinned) {
+                resizePersonalNoteContainer();
+            } else {
+                $('#personalNote').css('width', '');
+            }
+        };
+        var resizePersonalNoteContainer = function () {
+            if ($scope.personalNotePinned) {
+                var width = $('#main-column').width() - 40; // Subtract 2x20px margin
+                $('#personalNote').css('width', width + 'px');
+            }
+        };
+        $(window).resize(resizePersonalNoteContainer);
 
         // Inline editing functions
         $scope.inlineEditing = MotionInlineEditing.createInstance($scope, motion,

openslides/motions/static/templates/motions/motion-detail/personal-note.html

@@ -1,4 +1,4 @@
-<div class="details">
+<div id="personalNote" class="details" ng-class="{'pinned': personalNotePinned}">
   <div class="row">
     <!-- inline editing toolbar -->
     <div class="motion-toolbar">
@@ -18,6 +18,9 @@
           <i class="fa fa-times-circle"></i>
           <translate>Inline editing</translate>
         </button>
+        <button ng-click="pinPersonalNote()" class="btn btn-sm btn-default">
+          <i class="fa fa-thumb-tack" ng-class="{'rotate-45-deg-right': !personalNotePinned}"></i>
+        </button>
       </div>
       <h3 class="toolbar-left" translate>Personal note</h3>
     </div>
@@ -39,3 +42,4 @@
     </div>
   </div>
 </div>
+<div id="personalNoteSpacer" ng-class="{'activeSpace': personalNotePinned}"></div>