From 100e3a5e1bd4dc2303afde7ad1c5193e20a00003 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marius=20B=C4=82LTEANU?= Date: Wed, 18 Jun 2025 22:42:07 +0300 Subject: [PATCH] Unify the look and feel of issue notes, news replies and forum comments (#40744). --- app/assets/stylesheets/application.css | 55 +++++++++++++++---------- app/views/issues/show.html.erb | 2 +- app/views/issues/tabs/_history.html.erb | 52 ++++++++++++----------- app/views/messages/show.html.erb | 22 +++++----- app/views/news/show.html.erb | 35 +++++++++------- 5 files changed, 96 insertions(+), 70 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 833e998f8..fde060e70 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -436,10 +436,6 @@ tr.message td.last_message { font-size: 93%; white-space: nowrap; } tr.message.sticky td.subject { font-weight: bold; } tr.message td.subject:not(:has(.icon)) { padding-left: 20px; } -body.avatars-on #replies .message.reply {padding-left: 32px;} -#replies .reply:target h4.reply-header {background-color:#DDEEFF;} -#replies h4 img.gravatar {margin-left:-32px;} - tr.version.closed, tr.version.closed a { color: #999; } tr.version:not(.shared) td.name { padding-left: 20px; } tr.version td.date, tr.version td.status, tr.version td.sharing { text-align: center; white-space:nowrap; } @@ -593,7 +589,6 @@ div.square { } .contextual {float:right; white-space: nowrap; line-height:1.4em;margin:5px 0px; padding-left: 10px; font-size:0.9em;} .contextual input, .contextual select {font-size:0.9em;} -.message .contextual, #comments .contextual { margin-top: 0; } .splitcontent {overflow: auto; display: flex; flex-wrap: wrap;} .splitcontentleft {flex: 1; margin-right: 5px;} @@ -775,28 +770,14 @@ div#issue-changesets div.changeset {border-bottom: 1px solid #ddd; padding: 4px; div#issue-changesets p { margin-top: 0; margin-bottom: 1em;} .changeset-comments {margin-bottom:1em;} -div.journal .contextual {margin-top: 0;} div.journal.private-notes .wiki {border-left:2px solid #d22; padding-left:4px; margin-left:-6px;} div.journal ul.details, ul.revision-info {color:#959595; margin-bottom: 1.5em;} div.journal ul.details a, ul.revision-info a {color:#70A7CD;} div.journal ul.details a:hover, ul.revision-info a:hover {color:#D14848;} -body.avatars-on div.journal {padding-left:32px;} -div.journal h4 img.gravatar {margin-left:-32px;} div.journal span.update-info {color: #666; font-size: 0.9em;} #update {margin-bottom: 1.4em;} -#history .tab-content { - padding: 0 8px; - margin-bottom: 10px; - border-right: 1px solid #d0d7de; - border-bottom: 1px solid #d0d7de; - border-left: 1px solid #d0d7de; - border-radius: 0 0 3px 3px / 0 0 3px 3px; - box-shadow: 0 1px 2px rgba(0,0,0,0.05); -} - -#history div:target h4.note-header {background-color:#DDEEFF;} #history p.nodata {display: none;} /* Prevent content from being hidden behind a #sticky-issue-header when scrolling via anchor links. */ .controller-issues.action-show div.wiki a[name], @@ -1193,7 +1174,6 @@ div.attachments span.author { font-size: 0.9em; color: #888; } div.thumbnails {margin:0.6em;} div.thumbnail {background:#fff;border:2px solid #ddd;display:inline-block;margin-right:2px;} div.thumbnail img {margin: 3px; vertical-align: middle;} -#history div.thumbnails {margin-left: 2em;} p.other-formats { text-align: right; font-size:0.9em; color: #666; } .other-formats span + span:before { content: "| "; } @@ -1745,6 +1725,7 @@ div.wiki .task-list input.task-list-item-checkbox { .handle {cursor: move;} #my-page .list th.checkbox, #my-page .list td.checkbox {display:none;} + /***** Gantt chart *****/ table.gantt-table { width: 100%; @@ -1858,6 +1839,39 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container { .version-behind-schedule a, .issue-behind-schedule a {color: #f66914;} .version-overdue a, .issue-overdue a, .project-overdue a {color: #f00;} +/***** User events (ex: journal, notes, replies, comments) *****/ +.events .event-entry { + background-color: #fff; +} + +.events h4.event-header { + background-color: #f6f7f8; + border-bottom: 0; + padding: 8px; + align-items: center; + display: flex; + justify-content: space-between; +} + +.events div:target h4.event-header { + background-color:#DDEEFF; +} + +.events .event-content { + padding-left: 8px; + margin-bottom: 1.2em; +} + +.events .event-actions { + margin-right: 8px; + display: inline-flex; + gap: 10px; +} + +.events .event-actions .reaction-button-wrapper { + display: inline-flex; +} + /***** Badges *****/ .badge { position:relative; @@ -2135,7 +2149,6 @@ div.gravatar-with-child > img.gravatar:nth-child(2) { } h2 img.gravatar, h3 img.gravatar {margin-right: 4px;} -h4 img.gravatar {margin: -2px 4px -4px 0;} td.username img.gravatar {margin: 0 0.5em 0 0; vertical-align: top;} #activity dt img.gravatar {margin: 0 1em 0 0;} /* Used on 12px Gravatar img tags without the icon background */ diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb index e41a91bb3..b0aa54b33 100644 --- a/app/views/issues/show.html.erb +++ b/app/views/issues/show.html.erb @@ -135,7 +135,7 @@ end %> <%= render partial: 'action_menu_edit' if User.current.wants_comments_in_reverse_order? %> -
+
<%= render_tabs issue_history_tabs, issue_history_default_tab %>
diff --git a/app/views/issues/tabs/_history.html.erb b/app/views/issues/tabs/_history.html.erb index aa5795400..99c2e9032 100644 --- a/app/views/issues/tabs/_history.html.erb +++ b/app/views/issues/tabs/_history.html.erb @@ -5,34 +5,38 @@ <% reply_links = issue.notes_addable? -%> <% for journal in journals %> -
+
-
- <%= render_journal_actions(issue, journal, :reply_links => reply_links) %> - #<%= journal.indice %> -
-

- <%= avatar(journal.user) %> - <%= authoring journal.created_on, journal.user, :label => :label_updated_time_by %> - <%= render_private_notes_indicator(journal) %> - <%= render_journal_update_info(journal) %> +

+
+ <%= avatar(journal.user) %> + <%= authoring journal.created_on, journal.user, :label => :label_updated_time_by %> + <%= render_private_notes_indicator(journal) %> + <%= render_journal_update_info(journal) %> +
+
+ <%= render_journal_actions(issue, journal, :reply_links => reply_links) %> + #<%= journal.indice %> +

- <% if journal.details.any? %> -
    - <% details_to_strings(journal.visible_details).each do |string| %> -
  • <%= string %>
    • - <% end %> -
- <% if Setting.thumbnails_enabled? && (thumbnail_attachments = journal_thumbnail_attachments(journal)).any? %> -
- <% thumbnail_attachments.each do |attachment| %> - <%= thumbnail_tag(attachment) %> +
+ <% if journal.details.any? %> +
    + <% details_to_strings(journal.visible_details).each do |string| %> +
  • <%= string %>
    • <% end %> -
- <% end %> - <% end %> - <%= render_notes(issue, journal, :reply_links => reply_links) unless journal.notes.blank? %> + + <% if Setting.thumbnails_enabled? && (thumbnail_attachments = journal_thumbnail_attachments(journal)).any? %> +
+ <% thumbnail_attachments.each do |attachment| %> + <%= thumbnail_tag(attachment) %> + <% end %> +
+ <% end %> + <% end %> + <%= render_notes(issue, journal, :reply_links => reply_links) unless journal.notes.blank? %> +
<%= call_hook(:view_issues_history_journal_bottom, { :journal => journal }) %> diff --git a/app/views/messages/show.html.erb b/app/views/messages/show.html.erb index b62709afa..48b98892d 100644 --- a/app/views/messages/show.html.erb +++ b/app/views/messages/show.html.erb @@ -39,14 +39,21 @@
<% unless @replies.empty? %> -
-

<%= sprite_icon('comments', l(:label_reply_plural)) %> (<%= @reply_count %>)

+
+

<%= sprite_icon('comments', l(:label_reply_plural)) %> (<%= @reply_count %>)

<% if !@topic.locked? && authorize_for('messages', 'reply') && @replies.size >= 3 %>

<%= toggle_link l(:button_reply), "reply", :focus => 'message_content', :scroll => "message_content" %>

<% end %> <% @replies.each do |message| %> -
"> -
+
"> +

+
+ <%= avatar(message.author) %> + <%= link_to message.subject, { :controller => 'messages', :action => 'show', :board_id => @board, :id => @topic, :r => message, :anchor => "message-#{message.id}" } %> + - + <%= authoring message.created_on, message.author %> +
+
<%= reaction_button message %> <%= quote_reply( url_for(:action => 'quote', :id => message, :format => 'js'), @@ -68,13 +75,8 @@ :class => 'icon icon-del' ) if message.destroyable_by?(User.current) %>
-

- <%= avatar(message.author) %> - <%= link_to message.subject, { :controller => 'messages', :action => 'show', :board_id => @board, :id => @topic, :r => message, :anchor => "message-#{message.id}" } %> - - - <%= authoring message.created_on, message.author %>

-
<%= textilizable message, :content, :attachments => message.attachments %>
+
<%= textilizable message, :content, :attachments => message.attachments %>
<%= link_to_attachments message, :author => false, :thumbnails => true %>
<% end %> diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb index 601f12072..84f33ece8 100644 --- a/app/views/news/show.html.erb +++ b/app/views/news/show.html.erb @@ -35,25 +35,32 @@

-
-

<%= l(:label_comment_plural) %>

+
+

<%= l(:label_comment_plural) %>

<% if @news.commentable? && @comments.size >= 3 %>

<%= toggle_link l(:label_comment_add), "add_comment_form", :focus => "comment_comments", :scroll => "comment_comments" %>

<% end %> <% @comments.each do |comment| %> - <% next if comment.new_record? %> -
- <%= reaction_button comment %> - <%= link_to_if_authorized sprite_icon('del', l(:button_delete)), { :controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment}, - :data => {:confirm => l(:text_are_you_sure)}, :method => :delete, - :title => l(:button_delete), - :class => 'icon-only icon-del' %> +
"> + <% next if comment.new_record? %> +

+
+ <%= avatar(comment.author) %> + <%= authoring comment.created_on, comment.author %> +
+
+ <%= reaction_button comment %> + <%= link_to_if_authorized sprite_icon('del', l(:button_delete)), { :controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment}, + :data => {:confirm => l(:text_are_you_sure)}, :method => :delete, + :title => l(:button_delete), + :class => 'icon-only icon-del' %> +
+

+
+ <%= textilizable(comment.comments) %> +
-

<%= avatar(comment.author) %><%= authoring comment.created_on, comment.author %>

-
- <%= textilizable(comment.comments) %> -
-<% end if @comments.any? %> +<% end if @comments.any? %>`
<% if @news.commentable? %> -- 2.39.5 (Apple Git-154)