T1365: Localize Confidential/Private/Cancelled badge in event info dialog

plugins/calendar/calendar_ui.js

@@ -423,7 +423,7 @@ function rcube_calendar_ui(settings)
       if ($dialog.is(':ui-dialog'))
         $dialog.dialog('close');
 
-      // remove status-* classes
+      // remove status-* and sensitivity-* classes
       $dialog.removeClass(function(i, oldclass) {
           var oldies = String(oldclass).split(' ');
           return $.grep(oldies, function(cls) { return cls.indexOf('status-') === 0 || cls.indexOf('sensitivity-') === 0 }).join(' ');
@@ -471,11 +471,13 @@ function rcube_calendar_ui(settings)
 
       if (event.status) {
         var status_lc = String(event.status).toLowerCase();
-        $('#event-status').show().children('.event-text').html(Q(rcmail.gettext('status-'+status_lc,'calendar')));
+        $('#event-status').show().children('.event-text').text(rcmail.gettext('status-'+status_lc,'calendar'));
+        $('#event-status-badge > span').text(rcmail.gettext('status-'+status_lc,'calendar'));
         $dialog.addClass('status-'+status_lc);
       }
       if (event.sensitivity && event.sensitivity != 'public') {
-        $('#event-sensitivity').show().children('.event-text').html(Q(sensitivitylabels[event.sensitivity]));
+        $('#event-sensitivity').show().children('.event-text').text(sensitivitylabels[event.sensitivity]);
+        $('#event-status-badge > span').text(sensitivitylabels[event.sensitivity]);
         $dialog.addClass('sensitivity-'+event.sensitivity);
       }
       if (event.created || event.changed) {

plugins/calendar/skins/classic/calendar.css

@@ -548,24 +548,54 @@ a.miniColors-trigger {
 	margin: 0 -0.2em;
 }
 
-#eventshow.status-cancelled {
-	background: url(images/badge_cancelled.png) top right no-repeat;
+#event-status-badge {
+	width: 100px;
+	height: 100px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	overflow: hidden;
 }
 
-#eventshow.sensitivity-private {
-	background: url(images/badge_private.png) top right no-repeat;
+#event-status-badge span {
+	display: none;
+	text-transform: uppercase;
+	width: 150px;
+	height: 20px;
+	line-height: 20px;
+	display: block;
+	position: absolute;
+	left: -20px;
+	top: 35px;
+	padding-left: 10px;
+	text-align: center;
+	font-weight: bold;
+	font-size: 12px;
+	color: #fff;
+	box-shadow: 1px 1px 2px #ccc, -1px -1px 2px #ccc;
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
 }
 
-#eventshow.sensitivity-confidential {
-	background: url(images/badge_confidential.png) top right no-repeat;
+#eventshow.status-cancelled #event-status-badge span {
+	background: url(images/badge.png) 26px -24px no-repeat #cc0000;
 }
 
-.sensitivity-private #event-title {
-	margin-right: 50px;
+#eventshow.sensitivity-private #event-status-badge span {
+	background: url(images/badge.png) 40px -52px no-repeat #0066ff;
 }
 
-.sensitivity-confidential #event-title {
-	margin-right: 60px;
+#eventshow.sensitivity-confidential #event-status-badge span {
+	background: url(images/badge.png) 20px 2px no-repeat #cc0000;
+}
+
+#eventshow.status-cancelled #event-title,
+#eventshow.sensitivity-private #event-title,
+#eventshow.sensitivity-confidential #event-title {
+	margin-right: 80px;
 }
 
 #eventshow div.event-line {

plugins/calendar/skins/classic/iehacks.css

@@ -44,14 +44,6 @@ html #calendartoolbar a.buttonPas {
 	width: 102%;
 }
 
-#eventshow.sensitivity-private {
-	background-image: url(images/badge_private.gif);
-}
-
-#eventshow.sensitivity-confidential {
-	background-image: url(images/badge_confidential.gif);
-}
-
 .fc-day-content {
 	cursor: default;
 }

