651805 - [Month view] Distinguish "All day events" from other events

Status: RESOLVED FIXED

(Calendar :: Calendar Frontend, enhancement)

Description

[Vincent (caméléon)]

Attachment: Screenshot - Lightning 1.0b2.png

In month view, it would be great if there is something that allow to visually distinguish an "All day event" from a simple meeting. 
For instance:
- Gmail use a different background.
- Outlook use a different background and bold letters.

I'll attach some screen-shot.

Comment 1

[Vincent (caméléon)]

Attachment: Screenshot - Gmail month view.png

Comment 2

[Vincent (caméléon)]

Attachment: Screenshot - month view in Outlook 2007

Comment 3

[Richard Marti (:Paenglab)]

Attachment: Patch giving all-day events a border

As proposed by Andreas I gave the border the system highlight color. For better visibility (depending on the chosen calendar color) I gave also an inset box-shadow with the same color.

If you don't like the color I can take an other. But please give a hint for which one.

Because of the border the events are now 2px higher.

Comment 4

[Richard Marti (:Paenglab)]

With stopping of Bug 671119 should we still use Highlight as border color or should we use a fixed color? If fixed, which color should we use?

Comment 5

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

I'd prefer a fixed color. Which color to use might be hard to choose though, since depending on which color the user selected it might look bad. Maybe you can use an RGBA color that changes the main color slightly by opacity?

Another solution could be to split up the day box so that allday events have the same color as background as the header label where the day number is. You'd have to take care that with many events there is only one scrollbar, not one for allday and one for normal events.

If this doesn't work, another solution may be to slightly indent non-allday events, like this:


+---------------+
|____________24_|
|[allday event ]|
| [non-allday 1]|
| [non-allday 2]|
| [non-allday 3]|
+---------------+

Comment 6

[Richard Marti (:Paenglab)]

Attachment: Patch giving all-day events a border v2

This patch gives the border black and white colors. This makes the border always visible, also when the user selects extreme colors.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: screenshot with calendars with random colors

This screenshot shows the difference between normal event and all-day event with calendars with different colors.

Comment 8

[Decathlon]

What about a box with round corners? Not sure if it would be easily recognizable.

Comment 9

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Comment on attachment 569474 [details] [diff] [review]
Patch giving all-day events a border v2

Review of attachment 569474 [details] [diff] [review]:
-----------------------------------------------------------------

Codewise r+ with below comments considered. Lets see what andreasn has to say :-)

::: calendar/base/themes/gnomestripe/calendar-views.css
@@ +505,5 @@
> +}
> +
> +calendar-month-day-box
> +  calendar-month-day-box-item[allday="true"] .calendar-color-box {
> +    -moz-box-shadow: inset -1px -1px 0 white, inset 1px 1px 0 white;

From the screenshot it looks like its just a white inner border. Why did you choose box-shadow instead of a 2px border with -moz-border-colors?

Also, if you do use inset, have you tried an rgba() inset here? This might still make it obvious and keep the calendar color.

Another question about the border, since its black it will make allday events very prominent. Do you think this makes sense? Personally, I can't decide... 

Maybe you can consider making the border not quite so strong with a shade of gray?

(Note these are all just suggestions, you can say no to anything here ;-)

Comment 10

[Richard Marti (:Paenglab)]

(In reply to Decathlon from comment #8)
> What about a box with round corners? Not sure if it would be easily
> recognizable.

I added a border-radius of 2.5px but it wasn't in the patch. In the screenshot it is with the border.

(In reply to Philipp Kewisch [:Fallen] from comment #9)
> Comment on attachment 569474 [details] [diff] [review] [diff] [details] [review]
> Patch giving all-day events a border v2
> From the screenshot it looks like its just a white inner border. Why did you
> choose box-shadow instead of a 2px border with -moz-border-colors?

A border made the box again 2px taller. I used the box-shadow to prohibit this.

> Also, if you do use inset, have you tried an rgba() inset here? This might
> still make it obvious and keep the calendar color.

I tried it but because of the gradient background it doesn't look as good as I hoped and I had to set a high alpha value. So I decided to use the full alpha value = white.

> Another question about the border, since its black it will make allday
> events very prominent. Do you think this makes sense? Personally, I can't
> decide...

I took it as a contrast to the white. Let us wait for Andreas's review, maybe he has a better proposal.

Comment 11

[Richard Marti (:Paenglab)]

Attachment: Patch giving all-day events a border v3

Added the missing border-radius

Comment 12

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Not going to make the release, but I think we can live with that.

Comment 13

[Andreas Nilsson (:andreasn)]

I'm failing to do a ui-review of this right now, as my machine is at the other end of the world, but will happen early next week. Sorry for that! :/

Comment 14

[Richard Marti (:Paenglab)]

Attachment: Patch giving all-day events a border v4

The previous patch didn't apply after landing of bug 698760. I made now some changes to make it look better.

Now all events have a radius of 2px. If not appreciated I can add it only to the all-day events.
I applied the border to the .calendar-color-box which gave me the possibility to use rgba for the borders (hi Philipp ;-) )

Comment 15

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Do you have a screenshot for this, by chance?

Comment 16

[Richard Marti (:Paenglab)]

Attachment: Screenshot of All-day-event and normal event

Comment 17

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Comment on attachment 577130 [details]
Screenshot of All-day-event and normal event

I like the border even on the non-allday events, lets see what andreas says.

Comment 18

[Richard Marti (:Paenglab)]

Attachment: Patch giving all-day events a border v5

Unbitrot after landing of Bug 671119

Comment 19

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Comment on attachment 582684 [details] [diff] [review]
Patch giving all-day events a border v5

Review of attachment 582684 [details] [diff] [review]:
-----------------------------------------------------------------

codewise r+, waiting for ui-r now

Comment 20

[Andreas Nilsson (:andreasn)]

Comment on attachment 582684 [details] [diff] [review]
Patch giving all-day events a border v5

Looks good, ui-r+

Comment 21

[Richard Marti (:Paenglab)]

Pushed to comm-central: <http://hg.mozilla.org/comm-central/rev/2371d35790a8>

Comment 22

[Richard Marti (:Paenglab)]

Comment on attachment 582684 [details] [diff] [review]
Patch giving all-day events a border v5

Do you give me approval for aurora and maybe beta?

Comment 23

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Comment on attachment 582684 [details] [diff] [review]
Patch giving all-day events a border v5

Lets not risk anything for beta if we don't really need to. You have approval for aurora though.

Comment 24

[Richard Marti (:Paenglab)]

Pushed to comm-aurora: <http://hg.mozilla.org/releases/comm-aurora/rev/40bea90c6d2e>