fix(calendar(js)): escape CSS selector names

SOGo uses the name of calendar categories verbatim to construct a CSS
selector without escaping characters such as "/". This patch ensures
those selector names are properly escaped so calendar categories
applied to a calendar event match the according selector and appear
in the correct color.

This patch makes use of the CSS escape API which is supported by all
major browsers. See https://caniuse.com/mdn-api_css_escape.

Also see https://mathiasbynens.be/notes/css-escapes.
This commit is contained in:
Leon Klingele
2022-11-29 11:48:03 +01:00
committed by Leon Klingele
parent 67cf3c0017
commit 5c944617d0
2 changed files with 21 additions and 2 deletions
@@ -26,11 +26,11 @@
template: [
'<style type="text/css">',
/* Background color */
' .bg-category{{ ngModel.id }} {',
' .bg-category{{ ngModel.id | cssEscape }} {',
' background-color: {{ ngModel.color }} !important;',
' }',
/* Border color */
' .bdr-category{{ ngModel.id }} {',
' .bdr-category{{ ngModel.id | cssEscape }} {',
' border-color: {{ ngModel.color }} !important;',
' }',
'</style>'