By letting reviewers apply color to emphasize desired edit properties in the results area, Highlighting makes Recent Changes data more meaningful. Among other user benefits, this new interpretive layer adds another tool for prioritizing work. ([[ http://pauginer.github.io/prototypes/edit-review/highlight-changes/index.html | View in prototype ]]).
Highlighting can be used by itself or in combination with filtering. The Dropdown Filter Panel (T149452) contains the highlighting tools. Highlighting status for filters is displayed in the Active Filter Display Area (T149391).
===Highlighting Tools===
**‘Highlight Results’ Button**
{F4695702}
- In its default state, the Dropdown Filter Panel does not display the Highlighting tools. The “Highlight results” button in the filter panel header displays in its inactive (white) state.
- Clicking the button in its inactive state causes the following to happen
- The button toggles to its blue, active state
- Highlight menus are displayed for every filter option
- Any previously applied highlight settings that were not explicitly canceled are reapplied immediately to:
- Edits in the Edit Results List
- Highlight menus for individual filters
- Filter tags in the Active Filter Display Area.
- Clicking the button when it’s in its active (blue) state causes the following to happen:
- The button toggles to its white, inactive state
- All highlight menus are hidden.
- Highlighting is turned off and disappears from results.
- Highlight status indications disappear from tags in the Active Filter Display Area, where: 1) any tags that were highlight-only disappear entirely; 2) tags for active filters that also had highlighting remain, but the colored dots disappear.
- The user must act explicitly to remove highlighting from filters (so that it won’t return when highlighting is reactivated). This can be done two ways:
- To cancel highlighting for an individual filter, the user selects the white, no-highlight option from the highlight menu for a particular filters (see below).
- To cancel all highlighting (and all other settings), the user clicks the trashcan icon.
**The Highlight Menus**
{F4695708}
{F4695712}
- When highlighting is enabled, each option in the filter panel displays a highlight menu.
-- In the default state, the menu displays a black marker icon (F5779711). When a color is selected, a filled circle of that color is displayed instead.
-- When the filter is greyed-out (because other active filters in the group exclude the results), the highlight menu button will shown the marker or the color selected with 60% opacity. The menu will still be functional, but it will convey the idea that the selection won't be shown in the results.
- On rollover, the highlight menu displays a tooltip (see T149385 for approved tooltip text).
- When the user opens the highlight menu, a label reads“Select a color” and a set of colored circles are shown. A dashed circle with no color fill represents the lack of highlight (default selection). The options are provided in the following order: dashed circle (lack of highlight), blue, green, yellow, orange, and red. Colors will be based on M82.
- The current selection is indicated by a check mark inside the relevant color circle.
- When the user selects a highlight color, the highlight menu closes and the following things happen immediately (i.e., while the Dropdown Filter Panel is still open):
- The highlight menu displays a color dot of the selected hue.
- The selected color is applied to appropriate results.
- Tags in the Active Filter Display Area are updated to reflect the new selection (see T149391) When an active filter is highlighted, the white filter tag will include a color dot to indicate the highlighted color. Highlight-only tags, where the filter is inactive, are grayed.
===Display of Highlighting in the Results List===
**Non-Highlighted Edits**
- In the results area, non-highlighted edits display on a white background.
- In the left margin, they display a bullet point that has a light gray fill with a darker gray border.
**Highlighted Edits**
{F4695725}
- Highlighted items show a colored bullet point corresponding to the color of each highlighted property/filter that applies to the edit. Bullets are right aligned. Colors appear in the same order for each item (same order as in the color selector: blue, green, yellow, orange, and red).
- Highlighted edits display a background color corresponding to the color of each highlighted criteria that applies to the edit.
- When multiple highlight criteria apply, the display color is calculated by combining the multiple highlight colors. [[ http://codepen.io/pauginer/pen/MbwQbW | This codepen ]] and the mockup below illustrate the color functions to be applied when combining colors.
{F4709560}