Change Details

Based on observations from recent user research (T207831) and design reviews, the relation between the collapsed (summary card) and expanded (issue details) is not always clear. Similarly, the connection between the issue card and the marks in the document can be also strengthen. The changes proposed to the original design of issue cards (T189488) are described below: {F27268698, size=full} You can [[ https://wikimedia.invisionapp.com/share/35P8F5FGD9Q#/332603619_CX-Warn-Collapsed | check the proposed approach in a basic prototype ]] **Use a chevron for expanding and collapsing** - "View details" on the summary view will be replaced by a chevron pointing down. - The close icon on the issue details card will be replaced y a chevron pointing up, and placed to the right side (to keep the position consistent with the collapsed state). - A separator will be added between the navigation controls (to move across issues) and the new collapse action on the details card. The separator will only be shown when the navigation controls are present (i.e., when there is more than one issue). **Additional way to expand** - The summary card can be also expanded by clicking to their contents (i.e., the area with the error and warning counters), in addition to using the chevron. - Clicking on the error indicator will open the first error, and clicking on the warning indicator will open the first warning. In any case, moving to the next/prev issue will always move to the next/prev issue in the document regardless of it being an error or a warning. **Emphasise the current active marker** We want to distinguish the yellow/red marker that is shown for the active issue that is expanded: - The focused paragraph will show the issue marker at 100% opacity, and with a 4px wide line. - The unfocused paragraphs will show the issue marker at 66% opacity with a 3px wide line. Inspecting the current code, an example is shown below for a possible adjustment: ``` //Issue with focus: box-shadow: -16px 0 0 -4px #ffffff, -20px 0 0 -4px #ffcc33; //Issues without focus: box-shadow: -17px 0 0 -4px #ffffff, -20px 0 0 -4px #ffcc33A8; ```

Based on observations from recent user research (T207831) and design reviews, the relation between the collapsed (summary card) and expanded (issue details) is not always clear. Similarly, the connection between the issue card and the marks in the document can be also strengthen. The changes proposed to the original design of issue cards (T189488) are described below: {F27268698, size=full} You can [[ https://wikimedia.invisionapp.com/share/35P8F5FGD9Q#/332603619_CX-Warn-Collapsed | check the proposed approach in a basic prototype ]] **Use a chevron for expanding and collapsing** - "View details" on the summary view will be replaced by a chevron pointing down. - The close icon on the issue details card will be replaced by a chevron pointing up, and placed to the right side (to keep the position consistent with the collapsed state). - A separator will be added between the navigation controls (to move across issues) and the new collapse action on the details card. The separator will only be shown when the navigation controls are present (i.e. when there is more than one issue). **Additional way to expand** - The summary card can be also expanded by clicking to their contents (i.e. the area with the error and warning counters), in addition to using the chevron. - Clicking on the error indicator will open the first error, and clicking on the warning indicator will open the first warning. In any case, moving to the next/prev issue will always move to the next/prev issue in the document regardless of it being an error or a warning. **Emphasise the current active marker** We want to distinguish the yellow/red marker that is shown for the active issue that is expanded: - The focused paragraph will show the issue marker at 100% opacity, and with a 4px wide line. - The unfocused paragraphs will show the issue marker at 66% opacity with a 3px wide line. Inspecting the current code, an example is shown below for a possible adjustment: ``` //Issue with focus: box-shadow: -16px 0 0 -4px #ffffff, -20px 0 0 -4px #ffcc33; //Issues without focus: box-shadow: -17px 0 0 -4px #ffffff, -20px 0 0 -4px #ffcc33A8; ```

Based on observations from recent user research (T207831) and design reviews, the relation between the collapsed (summary card) and expanded (issue details) is not always clear. Similarly, the connection between the issue card and the marks in the document can be also strengthen. The changes proposed to the original design of issue cards (T189488) are described below: {F27268698, size=full} You can [[ https://wikimedia.invisionapp.com/share/35P8F5FGD9Q#/332603619_CX-Warn-Collapsed | check the proposed approach in a basic prototype ]] **Use a chevron for expanding and collapsing** - "View details" on the summary view will be replaced by a chevron pointing down. - The close icon on the issue details card will be replaced by a chevron pointing up, and placed to the right side (to keep the position consistent with the collapsed state). - A separator will be added between the navigation controls (to move across issues) and the new collapse action on the details card. The separator will only be shown when the navigation controls are present (i.e., when there is more than one issue). **Additional way to expand** - The summary card can be also expanded by clicking to their contents (i.e., the area with the error and warning counters), in addition to using the chevron. - Clicking on the error indicator will open the first error, and clicking on the warning indicator will open the first warning. In any case, moving to the next/prev issue will always move to the next/prev issue in the document regardless of it being an error or a warning. **Emphasise the current active marker** We want to distinguish the yellow/red marker that is shown for the active issue that is expanded: - The focused paragraph will show the issue marker at 100% opacity, and with a 4px wide line. - The unfocused paragraphs will show the issue marker at 66% opacity with a 3px wide line. Inspecting the current code, an example is shown below for a possible adjustment: ``` //Issue with focus: box-shadow: -16px 0 0 -4px #ffffff, -20px 0 0 -4px #ffcc33; //Issues without focus: box-shadow: -17px 0 0 -4px #ffffff, -20px 0 0 -4px #ffcc33A8; ```