Revamp tp calendar #479
Revamp tp calendar #479
Conversation
| private choseColor(id: string, over: boolean, created: boolean) { | ||
| let baseColor; | ||
| if (over) { baseColor = eventColors.over; } | ||
| else if (created) { baseColor = eventColors.created; } | ||
| else { baseColor = eventColors.pending; } | ||
| let color = { ...baseColor } | ||
| const hash = id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0); | ||
| const red = (hash % 128).toString(16).padStart(2, '0'); | ||
| color.primary = `#${red}${color.primary.slice(3)}`; | ||
| return color; | ||
| } |
There was a problem hiding this comment.
I feel like the color should be variable only for 'active' event. We can keep the same color for all the other events.
How variable are the colors?
Edit: Actually, do we even need different colors for the various states? Maybe a reservation should only have one 'unique' color. We already now the state (if it end before today's date, or start after today's...)
@abretaud thoughts?
There was a problem hiding this comment.
On askomics we use this to generate the color, not sure if it's 'better'
There was a problem hiding this comment.
Here is the way it looked before:
Here it is with the color scheme you are recommending:
This is way better indeed. Any other improvements ?
|
Should be fine even if lines are not continuous. We won't have more than 2-3 reservations at the same time at most. As long as they have distinct color, it's fine. Can you provide some screenshots to see the alignement issue? |
@mboudet
The events are shown as bars instead of dots now but there is no guarantee that the bars corresponding to one event are contiguous.
Events are given a color corresponding to whether they are pending, active or over with a little bit of semi-random variation to distinguish events from one another. Perhaps a better "UX engineer" than I can come up with sexier colors and a better way to introduce their semi-randomness.
Shall I write up the styling in proper CSS or leave it as is ?
closes #467