Bug 323093 Only make scrollbars appear along the scrollable area of the calendar. patch by thomas.benisch@sun.com, r=jminta

2006-07-12 20:42:11 +00:00 · 2006-07-12 20:42:11 +00:00 · 649fe49ab2
--- a/calendar/base/content/calendar-decorated-day-view.xml
+++ b/calendar/base/content/calendar-decorated-day-view.xml
@ -48,7 +48,7 @@
        <content>
             <xul:vbox anonid="main-box" flex="1">
                <xul:calendar-navigation-buttons anonid="nav-control"/>
-                <xul:box style="overflow: auto;" flex="1">
+                <xul:box flex="1">
                    <xul:calendar-multiday-view anonid="view-element" flex="1" orient="vertical" xbl:inherits="context,item-context"/>
                </xul:box>
            </xul:vbox>
--- a/calendar/base/content/calendar-decorated-week-view.xml
+++ b/calendar/base/content/calendar-decorated-week-view.xml
@ -50,7 +50,7 @@
        <content>
             <xul:vbox anonid="main-box" flex="1">
                <xul:calendar-navigation-buttons anonid="nav-control"/>
-                <xul:box style="overflow: auto;" flex="1">
+                <xul:box flex="1">
                    <xul:calendar-multiday-view anonid="view-element" flex="1" orient="vertical" xbl:inherits="context,item-context"/>
                </xul:box>
            </xul:vbox>
--- a/calendar/base/content/calendar-multiday-view.xml
+++ b/calendar/base/content/calendar-multiday-view.xml
@ -1551,17 +1551,23 @@
                        anonid="rotate-button"
             oncommand="var e=this.parentNode.parentNode.parentNode.parentNode; if (e.orient == 'horizontal') e.orient = 'vertical'; else e.orient = 'horizontal';" align="center"/>
          </xul:box>
-          <xul:box anonid="labeldaybox" flex="1" equalsize="always" />
+          <xul:box anonid="labeldaybox" class="calendar-label-day-box" flex="1"
+                   equalsize="always" />
+          <xul:box anonid="labelscrollbarspacer"/>
        </xul:box>
        <xul:box anonid="headerbox">
-          <xul:box anonid="headertimespacer"/>
-          <xul:box anonid="headerdaybox" flex="1" equalsize="always" />
+          <xul:box anonid="headertimespacer" 
+                   class="calendar-header-time-spacer"/>
+          <xul:box anonid="headerdaybox" class="calendar-header-day-box"
+                   flex="1" equalsize="always" />
+          <xul:box anonid="headerscrollbarspacer"/>
        </xul:box>
-        <xul:box anonid="childbox" flex="1">
+        <xul:scrollbox anonid="childbox" flex="1">
          <!-- the orient of the calendar-time-bar needs to be the opposite of the parent -->
          <xul:calendar-time-bar xbl:inherits="orient" anonid="timebar"/>
-          <xul:box anonid="daybox" flex="1" equalsize="always" />
-        </xul:box>
+          <xul:box anonid="daybox" class="calendar-day-box" flex="1"
+                   equalsize="always"/>
+        </xul:scrollbox>
      </xul:box>
    </content>

@ -1577,6 +1583,14 @@
                            .getService(Components.interfaces.nsIStringBundleService);
        var props = sbs.createBundle("chrome://calendar/locale/calendar.properties");
        rButton.label = props.GetStringFromName("rotate");
+
+        // set the flex attribute at the scrollbox-innerbox
+        // (this can be removed, after Bug 343555 is fixed)
+        var childbox = document.getAnonymousElementByAttribute(
+                       this, "anonid", "childbox");
+        document.getAnonymousElementByAttribute(
+            childbox, "class", "box-inherit scrollbox-innerbox").flex = "1";
+
 	this.reorient();
      ]]></constructor>

@ -1614,7 +1628,11 @@
          //self.removeAttribute("hidden");
          var minutes = self.mEndMin - self.mStartMin;
          var ppm = size / minutes;
-          self.pixelsPerMinute = Math.round(ppm * 10) / 10;
+          ppm = Math.round(ppm * 10) / 10;
+          if (ppm < self.mMinPPM) {
+            ppm = self.mMinPPM;
+          }
+          self.pixelsPerMinute = ppm;
        ]]></body>
      </method>

@ -1628,6 +1646,7 @@
      <field name="mDateColumns">null</field>
      <field name="mBatchCount">0</field>
      <field name="mPixPerMin">0.6</field>
+      <field name="mMinPPM">0.4</field>
      <field name="mSelectedItem">null</field>
      <field name="mSelectedDayCol">null</field>

@ -2218,7 +2237,8 @@
              this.setPixelsPerMin(0.6);
          
          var normalelems = ['mainbox', 'timebar'];
-          var otherelems = ['labelbox', 'labeldaybox', 'headerbox', 'headerdaybox', 'childbox', 'daybox'];
+          var otherelems = ['labelbox', 'labeldaybox', 'headertimespacer',
+                            'headerbox', 'headerdaybox', 'childbox', 'daybox'];

          for each (var id in normalelems) {
              document.getAnonymousElementByAttribute(this, "anonid", id).setAttribute("orient", orient);
@ -2233,6 +2253,10 @@
          var headerbox = document.getAnonymousElementByAttribute(this, "anonid", "headerbox");
          var headertimespacer = document.getAnonymousElementByAttribute(this, "anonid", "headertimespacer");
          var timebar = document.getAnonymousElementByAttribute(this, "anonid", "timebar");
+          var childbox = document.getAnonymousElementByAttribute(
+                         this, "anonid", "childbox");
+          var mainbox = document.getAnonymousElementByAttribute(
+                        this, "anonid", "mainbox");

          if (orient == "vertical") {
              headerbox.setAttribute("height", 50);
@ -2249,6 +2273,11 @@
              headertimespacer.removeAttribute("height");
              labeltimespacer.setAttribute("width", timebarWidth);
              labeltimespacer.removeAttribute("height");
+
+              childbox.setAttribute(
+                  "style", "overflow-x: hidden; overflow-y: auto;");
+              mainbox.setAttribute(
+                  "style", "overflow-x: auto; overflow-y: hidden;");
          } else {
              headerbox.setAttribute("width", 30);
              headerbox.removeAttribute("height");
@ -2263,6 +2292,11 @@
              headertimespacer.removeAttribute("width");
              labeltimespacer.setAttribute("height", timebarHeight);
              labeltimespacer.removeAttribute("width");
+
+              childbox.setAttribute(
+                  "style", "overflow-x: auto; overflow-y: hidden;");
+              mainbox.setAttribute(
+                  "style", "overflow-x: hidden; overflow-y: auto;");
          }

          var boxes = ["daybox", "headerdaybox", "labeldaybox"];
@ -2275,6 +2309,9 @@
              }
          }
          this.refresh();
+
+          // adjust scrollbar spacers
+          this.adjustScrollBarSpacers();
        ]]></body>
      </method>

@ -2617,6 +2654,8 @@
      <method name="setPixelsPerMin">
        <parameter name="pixPerMin"/>
        <body><![CDATA[
+          this.mPixPerMin = pixPerMin;
+
          var timebar = document.getAnonymousElementByAttribute(this, "anonid", "timebar");
          timebar.pixelsPerMinute = pixPerMin;

@ -2771,7 +2810,32 @@
          return date;
        ]]></body>
      </method>
- 
+      
+      <method name="adjustScrollBarSpacers">
+        <body><![CDATA[
+          // get the view's orientation
+          var propertyName;
+          if (this.getAttribute("orient") == "vertical") {
+              propertyName = "width";
+          } else {
+              propertyName = "height";
+          }
+
+          // get the width/height of the childbox scrollbar
+          var childbox = document.getAnonymousElementByAttribute(
+                         this, "anonid", "childbox");
+          var propertyValue = childbox.boxObject.firstChild
+                              .boxObject[propertyName];
+
+          // set the same width/height for the label and header box spacers
+          var headerScrollBarSpacer = document.getAnonymousElementByAttribute(
+                                      this, "anonid", "headerscrollbarspacer");
+          headerScrollBarSpacer.setAttribute(propertyName, propertyValue);
+          var labelScrollBarSpacer = document.getAnonymousElementByAttribute(
+                                     this, "anonid", "labelscrollbarspacer");
+          labelScrollBarSpacer.setAttribute(propertyName, propertyValue);
+        ]]></body>
+      </method>
    </implementation>

    <handlers>
@ -2786,6 +2850,20 @@
            }
        }
      ]]></handler>
+
+      <handler event="DOMAttrModified"><![CDATA[
+        // when a scrollbar appears/disappears in the view,
+        // it's disabled attribute is modified
+        if (event.attrName != "disabled" ||
+            event.originalTarget.localName != "scrollbar" ||
+            event.originalTarget.parentNode.getAttribute("anonid") !=
+                "childbox") {
+            return;
+        }
+
+        // adjust scrollbar spacers
+        this.adjustScrollBarSpacers();
+      ]]></handler>
    </handlers>
  </binding>
 </bindings>
--- a/calendar/base/themes/pinstripe/calendar-views.css
+++ b/calendar/base/themes/pinstripe/calendar-views.css
@ -38,7 +38,17 @@
 * ***** END LICENSE BLOCK ***** */

 /* Multiday view */
-calendar-event-column,
+calendar-event-column {
+  background: #FFFFFF;
+}
+
+calendar-event-column[orient="horizontal"] {
+  border-top: 1px solid #3F7D91;
+}
+calendar-event-column[orient="vertical"] {
+  border-left: 1px solid #3F7D91;
+}
+
 calendar-header-container { 
  background: #FFFFFF;
  border-left: 1px solid #3F7D91;
@ -63,11 +73,45 @@ calendar-header-container[selected="true"] {
 .calendar-event-column-linebox[orient="horizontal"] {
  border-right: 1px solid #3F7D91;
 }
-
 .calendar-event-column-linebox[orient="vertical"] {
  border-bottom: 1px solid #3F7D91;
 }

+/* Make sure the box for day-labels appears to end before the scrollbar. */
+.calendar-label-day-box[orient="horizontal"] {
+  border-right: 1px solid #3F7D91;
+}
+.calendar-label-day-box[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
+}
+
+/* Make sure we extend the bold line separating scrollable and non-scrollable
+   areas over the timebar. */
+.calendar-header-time-spacer[orient="horizontal"] {
+  border-bottom: 2px solid #3F7D91;
+}
+.calendar-header-time-spacer[orient="vertical"] {
+  border-right: 2px solid #3F7D91;
+}
+
+/* Bold the line separating all-day events from scrollable area. */
+.calendar-header-day-box[orient="horizontal"] {
+  border-bottom: 2px solid #3F7D91;
+  border-right: 1px solid #3F7D91;
+}
+.calendar-header-day-box[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
+  border-right: 2px solid #3F7D91;
+}
+
+/* Make sure to have a border between the edge of the views and the scrollbar. */
+.calendar-day-box[orient="horizontal"] {
+  border-right: 1px solid #3F7D91;
+}
+.calendar-day-box[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
+}
+
 .fgdragbox {
  -moz-box-orient: inherit;
  display: none;
@ -161,7 +205,17 @@ calendar-event-gripbar[parentorient="horizontal"] {
  color: #3F7D91;
  background: #E7EEEC;
  text-align: right;
+}
+
+.calendar-time-bar-box-odd[orient="horizontal"],
+.calendar-time-bar-box-even[orient="horizontal"] {
  border-top: 1px solid #3F7D91;
+  border-right: 1px solid #3F7D91;
+}
+
+.calendar-time-bar-box-odd[orient="vertical"],
+.calendar-time-bar-box-even[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
  border-left: 1px solid #3F7D91;
 }

--- a/calendar/base/themes/winstripe/calendar-views.css
+++ b/calendar/base/themes/winstripe/calendar-views.css
@ -38,8 +38,18 @@
 * ***** END LICENSE BLOCK ***** */

 /* Multiday view */
-calendar-event-column,
-calendar-header-container { 
+calendar-event-column {
+  background: #FFFFFF;
+}
+
+calendar-event-column[orient="horizontal"] {
+  border-top: 1px solid #3F7D91;
+}
+calendar-event-column[orient="vertical"] {
+  border-left: 1px solid #3F7D91;
+}
+
+calendar-header-container {
  background: #FFFFFF;
  border-left: 1px solid #3F7D91;
  border-top: 1px solid #3F7D91;
@ -63,11 +73,45 @@ calendar-header-container[selected="true"] {
 .calendar-event-column-linebox[orient="horizontal"] {
  border-right: 1px solid #3F7D91;
 }
-
 .calendar-event-column-linebox[orient="vertical"] {
  border-bottom: 1px solid #3F7D91;
 }

+/* Make sure the box for day-labels appears to end before the scrollbar. */
+.calendar-label-day-box[orient="horizontal"] {
+  border-right: 1px solid #3F7D91;
+}
+.calendar-label-day-box[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
+}
+
+/* Make sure we extend the bold line separating scrollable and non-scrollable
+   areas over the timebar. */
+.calendar-header-time-spacer[orient="horizontal"] {
+  border-bottom: 2px solid #3F7D91;
+}
+.calendar-header-time-spacer[orient="vertical"] {
+  border-right: 2px solid #3F7D91;
+}
+
+/* Bold the line separating all-day events from scrollable area. */
+.calendar-header-day-box[orient="horizontal"] {
+  border-bottom: 2px solid #3F7D91;
+  border-right: 1px solid #3F7D91;
+}
+.calendar-header-day-box[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
+  border-right: 2px solid #3F7D91;
+}
+
+/* Make sure to have a border between the edge of the views and the scrollbar. */
+.calendar-day-box[orient="horizontal"] {
+  border-right: 1px solid #3F7D91;
+}
+.calendar-day-box[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
+}
+
 .fgdragbox {
  -moz-box-orient: inherit;
  display: none;
@ -161,7 +205,17 @@ calendar-event-gripbar[parentorient="horizontal"] {
  color: #3F7D91;
  background: #E7EEEC;
  text-align: right;
+}
+
+.calendar-time-bar-box-odd[orient="horizontal"],
+.calendar-time-bar-box-even[orient="horizontal"] {
  border-top: 1px solid #3F7D91;
+  border-right: 1px solid #3F7D91;
+}
+
+.calendar-time-bar-box-odd[orient="vertical"],
+.calendar-time-bar-box-even[orient="vertical"] {
+  border-bottom: 1px solid #3F7D91;
  border-left: 1px solid #3F7D91;
 }