Project

General

Profile

Actions

Feature #40744

open

Refresh history tabs look and feel

Added by Marius BĂLTEANU about 1 year ago. Updated 13 days ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:

Description

The current UI of the history tab looks quite confusing because of the many borders. For some heading we started to add a background color (ex: Activity page) and I think we should also add to the history tab. Looking on some active themes, I saw some quite nice implementations:

1.Simple change to show gravatar inside the heading:

2. From redmine_theme_farend_bleuclair theme maintained by Farend (Go MAEDA).

What do you think?


Files

history1.png (101 KB) history1.png Marius BĂLTEANU, 2024-05-28 20:46
history2.png (84.9 KB) history2.png Marius BĂLTEANU, 2024-05-28 20:54
screenshot 2024-05-29 13.28.45.png (102 KB) screenshot 2024-05-29 13.28.45.png Mizuki ISHIKAWA, 2024-05-29 06:29
feature-40744-bleuclair-v1.patch (11.4 KB) feature-40744-bleuclair-v1.patch Mizuki ISHIKAWA, 2024-06-06 09:02
screenshot 2024-06-06 16.02.00.png (88.1 KB) screenshot 2024-06-06 16.02.00.png Mizuki ISHIKAWA, 2024-06-06 09:02
screenshot 2024-06-06 16.02.14.png (80.4 KB) screenshot 2024-06-06 16.02.14.png Mizuki ISHIKAWA, 2024-06-06 09:02
screenshot 2024-06-06 16.01.09.png (62.6 KB) screenshot 2024-06-06 16.01.09.png Mizuki ISHIKAWA, 2024-06-06 09:02
feature-40744-bleuclair-v2.patch (11.5 KB) feature-40744-bleuclair-v2.patch Mizuki ISHIKAWA, 2024-06-06 09:26
timeline.png (234 KB) timeline.png Marius BĂLTEANU, 2025-06-19 00:24
background header.png (181 KB) background header.png Marius BĂLTEANU, 2025-06-19 00:29
border.png (191 KB) border.png Marius BĂLTEANU, 2025-06-19 00:34
forum-comments.png (109 KB) forum-comments.png Marius BĂLTEANU, 2025-06-21 16:15
news-replies.png (238 KB) news-replies.png Marius BĂLTEANU, 2025-06-21 16:15
issue-notes.png (522 KB) issue-notes.png Marius BĂLTEANU, 2025-06-21 16:15
0001-Unify-the-look-and-feel-of-issue-notes-news-replies-.patch (12.9 KB) 0001-Unify-the-look-and-feel-of-issue-notes-news-replies-.patch Marius BĂLTEANU, 2025-06-21 16:20

Related issues

Related to Redmine - Feature #39880: Add a small border-radius to selected (author) headingsNew

Actions
Actions #1

Updated by Marius BĂLTEANU about 1 year ago

Also, this should cover also the requirements from #39880.

Actions #2

Updated by Marius BĂLTEANU about 1 year ago

  • Related to Feature #39882: Highlight selected version on the Roadmap view added
Actions #3

Updated by Marius BĂLTEANU about 1 year ago

  • Related to deleted (Feature #39882: Highlight selected version on the Roadmap view)
Actions #4

Updated by Marius BĂLTEANU about 1 year ago

  • Related to Feature #39880: Add a small border-radius to selected (author) headings added
Actions #5

Updated by Mizuki ISHIKAWA about 1 year ago

I like design 2 and usually use the Bleuclair theme. When displaying an icon image with design 2, it looks like a speech bubble appears from the icon image as shown in the screenshot below.

design 1 is also easier to read than at present. I prefer a little more padding.

Actions #6

Updated by Go MAEDA about 1 year ago

Thank you for your interest in the Bleuclair theme. It was created by Junichi Ishikura and is now maintained by Mizuki ISHIKAWA.

I believe the readability of the Bleuclair theme's history tab is nicer than the default theme, and I would be happy to see it incorporated into Redmine core.

Actions #7

Updated by Marius BĂLTEANU about 1 year ago

Thanks for your responses.

Mizuki ISHIKAWA, Go MAEDA, do you think it is possible to extract this into a patch and post it here? I can review it.

Actions #8

Updated by Mizuki ISHIKAWA about 1 year ago

Marius BĂLTEANU wrote in #note-7:

Thanks for your responses.

Mizuki ISHIKAWA, Go MAEDA, do you think it is possible to extract this into a patch and post it here? I can review it.

I made a patch. I'm not very good at writing CSS, so feedback is welcome.

I have also applied changes to similar layout such as the news and forum screens.
The vertical line connecting the icons is hidden in the notes tab and properties tab. This is because notes and properties are considered to be extracted from a part of the continuous history and are therefore discontinuous.

issue forum news
Actions #10

Updated by Go MAEDA 6 months ago

  • Target version set to Candidate for next major release
Actions #11

Updated by Marius BĂLTEANU 15 days ago

Thanks for posting the patches.

Based on the existing work, I made 3 options:

Option 1: timeline and border with background for header only for journal with notes

Option 2: only background for node header

Option 3:

What do you think?

Actions #12

Updated by Go MAEDA 15 days ago

Thank you for putting together these options.

I prefer Option 2 or Option 3. I don't like Option 1 because journals without notes look different and are less noticeable. This might cause people to miss important information. Also, the appearance feels a bit strange. If someone isn't interested in journals without notes, they can just switch to the "Notes" tab. So, I don't think we need to change the way it looks.

Actions #13

Updated by Marius BĂLTEANU 13 days ago

Thanks Go MAEDA for your feedback.

Attached is my final version based on option 2, but with some changes:
  • I unified the HTML structure of issue notes, news replies and forum comments by introducing new classes: events, event-item, event-header, event-details, event-actions and event-content.
  • I used a lighter color (#f6f7f8) as a background color for event headers
  • I migrated the journal actions from contextual to flex rules

I'm still not 100% happy wit the results, but I think that it is better than the actual version.

Any feedback is welcome!

Actions

Also available in: Atom PDF