couleur des évènements

[pvdh]

Bonjour,

Chez moi, les couleurs restent lorsque les évènements sont passés.

Patrick

[J2m06]

Bonjour,

Chez moi, les couleurs restent lorsque les évènements sont passés.

Effectivement sur un agenda local les couleurs restent ,mais pas sur l'agenda google

[edit 20.03.11] en supprimant Calendar-data les couleurs restent dans Google Agenda [/edit]

[vin_c]

Bonjour,

La solution indiquée ici fonctionne à merveille, merci pour ces retours !

J'ai toutefois une question à laquelle je ne trouve pas de réponse :
Nous avons plusieurs calendriers de paramétrés et je souhaite "tout simplement" inverser les couleurs de l'évènement et de la catégorie...

Auriez-vous une idée ?
Je peux (éventuellement) modifier le code d'un jar, mais je ne sais pas vraiment où chercher ni quoi modifier... je ne suis pas sûr que ce soit possible d'ailleurs ?

[vin_c]

Bonjour à tous,

J'ai réussi à effectuer les modifications de mon dernier post à savoir inverser la couleur de catégorie et celle du calendrier

Voici les modifications que j'ai apportées tant au code xul qu'au fichier userChrome.css :
Les codes couleur sont codées en dur dans le css... si une bonne âme souhaite développer un module pour avoir un GUI, je suis preneur !!
Les calendriers également (si l'on ajoute un calendrier, il faut également modifier le css pour ajouter ce calendrier...)

Aller, c'est parti

xxxx.default/chrome/userChrome.css

Code : Tout sélectionner

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

.calendar-event-box-container[categories] { margin: 1px !important;} /* add margin to the category-box */
.calendar-color-box:not([categories]) { color: black !important; background-color: #A6A6A6 !important;} /* events without category will appear grey */
calendar-category-box:not([categories]) { display: block !important; } /* category-box always displayed even if event doesn't have a category */

/* Two ways to use the next lines : 1 - using the calendar name (warning : some users can rename calendars...) */
.category-color-box[calendar="name of calendar"]{ background-color: #C0C0C0 !important; display:block !important; float:right;}
/* display the category-box with the specified color (forced color of the calendar) */

/* 2- using the calendar uri (much better) */
.category-color-box[calendar-uri="http://my.caldav.server/path/to/file"]{ background-color: #FF0000 !important; display:block !important; float:right;}
/* display the category-box with the specified color (forced color of the calendar) */

/* NB : You can add all the calendar links you have... with another color :) */

/* for each category, assign a forced color 
NB : each category must be spelled lowercase in the css, spaces replaced with '_'
I didn't make any test with accents... but they may work (lowercase, spaces -> _) eg: "Appel Téléphonique" -> "appel_téléphonique"
*/
.calendar-color-box[categories="deplacement"] { color: black !important; background-color: #CCCCFF !important;}
.calendar-color-box[categories="administratif"] { color: black !important; background-color: #FF99FF !important;}
.calendar-color-box[categories="affaire"] { color: black !important; background-color: #FF0000 !important;}
.calendar-color-box[categories="appel_telephonique"] { color: black !important; background-color: #CC33CC !important;}
.calendar-color-box[categories="bureau"] { color: black !important; background-color: #0000FF !important;}

Les autres fichiers sont à modifier depuis le jar.
NB : Vous devez ajouter l'héritage "calendar" si vous souhaitez utiliser le nom du calendrier, si par contre vous utilisez l'uri, il faut ajouter "calendar-uri" comme indiqué dans cet exemple

xxxx.default/extensions/{e2fda1a4-762b-4020-b5ad-a41df1933103}/chrome/calendar.jar

-> /content/calendar/calendar-view-core.xml

Code : Tout sélectionner

59c59
<                    xbl:inherits="calendar-uri,calendar-id"
>                    xbl:inherits="calendar-uri,calendar-id,categories"
84c84
<                                                xbl:inherits="categories"
>                                                xbl:inherits="categories,calendar-uri"
394c394
<                 xbl:inherits="categories">
>                 xbl:inherits="categories,calendar-uri">

-> /content/calendar/calendar-month-view.xml

Code : Tout sélectionner

64c64
<                    xbl:inherits="calendar-uri,calendar-id"
>                    xbl:inherits="calendar-uri,calendar-id,categories"
95c95
<                     <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end"/>
>                     <xul:calendar-category-box anonid="category-box" xbl:inherits="categories,calendar-uri" pack="end"/>

-> /content/calendar/calendar-multiday-view.xml

Code : Tout sélectionner

2135c2135
<                   <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end" />
>                   <xul:calendar-category-box anonid="category-box" xbl:inherits="categories,calendar-uri" pack="end" />

Seul petit hic... si un évènement n'a pas de catégorie, la category-box ne prend pas toute la hauteur de la cellule... Mais ce n'est pas gênant...

Si vous voulez contribuer, commenter, améliorer tout cela, pas de soucis, je reste à l'écoute !

À bientôt

Vincent

[Jacques-64]

Bravo !

Puisque tu as modifié le .jar, il faudra bien sûr faire attention aux mises à jour mais, pour éviter d'avoir les codes couleur codées en dur, tu peux peut-être reprendre directement le code qui est dans la version d'origine et qui utilise les couleurs de calendrier et de nature d'évènement.

A+

Jacques

[vin_c]

Bonjour,

tu peux peut-être reprendre directement le code qui est dans la version d'origine et qui utilise les couleurs de calendrier et de nature d'évènement.

Oh oui, ce serait superbe mais je n'ai pas la moindre idée des variables à mettre dans le fichier CSS pour que cette couleur puisse être récupérée ! (si bien sûr le CSS accepte des variables ce dont je doute fortement...)
Si une bonne âme passe par là... je serai ravi d'avoir cette information !

[vin_c]

Bonjour à tous,

Voici une version plus correcte des modifications apportées.
Le grand plus par rapport à ma précédente proposition est que l'on a plus besoin de définir les couleurs des catégories/calendriers en dur dans le fichier userChrome.css qui n'est d'ailleurs plus du tout utilisé !

Globalement :

• * On applique des modifications aux fichiers xml pour autoriser l'utilisation du "calendar-id" et des "categories" sur les différents éléments du DOM.
  * On met à jour le fichier "calendar-views.js" pour appliquer les couleurs paramétrées aux catégories et calendriers mais en les inversant.
  * Enfin, un peu de css en modifiant "calendar-views.css" pour :
  • - toujours afficher la bordure et une marge de 1px (le rendu est meilleur je trouve...)
    - mettre une couleur grise (#ACACAC") aux évènements sans catégorie
    - ne changer que la couleur du calendrier (soit de la bordure) lorsque l'on sélectionne un élément (en ajoutant la propriété .calendar-event-box-container)

Aussi, l'image

/skin/calendar/category-overlay.png

a été élargie pour augmenter la taille de la bordure...

Bien à vous

Note : il ne reste plus qu'à mettre tout cela dans les options, mais je n'ai pas le temps de me pencher là dessus pour le moment... Mais si l'un d'entre vous peux me donner des pistes de recherche, je suis partant !

Code : Tout sélectionner

diff --git a/content/calendar/calendar-month-view.xml b/content/calendar/calendar-month-view.xml
index 0853ade..ba69e18 100644
--- a/content/calendar/calendar-month-view.xml
+++ b/content/calendar/calendar-month-view.xml
@@ -61,7 +61,7 @@
         <xul:hbox>
           <xul:box anonid="event-container"
                    class="calendar-color-box"
-                   xbl:inherits="calendar-uri,calendar-id"
+                   xbl:inherits="calendar-uri,calendar-id,categories"
                    flex="1">
             <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
               <xul:stack anonid="eventbox"
@@ -102,7 +102,7 @@
                                  class="item-classification-box"
                                  pack="end"/>
                     </xul:hbox>
-                    <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end"/>
+                    <xul:calendar-category-box anonid="category-box" xbl:inherits="categories,calendar-id" pack="end"/>
                   </xul:stack>
                 </xul:hbox>
                 <xul:image anonid="gradient"
diff --git a/content/calendar/calendar-multiday-view.xml b/content/calendar/calendar-multiday-view.xml
index 7e375a7..40f2bc6 100644
--- a/content/calendar/calendar-multiday-view.xml
+++ b/content/calendar/calendar-multiday-view.xml
@@ -2143,7 +2143,7 @@
                                class="item-classification-box"
                                pack="end"/>
                   </xul:hbox>
-                  <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end" />
+                  <xul:calendar-category-box anonid="category-box" xbl:inherits="categories,calendar-id" pack="end" />
                 </xul:stack>
                 <xul:box xbl:inherits="orient">
                   <xul:calendar-event-gripbar anonid="gripbar1"
diff --git a/content/calendar/calendar-view-core.xml b/content/calendar/calendar-view-core.xml
index 448ee4a..6372bb0 100644
--- a/content/calendar/calendar-view-core.xml
+++ b/content/calendar/calendar-view-core.xml
@@ -56,7 +56,7 @@
         <xul:hbox>
           <xul:box anonid="event-container"
                    class="calendar-color-box"
-                   xbl:inherits="calendar-uri,calendar-id"
+                   xbl:inherits="calendar-uri,calendar-id,categories"
                    flex="1">
             <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
               <xul:stack anonid="eventbox"
@@ -81,7 +81,7 @@
                   </xul:vbox>
                   <xul:stack>
                     <xul:calendar-category-box anonid="category-box"
-                                               xbl:inherits="categories"
+                                               xbl:inherits="categories,calendar-id"
                                                pack="end"/>
                     <xul:hbox anonid="alarm-icons-box"
                               class="alarm-icons-box"
@@ -401,7 +401,7 @@
     <content>
       <xul:vbox anonid="category-box"
                 class="category-color-box calendar-event-selection"
-                xbl:inherits="categories">
+                xbl:inherits="categories,calendar-id">
         <xul:hbox flex="1">
           <xul:image class="calendar-category-box-gradient" height="1"/>
         </xul:hbox>
diff --git a/content/calendar/calendar-views.js b/content/calendar/calendar-views.js
index c2b4490..2c8db06 100644
--- a/content/calendar/calendar-views.js
+++ b/content/calendar/calendar-views.js
@@ -512,7 +512,7 @@ function updateStyleSheetForViews(aCalendar) {
     if (!(aCalendar.id in ruleCache)) {
         // We haven't create a rule for this calendar yet, do so now.
         let sheet = getViewStyleSheet();
-        let ruleString = '.calendar-color-box[calendar-id="' + aCalendar.id + '"] {} ';
+        let ruleString = '.category-color-box[calendar-id="' + aCalendar.id + '"] {} '; // calendar
         let ruleIndex = sheet.insertRule(ruleString, sheet.cssRules.length);
 
         ruleCache[aCalendar.id] = sheet.cssRules[ruleIndex];
@@ -592,12 +592,12 @@ var categoryManagement = {
         if (!(aCatName in this.categoryStyleCache)) {
             // We haven't created a rule for this category yet, do so now.
             let sheet = getViewStyleSheet();
-            let ruleString = '.category-color-box[categories~="' + aCatName + '"] {} ';
+            let ruleString = '.calendar-color-box[categories~="' + aCatName + '"] {}'; // category
             let ruleIndex = sheet.insertRule(ruleString, sheet.cssRules.length);
-
+            
             this.categoryStyleCache[aCatName] = sheet.cssRules[ruleIndex];
         }
-
+        
         let color = cal.getPrefSafe("calendar.category.color." + aCatName) || "";
         this.categoryStyleCache[aCatName].style.backgroundColor = color;
     }
diff --git a/skin/calendar/calendar-views.css b/skin/calendar/calendar-views.css
index b2e6cd9..882bd34 100644
--- a/skin/calendar/calendar-views.css
+++ b/skin/calendar/calendar-views.css
@@ -44,7 +44,7 @@
 
 /* Core */
 calendar-category-box:not([categories]) {
-  display: none;
+	 /*display: none;*/
 }
 
 .calendar-item-image {
@@ -201,6 +201,11 @@ calendar-header-container[weekend="true"][selected="true"],
 
 .calendar-event-box-container[categories] {
     -moz-margin-end: 0px;
+    margin: 1px;
+}
+
+.calendar-event-box-container:not([categories]) {
+    background-color: #ACACAC;
 }
 
 .calendar-event-details {
@@ -233,7 +238,7 @@ calendar-event-box[selected="true"] {
     border-bottom: 1px solid #727272;
 }
 
-calendar-event-box[selected="true"] .calendar-event-selection {
+calendar-event-box[selected="true"] .calendar-event-box-container .calendar-event-selection {
     color: #000000 !important;
     background-color: #ffdb67 !important;
 }
@@ -444,7 +449,7 @@ calendar-month-day-box-item {
     padding: 0px 1px;
 }
 
-calendar-month-day-box-item[selected="true"] .calendar-event-selection {
+calendar-month-day-box-item[selected="true"] .calendar-event-box-container .calendar-event-selection {
     color: #000000 !important;
     background-color: #ffdb67 !important;
 }
@@ -468,7 +473,7 @@ calendar-month-day-box-item[selected="true"] .calendar-event-selection {
     border-bottom: 1px solid #D2D2D2;
 }
 
-calendar-editable-item[selected="true"] .calendar-event-selection {
+calendar-editable-item[selected="true"] .calendar-event-box-container .calendar-event-selection {
     color: #000000 !important;
     background-color: #ffdb67 !important;
 }
diff --git a/skin/calendar/category-overlay.png b/skin/calendar/category-overlay.png
index d44fb60..bb5f306 100644
Binary files a/skin/calendar/category-overlay.png and b/skin/calendar/category-overlay.png differ