Project

General

Profile

Actions

Feature #40744

closed

Refresh history tabs look and feel

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

Status:
Closed
Priority:
Normal
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed

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

Final version implemented:

Issue:

News:

Forum:


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

Related issues

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

Actions
Related to Redmine - Patch #42972: Refactor and unify the structure of journals, replies and commentsResolvedMarius BĂLTEANU

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 7 months ago

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

Updated by Marius BĂLTEANU about 1 month 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 about 1 month 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 about 1 month 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 #14

Updated by Marius BĂLTEANU 18 days ago

  • File deleted (0001-Unify-the-look-and-feel-of-issue-notes-news-replies-.patch)
Actions #15

Updated by Marius BĂLTEANU 9 days ago

  • Related to Patch #42972: Refactor and unify the structure of journals, replies and comments added
Actions #16

Updated by Marius BĂLTEANU 9 days ago

  • Status changed from New to Resolved
  • Assignee set to Marius BĂLTEANU
  • Resolution set to Fixed

Change committed in r23887 together with #42972

Actions #17

Updated by Marius BĂLTEANU 9 days ago

  • Description updated (diff)
  • Status changed from Resolved to Closed
Actions #18

Updated by Mizuki ISHIKAWA 2 days ago

I would prefer .journal instead of .journal-entry to unify with issues and forums.

diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb
index f80af8f18..704d3d04e 100644
--- a/app/views/news/show.html.erb
+++ b/app/views/news/show.html.erb
@@ -41,7 +41,7 @@
   <p><%= toggle_link l(:label_comment_add), "add_comment_form", :focus => "comment_comments", :scroll => "comment_comments" %></p>
 <% end %>
 <% @comments.each do |comment| %>
-    <div class="message reply journal-entry" id="<%= "message-#{comment.id}" %>">
+    <div class="message reply journal" id="<%= "message-#{comment.id}" %>">
       <% next if comment.new_record? %>
       <h4 class="reply-header journal-header">
         <span class="journal-info">

Actions

Also available in: Atom PDF