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

ASSIGNED
Assigned to

Status

--
enhancement
ASSIGNED
5 years ago
2 years ago

People

(Reporter: weichen302, Assigned: weichen302)

Tracking

Lightning 1.9.1

Details

Attachments

(8 attachments, 8 obsolete attachments)

22.43 KB, image/png
Details
23.47 KB, image/png
Details
2.02 KB, patch
Details | Diff | Splinter Review
10.16 KB, image/png
Details
4.67 KB, patch
Paenglab
: ui-review-
Details | Diff | Splinter Review
8.66 KB, image/png
Details
6.43 KB, image/png
Details
14.07 KB, image/png
Details
(Assignee)

Description

5 years ago
Created attachment 8365655 [details]
lightning_after_mod.jpg

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;
 }
(Assignee)

Comment 1

5 years ago
Created attachment 8365656 [details] [diff] [review]
patch that change the style of  "today"

Updated

5 years ago
Duplicate of this bug: 735640

Updated

5 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Linux → All
Hardware: x86_64 → All
Assignee: nobody → weichen302
Status: NEW → ASSIGNED
(Assignee)

Comment 3

5 years ago
Created attachment 8371283 [details]
screenshot for proposed fix1
Attachment #8365655 - Attachment is obsolete: true
(Assignee)

Comment 4

5 years ago
Created attachment 8371284 [details]
screenshot for proposed fix2
(Assignee)

Comment 5

5 years ago
Created attachment 8371285 [details]
screenshot for proposed fix3
(Assignee)

Comment 6

5 years ago
Need second opinion on visual style.

I come up with three fixes, please take a look at attachments fix1.png to fix3.png.
(Assignee)

Comment 7

5 years ago
Created attachment 8371306 [details] [diff] [review]
patch for proposed fix1
Attachment #8365656 - Attachment is obsolete: true
(Assignee)

Comment 8

5 years ago
Created attachment 8371307 [details] [diff] [review]
patch for proposed fix2. Highlight current week.
(Assignee)

Updated

5 years ago
Attachment #8371306 - Attachment description: see fix1.png → patch for proposed fix1
(Assignee)

Updated

5 years ago
Attachment #8371307 - Attachment description: see fix2.png, also highlight current week → patch for proposed fix2. Highlight current week.
(Assignee)

Comment 9

5 years ago
Created attachment 8371308 [details] [diff] [review]
patch for proposed fix3. Highlight in orange color.

All 3 patches apply to comm-esr17.
(Assignee)

Comment 10

5 years ago
Created attachment 8372730 [details]
screenshot for proposed fix3 - v2
Attachment #8371285 - Attachment is obsolete: true
(Assignee)

Comment 11

5 years ago
Created attachment 8372731 [details] [diff] [review]
patch for proposed fix3 - v2

The fix3 - v2 patch is my choice.
Attachment #8371308 - Attachment is obsolete: true
(Assignee)

Updated

5 years ago
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)

Comment 14

5 years ago
Richard, I think it's up to you ;-)

Comment 15

5 years ago
Created attachment 8372898 [details]
proposal from my userChrome.css (n. 4)

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.
(Assignee)

Comment 16

5 years ago
Created attachment 8372929 [details] [diff] [review]
patch for proposed fix3 - v3

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?
(Assignee)

Comment 20

5 years ago
Created attachment 8373811 [details] [diff] [review]
patch for proposed fix3 - v4

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)
(Assignee)

Comment 21

5 years ago
Created attachment 8373812 [details]
screenshot for proposed fix3 - v4(blue), light colored dot at corner
Created attachment 8373908 [details]
Inverted Header Mockup

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)
(Assignee)

Comment 24

5 years ago
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-
Created attachment 8373922 [details]
mockup for fix3-v4 with Pilipp's colors

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.
(Assignee)

Comment 28

5 years ago
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.

Updated

2 years ago
Duplicate of this bug: 1279897

Updated

2 years ago
Duplicate of this bug: 1240425

Comment 32

2 years ago
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.

Updated

2 years ago
Duplicate of this bug: 1299236
You need to log in before you can comment on or make changes to this bug.