[KOrganizer] Improve event display
Open, Needs TriagePublic

Description

The different event views in KOrganizer look a bit dated, the painting code could use a bit of updating to make it look more modern.

Some ideas:

Month view

  • use softer colors (the default green for events does not look very good, something softer, less intense color would be better)
  • make the events rectangular (remove the round corner, or notably reduce it) - this needs to be done carefully otherwise, it may not be easy to distinguish between multiple separate events and a single event spanning multiple days (there was some work done previously in D6368 (D16013)

Agenda view

  • make the day/hour lines less outstanding
  • remove the rounded corners from events like in month view (D15916)
dvratil created this task.Aug 16 2018, 7:56 PM
ognarb claimed this task.Oct 2 2018, 8:15 PM
ognarb added a subscriber: ognarb.

I tried to remove the gradient effect and I found out it's look better, without making the events rectangular.

ognarb added a comment.Oct 2 2018, 8:38 PM

I also removed the border.

ognarb added a comment.Oct 2 2018, 8:53 PM

The only problem is if someone choose as calendar color yellow.

Looks nice, thanks for looking into this!

Could you also try to reduce the corner radius of the events? I think if it would be the same radius of the widgets it might look pretty good :)

The only problem is if someone choose as calendar color yellow.

True, maybe the background color could be made much less prominent (lighter)? That would make the conflict much less likely.

ognarb added a comment.Oct 2 2018, 9:15 PM

Could you also try to reduce the corner radius of the events? I think if it would be the same radius of the widgets it might look pretty good :)

Sure

True, maybe the background color could be made much less prominent (lighter)? That would make the conflict much less likely.

I trying to add a very small border (1px), if it doesn't I can also try to make the background color lighter.

Here is the result with a 1px border and with the same color for the calendar and the background.

dvratil moved this task from Backlog to In Progress on the KDE PIM board.Oct 5 2018, 8:54 AM
dvratil updated the task description. (Show Details)Oct 16 2018, 1:46 PM

Month and agenda items in KOrganizer are now flat with less-rounded corners, thanks to @ognarb! The work has landed on master (for 18.12 release)

Month view
Before:


After:

Agenda
Before:


After:

@ngraham would this be a good piece for your weekly blog?

@ognarb do you also want to mess around with the colors a bit? I'd like to use a bit more sensible and modern color palette (more pastel palette) - we can try to get some input from the VDG (Visual Design Group) on this.

How much of this has already landed? I only blog about things that are actually in.

Flat items and less rounded corners are already in git master (for 18.12). We can wait for the improvements in the color palette to be done first, then blog about the whole task if you want.

@dvratil I not really good with choosing color. But with some input from the VDG, I can probably change the default color. I will first work on the day/hour lines.

repinc added a subscriber: repinc.EditedOct 21 2018, 8:36 AM

There is another thing to look into with with month view rendering. It looks like it does not respect the DPI and does not look quite right on HiDPI screens. The bars ae just too narrow and height does not react to larger font size.

@repinc, could you please attach a screenshot?

@dvratil Do you think, it's a good idea to use QStyle for the color. Because for the moment it's difficult to choose a color palette that look good with breeze, breeze dark and some other themes. And then add button to activate this feature, so that someone can also choose the color manually like before.

@ognarb That sounds like a good idea: you can use it to get information about background and foreground colors and calculate some reasonable color palette from that.

@dvratil here is the screenshot

@repinc interesting, but I don't have a HiDPI screen to test. I read in the internet that using QRectF,QPointF instead of QRect and QPoint should improve the situation. So I'm changing most of the occurence of QRect and QPoint. I also found out that the item height is hardcoded in function of MonthCell::topMargin to an height of 18px, but I have not idea how to access the pixel ratio.

I would say let's treat the HiDPI problem as a standalone issue, the painting code should probably take font metrics into account, instead of hardcoded arbitrary constants :)

dkurz added a subscriber: dkurz.Wed, Oct 31, 5:23 PM
ognarb added a comment.Sun, Nov 4, 4:18 PM

@dvratil Do you have some other improvement suggestion? I was thinking about changing the default color to a pastel green color (#BAED91) but otherwise I don't know that can be improved anymore.

dvratil added a comment.EditedFri, Nov 9, 11:20 PM

@ognarb uh, sorry, I haven't seen the notification about your last comment. Yeah, going for some more pastel color to better fit Plasma/Breeze color theme would be nice. Maybe the entire default color generator could be improved - I honestly don't know much about where the colors come from in KOrganizer :-)

Ok I will look into that :)

BTW, here is the official Breeze color palette: https://hig.kde.org/style/color/default.html

BTW, here is the official Breeze color palette: https://hig.kde.org/style/color/default.html

Thanks, this is interesting, now I only need to found where the color is generated :)

Sory for the delay, I distro hopped from arch to openSuSe and I have some trouble with building from source with openSuSe (libkleo and some other dependencies don't want to build). And I also have trouble finding where the color is generated (the calendar is generated in korganizer:src/akonadicollectionview.cpp, but I have trouble finding when and where the color is set).

There's Prefs::createNewColor() in eventviews/src/prefs.cpp, looks like that might be it?