Commit c8f6fa02 authored by Filip Šenk's avatar Filip Šenk Committed by Marek Veselý
Browse files

Fix: Fixed text overflowing in milestones indicator

parent 98cae298

frontend/src/components/Description/MilestoneDescription.tsx

+4 −0
Original line number Diff line number Diff line 
import Description from '@/components/Description'

import Tags from '@/components/Tags'

import { css } from '@emotion/css'

import type { Milestone } from '@inject/graphql'

import type { FC, ReactNode } from 'react'
@@ -29,6 +30,9 @@ const MilestoneDescription: FC<MilestoneDescriptionProps> = ({ 
      </>

    }

    center

    iconClass={css`

      padding-left: 0.3rem;

    `}

  >

    {getChildren(milestone.displayName)}

  </Description>

frontend/src/components/Description/index.tsx

+3 −2
Original line number Diff line number Diff line
@@ -5,7 +5,6 @@ import type { FC, PropsWithChildren, ReactNode } from 'react' 


const wrapper = css`

  display: flex;

  gap: 0.25rem;

`



const centerClass = css`
@@ -23,6 +22,7 @@ interface DescriptionProps extends PropsWithChildren { 
  description: ReactNode

  hideDescription?: boolean

  center?: boolean

  iconClass?: string

}



const Description: FC<DescriptionProps> = ({
@@ -30,6 +30,7 @@ const Description: FC<DescriptionProps> = ({ 
  hideDescription,

  children,

  center,

  iconClass,

}) => (

  <div

    className={cx({
@@ -40,7 +41,7 @@ const Description: FC<DescriptionProps> = ({ 
    {children}

    {!hideDescription && (

      <HelpIcon

        icon={<SmallInfoSign />}

        icon={<SmallInfoSign className={iconClass} />}

        text={<div className={text}>{description}</div>}

      />

    )}

frontend/src/instructor/InstructorMilestones/AllMilestoneIndicator.tsx

+42 −12
Original line number Diff line number Diff line
@@ -19,18 +19,35 @@ const timestamp = css` 
  margin: 0.5rem;

`



const wrapper = css`

  display: flex;

  align-items: center;

  gap: 0.2rem;

  justify-content: center;

`



interface MilestoneIndicatorProps {

  states: MilestoneState[]

  milestone: Milestone

  teamIds: string[]

}

export const spanElipsis = css`

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;



  &:hover {

    animation: applyWrap 0s linear 0.1s forwards;

  }



  @keyframes applyWrap {

    to {

      white-space: normal;

      overflow-wrap: break-word;

    }

  }

`

export const milestoneCard = css`

  label {

    div {

      overflow: hidden;

      text-overflow: ellipsis;

    }

  }

`



const AllMilestoneIndicator: FC<MilestoneIndicatorProps> = ({

  milestone,
@@ -82,6 +99,7 @@ const AllMilestoneIndicator: FC<MilestoneIndicatorProps> = ({ 
      onChange={() => {

        setOpen(true)

      }}

      className={milestoneCard}

    >

      <MilestoneDescription

        milestone={milestone}
@@ -123,12 +141,24 @@ const AllMilestoneIndicator: FC<MilestoneIndicatorProps> = ({ 
                size={IconSize.LARGE}

              />

            </Popover>

            <div className={wrapper}>



            <span

              className={cx(

                spanElipsis,

                css`

                  margin-left: 0.4rem;

                `

              )}

            >

              {displayName}

            </span>



            {milestone.final && (

                <Flag style={{ padding: '0.2rem' }} title='Final milestone' />

              <Flag

                style={{ padding: '0.2rem', marginLeft: '0.3rem' }}

                title='Final milestone'

              />

            )}

            </div>

          </>

        )}

      />

frontend/src/instructor/InstructorMilestones/MilestoneIndicator.tsx

+20 −14
Original line number Diff line number Diff line 
import MilestoneDescription from '@/components/Description/MilestoneDescription'

import { Alert, Card, Colors, Popover, SwitchCard } from '@blueprintjs/core'

import { Dot, Flag, IconSize } from '@blueprintjs/icons'

import { css } from '@emotion/css'

import { css, cx } from '@emotion/css'

import type { MilestoneState, VariablesOf } from '@inject/graphql'

import { SetMilestone, useClient } from '@inject/graphql'

import { StyledTag, Timestamp } from '@inject/shared'

import { useState, type FC } from 'react'

import { milestoneCard, spanElipsis } from './AllMilestoneIndicator'



const timestamp = css`

  margin: 0.5rem;

`



const wrapper = css`

  display: flex;

  align-items: center;

  gap: 0.2rem;

  justify-content: center;

`



interface MilestoneIndicatorProps {

  milestone: MilestoneState

  teamId: string
@@ -71,12 +65,23 @@ const MilestoneIndicator: FC<MilestoneIndicatorProps> = ({ 
                size={IconSize.LARGE}

              />

            </Popover>

            <div className={wrapper}>

            <span

              className={cx(

                spanElipsis,

                css`

                  margin-left: 0.4rem;

                `

              )}

            >

              {displayName}

            </span>



            {milestone.final && (

                <Flag style={{ padding: '0.2rem' }} title='Final milestone' />

              <Flag

                style={{ padding: '0.2rem', marginLeft: '0.3rem' }}

                title='Final milestone'

              />

            )}

            </div>

          </>

        )}

      />
@@ -126,7 +131,7 @@ const MilestoneIndicator: FC<MilestoneIndicatorProps> = ({ 
  )



  return disabled ? (

    <Card style={{ order: reached ? 1 : 3 }} compact>

    <Card style={{ order: reached ? 1 : 3 }} compact className={milestoneCard}>

      {cardChildren}

    </Card>

  ) : (
@@ -138,6 +143,7 @@ const MilestoneIndicator: FC<MilestoneIndicatorProps> = ({ 
      onChange={() => {

        setOpen(true)

      }}

      className={milestoneCard}

    >

      {cardChildren}

    </SwitchCard>