Closed Bug 964040 Opened 11 years ago Closed 3 years ago

make "today" easier to spot in multiweek & month view

Categories

(Calendar :: Calendar Frontend, enhancement, P2)

Lightning 1.9.1
enhancement

Tracking

(thunderbird_esr78 wontfix)

RESOLVED FIXED
90 Branch
Tracking Status
thunderbird_esr78 --- wontfix

People

(Reporter: weichen302, Assigned: Paenglab)

References

Details

Attachments

(3 files, 21 obsolete files)

59.61 KB, image/png
Paenglab
: feedback+
Details
424.13 KB, image/png
Details
21.04 KB, patch
Paenglab
: review+
mkmelin
: feedback+
Details | Diff | Splinter Review
Attached image lightning_after_mod.jpg (obsolete) β€”
style of "today" is not obvious. Hard to spot today in Multiweek & Month view.

Enclosed a patch that use black border, black label font, and a slight different background color for today.


--- /src/extensions/{e2fda1a4-762b-4020-b5ad-a41df1933103}/chrome/calendar/skin/calendar/common/calendar-views.css
+++ /tmp/MmgUwb_calendar-views.css
@@ -174,7 +174,7 @@
 
 calendar-header-container[selected="true"],
 .calendar-event-column-linebox[selected="true"] {
-    background-color: #EAEAEA;
+    background-color: #FFFCD8;
 }
 
 calendar-header-container[weekend="true"][relation="today"],
@@ -208,7 +208,7 @@
 
 calendar-header-container[weekend="true"][selected="true"],
 .calendar-event-column-linebox[weekend="true"][selected="true"] {
-    background-color: #EAEAEA;
+    background-color: #FFFCD8;
 }
 
 .calendar-event-column-linebox[off-time="true"][selected="true"] {
@@ -748,7 +748,7 @@
 .calendar-month-day-box-day-off[relation="today"],
 .calendar-month-day-box-other-month[relation="today"] {
     background-color: #E1F0FD;
-    border: 1px solid #000000 !important;
+    border: 1px solid #7FB9EE !important;
     -moz-margin-end: -1px !important;
     margin-top: -1px !important;
     position: relative;
@@ -762,7 +762,6 @@
 }
 
 .calendar-month-day-box-date-label[relation="today"] {
-    color: #000000;
     background-color: #D2E3F3;
     font-weight: bold;
 }
@@ -774,7 +773,7 @@
 .calendar-month-day-box-current-month[selected="true"],
 .calendar-month-day-box-day-off[selected="true"],
 .calendar-month-day-box-other-month[selected="true"] {
-    background-color: #EAEAEA;
+    background-color: #FFFCD8;
 }
Attached patch patch that change the style of "today" (obsolete) β€” β€” Splinter Review
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Linux → All
Hardware: x86_64 → All
Assignee: nobody → weichen302
Status: NEW → ASSIGNED
Attached image screenshot for proposed fix1 (obsolete) β€”
Attachment #8365655 - Attachment is obsolete: true
Attached image screenshot for proposed fix2 (obsolete) β€”
Attached image screenshot for proposed fix3 (obsolete) β€”
Need second opinion on visual style.

I come up with three fixes, please take a look at attachments fix1.png to fix3.png.
Attached patch patch for proposed fix1 (obsolete) β€” β€” Splinter Review
Attachment #8365656 - Attachment is obsolete: true
Attachment #8371306 - Attachment description: see fix1.png → patch for proposed fix1
Attachment #8371307 - Attachment description: see fix2.png, also highlight current week → patch for proposed fix2. Highlight current week.
All 3 patches apply to comm-esr17.
Attached image screenshot for proposed fix3 - v2 (obsolete) β€”
Attachment #8371285 - Attachment is obsolete: true
Attached patch patch for proposed fix3 - v2 (obsolete) β€” β€” Splinter Review
The fix3 - v2 patch is my choice.
Attachment #8371308 - Attachment is obsolete: true
Attachment #8372731 - Flags: review?(clarkbw)
Comment on attachment 8372731 [details] [diff] [review]
patch for proposed fix3 - v2

Changed reviewers to recently more active ones. ;) https://wiki.mozilla.org/Calendar:Module_Ownership is pretty much outdated. Have a look at https://wiki.mozilla.org/Modules/Calendar for a better and more recent list of reviewers.
Attachment #8372731 - Flags: ui-review?(bwinton)
Attachment #8372731 - Flags: review?(philipp)
Attachment #8372731 - Flags: review?(clarkbw)
Comment on attachment 8372731 [details] [diff] [review]
patch for proposed fix3 - v2

