Commit 860824cd authored by Marek Veselý's avatar Marek Veselý
Browse files

Merge branch '616-improve-close-button-in-overlays' into 'main' 

feat: improve close button in overlay

Closes #616

See merge request inject/frontend!510
parents f52739ef a0d75664

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

+1 −1
Original line number Diff line number Diff line
@@ -35,7 +35,7 @@ const EmailContent: FC<EmailContentProps> = ({ 
    />

    {onClose && (

      <div className={alignRight}>

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

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

      </div>

    )}

  </div>

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

+18 −17
Original line number Diff line number Diff line
@@ -83,23 +83,24 @@ const InjectContent: FC<InjectContentProps> = ({ 
        exerciseId={exerciseId}

        inInstructor={inInstructor}

      />

      {confirmation ? (

      {(onClose || confirmation) && (

        <div className={alignRight}>

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

          {confirmation && (

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

              <Button

                intent='primary'

                text={confirmation.text}

            onClick={() => confirm({ logId, teamId }).then(() => onClose?.())}

                onClick={() =>

                  confirm({ logId, teamId }).then(() => onClose?.())

                }

                loading={loading}

                disabled={disabled}

                title={title}

              />

            </Done>

      ) : (

        onClose && (

          <div className={alignRight}>

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

          )}

        </div>

        )

      )}

    </div>

  )

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

+20 −11
Original line number Diff line number Diff line
@@ -4,6 +4,7 @@ import type { QuestionAndAnswer } from '@/components/Questionnaire/types' 
import { INVALID_VALUE } from '@/components/Questionnaire/utilities'

import type { ButtonProps } from '@blueprintjs/core'

import { Button, Callout, NonIdealState } from '@blueprintjs/core'

import { css } from '@emotion/css'

import type {

  Answer,

  Question,
@@ -216,6 +217,13 @@ const TraineeQuestionnaireContent: FC<TraineeQuestionnaireContentProps> = ({ 
      disabled={() => status !== 'SENT' || !running}

      onChange={questionId => value => handleChange(value, questionId)}

      actions={

        <div

          className={css`

            display: flex;

            gap: 0.5rem;

          `}

        >

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

          <Done done={done}>

            <Button

              intent='primary'
@@ -227,6 +235,7 @@ const TraineeQuestionnaireContent: FC<TraineeQuestionnaireContentProps> = ({ 
              Submit

            </Button>

          </Done>

        </div>

      }

    />

  )

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

+1 −0
Original line number Diff line number Diff line
@@ -3,4 +3,5 @@ import { css } from '@emotion/css' 
export const alignRight = css`

  display: flex;

  justify-content: flex-end;

  gap: 0.5rem;

`

shared/popup/PopupEngine.tsx

+5 −1
Original line number Diff line number Diff line
@@ -29,6 +29,10 @@ const timedFormatter = (secondsLeft: number) => { 
  return `${hours > 0 ? `${hourString} ` : ''}${minutes > 0 ? minuteString : ''}`

}



/**

 * The engine that manages the popup queue and the current popup.

 * The component using showPopup is responsible for rendering a close button.

 */

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

  const [queue, setQueue] = useState<ShowPopupProps[]>([])
@@ -95,7 +99,7 @@ const PopupEngine = ({ children }: PropsWithChildren) => { 
        isOpen={isOpen}

        canEscapeKeyClose={false}

        canOutsideClickClose={false}

        // ensure the "x" button is always rendered (depends on title prop)

        isCloseButtonShown={false}

        title={title || ''}

        icon={icon}

        onClose={handleClose}