plugins/calendar/skins/classic/templates/calendar.html

@@ -51,7 +51,7 @@
     <li><roundcube:button command="calendar-edit" label="calendar.edit" classAct="active" /></li>
     <li><roundcube:button command="calendar-delete" label="delete" classAct="active" /></li>
     <roundcube:if condition="env:calendar_driver == 'kolab'" />
-    <li><roundcube:button command="calendar-remove" label="calendar.remove" classAct="active" /></li>
+    <li><roundcube:button command="calendar-remove" label="calendar.removelist" classAct="active" /></li>
     <roundcube:endif />
     <li><roundcube:button command="calendar-showurl" label="calendar.showurl" classAct="active" /></li>
     <roundcube:if condition="env:calendar_driver == 'kolab'" />
@@ -62,6 +62,7 @@
 
 <div id="eventshow" class="uidialog">
   <h1 id="event-title">Event Title</h1>
+  <div id="event-status-badge"><span></span></div>
   <div class="event-section" id="event-location">Location</div>
   <div class="event-section" id="event-date">From-To</div>
   <div class="event-section" id="event-description">

plugins/calendar/skins/larry/calendar.css

@@ -771,24 +771,54 @@ a.miniColors-trigger {
 	margin: 0 -0.2em;
 }
 
-.calendarmain .eventdialog.status-cancelled {
-	background: url(images/badge_cancelled.png) top right no-repeat;
+#event-status-badge {
+	width: 100px;
+	height: 100px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	overflow: hidden;
 }
 
-.calendarmain .eventdialog.sensitivity-private {
-	background: url(images/badge_private.png) top right no-repeat;
+#event-status-badge span {
+	display: none;
+	text-transform: uppercase;
+	width: 150px;
+	height: 20px;
+	line-height: 20px;
+	display: block;
+	position: absolute;
+	left: -20px;
+	top: 35px;
+	padding-left: 10px;
+	text-align: center;
+	font-weight: bold;
+	font-size: 12px;
+	color: #fff;
+	box-shadow: 1px 1px 2px #ccc, -1px -1px 2px #ccc;
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
 }
 
-.calendarmain .eventdialog.sensitivity-confidential {
-	background: url(images/badge_confidential.png) top right no-repeat;
+.eventdialog.status-cancelled #event-status-badge span {
+	background: url(images/badge.png) 26px -24px no-repeat #cc0000;
 }
 
-.calendarmain .sensitivity-private #event-title {
-	margin-right: 50px;
+.eventdialog.sensitivity-private #event-status-badge span {
+	background: url(images/badge.png) 40px -52px no-repeat #0066ff;
 }
 
+.eventdialog.sensitivity-confidential #event-status-badge span {
+	background: url(images/badge.png) 20px 2px no-repeat #cc0000;
+}
+
+.calendarmain .status-cancelled #event-title,
+.calendarmain .sensitivity-private #event-title,
 .calendarmain .sensitivity-confidential #event-title {
-	margin-right: 60px;
+	margin-right: 80px;
 }
 
 .calendarmain .eventdialog div.event-line {
@@ -805,11 +835,6 @@ a.miniColors-trigger {
 	margin-left: 2em;
 }
 
-.calendarmain .eventdialog #event-rsvp-comment,
-.calendarmain .eventdialog #event-created-changed {
-	margin-top: 0.6em;
-}
-
 .eventdialog .event-text-old,
 .eventdialog .event-text-new,
 .eventdialog .event-text-diff {

plugins/calendar/skins/larry/templates/calendar.html

@@ -82,6 +82,7 @@
 
 <div id="eventshow" class="uidialog eventdialog" aria-hidden="true">
 	<h1 id="event-title">Event Title</h1>
+	<div id="event-status-badge"><span></span></div>
 	<div class="event-section" id="event-location">Location</div>
 	<div class="event-section" id="event-date">From-To</div>
 	<div class="event-section" id="event-description">