I haven't run with Lightning for ages now, and don't feel qualified to ui-review this.  Perhaps Andreas would be a better choice…
Attachment #8372731 - Flags: ui-review?(bwinton) → ui-review?(bugs)
Richard, I think it's up to you ;-)
Attached image proposal from my userChrome.css (n. 4) (obsolete) β€”
As a proposal for the discussion I add a screenshot from the look I adopted long time ago in my userChrome.css file.
Darker color for the border but not completely black since the thickness is 2 pixels, and a slightly bigger day number.
In the picture there are other changes, but keep in count only the "today" day.
Attached patch patch for proposed fix3 - v3 (obsolete) β€” β€” Splinter Review
Change: Use simple substraction and addition to find the start index and end index of current week. It is clumsy to iterate backward and forward over dayboxes.

The visual style remains the same.

The 2px board along is a good highlight for eye to tract the today's box. However, it can be more elegant. This brings up my unsatisfaction on the color scheme used by this patch - while the orange/brown looks cool on mozilla and lightning's logo, it feels like a stranger in the calendar view. I think we need an artist.
Attachment #8372730 - Attachment is obsolete: true
Comment on attachment 8372929 [details] [diff] [review]
patch for proposed fix3 - v3

This patch fails on trunk. Please can you update the patch to trunk?
I like proposed fix2 but without making the whole week's background blue. What about making the whole .calendar-month-day-box-date-label light blue with a a bit darker top border instead of the green? And the "today" like Decathlon's proposal but the outer border part his blue and the inner border part a bit lighter. To implement the two colors you can use -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors and -moz-border-left-colors.
Please do not provide patches against comm-esr17. This branch is obsolete. If you provide patches please build them based on the latest comm-central repository to ensure that they apply to the current Lightning 3.2 test builds.

What Lightning theme are you trying to optimize? The standard one or the one optimized for accessibility? The windows theme, the linux theme, the mac os theme or all of them?
Attached patch patch for proposed fix3 - v4 (obsolete) β€” β€” Splinter Review
It uses blue with 2px gradient color border. The upper right and left corner somehow has "white" dot if look closely. I tried disable upper 4px dark blue border but it still has light colored dot at the right upper & lower corners. It might be a feature of -moz-border-xxxx-colors?

This patch is tested on lightning 2.6.4 under linux, and generated from comm-central. I am not aware that lightning has different themes for windows or osx. Because the css been patched is under "common", I assume it should works on other OS as well.
Attachment #8372929 - Attachment is obsolete: true
Attachment #8373811 - Flags: review?(richard.marti)
Attached image Inverted Header Mockup (obsolete) β€”
Hi Chen,

first of all, thank you for stepping up and creating a patch instead of just a bug! I do have a few comments on the UI looks I would like to forward from the designer of the current looks.

A pastel color scheme has been chosen to ensure that the background design doesn't distract from the most important thing, the events. Darkening the color should lead to using desaturated colors, i.e a dark grey or blue as the border color, not the bright blue that is currently proposed.

If this is not enough, you could invert the header color for the current day. This would make the current day stand out without changing the existing color scheme.

I personally think inverting the colors is sufficient to make it clear where the current day is. While the week bar is a nice idea, I'm pretty sure its something that others (including me) will want to disable.

I've attached a mockup of what the inverted scheme would look like.
Comment on attachment 8371307 [details] [diff] [review]
patch for proposed fix2. Highlight current week.

I'm going to mark a few patches obsolete, that look to me like they are superseded by others. If this is not correct, please undo.
Attachment #8371307 - Attachment is obsolete: true
Attachment #8372731 - Attachment is obsolete: true
Attachment #8372731 - Flags: ui-review?(bugs)
Attachment #8372731 - Flags: review?(philipp)
Philipp, I think either your inverted scheme or Decathlon's 2px dark border is enough for eye to track today. If the current week highlight bar is unnecessary, then this patch can be skipped.
Comment on attachment 8373811 [details] [diff] [review]
patch for proposed fix3 - v4

This is already looking good but on Philipp's comment 22 I give a ui-r- now. Instead of the two different border colors you could use the border color calendar-day-label[relation="today"]is using (#67ACD8). I think the "Today" label is to much and is not localized.

The actual week bar is with 4px to bold. 3px looks better, maybe 2px would also work and be less distracting to need an option to disable it.

Please better ask for review Philipp as it has also JS code in it.

I'll attach a mockup with your patch but with border- and background color #67ACD8.
Attachment #8373811 - Flags: review?(richard.marti) → ui-review-
Attached image mockup for fix3-v4 with Pilipp's colors (obsolete) β€”
This is a mockup based on patch fix3 - v4 with #67ACD8 as border color and label background color to match Philipp's mockup. The actual week top border is 3px.

