>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #936304. --> Reported by: [alex ua](https://www.drupal.org/user/110386) >>> <h3 id="summary-last-updated">Last Updated</h3> <p>#71</p> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>System messages appear just like comments which can make looking for them difficult when scanning the page quickly. There is also other initiatives in the works that would introduce user pictures on comments and also add another type of "system message" for git commit messages (see related issues). g.d.o also has a "unique" style that is different from the rest of the site(s).</p> <p>By consolidating vertical space, we might be able to increase the number of comments per page. (which would be a separate issue)</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Consolidate and standardize how we display comments through-out *.d.o.</p> <h4>Itemized style changes</h4> <p>(These could have their own sub issues eventually, especially controversial ones.)</p> <ul> <li><strong>permalinks</strong> take up less vertical space <ul> <li>still in header</li> <li>moved to right to be still easy to scan for (so dont get mixed up with user picture)</li> <li>take up less vertical space</li> </ul> </li> <li><strong>comment links</strong> (delete, edit, report spam) de-emphasized <ul> <li>show when hovering anywhere on the comment (used to be shown all the time).<br> Motivation: eliminates the noise of always seeing the links, when they are only needed to take action on a particular comment.</li> <li>are next to the (newly located) comment number (used to be bottom right of the entire comment)<br> Motivation: </li> <li>taking up less vertical space since not on it's own line (used to be it's own line)<br> Motivation: reduces the length of the entire issue page.</li> <li>are all caps (used to be all lowercase)<br> Motivation: (all caps are the cool thing now)</li> <li>grey (used to be blue)<br> Motivation: de-emphesize, they are rarely used.</li> <li>when hovered on, are blue and underlined (used to be no color change since were blue already, also no change since used to be underlined on hover)<br> Motivation: link color is blue, so makes sense to change to that color when about to be clicked on</li> </ul> </li> <li><strong>Date</strong><br> on hover changes to time "ago" </li> <li><strong>meta data fields</strong> distinguished from the comment body <ul> <li>beige background color</li> <li>labels right aligned and bold<br>Motivation: right aligned to not steal focus from the actual comment</li> <li>old values grey'd<br>Motivation: de-emphesizes the old value (older is more faded)</li> <li>old values left aligned next to the labels<br>Motivation: always in the same horizontal location from comment to comment</li> <li>new values dark text color<br>Motivation: we care more about what the new values are</li> <li>new values aligned with each other<br>Motivation: new values always in the same horizontal location from comment to comment to make them easier to scan</li> </ul> </li> <li><strong>header information</strong> (time, comment number permalink)<br> is grey<br>Motivation: to contrast with the comment body and draw the eye (toward the comment body)</li> <li><strong>user picture</strong> is top left<br>Motivation: to be first thing we see to visually identify "who" make the comment</li> <li><strong>system messages</strong> are condensed and more scannable <ul> <li>node changes are not aligned</li> <li>retain their comment number permalink<br>Motivation: so they can still be referenced</li> <li>have the time shown on hover to reduce visual noise, and inline with the permalink to not take up vertical space</li> <li>are color coded<br> <img src="https://drupal.org/files/issues/issue-comment-system-messages-v2.png" alt=""><br> These type of messages usually correspond to the "colored" states in issue listing tables. It's a natural progression of quickly identifying automated messages in issues and should be themed differently from user provided content. Classes will need to be added to the <code>.comment</code> div to allow theming of different types: <ol> <li><strong>General</strong> <code>.comment.system-message</code> - This is a general style for system messages that do not have any particular correlation. Coloring matches the files fieldset background/buttons on issue edit.</li> <li><strong>Testing Failed</strong> <code>.comment.system-message.testing-failed</code> - This matches the "Needs work" status in the issue listing tables.</li> <li><strong>Testing Queued</strong> <code>.comment.system-message.testing-queued</code> - This matches the "Needs review" status in the issue listing tables.</li> <li><strong>Committed</strong> <code>.comment.system-message.committed</code> - This matches the "Fixed" status in the issue listing tables. Generally speaking, there is usually only one commit per issue, so an issue is usually marked "Fixed" once a commit is made.</li> <li><strong>Closed</strong> <code>.comment.system-message.closed</code> - This matches the "Closed (fixed)" status in the issue listing tables.</li> </ol> </li> </ul> </li> <li><strong>"new"</strong> comment indicator still easy to scan for<br> <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-3"><a href="https://www.drupal.org/project/bluecheese/issues/960292" title="Status: Closed (duplicate)">#960292: Bring more visual weight to new comment indicator to improve scanability</a></span> <ul> <li>moved next to the permalink (between the comment links and the comment number)<br>Motivation: to be still scannable</li> <li>grey color (used to be yellow/green)<br>Motivation: the new position makes the coloring unnecessary</li> </ul> </li> <li><strong>all things</strong> (header, meta data, comment)<br> have horizontal alignment (to the each other and the user picture)<br>Motivation: harmony in margins<br>Con: we lose more horizontal space. Can be offset by a separate issue to take over the margins of the issue page.</li> </ul> <h4>Itemized changes (not style-wise)</h4> <ul> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/versioncontrol_project/issues/493074" title="Status: Closed (fixed)">#493074: Back-link to the commit as a comment on the related issue.</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/drupalorg/issues/957320" title="Status: Closed (fixed)">#957320: Enable the support for user profile pictures</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/project_issue_file_test/issues/2195051" title="Status: Closed (fixed)">#2195051: Re-queue comments should be from System Message user</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-1"><a href="https://www.drupal.org/project/extended_file_field/issues/2107101" title="Status: Active">#2107101: File table styles.</a></span></li> </ul> <p><strong>Screenshot proposal as of <a href="https://www.drupal.org#comment-8540411">#93</a>:</strong><br> <img src="https://drupal.org/files/issues/issue-comments-v2.png" alt=""></p> <p><strong>Pros:</strong></p> <ul> <li><strong>Distinction between information</strong> - The proposed design allows for a clearer distinction between user (picture, name/time) information and comment meta information (reply, report, edit, new, permalink). This meta information isn't "non-important" but simply just secondary to "Who posted this comment and what do they have to say".</li> <li><strong>Coloring</strong> - It's clear where the comment begins and ends. By making the header gray (aside from the username link in blue), we have a much stronger contrast of where the content of the body begins since it's black. Not everyone will agree with this mainly because "color" is so subjective to what one deems "important". The d.o style guide was used for all the elements except for certain gray text to give contrast (as the ones in the style guide were too light or dark).</li> <li><strong>Structural alignment</strong> - Everything is in it's place. The top and bottom edges of a user's picture line up with a single line of text or single nodechange. There is harmony in margins and line height. This also helps with determining where a comment begins and ends.</li> </ul> <p><strong>Cons:</strong></p> <ul> <li>Permalink, comment links (reply, edit, report) are on the top right. People have established workflow which may be disrupted at first. Will they be able to adapt? Worth the risk?</li> <li>More?? Please fill them in here if you think of any.</li> </ul> <h3>Live Preview</h3> <p>This is a gist that I've been using to automatically alter the DOM and inject the styling (this can be used on issue's node):<br> <a href="https://gist.github.com/markcarver/8950708">https://gist.github.com/markcarver/8950708</a></p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>See related issues (not really blockers, just need to happen at the same time).</p> <h3 id="summary-ui-changes">User interface changes</h3> <p>See image above.</p> <h3 id="summary-original-report">Original report by <a href="https://www.drupal.org/user/110386" title="View user profile." class="username">@Alex UA</a></h3> <p>The issue queue seems completely unreadable after the redesign, as each comment just blends in with the next one. ATM, trying to read the queue hurts my eyes, and there are very few visual queues to let me know where one ends and the next one begins.</p> <h3>Commit history</h3> <p><a href="https://www.drupal.org#comment-3570460">#7</a><br> I put the user name in the title, adjusted whitespace, made comment links smaller, and darkened the separator line.</p> <p><a href="https://www.drupal.org#comment-3591366">#32</a><br> Applies same to forum posts.</p> > Related issue: [Issue #493074](https://www.drupal.org/node/493074) > Related issue: [Issue #957320](https://www.drupal.org/node/957320) > Related issue: [Issue #2195051](https://www.drupal.org/node/2195051) > Related issue: [Issue #2107101](https://www.drupal.org/node/2107101) > Related issue: [Issue #2205671](https://www.drupal.org/node/2205671) > Related issue: [Issue #2205647](https://www.drupal.org/node/2205647)