mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-03-13 10:51:24 +00:00
5c944617d0
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.
45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
|
|
(function() {
|
|
/* jshint validthis: true */
|
|
'use strict';
|
|
|
|
/*
|
|
* sgCategoryStylesheet - Add CSS stylesheet for a category's color
|
|
* @memberof SOGo.SchedulerUI
|
|
* @restrict attribute
|
|
* @param {object} ngModel - the object literal describing the category
|
|
* @example:
|
|
|
|
<sg-category-stylesheet
|
|
ng-repeat="category in categories"
|
|
ng-model="category" />
|
|
*/
|
|
function sgCategoryStylesheet() {
|
|
return {
|
|
restrict: 'E',
|
|
require: 'ngModel',
|
|
scope: {
|
|
ngModel: '='
|
|
},
|
|
replace: true,
|
|
template: [
|
|
'<style type="text/css">',
|
|
/* Background color */
|
|
' .bg-category{{ ngModel.id | cssEscape }} {',
|
|
' background-color: {{ ngModel.color }} !important;',
|
|
' }',
|
|
/* Border color */
|
|
' .bdr-category{{ ngModel.id | cssEscape }} {',
|
|
' border-color: {{ ngModel.color }} !important;',
|
|
' }',
|
|
'</style>'
|
|
].join('')
|
|
};
|
|
}
|
|
|
|
angular
|
|
.module('SOGo.SchedulerUI')
|
|
.directive('sgCategoryStylesheet', sgCategoryStylesheet);
|
|
})();
|