Question

The UI refresh released as part of 8.7.57 makes case activity more difficult to scan than the old case view:

1. The user names for the edit events used to be styled as boldface hyperlinks. This had the effect of making them stand out, and thus made it easy to scan down a list of changes and see who was working on the case. The new UI no longer renders them in bold, and the color is low-contrast with the background which makes them even harder to scan quickly.

2. The dates and times for each edit now share the same low-contrast styling as the names. This makes it harder to scan either the name or the date: since there isn't a clear visual boundary between them, it is necessary to drop down into language processing (slow) instead of visual processing (fast) to separate the two.

3. Wrapping each edit event in a box makes it harder to distinguish edits from emails. Being able to distinguish the two quickly is useful when bouncing a case around the team in response to a client's email since it helps users to notice that they haven't updated the client on the case's status for a while. Wrapping events in a box also seems to encourage looking at each event in isolation rather than being able to quickly parse the overall flow of the case.

If you could add these factors into consideration when evaluating your next revision to the case view styling, I would appreciate it.

Answer 1

You can solve all this yourself, using a customization like this:

name:          Highlighting
description:   Adds links to the Extras menu to highlight stuff
author:        Michel de Ruiter
version:       1.0.0.0

js:

$(setTimeout(function() {
  theMgr.populateDelayedContent(elById('extrasPopup'));
  var menu = $('#extrasPopup table td').append('<hr/>');
  if ($('.date').length > 0)
    $("<a href='javascript:void(0)'>Highlight dates</a>")
    .click(function() { $('body').toggleClass('highlightDates'); })
    .appendTo(menu);
  if ($('.person').length > 0)
    $("<a href='javascript:void(0)'>Highlight users</a>")
    .click(function() { $('body').toggleClass('highlightUsers'); })
    .appendTo(menu);
  if ($('.emailBody').length > 0)
    $("<a href='javascript:void(0)'>Highlight mails</a>")
    .click(function() { $('body').toggleClass('highlightMails'); })
    .appendTo(menu);
  menu.children().last().remove("hr");
}, 1000));


css:

body.highlightDates .date      { background: orange; }
body.highlightUsers .person    { background: yellow; }
body.highlightMails .emailBody { background: pink; }

Now that I think of it, two clicks are probably too much of a hassle for your purposes. Instead, adapt this to restore the old style or use your own formatting:

name:          Format dates, users and mails
description:   Makes dates, users and mails stand out
author:        Michel de Ruiter
version:       1.0.0.0

css:

.date, .date a { color: red; }
.person { font-weight: bold !important; }
.emailBody { background-color: #FFE !important; }