(feat) O3-3656: Change the style of abnormal and dangerous lab results #1942
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -45.4 kB (-0.41%) Total Size: 11.1 MB
ℹ️ View Unchanged
|
denniskigen
reviewed
Jul 30, 2024
packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
Outdated
Show resolved
Hide resolved
denniskigen
changed the title
arodidev
reviewed
Jul 30, 2024
There was a problem hiding this comment.
Thanks @CynthiaKamau, shouldn't we adopt the new results table design specified in this design guide? Or would that be outside the scope of this ticket?
|
@arodidev that's beyond the scope of this simple style tweak. |
CynthiaKamau
force-pushed
the
O3-3656
branch
2 times, most recently
from
76e07b3 to
7fa2d35
Compare
|
The background color on hover should be a blue hue:
I've asked Ciaran to furnish us with the exact hex codes in the issue thread. |
Done |
|
I was actually making more edits |
denniskigen
reviewed
Jul 31, 2024
There was a problem hiding this comment.
Sorry for blowing your PR up a touch @CynthiaKamau, but I had to make some additional changes to:
- Fix the styling used in Panel view to highlight abnormal values.
- Extend the changes in the Timeline view to the GroupedTimeline view.
- Fix component names to match our naming conventions so that i18next-parser knows to extract translation strings and keys from them.
I've left comments and screenshots explaining the rationale and showing the before and after states of the UI.
| } | ||
|
|
||
| .criticallyHigh, | ||
| .criticallyLow { | ||
| box-shadow: 0 0 0 1px $danger, inset 0 0 0 1px $danger; | ||
| background-color: colors.$red-20; | ||
| border-top: 1px solid colors.$red-20-hover; |
There was a problem hiding this comment.
We should use border-top here instead of box-shadow to better align with the design.
Comment on lines
+268
to
+269
| <div className={styles.timelineHeader}> | ||
| <div className={styles.timelineHeader}> |
There was a problem hiding this comment.
The same inline styles are duplicated in the stylesheet. Also, I'm not sure why both the parent and child div should have the same styling.
Comment on lines
15
to
+36
| interface DateHeaderGridProps { | ||
| timeColumns: Array<string>; | ||
| yearColumns: Array<Record<string, number | string>>; | ||
| dayColumns: Array<Record<string, number | string>>; | ||
| showShadow: boolean; | ||
| } | ||
|
|
||
| interface DataRowsProps { | ||
| rowData: Record<string, Array<ObsRecord>>; | ||
| timeColumns: Array<string>; | ||
| sortedTimes: Array<string>; | ||
| showShadow: boolean; | ||
| testUuid: string; | ||
| } | ||
|
|
||
| interface TimelineParams { | ||
| parsedTime: ParsedTimeType; | ||
| rowData: Record<string, Array<ObsRecord>>; | ||
| panelName: string; | ||
| sortedTimes: Array<string>; | ||
| testUuid: string; | ||
| } |
There was a problem hiding this comment.
I've just moved the type annotations higher up for clarity and improved organization.
| @@ -83,7 +89,7 @@ | |||
|
|
|||
| .time-slot-inner { | |||
| background-color: $ui-03; | |||
| padding: 3px 10px; | |||
| padding: 1px 10px; | |||
There was a problem hiding this comment.
This change and a few others fix this weird visual artifact:
Before
After
Comment on lines
+94
to
+96
| className={classNames(styles.labSetPanel, { | ||
| [styles.activePanel]: activePanel?.conceptUuid === panel.conceptUuid, | ||
| })} |
There was a problem hiding this comment.
Moving this styling to the parent container fixes another visual artifact:
| @@ -139,12 +144,14 @@ | |||
|
|
|||
| .high, | |||
| .low { | |||
| box-shadow: 0 0 0 1px #000000; | |||
| background-color: colors.$orange-10; | |||
Comment on lines
+69
to
73
| &:hover { | ||
| background-color: colors.$blue-10; | ||
| border-top: 2px colors.$blue-30; | ||
| } | ||
| } |
There was a problem hiding this comment.
These changes effect the same styling mods made to the Timeline view to the GroupedTimeline view (what you see after selecting a panel in the tree view):
Comment on lines
53
to
+66
| .high, | ||
| .low { | ||
| border: 2px solid black !important; | ||
| td { | ||
| background-color: colors.$orange-10; | ||
| border-top: 1px solid colors.$orange-20; | ||
| } | ||
| } | ||
|
|
||
| .critically-high, | ||
| .critically-low { | ||
| border: 2px solid $danger !important; | ||
| td { | ||
| background-color: colors.$red-20; | ||
| border-top: 1px solid colors.$red-20-hover; | ||
| } |
denniskigen
approved these changes
Jul 31, 2024
arodidev
pushed a commit
that referenced
this pull request
Aug 1, 2024
#1942) * O3-3656 Change the style of abnormal and dangerous lab results * Additional mods --------- Co-authored-by: Dennis Kigen <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Requirements
Summary
Screenshots
Screen.Recording.2024-07-31.at.09.56.09.mov
Related Issue
https://openmrs.atlassian.net/browse/O3-3656
Other