Closed hudson-newey closed 7 months ago
The tooltips for the baw-duration components should probably not use the ISO8601 format. Maybe inlcude sexagesimal as well as ISO8601? Or a humanized form? I'm not sure what's best, but although unambiguous, i think most users would find that tooltip does not add much context.
Mock-up of sexagesimal + ISO8601
Mock-up of humanized + ISO8601
I think I prefer sexagesimal + ISO8601
Size Change: +9.67 kB (0%)
Total Size: 2.91 MB
Filename | Size | Change |
---|---|---|
dist/workbench-client/browser/main.********.js |
1.07 MB | +4.64 kB (0%) |
dist/workbench-client/browser/styles.********.css |
32.3 kB | +16 B (0%) |
dist/workbench-client/server/main.js |
1.79 MB | +5.01 kB (0%) |
6 files 6 suites 6m 51s :stopwatch: 23 154 tests 22 530 :heavy_check_mark: 624 :zzz: 0 :x: 23 376 runs 22 752 :heavy_check_mark: 624 :zzz: 0 :x:
Results for commit 3eae1198.
Create Date/Time Component
Given we use so many Date/Times formats throughout the client, it can be ambiguous to a user if the date/time is localised to their timezone, and what timezone a date/time is captured in.
Changes
baw-datetime
component to show localised instantsbaw-zoned-datetime
component to show non-localised eventsbaw-duration
component to show times & duration's in sexagesimal, ISO 8601, and humanized formatsbaw-time-since
component to show what period of time has passed since a date/time (or just pass in a Luxon Duration)withDefaultZone
helper function (Settings.defaultZone
) was not being unset propperly, leaking into other tests and causing them to failassertTooltip
test helper function that asserts the tooltip contents of an elementwithDefaultZone
test helper function that mocks the test runners timezone /Settings.defaultZone
@typescript-eslint/prefer-as-const
eslint rule to bring us more into line with the Angular recommended TS rulesProblems
Implementation on live pages was not completed as part of this PR
Issues
Fixes: #2092 Closes: #1736
Visual Changes
Pages
Components
baw-datetime
.has-context
CSS classbaw-zoned-datetime
(Implicit).has-context
CSS classbaw-zoned-datetime
(Explicit).has-context
CSS classbaw-duration
.has-context
CSS classbaw-time-since
.has-context
CSS class.has-context
) using--baw-highlight
colourFinal Checklist
npm run lint
)npm run test:all
)