diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 320efd263..a22e8f79f 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -380,6 +380,7 @@ function showIssueHistory(journal, url) { tab_content.find('.journal:not(.has-notes)').hide(); tab_content.find('.journal .wiki').show(); tab_content.find('.journal .contextual .journal-actions').show(); + tab_content.addClass('discontinuity'); // always show thumbnails in notes tab var thumbnails = tab_content.find('.journal .thumbnails'); @@ -393,12 +394,14 @@ function showIssueHistory(journal, url) { tab_content.find('.journal .wiki').hide(); tab_content.find('.journal .thumbnails').hide(); tab_content.find('.journal .contextual .journal-actions').hide(); + tab_content.addClass('discontinuity'); break; default: tab_content.find('.journal').show(); tab_content.find('.journal .wiki').show(); tab_content.find('.journal .thumbnails').show(); tab_content.find('.journal .contextual .journal-actions').show(); + tab_content.removeClass('discontinuity'); } return false; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 2d82fba7d..99b1fc0c8 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -348,10 +348,6 @@ tr.message td.created_on { white-space: nowrap; } tr.message td.last_message { font-size: 80%; white-space: nowrap; } tr.message.sticky td.subject { font-weight: bold; } -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 td.name { padding-left: 20px; } tr.version td.date, tr.version td.status, tr.version td.sharing { text-align: center; white-space:nowrap; } @@ -647,28 +643,133 @@ 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 6px; - margin-bottom: 10px; - border-right: 1px solid #d7d7d7; - border-bottom: 1px solid #d7d7d7; - border-left: 1px solid #d7d7d7; - border-radius: 0 0 3px 3px / 0 0 3px 3px; +#history { + .tab-content { + padding: 0px 6px 10px 10px; + margin-bottom: 10px; + border: 1px solid #dfe8f1; + border-top: none; + border-radius: 0 0 3px 3px; + background-color: #ffffff; + } + + p.nodata {display: none;} +} + +/* issues#show, boards#show, news#show */ +.history-items { + .history-item { + padding: 8px 3px 3px 3px; + background-color: #ffffff; + position: relative; + + &:before { + content: ""; + width: 8px; + height: 8px; + background-color: #ffffff; + position: absolute; + left: 6px; + top: 16px; + border-radius: 50%; + box-shadow: 0 0 0 3px #e5e5e5; + z-index: 1; + } + + /* Draw a line connecting the icons */ + &:after { + content: ""; + height: 100%; + width: 2px; + background-color: #e5e5e5; + position: absolute; + left: 9px; + top: 0; + } + &:first-of-type:after { top: 15px; } + &:last-of-type:after { height: 18px; } + &:first-of-type:last-of-type:after { content: none; } + + .contextual { + padding-right: 10px; + padding-top: 5px; + margin-top: 0; + + a, + .journal-actions, + .journal-link { + position: relative; + z-index: 5; + } + } + + form .jstBlock, + form input, + .wiki:not(.wiki-preview), + &.time_entry p, + &.changeset .note > p { + margin-left: 32px; + } + + /* .history-item-header in the form of a speech balloon */ + h4.history-item-header { + left: 20px; + position: relative; + margin: 0 19px 0 10px; + border: none; + font-weight: bold; + background-color: #EEEEEE; + padding: 6px 9px; + font-size: 0.9em; + border-radius: 4px; + min-height: 12px; + + &:before { + content: ''; + position: absolute; + left: -6px; + top: 8px; + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 6px solid #EEEEEE; + } + + .gravatar { + position: absolute; + left: -35px; + top: 4px; + z-index: 5; + margin-left: 0; + } + } + + &:target h4.history-item-header, + div:target h4.history-item-header { + background: #DDEEFF; + + &:before { + border-right: 6px solid #DDEEFF; + } + } + } + /* For discontinuity history, do not draw a line connecting the icons */ + #tab-content-history.discontinuity .history-item:after { + content: none; + } } -#history div:target h4.note-header {background-color:#DDEEFF;} -#history p.nodata {display: none;} +#reply input#message_subject { width: 100%; } div#activity dl, #search-results { margin-left: 2em; } div#activity dd, #search-results dd { margin-bottom: 1em; padding-left: 18px; font-size: 0.9em; } diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb index 3b713b4e7..c2c3284df 100644 --- a/app/views/issues/show.html.erb +++ b/app/views/issues/show.html.erb @@ -121,7 +121,7 @@ end %> <%= render partial: 'action_menu_edit' if User.current.wants_comments_in_reverse_order? %> -
<%= toggle_link l(:button_reply), "reply", :focus => 'message_content', :scroll => "message_content" %>
<% end %> <% @replies.each do |message| %> -
<%= 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? %> +<%= avatar(comment.author) %><%= authoring comment.created_on, comment.author %>
+<%= avatar(comment.author) %><%= authoring comment.created_on, comment.author %>