This repository has been archived by the owner on Oct 20, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 276
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Presentation Mode - Layout Updates (#186)
* change presentation mode header language * export breadcrumbLinkStyle * shuffle Presentation mode components * simple presentation mode beacon name header * adding more robust PresentationItemHeader * removing the header-like nav breadcrumbs from the CommentGroup * forgot .map() key * maybe fix cy-test=presentation-header-bar test? * Updates to presentation mode tests and data selectors. --------- Co-authored-by: James Bradford <[email protected]> Co-authored-by: Courtney Carpenter <[email protected]>
- Loading branch information
3 people
authored
Sep 20, 2023
1 parent
4b84407
commit db2d4ab
Showing
9 changed files
with
254 additions
and
228 deletions.
There are no files selected for viewing
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
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
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
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
86 changes: 86 additions & 0 deletions
86
applications/client/src/views/Campaign/Presentation/PresentationItemHeader.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { Tooltip } from '@blueprintjs/core'; | ||
| import { dateTimeFormat, timeFormat } from '@redeye/client/components'; | ||
| import { createState } from '@redeye/client/components/mobx-create-state'; | ||
| import { useStore } from '@redeye/client/store'; | ||
| import type { TxtProps } from '@redeye/ui-styles'; | ||
| import { Header, Spacer, Txt } from '@redeye/ui-styles'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import type { ComponentProps } from 'react'; | ||
|
|
||
| type PresentationItemHeaderProps = ComponentProps<'div'> & {}; | ||
|
|
||
| export const PresentationItemHeader = observer<PresentationItemHeaderProps>(({}) => { | ||
| const store = useStore(); | ||
|
|
||
| const state = createState({ | ||
| get min() { | ||
| return store.settings.momentTz(store.campaign.presentation.currentSlide?.minDate); | ||
| }, | ||
| get max() { | ||
| return store.settings.momentTz(store.campaign.presentation.currentSlide?.maxDate); | ||
| }, | ||
| }); | ||
|
|
||
| const beaconNames = store.campaign.presentation.currentSlide?.beacons.map((beacon) => beacon.computedName); | ||
|
|
||
| const hostNames = Array.from( | ||
| new Set( | ||
| store.campaign.presentation.currentSlide?.beacons | ||
| .map((beacon) => beacon.host?.current.computedName) | ||
| .filter((h) => h) as string[] | ||
| ) | ||
| ); | ||
|
|
||
| return ( | ||
| <div css={{ padding: '2px 1rem' }}> | ||
| <Header withMargin css={{ display: 'flex', flexWrap: 'wrap' }}> | ||
| <Txt> | ||
| <PresentationHeaderPart names={hostNames} type="Host" /> | ||
| </Txt> | ||
| <Spacer>/</Spacer> | ||
| <Txt normal> | ||
| <PresentationHeaderPart names={beaconNames} type="Beacon" /> | ||
| </Txt> | ||
| </Header> | ||
| <Txt block monospace muted cy-test="slide-header"> | ||
| {store.campaign.presentation.currentSlide?.minDate ? state.min.format(`ddd ${dateTimeFormat}`) : 'Unknown'} | ||
| {store.campaign.presentation.currentSlide?.commandIds?.length! > 1 && ( | ||
| <> | ||
| <span> — </span> | ||
| {store.campaign.presentation.currentSlide?.maxDate | ||
| ? state.max.format(state.max.dayOfYear() > state.min.dayOfYear() ? `ddd ${dateTimeFormat}` : timeFormat) | ||
| : 'Unknown'} | ||
| </> | ||
| )} | ||
| </Txt> | ||
| </div> | ||
| ); | ||
| }); | ||
|
|
||
| const PresentationHeaderPart = ({ names, type, ...props }: TxtProps & { names?: string[]; type: string }) => ( | ||
| <> | ||
| {names == null ? ( | ||
| <Txt disabled {...props}> | ||
| Unknown {type} | ||
| </Txt> | ||
| ) : names.length === 1 ? ( | ||
| <Txt {...props}>{names[0]}</Txt> | ||
| ) : ( | ||
| <Tooltip | ||
| placement="bottom-start" | ||
| interactionKind="hover" | ||
| content={ | ||
| <ul css={{ margin: 0, padding: 0, listStyle: 'none' }}> | ||
| {names.map((name) => ( | ||
| <li key={name}>{name}</li> | ||
| ))} | ||
| </ul> | ||
| } | ||
| > | ||
| <Txt italic {...props}> | ||
| Multiple {type}s | ||
| </Txt> | ||
| </Tooltip> | ||
| )} | ||
| </> | ||
| ); |
Oops, something went wrong.