diff options
| author | bobzel <zzzman@gmail.com> | 2024-04-29 23:00:22 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2024-04-29 23:00:22 -0400 |
| commit | f6a741f38a33bdb30b3a1d88215656dcd3d0712d (patch) | |
| tree | df88320222c743d26f2b1341c1489671277baec9 /src/client/views/newlightbox/Header | |
| parent | ab873e90112f2cac204a57a1b405cc241f7e8381 (diff) | |
eslint fixes.
Diffstat (limited to 'src/client/views/newlightbox/Header')
| -rw-r--r-- | src/client/views/newlightbox/Header/LightboxHeader.tsx | 43 | ||||
| -rw-r--r-- | src/client/views/newlightbox/Header/index.ts | 2 |
2 files changed, 22 insertions, 23 deletions
diff --git a/src/client/views/newlightbox/Header/LightboxHeader.tsx b/src/client/views/newlightbox/Header/LightboxHeader.tsx index f89d3173a..51bfaa4e5 100644 --- a/src/client/views/newlightbox/Header/LightboxHeader.tsx +++ b/src/client/views/newlightbox/Header/LightboxHeader.tsx @@ -12,13 +12,13 @@ import { getType } from '../utils'; import './LightboxHeader.scss'; import { INewLightboxHeader } from './utils'; -export const NewLightboxHeader = (props: INewLightboxHeader) => { +export function NewLightboxHeader(props: INewLightboxHeader) { const { height = 100, width } = props; const [doc, setDoc] = React.useState<Doc | undefined>(LightboxView.LightboxDoc); const [editing, setEditing] = React.useState<boolean>(false); const [title, setTitle] = React.useState<JSX.Element | null>(null); React.useEffect(() => { - let lbDoc = LightboxView.LightboxDoc; + const lbDoc = LightboxView.LightboxDoc; setDoc(lbDoc); if (lbDoc) { setTitle( @@ -37,24 +37,23 @@ export const NewLightboxHeader = (props: INewLightboxHeader) => { const [saved, setSaved] = React.useState<boolean>(false); if (!doc) return null; - else - return ( - <div className={`newLightboxHeader-container`} onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> - <div className={`title-container`}> - <div className={`lb-label`}>Title</div> - {title} - </div> - <div className={`type-container`}> - <div className={`lb-label`}>Type</div> - <div className={`type`}>{getType(StrCast(doc.type))}</div> - </div> - <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> - <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> - </div> - <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> - <Button onClick={() => NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text={'t-SNE 2D Embeddings'} icon={<MdTravelExplore />} /> - </div> + return ( + <div className="newLightboxHeader-container" onPointerDown={e => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}> + <div className="title-container"> + <div className="lb-label">Title</div> + {title} </div> - ); -}; + <div className="type-container"> + <div className="lb-label">Type</div> + <div className="type">{getType(StrCast(doc.type))}</div> + </div> + <div style={{ gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill /> : <BsBookmark />} /> + </div> + <div style={{ gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> + <Button onClick={() => NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text="t-SNE 2D Embeddings" icon={<MdTravelExplore />} /> + </div> + </div> + ); +} diff --git a/src/client/views/newlightbox/Header/index.ts b/src/client/views/newlightbox/Header/index.ts index 090677c16..88a533585 100644 --- a/src/client/views/newlightbox/Header/index.ts +++ b/src/client/views/newlightbox/Header/index.ts @@ -1 +1 @@ -export * from './LightboxHeader'
\ No newline at end of file +export * from './LightboxHeader'; |
