Improve display of component comments, card notes

NEWS

@@ -16,6 +16,7 @@ Enhancements
  - [web] expose user's defaults and settings inline
  - [web] can now discard incoming mails during vacation
  - [web] support both backspace and delete keys in Mail and Contacts modules
+ - [web] improved display of appointment/task comments and card notes
 
 Bug fixes
  - [web] respect SOGoLanguage and SOGoSupportedLanguages (#4169)

UI/Templates/ContactsUI/UIxContactViewTemplate.wox

@@ -177,7 +177,7 @@
               <div class="pseudo-input-container" ng-repeat="note in editor.card.notes">
                 <label class="pseudo-input-label"><var:string label:value="Note"/></label>
                 <div class="pseudo-input-field">
-                  <div ng-bind-html="note.value | ln2br"><!-- note --></div>
+                  <div ng-bind-html="::note.value | txt2html"><!-- note --></div>
                 </div>
               </div>
             </div>

UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox

@@ -312,7 +312,7 @@
       <md-dialog-content class="md-default-theme md-bg md-warn md-padding sg-dialog-message ng-hide"
                          ng-show="editor.attendeeConflictError.conflicts">
         <div layout="row" layout-align="space-between start" layout-fill="layout-fill">
-          <div class="sg-padded--bottom" ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | ln2br "><!-- warning --></div>
+          <div class="sg-padded--bottom" ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | txt2html"><!-- warning --></div>
           <md-button class="md-icon-button" ng-click="editor.edit(eventForm)">
             <md-icon label:aria-label="Close">close</md-icon>
           </md-button>

UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox

@@ -128,9 +128,9 @@
           <p ng-repeat="url in ::editor.component.attachUrls"><a target="_new" ng-href="{{url.value}}">{{url.value}}</a></p>
         </md-list-item>
         <!-- comment -->
-        <md-list-item ng-show="editor.component.comment">
+        <md-list-item ng-show="::editor.component.comment">
           <md-icon>mode_comment</md-icon>
-          <p>{{::editor.component.comment}}</p>
+          <p ng-bind-html="::editor.component.comment | txt2html"><!-- comment --></p>
         </md-list-item>
         <!-- repeat -->
         <md-list-item ng-show="editor.component.$isRecurrent">

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -772,7 +772,7 @@
       <md-dialog-content class="md-dialog-content"
                          ng-show="$AttendeeConflictDialogController.conflictError.attendee_email">
         <h2 class="md-title">{{ ::'Warning' | loc }}</h2>
-        <p ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | ln2br"><!-- warning --></p>
+        <p ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | txt2html"><!-- warning --></p>
         <md-list>
           <md-list-item>
             <md-icon>person</md-icon> {{$AttendeeConflictDialogController.conflictError.attendee_name}} ({{$AttendeeConflictDialogController.conflictError.attendee_email}})

UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox

@@ -96,9 +96,9 @@
           <p><a ng-href="{{url.value}}" target="_new">{{url.value}}</a></p>
         </md-list-item>
         <!-- comment -->
-        <md-list-item ng-show="editor.component.comment">
+        <md-list-item ng-show="::editor.component.comment">
           <md-icon>mode_comment</md-icon>
-          <p>{{::editor.component.comment}}</p>
+          <p ng-bind-html="::editor.component.comment | txt2html"></p>
         </md-list-item>
         <!-- repeat -->
         <md-list-item ng-show="editor.component.$isRecurrent">

UI/WebServerResources/js/Common/ln2br.filter.js

@@ -1,21 +0,0 @@
-/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-
-/**
- * ln2br - A filter to convert line feeds and carriage returns to html line breaks
- * @memberof SOGo.Common
- */
-(function () {
-  'use strict';
-
-  /**
-   * @ngInject
-   */
-  function ln2br() {
-    return function(text) {
-      return text ? String(text).replace(/\r?\n/gm, '<br>') : undefined;
-    };
-  }
-
-  angular.module('SOGo.Common')
-    .filter('ln2br', ln2br);
-})();

UI/WebServerResources/js/Common/txt2html.filter.js

@@ -0,0 +1,23 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+/**
+ * txt2html - A filter to convert line feeds and carriage returns to html line breaks
+ * @memberof SOGo.Common
+ */
+(function () {
+  'use strict';
+
+  /**
+   * @ngInject
+   */
+  txt2html.$inject = ['linkyFilter'];
+  function txt2html(linkyFilter) {
+    return function(text) {
+      // Linky will first sanitize the text; linefeeds are therefore encoded.
+      return text ? String(linkyFilter(text, ' _blank')).replace(/&#10;/gm, '<br>') : undefined;
+    };
+  }
+
+  angular.module('SOGo.Common')
+    .filter('txt2html', txt2html);
+})();