Commit 107c609a authored by Marek Veselý's avatar Marek Veselý
Browse files

Merge branch '441-automatic-scaling-of-overlays' into 'main' 

fix: scaling issues with exercise list and overlays

Closes #441

See merge request inject/frontend!363
parents 54fb10ab 662ac2d4

frontend/src/analyst/ExerciseSelector/index.tsx

+6 −1
Original line number Diff line number Diff line
@@ -9,9 +9,13 @@ import { useParams } from '../../router' 


interface ExerciseSelectorProps {

  buttonProps?: ButtonProps | undefined

  className?: string

}



const ExerciseSelector: FC<ExerciseSelectorProps> = ({ buttonProps = {} }) => {

const ExerciseSelector: FC<ExerciseSelectorProps> = ({

  buttonProps = {},

  className,

}) => {

  const nav = useNavigate()



  const [isOpen, setIsOpen] = useState(false)
@@ -47,6 +51,7 @@ const ExerciseSelector: FC<ExerciseSelectorProps> = ({ buttonProps = {} }) => { 
        <Section title='Exercise selector'>

          <SectionCard>

            <ExerciseListWrapper

              className={className}

              isSelected={(exercise: Exercise) => exercise.id === exerciseId}

              type='selecting'

              details={(exercise: Exercise) => ({

frontend/src/analyst/NavigationBar/index.tsx

+7 −0
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ import useHideButton from '@/components/Sidebar/useHideButton' 
import Status from '@/components/Status'

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

import { Button, Spinner } from '@blueprintjs/core'

import { css } from '@emotion/css'

import useEmailsEnabled from '@inject/graphql/utils/useEmailsEnabled'

import useToolsEnabled from '@inject/graphql/utils/useToolsEnabled'

import type { FC, PropsWithChildren } from 'react'
@@ -22,6 +23,11 @@ import ExerciseSelector from '../ExerciseSelector' 
import SVGContext from '../SVGContext'

import { EmailSelection } from '../utilities'



const limitedHeight = css`

  max-height: 70vh;

  overflow-y: auto;

`



type PathType = {

  link: LinkType

  icon: IconName
@@ -105,6 +111,7 @@ const NavigationBar: FC<PropsWithChildren> = ({ children }) => { 
        <>

          {hideButton}

          <ExerciseSelector

            className={limitedHeight}

            buttonProps={{

              icon: 'open-application',

              alignText: 'left',

frontend/src/components/ExerciseList/index.tsx

+3 −1
Original line number Diff line number Diff line
@@ -6,6 +6,7 @@ import ExerciseCard from './ExerciseCard' 


export type BaseExerciseListProps = {

  isSelected?: (exercise: Exercise) => boolean

  className?: string

} & (

  | {

      type: 'selecting'
@@ -23,8 +24,9 @@ const ExerciseListComponent: FC<ExerciseListProps> = ({ 
  isSelected,

  type,

  details,

  className,

}) => (

  <CardList>

  <CardList className={className}>

    {exercises.map(exercise =>

      type === 'selecting' ? (

        <ExerciseCard

frontend/src/exercisepanel/DefinitionManager/index.tsx

+7 −2
Original line number Diff line number Diff line
@@ -10,9 +10,14 @@ import Reloader from '@inject/graphql/components/Reloader' 
import { useGetDefinitions } from '@inject/graphql/queries/GetDefinitions.generated'

import CardList from '@inject/shared/components/CardList'

import notEmpty from '@inject/shared/utils/notEmpty'

import type { FC } from 'react'

import Definition from './components/Definition'



const DefinitionManager = () => {

interface DefinitionManagerProps {

  className?: string

}



const DefinitionManager: FC<DefinitionManagerProps> = ({ className }) => {

  const { data, refetch } = useGetDefinitions()

  const { open } = useModals()
@@ -44,7 +49,7 @@ const DefinitionManager = () => { 
            description='There are no definitions to display'

          />

        ) : (

          <CardList>

          <CardList className={className}>

            {definitions.map(definition => (

              <Definition key={definition.id} definition={definition} />

            ))}

frontend/src/exercisepanel/ExerciseManager/components/ExerciseList.tsx

+8 −1
Original line number Diff line number Diff line
@@ -11,9 +11,14 @@ import useExercisesSubscription from '@inject/graphql/utils/useExercisesSubscrip 
import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'

import notEmpty from '@inject/shared/utils/notEmpty'

import { useSessionStorageState } from 'ahooks'

import type { FC } from 'react'

import { useCallback, useMemo } from 'react'



const ExerciseList = () => {

interface ExerciseListProps {

  className?: string

}



const ExerciseList: FC<ExerciseListProps> = ({ className }) => {

  const { data, loading, error } = useExercisesSubscription()



  const [setting, setSetting] = useSessionStorageState<{
@@ -100,6 +105,7 @@ const ExerciseList = () => { 
        />

      ) : (

        <ExerciseListComponent

          className={className}

          exercises={exercises}

          type='managing'

          details={(exercise: Exercise) => ({
@@ -114,6 +120,7 @@ const ExerciseList = () => { 
        />

      ),

    [

      className,

      exercises,

      handleDelete,

      handlePause,