Commit 1ef3364f authored by Marek Veselý's avatar Marek Veselý
Browse files

feat: improve overlay UX

parent 0fe700de

frontend/src/actionlog/InjectMessage/Content/EmailContent.tsx

+9 −0
Original line number Diff line number Diff line 
import ContentComponent from '@/components/ContentComponent'

import { Button } from '@blueprintjs/core'

import { css } from '@emotion/css'

import type { EmailDetails } from '@inject/graphql/fragment-types'

import type { FC } from 'react'

import { alignRight } from './classes'



const wrapper = css`

  display: flex;
@@ -14,6 +16,7 @@ interface EmailContentProps { 
  teamId: string

  exerciseId: string

  inInstructor: boolean

  onClose?: () => void

}



const EmailContent: FC<EmailContentProps> = ({
@@ -21,6 +24,7 @@ const EmailContent: FC<EmailContentProps> = ({ 
  teamId,

  exerciseId,

  inInstructor,

  onClose,

}) => (

  <div className={wrapper}>

    <ContentComponent
@@ -29,6 +33,11 @@ const EmailContent: FC<EmailContentProps> = ({ 
      exerciseId={exerciseId}

      inInstructor={inInstructor}

    />

    {onClose && (

      <div className={alignRight}>

        <Button intent='primary' text='Close' onClick={onClose} />

      </div>

    )}

  </div>

)

frontend/src/actionlog/InjectMessage/Content/InjectContent.tsx

+8 −1
Original line number Diff line number Diff line
@@ -13,6 +13,7 @@ import useBlockableMutation from '@inject/graphql/utils/useBlockableMutation' 
import { timedFormatter } from '@inject/shared/components/StyledTag/Timestamp'

import type { FC } from 'react'

import { useMemo } from 'react'

import { alignRight } from './classes'



const wrapper = css`

  display: flex;
@@ -82,7 +83,7 @@ const InjectContent: FC<InjectContentProps> = ({ 
        exerciseId={exerciseId}

        inInstructor={inInstructor}

      />

      {confirmation && (

      {confirmation ? (

        <Done done={!!confirmed} title={title}>

          <Button

            intent='primary'
@@ -93,6 +94,12 @@ const InjectContent: FC<InjectContentProps> = ({ 
            title={title}

          />

        </Done>

      ) : (

        onClose && (

          <div className={alignRight}>

            <Button intent='primary' text='Close' onClick={onClose} />

          </div>

        )

      )}

    </div>

  )

frontend/src/actionlog/InjectMessage/Content/classes.ts

0 → 100644
+6 −0
Original line number Diff line number Diff line 
import { css } from '@emotion/css'



export const alignRight = css`

  display: flex;

  justify-content: flex-end;

`

frontend/src/actionlog/InjectMessage/Content/index.tsx

+4 −0
Original line number Diff line number Diff line
@@ -41,10 +41,12 @@ const Content: FC<ContentProps> = ({ 
          teamId={teamId}

          exerciseId={exerciseId}

          inInstructor={inInstructor}

          onClose={onClose}

        />

      )

    case 'ToolDetailsType':

      return (

        // can't be in overlay, so no onClose

        <ToolContent

          details={actionLog.details}

          teamId={teamId}
@@ -55,6 +57,7 @@ const Content: FC<ContentProps> = ({ 
    case 'TeamQuestionnaireStateType': {

      const teamState = actionLog.details

      return inInstructor ? (

        // can't be in overlay, so no onClose

        <InstructorQuestionnaire

          teamStateId={teamState.id}

          exerciseId={exerciseId}
@@ -82,6 +85,7 @@ const Content: FC<ContentProps> = ({ 
          teamId={teamId}

          exerciseId={exerciseId}

          inInstructor={inInstructor}

          onClose={onClose}

        />

      )

    default:

shared/popup/PopupEngine.tsx

+18 −1
Original line number Diff line number Diff line
@@ -12,6 +12,23 @@ import type { 
const MIN_TO_S = 60

const S_TO_MS = 1000



const timedFormatter = (secondsLeft: number) => {

  if (secondsLeft < 10) {

    return `${secondsLeft} ${secondsLeft > 1 ? 'seconds' : 'second'}`

  }

  if (secondsLeft < 30) {

    return 'less than 30 seconds'

  }

  if (secondsLeft < 60) {

    return 'less than a minute'

  }

  const hours = Math.floor(secondsLeft / 3600)

  const minutes = Math.floor(secondsLeft / 60) % 60

  const hourString = `${hours} ${hours > 1 ? 'hours' : 'hour'}`

  const minuteString = `${minutes % 60} ${minutes % 60 > 1 ? 'minutes' : 'minute'}`

  return `${hours > 0 ? `${hourString} ` : ''}${minutes > 0 ? minuteString : ''}`

}



const PopupEngine = ({ children }: PropsWithChildren) => {

  const [queue, setQueue] = useState<ShowPopupProps[]>([])
@@ -87,7 +104,7 @@ const PopupEngine = ({ children }: PropsWithChildren) => { 
          {getContent(handleClose)}

        </DialogBody>

        <DialogFooter>

          <span>{`The popup will close in ${new Date(secondsLeft * S_TO_MS).toISOString().substring(11, 19)}`}</span>

          <span>{`The popup will close in ${timedFormatter(secondsLeft)}`}</span>

        </DialogFooter>

      </Dialog>

    )