After an evaluation, GNOME has moved from Bugzilla to GitLab. Learn more about GitLab.
No new issues can be reported in GNOME Bugzilla anymore.
To report an issue in a GNOME project, go to GNOME GitLab.
Do not go to GNOME Gitlab for: Bluefish, Doxygen, GnuCash, GStreamer, java-gnome, LDTP, NetworkManager, Tomboy.
Bug 769003 - Adwaita: GtkCalendar uses a confusing style for week of year
Adwaita: GtkCalendar uses a confusing style for week of year
Status: RESOLVED FIXED
Product: gtk+
Classification: Platform
Component: Themes
unspecified
Other All
: Normal normal
: ---
Assigned To: gtk-bugs
gtk-bugs
Depends on:
Blocks:
 
 
Reported: 2016-07-20 16:52 UTC by Antonio Ospite
Modified: 2016-07-22 12:12 UTC
See Also:
GNOME target: ---
GNOME version: ---


Attachments
Screenshot of the proposed changes to GtkCalendar style in Adwaita (62.54 KB, image/png)
2016-07-20 16:52 UTC, Antonio Ospite
  Details
Adwaita: bring colors back in GtkCalendar "week of the year" column (2.42 KB, patch)
2016-07-20 16:59 UTC, Antonio Ospite
none Details | Review
Proposed change using color: @borders (15.94 KB, image/png)
2016-07-20 21:00 UTC, Antonio Ospite
  Details
Screenshot with more aggressivelly dimmed uninteresting days (25.12 KB, image/png)
2016-07-22 11:31 UTC, Lapo Calamandrei
  Details

Description Antonio Ospite 2016-07-20 16:52:25 UTC
Created attachment 331832 [details]
Screenshot of the proposed changes to GtkCalendar style in Adwaita

Hi,

GtkCalendar uses the same style for both the "week of the year" column and for the "day of the month" buttons, and IMHO this is quite confusing: when I glance at the calendar I always end up thinking that the "week of the year" is a day too.

I fixed the issue bringing the colors back also to the "days of the week" header, see the attached screenshot.

A patch is coming right away.

Thanks,
   Antonio
Comment 1 Antonio Ospite 2016-07-20 16:59:48 UTC
Created attachment 331833 [details] [review]
Adwaita: bring colors back in GtkCalendar "week of the year" column

Here is the patch with the proposed changes.

Thanks,
   Antonio
Comment 2 Lapo Calamandrei 2016-07-20 20:11:22 UTC
Thanks for spotting!
While I see the issue, the proposed solution looks a bit too much to me, what about dimming the highlight strip text color? 
What about something like `calendar.hilghlight { color: @borders; }` [<- in the inspector]? That way the highlight strip is differently colored than the dimmed calendar days (the ones from other months) so it should work, the contrast is a bit low anyway, what do you think?
Comment 3 Lapo Calamandrei 2016-07-20 20:49:48 UTC
The calendar theme scss had some other issues so I cleaned up the house a bit, I pushed the dimming too (not what I proposed though), please close if you think the issue has been addressed.
Comment 4 Antonio Ospite 2016-07-20 21:00:33 UTC
Created attachment 331846 [details]
Proposed change using color: @borders

I see your point about the new settings being a little intrusive.

However your proposed change does not really solve the issue, the same color will still be used for different things which are next one other, see the areas highlighted by the red circles in the attached screenshot.

The complication is that the css selector seems to affect *both* the top horizontal header and the "week of the year" column at the same time, that's why I thought that a background would work. A softer background maybe?

Thanks,
   Antonio
Comment 5 Antonio Ospite 2016-07-20 21:06:28 UTC
I replied before reading your last message, sorry.

I'll check the changes in the git repository and get back to you.

Thanks,
   Antonio
Comment 6 Antonio Ospite 2016-07-20 21:33:20 UTC
OK, even with the latest changes the issue pointed out in my latest screenshot is still there.

What about something along these lines?

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 6181fc4..07ffa2a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3536,9 +3536,10 @@ calendar {
   }

   &.highlight {
-    color: $insensitive_fg_color;
+    color: $fg_color;
+    background-color: $insensitive_bg_color;

-    &:backdrop { color: $backdrop_insensitive_color; }
+    &:backdrop { color: $backdrop_text_color; background-color: $insensitive_bg_color; }
   }

   &:backdrop {


IMHO a background helps to differentiate the elements better, but I am no UI expert.


BTW I now realize that I also have no idea of what the :backdrop pseudo class is for :|

Thanks,
   Antonio
Comment 7 Lapo Calamandrei 2016-07-20 21:39:43 UTC
I'd really like to avoid using a background there, both week numbers and day names are accessory details at the end of the day, with a background they get more prominent than actual calendar days.

Widgets in an unfocused window get the `backdrop' pseudoclass, that name was picked to avoid confusion with `focus' (formerly `focused'), failing to some extent :-)
Comment 8 Daniel Boles 2016-07-21 09:40:02 UTC
Whatever it is, there should be _something_ to differentiate the day/week# headers from the day numbers. Not including that - like in the screenshot https://bug769003.bugzilla-attachments.gnome.org/attachment.cgi?id=331846 which Antonio says is still current - is (sorry!) completely unintuitive and not good design.

If not a different background or text colour, then perhaps a pair of Separators forming a right angle?

    M  Tu  W   Th  F   Sa  Su
   --------------------------
26| 1   2  3   etc.
27|
28|

or even

Wk| M   Tu  W   Th  F   Sa  Su
--|--------------------------
26| 1    2  3   etc.
27|
28|
Comment 9 Lapo Calamandrei 2016-07-21 15:12:40 UTC
The gtkcalendar doesn't supporto full css theming, there are basically just colors, so I can't add additional lines, check out my latest commit though, the the week numbers and days are lighter then month days and darker then dimmed days, so there is a difference.
Comment 10 Antonio Ospite 2016-07-21 22:06:23 UTC
Hi Lapo, the difference between the dimmed days and the "highlight" is very subtle so we didn't notice it. The difference is a little more visible when switching from focused/unfocused but still quite confusing.

If the following is still too much, please let's use at least a darker gray for the highlight (and/or make the dimmed days even lighter?):

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 6181fc4..e095818 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3536,7 +3536,7 @@ calendar {
   }

   &.highlight {
-    color: $insensitive_fg_color;
+    color: $selected_bg_color;

     &:backdrop { color: $backdrop_insensitive_color; }
   }


Thanks again,
   Antonio
Comment 11 Lapo Calamandrei 2016-07-22 11:31:05 UTC
Created attachment 331982 [details]
Screenshot with more aggressivelly dimmed uninteresting days

Blue works for me, I'd rather increase contrast by dimming the uninteresting days as you suggest anyway, still for not giving too much importance to the highlight strips and for consistence with shell calendar, see the pic here.
Comment 12 Antonio Ospite 2016-07-22 11:46:06 UTC
And your last proposal works for me, the three elements (highlight, dimmed days, normal days) are easier to differentiate now.

Thanks,
   Antonio
Comment 13 Daniel Boles 2016-07-22 12:08:38 UTC
Yeah, that looks far better, or even ideal :-)
Comment 14 Lapo Calamandrei 2016-07-22 12:12:37 UTC
Ok, pushing, thanks for helping out!