Bug 1583157 - Don't stack the alarm-box and the category-box to not set the category color behind the alarm icon. r=pmorris
authorRichard Marti <richard.marti@gmail.com>
Thu, 03 Oct 2019 19:35:44 +0200
changeset 37064 ce3700fcd3c957309ce5c106f7a7616347285028
parent 37063 744faf96603152d6b844286171955eb066bcddf0
child 37065 b22962d53db9ab1577a4f8df9dbf86f282797de4
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewerspmorris
bugs1583157
Bug 1583157 - Don't stack the alarm-box and the category-box to not set the category color behind the alarm icon. r=pmorris
calendar/base/content/calendar-editable-item.js
calendar/base/content/calendar-month-view.js
calendar/base/themes/common/calendar-views.css
calendar/test/modules/CalendarUtils.jsm
--- a/calendar/base/content/calendar-editable-item.js
+++ b/calendar/base/content/calendar-editable-item.js
@@ -152,31 +152,31 @@
                                  wrap="true">
                         </textbox>
                         <label crop="end"
                                class="calendar-event-details-core location-desc">
                         </label>
                         <spacer flex="1">
                         </spacer>
                       </vbox>
-                      <stack>
-                        <hbox class="calendar-category-box category-color-box calendar-event-selection"
-                              flex="1" pack="end">
-                            <image class="calendar-category-box-gradient">
-                            </image>
-                        </hbox>
+                      <hbox>
                         <hbox align="center">
                           <hbox class="alarm-icons-box"
                                 align="center">
                           </hbox>
                           <image class="item-classification-box"
                                  pack="end">
                           </image>
                         </hbox>
-                      </stack>
+                        <hbox class="calendar-category-box category-color-box calendar-event-selection"
+                              flex="1" pack="end">
+                          <image class="calendar-category-box-gradient">
+                          </image>
+                        </hbox>
+                      </hbox>
                     </hbox>
                   </stack>
                 </box>
               </box>
             </hbox>
           </vbox>
         `)
       );
--- a/calendar/base/content/calendar-month-view.js
+++ b/calendar/base/content/calendar-month-view.js
@@ -306,32 +306,32 @@
                         </label>
                         <textbox class="plain calendar-event-name-textbox title-desc"
                                  crop="end"
                                  hidden="true"
                                  wrap="true">
                         </textbox>
                         <spacer flex="1"></spacer>
                       </vbox>
-                      <stack class="category-box-stack">
-                        <hbox class="calendar-category-box category-color-box calendar-event-selection"
-                              flex="1"
-                              pack="end">
-                          <image class="calendar-category-box-gradient"></image>
-                        </hbox>
+                      <hbox class="category-container-box">
                         <hbox align="center">
                           <hbox class="alarm-icons-box"
                                 pack="end"
                                 align="top">
                           </hbox>
                           <image class="item-classification-box"
                                  pack="end">
                           </image>
                         </hbox>
-                      </stack>
+                        <hbox class="calendar-category-box category-color-box calendar-event-selection"
+                              flex="1"
+                              pack="end">
+                          <image class="calendar-category-box-gradient"></image>
+                        </hbox>
+                      </hbox>
                     </hbox>
                   </stack>
                 </box>
               </box>
             </hbox>
           </vbox>
         `)
       );
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -143,20 +143,24 @@
 
 .calendar-category-box-stack {
     display: flex;
     justify-content: end;
     margin-inline-end: 2px;
 }
 
 .calendar-category-box[categories] + hbox,
-.multiday-view-main-box .calendar-event-box-container[categories] > .calendar-event-details {
+.multiday-view-day-box .calendar-event-box-container[categories] > .calendar-event-details {
     margin-inline-end: 8px;
 }
 
+.multiday-view-day-box .calendar-event-box-container > .calendar-event-details > .alarm-icons-box {
+  padding-top: 3px;
+}
+
 .calendar-category-box-gradient {
     width: 7px;
     background-image: linear-gradient(rgba(255, 255, 255, 0.38), transparent) !important;
 }
 
 .calendar-item-image {
     margin-inline-end: 4px;
     -moz-context-properties: fill;
--- a/calendar/test/modules/CalendarUtils.jsm
+++ b/calendar/test/modules/CalendarUtils.jsm
@@ -111,17 +111,17 @@ var AGENDA_LISTBOX = `
     ${TODAY_PANE}/{"flex":"1"}/id("agenda-panel")/{"flex":"1"}/id("agenda-listbox")
 `;
 
 var EVENTPATH = `
     /{"tooltip":"itemTooltip","calendar":"${CALENDARNAME.toLowerCase()}"}
 `;
 // Used after "${EVENTPATH}/${getEventDetails([view])}/".
 var ALARM_ICON_PATH = `
-    anon({"class":"category-box-stack"})/anon({"align":"center"})/
+    anon({"class":"category-container-box"})/anon({"align":"center"})/
     anon({"class":"alarm-icons-box"})/anon({"class":"reminder-icon"})
 `;
 
 function setupModule() {
   // For our tests, we assume that Sunday is start of week.
   Services.prefs.setIntPref("calendar.week.start", 0);
 
   // We are in calendarTests, so we make sure, calendar-tab with day-view is displayed.