I also saw the next day has set a black border. Could you please set the normal color?
Sorry, the next day border needs the same color as the today day.
It is hard to have a new today highlight that no one did before, the solid border looks like google,  week bar smells mac, inverted color reminds me old Palm days, if just change the color or font weight of today, then ipad has done it, except more elegant.

Perhaps before we have help from an artist, we should close this bug and move on.
Note the mockup I had attached is from an artist (not me :-) I don't think its required for us to do something totally new, it just needs to fit in with the color scheme. There are a number of things on the new mac iCal I would like to see for Lightning, and I have been dreaming of even before they implemented it.

I think the best way to move forward would be to go with the artist's mockup. Among other things, this means removing the "Today" from the header, because the color shows enough. If you want the week highlight bar, I think this is something we should hide behind a preference. It can be a UI visible preference if you like.
Hi, I made a new bug about this - as work has been done already it would be great for this to be decided on and finished, as it's a daily problem for myself and other visually impaired and learning disabled folk right now.

This is a constant problem, at least for me. I wouldn't mind if it's very noticeable.
Some old style wall calendars used to have a red thick box you'd move from day to day. Maybe we should even do something like that?

Assignee: weichen302 → nobody
Status: ASSIGNED → NEW
Priority: -- → P2

Richard, do you have any suggestion on how to improve this?

Flags: needinfo?(richard.marti)
Attached image actual.png (obsolete) β€”

For the record, this is how it looks today. Already almost Philipp's proposal.

When the selection isn't on today then it is a strong blue background which very good shows where the today is.

Flags: needinfo?(richard.marti)
Attached image with outline.png (obsolete) β€”

A simple improvement could be a thicker border like in this screenshot. Or would you like the darker blue background like Philipp's proposal?

Alessandro, what do you think?

Attachment #9222441 - Flags: feedback?(alessandro)

The base problem is that there are three bg colors (or more) for the different days: one for today, one for "selected day" and then the weekends... You don't see it in the screenshot since today and selected are the same there.

I think a more obvious indicator is necessary to better catch the current day at a quick glance.
We could go with what Phillip originally proposed, making background color of the header label of that day our primary color.

We could also modernize it a little bit more to remove unnecessary tabs, lines, and visual separators where is not necessary.
Doing so would give us the ability to use round indicators that are easy to spot, but don't take up the entire block, making the whole area a bit less crowded and easier to digest.

The 2nd mockup is a bit more complicated to achieve and might require more work.

Comment on attachment 9222441 [details]
with outline.png

Good proposal, but I don't think the border would be enough to make it more visible.

Attachment #9222441 - Flags: feedback?(alessandro) → feedback-
Attachment #9222458 - Flags: feedback?(richard.marti)
Attachment #9222458 - Flags: feedback?(mkmelin+mozilla)

Comment on attachment 9222458 [details]
calendar-selection-mockup.png

