diff options
Diffstat (limited to 'src/client/views/newlightbox/Header')
4 files changed, 138 insertions, 0 deletions
diff --git a/src/client/views/newlightbox/Header/LightboxHeader.scss b/src/client/views/newlightbox/Header/LightboxHeader.scss new file mode 100644 index 000000000..a9e60ea98 --- /dev/null +++ b/src/client/views/newlightbox/Header/LightboxHeader.scss @@ -0,0 +1,71 @@ +@import '../NewLightboxStyles.scss'; + +.newLightboxHeader-container { + width: 100%; + height: 100%; + background: $gray-l1; + border-radius: 20px 20px 0px 0px; + padding: 20px; + display: grid; + grid-template-columns: 70% 30%; + grid-template-rows: 50% 50%; + + .title-container, + .type-container { + display: flex; + flex-direction: row; + gap: 5px; + justify-content: flex-start; + align-items: center; + } + + .title-container { + grid-column: 1; + grid-row: 1; + } + + .type-container { + grid-column: 1; + grid-row: 2; + .type { + padding: 2px 7px !important; + background: $gray-l2; + } + } + + .lb-label { + color: $gray-l3; + font-weight: $h1-weight; + } + + .lb-button { + border: solid 1.5px black; + padding: 3px 5px; + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + transition: 0.2s ease; + gap: 5px; + font-size: $body-size; + height: fit-content; + + &:hover { + background: $gray-l2; + } + + &.true { + background: $blue-l1; + } + } + + &.dark { + background: $black; + } + + &.light, + &.default { + background: $white; + } +}
\ No newline at end of file diff --git a/src/client/views/newlightbox/Header/LightboxHeader.tsx b/src/client/views/newlightbox/Header/LightboxHeader.tsx new file mode 100644 index 000000000..a272ce294 --- /dev/null +++ b/src/client/views/newlightbox/Header/LightboxHeader.tsx @@ -0,0 +1,62 @@ +import './LightboxHeader.scss'; +import * as React from 'react'; +import { INewLightboxHeader } from "./utils"; +import { NewLightboxView } from '../NewLightboxView'; +import { StrCast } from '../../../../fields/Types'; +import { EditableText } from '../components/EditableText'; +import { getType } from '../utils'; +import { Button, IconButton, Size, Type } from 'browndash-components'; +import { MdExplore, MdTravelExplore } from 'react-icons/md' +import { BsBookmark, BsBookmarkFill } from 'react-icons/bs' +import { Doc } from '../../../../fields/Doc'; +import { LightboxView } from '../../LightboxView'; +import { Colors } from '../../global/globalEnums'; + + +export const 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 + setDoc(lbDoc) + if (lbDoc) { + setTitle( + <EditableText + editing={editing} + text={StrCast(lbDoc.title)} + onEdit={(newText: string) => { + if(lbDoc) lbDoc.title = newText; + }} + setEditing={setEditing} + />) + } + }, [LightboxView.LightboxDoc]) + + 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={() => { + console.log(NewLightboxView.ExploreMode) + NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode) + }} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text={"t-SNE 2D Embeddings"} icon={<MdTravelExplore/>}/> + </div> + </div> +}
\ No newline at end of file diff --git a/src/client/views/newlightbox/Header/index.ts b/src/client/views/newlightbox/Header/index.ts new file mode 100644 index 000000000..090677c16 --- /dev/null +++ b/src/client/views/newlightbox/Header/index.ts @@ -0,0 +1 @@ +export * from './LightboxHeader'
\ No newline at end of file diff --git a/src/client/views/newlightbox/Header/utils.ts b/src/client/views/newlightbox/Header/utils.ts new file mode 100644 index 000000000..22e0487c2 --- /dev/null +++ b/src/client/views/newlightbox/Header/utils.ts @@ -0,0 +1,4 @@ +export interface INewLightboxHeader { + height?: number + width?: number +}
\ No newline at end of file |