Closed Bug 651805 Opened 9 years ago Closed 8 years ago

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

Categories

(Calendar :: Calendar Views, enhancement)

Lightning 1.0b2
enhancement
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: el.cameleon.1, Assigned: Paenglab)

Details

Attachments

(6 files, 4 obsolete files)

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.
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.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #568970 - Flags: ui-review?(nisses.mail)
Attachment #568970 - Flags: review?(philipp)
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?
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]|
+---------------+
This patch gives the border black and white colors. This makes the border always visible, also when the user selects extreme colors.
Attachment #568970 - Attachment is obsolete: true
Attachment #568970 - Flags: ui-review?(nisses.mail)
Attachment #568970 - Flags: review?(philipp)
Attachment #569474 - Flags: ui-review?(nisses.mail)
Attachment #569474 - Flags: review?(philipp)
This screenshot shows the difference between normal event and all-day event with calendars with different colors.
What about a box with round corners? Not sure if it would be easily recognizable.
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 ;-)
Attachment #569474 - Flags: review?(philipp) → review+
(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.
Added the missing border-radius
Attachment #569474 - Attachment is obsolete: true
Attachment #569474 - Flags: ui-review?(nisses.mail)
Attachment #570012 - Flags: ui-review?(nisses.mail)
Attachment #570012 - Flags: review?(philipp)
Attachment #570012 - Flags: review?(philipp) → review+
Not going to make the release, but I think we can live with that.
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! :/
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 ;-) )
Attachment #570012 - Attachment is obsolete: true
Attachment #570012 - Flags: ui-review?(nisses.mail)
Attachment #572185 - Flags: ui-review?(nisses.mail)
Attachment #572185 - Flags: review?(philipp)
Do you have a screenshot for this, by chance?
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.
Unbitrot after landing of Bug 671119
Attachment #572185 - Attachment is obsolete: true
Attachment #572185 - Flags: ui-review?(nisses.mail)
Attachment #572185 - Flags: review?(philipp)
Attachment #582684 - Flags: ui-review?(nisses.mail)
Attachment #582684 - Flags: review?(philipp)
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
Attachment #582684 - Flags: review?(philipp) → review+
Comment on attachment 582684 [details] [diff] [review]
Patch giving all-day events a border v5

Looks good, ui-r+
Attachment #582684 - Flags: ui-review?(nisses.mail) → ui-review+
Pushed to comm-central: <http://hg.mozilla.org/comm-central/rev/2371d35790a8>
Target Milestone: --- → 1.4
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?
Attachment #582684 - Flags: feedback?(philipp)
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.
Attachment #582684 - Flags: feedback?(philipp) → feedback+
Pushed to comm-aurora: <http://hg.mozilla.org/releases/comm-aurora/rev/40bea90c6d2e>
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Target Milestone: 1.4 → 1.3
You need to log in before you can comment on or make changes to this bug.