Bug 1554642 - [de-xbl] convert the calendar-category-box binding. r=philipp
authorKhushil Mistry <khushil324@gmail.com>
Tue, 25 Jun 2019 00:51:00 +0200
changeset 36003 4cd00a290f7a4172c4409c1cadc1ab3a1d260bdb
parent 36002 924dc82526122c8275327cc14cbbf34256562339
child 36004 80baeab83f559a623bed894efe753991cb8574af
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersphilipp
bugs1554642
Bug 1554642 - [de-xbl] convert the calendar-category-box binding. r=philipp
calendar/base/content/calendar-month-view.xml
calendar/base/content/calendar-multiday-view.xml
calendar/base/content/calendar-view-bindings.css
calendar/base/content/calendar-view-core.xml
calendar/base/themes/common/calendar-views.css
--- a/calendar/base/content/calendar-month-view.xml
+++ b/calendar/base/content/calendar-month-view.xml
@@ -45,17 +45,23 @@
                     <xul:textbox anonid="event-name-textbox"
                                  class="plain calendar-event-name-textbox"
                                  crop="end"
                                  hidden="true"
                                  wrap="true"/>
                     <xul:spacer flex="1"/>
                   </xul:vbox>
                   <xul:stack anonid="category-box-stack">
-                    <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end"/>
+                    <xul:hbox anonid="category-box"
+                              class="calendar-category-box category-color-box calendar-event-selection"
+                              xbl:inherits="categories"
+                              flex="1"
+                              pack="end">
+                      <xul:image class="calendar-category-box-gradient"/>
+                    </xul:hbox>
                     <xul:hbox align="center">
                       <xul:hbox anonid="alarm-icons-box"
                                 class="alarm-icons-box"
                                 pack="end"
                                 align="top"
                                 xbl:inherits="flashing"/>
                       <xul:image anonid="item-classification-box"
                                  class="item-classification-box"
--- a/calendar/base/content/calendar-multiday-view.xml
+++ b/calendar/base/content/calendar-multiday-view.xml
@@ -2037,17 +2037,16 @@
       <xul:box xbl:inherits="orient,width,height" flex="1">
         <xul:box anonid="event-container"
                  class="calendar-color-box"
                  xbl:inherits="orient,readonly,flashing,alarm,allday,priority,progress,
                                status,calendar,categories,todoType"
                  flex="1">
           <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
             <xul:stack anonid="eventbox"
-                       align="stretch"
                        class="calendar-event-box-container"
                        flex="1"
                        xbl:inherits="context,parentorient=orient,readonly,flashing,alarm,allday,priority,progress,status,calendar,categories">
               <xul:hbox class="calendar-event-details"
                         anonid="calendar-event-details"
                         align="start">
                 <xul:image anonid="item-icon"
                            class="calendar-item-image"
@@ -2062,18 +2061,24 @@
                 </xul:vbox>
                 <xul:hbox anonid="alarm-icons-box"
                           class="alarm-icons-box"
                           align="top"
                           xbl:inherits="flashing"/>
                 <xul:image anonid="item-classification-box"
                            class="item-classification-box"/>
               </xul:hbox>
-              <xul:stack mousethrough="always">
-                <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end" />
+              <xul:stack mousethrough="always" class="calendar-category-box-stack">
+                <xul:hbox anonid="category-box"
+                          class="calendar-category-box category-color-box calendar-event-selection"
+                          xbl:inherits="categories"
+                          flex="1"
+                          pack="end">
+                  <xul:image class="calendar-category-box-gradient"/>
+                </xul:hbox>
               </xul:stack>
               <xul:box xbl:inherits="orient">
                 <xul:calendar-event-gripbar anonid="gripbar1"
                                             class="calendar-event-box-grippy-top"
                                             mousethrough="never"
                                             whichside="start"
                                             xbl:inherits="parentorient=orient"/>
                 <xul:spacer mousethrough="always" flex="1"/>
--- a/calendar/base/content/calendar-view-bindings.css
+++ b/calendar/base/content/calendar-view-bindings.css
@@ -29,15 +29,11 @@ calendar-month-day-box-item {
   -moz-binding: url(chrome://calendar/content/calendar-month-view.xml#calendar-month-day-box-item);
 }
 
 /* View core */
 calendar-editable-item { 
   -moz-binding: url(chrome://calendar/content/calendar-view-core.xml#calendar-editable-item);
 }
 
-calendar-category-box {
-  -moz-binding: url(chrome://calendar/content/calendar-view-core.xml#calendar-category-box);
-}
-
  calendar-shadow-box {
    -moz-binding: url(chrome://calendar/content/calendar-view-core.xml#calendar-shadow-box);
  }
--- a/calendar/base/content/calendar-view-core.xml
+++ b/calendar/base/content/calendar-view-core.xml
@@ -36,19 +36,23 @@
                                  style="background: transparent !important;"
                                  wrap="true"/>
                     <xul:label anonid="event-location"
                                crop="end"
                                class="calendar-event-details-core location-desc"/>
                     <xul:spacer flex="1"/>
                   </xul:vbox>
                   <xul:stack>
-                    <xul:calendar-category-box anonid="category-box"
-                                               xbl:inherits="categories"
-                                               pack="end"/>
+                    <xul:hbox anonid="category-box"
+                              class="calendar-category-box category-color-box calendar-event-selection"
+                              xbl:inherits="categories"
+                              flex="1"
+                              pack="end">
+                      <xul:image class="calendar-category-box-gradient"/>
+                    </xul:hbox>
                     <xul:hbox align="center">
                       <xul:hbox anonid="alarm-icons-box"
                                 class="alarm-icons-box"
                                 align="center"
                                 xbl:inherits="flashing"/>
                       <xul:image anonid="item-classification-box"
                                   class="item-classification-box"
                                   pack="end"/>
@@ -376,24 +380,9 @@
           }
           if (!this.selected) {
               this.select(event);
           }
           invokeEventDragSession(item, this);
       ]]></handler>
     </handlers>
   </binding>
-
-  <binding id="calendar-category-box">
-    <!-- calendar-views.css makes this binding hide if the categories attribute
-         is not specified -->
-    <content>
-      <xul:vbox anonid="category-box"
-                class="category-color-box calendar-event-selection"
-                xbl:inherits="categories">
-        <xul:hbox flex="1">
-          <xul:image class="calendar-category-box-gradient" height="1"/>
-        </xul:hbox>
-        <xul:hbox height="1"/>
-      </xul:vbox>
-    </content>
-  </binding>
 </bindings>
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -84,21 +84,27 @@ window[systemcolors] {
     color: var(--lwt-text-color);
 
     --calview-tabline-color: var(--tab-line-color, --calview-tabline-color);
     --calview-border-color: var(--sidebar-border-color);
     --calview-border-bottom-color: var(--sidebar-border-color);
 }
 
 /* Core */
-calendar-category-box:not([categories]) {
+.calendar-category-box:not([categories]) {
     display: none;
 }
 
-calendar-category-box[categories] + hbox,
+.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 {
     margin-inline-end: 8px;
 }
 
 .calendar-category-box-gradient {
     width: 7px;
     background-image: linear-gradient(rgba(255, 255, 255, 0.38), transparent) !important;
 }