Seems a bit more modern, but...

  • Not sure how it would work for days were we show more than the number. (Personally I'd like to have month showing more as well, especially in the multi-week view I always end up in wrong month.)
  • Not sure it stands out when you have fuller calendar
Attachment #9222458 - Flags: feedback?(mkmelin+mozilla)

Comment on attachment 9222458 [details]
calendar-selection-mockup.png

I like it.

In the mock-up there are month names.

Attachment #9222458 - Flags: feedback?(richard.marti) → feedback+
Attached image calendar-today-mockup.png β€”

Here's some quick test with a busy calendar and different solutions we could consider.

Attached patch 964040-calendar-today.patch (obsolete) β€” β€” Splinter Review

This patch implements your mock-up.

Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #9222626 - Flags: review?(alessandro)
Comment on attachment 9222626 [details] [diff] [review]
964040-calendar-today.patch

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

Thanks for quickly implementing this, but I don't think the current structure is flexible enough to enable us to properly implement the circular indicator.
The hidden overflow of the container, the type of box "header" we use, and the various labels will make this a bit complicated to properly style and keep consistent in all scenarios.
I think we should defer this UI refresh to a later time, after the calendar is fully de-XUL'ed.

For now, I think the first proposal in the mock-up image I shared will be good enough to solve the issue with:
- Primary background color and white text for the box header
- 2px border
Attachment #9222626 - Flags: review?(alessandro) → review-
Attached patch 964040-calendar-today.patch (obsolete) β€” β€” Splinter Review

Is this better?

I found a lot of border-left/border-right I changed to border-inline-*.

Attachment #9222626 - Attachment is obsolete: true
Attachment #9222859 - Flags: review?(alessandro)
Attached patch 964040-calendar-today.patch (obsolete) β€” β€” Splinter Review

I found an issue with the systemcolors setting.

Attachment #9222859 - Attachment is obsolete: true
Attachment #9222859 - Flags: review?(alessandro)
Attachment #9222866 - Flags: review?(alessandro)
Attachment #8371283 - Attachment is obsolete: true
Attachment #8371284 - Attachment is obsolete: true
Attachment #8371306 - Attachment is obsolete: true
Attachment #8372898 - Attachment is obsolete: true
Attachment #8373811 - Attachment is obsolete: true
Attachment #8373812 - Attachment is obsolete: true
Attachment #8373908 - Attachment is obsolete: true
Attachment #8373922 - Attachment is obsolete: true
Attachment #9222439 - Attachment is obsolete: true
Attachment #9222441 - Attachment is obsolete: true
Comment on attachment 9222866 [details] [diff] [review]
964040-calendar-today.patch

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

This looks good with the outline removed.
Magnus, what do you think?
A quick CSS fix that greatly improve the visibility of the today box.

::: calendar/base/themes/common/calendar-views.css
@@ +681,5 @@
>  .calendar-month-day-box-other-month[relation="today"] {
>      background-color: var(--viewTodayBackground);
>      border: 1px solid var(--viewTodayBorderColor) !important;
> +    outline: 1px solid var(--viewTodayBorderColor);
> +    outline-offset: -2px;

This is strange now as the border and outline are disconnected.
I think now with the background header, the simple 1px border is enough.
Attachment #9222866 - Flags: review?(alessandro)
Attachment #9222866 - Flags: review+
Attachment #9222866 - Flags: feedback?(mkmelin+mozilla)

(In reply to Alessandro Castellani [:aleca] from comment #48)

Comment on attachment 9222866 [details] [diff] [review]
964040-calendar-today.patch

Review of attachment 9222866 [details] [diff] [review]:

::: calendar/base/themes/common/calendar-views.css
@@ +681,5 @@

.calendar-month-day-box-other-month[relation="today"] {
background-color: var(--viewTodayBackground);
border: 1px solid var(--viewTodayBorderColor) !important;

  • outline: 1px solid var(--viewTodayBorderColor);
  • outline-offset: -2px;

This is strange now as the border and outline are disconnected.
I think now with the background header, the simple 1px border is enough.

Removed. Your system is a weird one. Here they are perfectly connected. Either your system has scaling issues or toolkit has them together with your system.

Attachment #9222866 - Attachment is obsolete: true
Attachment #9222866 - Flags: feedback?(mkmelin+mozilla)
Attachment #9222921 - Flags: review+
Attachment #9222921 - Flags: feedback?(mkmelin+mozilla)
Comment on attachment 9222921 [details] [diff] [review]
964040-calendar-today.patch

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

It's an improvement.  Some thoughts still:
*  When today is selected, it's no longer very noticeable.  Should that do something special?
* Came to mind, the whole views would be much clearer if past days had different bg color (perhaps suitable opacity?) or something, similar to how you'd strike over past days on a wall calendar. Like counting down to Christmas ;). Google calendar does this.
Attachment #9222921 - Flags: feedback?(mkmelin+mozilla) → feedback+

(In reply to Magnus Melin [:mkmelin] from comment #50)

Comment on attachment 9222921 [details] [diff] [review]
964040-calendar-today.patch

Review of attachment 9222921 [details] [diff] [review]:

It's an improvement. Some thoughts still:

  • When today is selected, it's no longer very noticeable. Should that do
    something special?

It's the only with a blue header. That should be good to notice.

  • Came to mind, the whole views would be much clearer if past days had
    different bg color (perhaps suitable opacity?) or something, similar to how
    you'd strike over past days on a wall calendar. Like counting down to
    Christmas ;). Google calendar does this.

Something for a new bug.

Target Milestone: --- → 90 Branch

(In reply to Richard Marti (:Paenglab) from comment #51)

It's the only with a blue header. That should be good to notice.

Only in a fairly empty calendar. If you have 4-5 events per day, with different colors, the header doesn't stand out at all unless one looks closely.

Your system is a weird one. Here they are perfectly connected. Either your system has scaling issues or toolkit has them together with your system.

Both for sure, but hey, at least I am the in house edge cases inspector :D

Pushed by alessandro@thunderbird.net:
https://hg.mozilla.org/comm-central/rev/08a0e06d98a9
Make "Today" easier to spot in multiweek and month view. r=aleca

Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: