688509 - Invite Attendee Window timeline unreadable

Status: NEW

(Calendar :: Dialogs, defect)

Description

[Felix Möller]

Attachment: screenshot which shows the too narrow times

As can be seen on attached screenshot the labels on the timeline of the invite attendee dialog have no sapcing and therefore are not readable at all.

Comment 1

[Felix Möller]

I just tried to find it.

One has to look at the timebar in calendar-event-dialog-freebusy.xml, which is the element which displays the timeline.

Reading the code I have a small cosmetic changes so far ;)
--- a/calendar/base/content/dialogs/calendar-event-dialog-freebusy.xml	Thu Sep 22 21:09:19 2011 +0100
+++ b/calendar/base/content/dialogs/calendar-event-dialog-freebusy.xml	Mon Sep 26 16:28:31 2011 +0200
@@ -339,7 +339,7 @@
 
       <property name="contentWidth">
         <getter><![CDATA[
-          // Calculate the difference between the first to day-elements, since
+          // Calculate the difference between the first two day-elements, since
           // the width of the head element does not specify the width we need
           // due to an arbitrary margin value.
           var template =
@@ -397,7 +397,7 @@
 
       <property name="step">
         <getter><![CDATA[
-          // How much pixels spans a single day
+          // How many pixels are spanned by a single day
           var oneday = this.contentWidth;
 
           // The difference in pixels between the content and the container.
@@ -415,7 +415,7 @@
         <setter><![CDATA[
           this.mScrollOffset = val;
 
-          // How much pixels spans a single day
+          // How many pixels are spanned by a single day
           var oneday = this.contentWidth;
 
           // The difference in pixels between the content and the container.
@@ -693,7 +693,7 @@
 
       <property name="scroll">
         <setter><![CDATA[
-          // How much pixels spans a single day
+          // How many pixels are spanned by a single day
           var oneday = this.contentWidth;
           if (oneday <= 0) {
               return val;

Comment 2

[Felix Möller]

Richard, do you know how to deal with this?

Comment 3

[Richard Marti (:Paenglab)]

Felix, you can play with this in calendar-event-dialog.css:

.freebusy-timebar-hour,
.freebusy-grid {
  padding: 0 2px;
}

2px looks already acceptable, but yo can try other values.

Comment 4

[Felix Möller]

Thanks alot Richard. This makes the window allready way more readable.

I guess this would be worth pushing.

However, I would expect just every seconds colum to be labled...

Comment 5

[Felix Möller]

Attachment: upper half shows ligtning with Richards patch, lower half is a mockup

I made a little mockup, which improves the experience in my opinion even further.

Comment 6

[Felix Möller]

Sorry for spamming again.

Looking at my screenshot I realized that it is a little bit strange to have the point in time written on top of the column.

The timebar would have to be offsetted by half of the width of one column, because the point in times in fact belong to the line between the columns ...