Skip to content

Commit

Permalink
feat: better menu aesthetics
Browse files Browse the repository at this point in the history
  • Loading branch information
@kovaxis
kovaxis committed Dec 30, 2023
1 parent 97a709a commit 1dfb940
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 61 deletions.
2 changes: 1 addition & 1 deletion frontend/src/pages/planner/Planner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,7 @@ const Planner = (): JSX.Element => {
{clicked && (
// the context menu for the courses, it will be shown when the user right clicks on a course, it can show the info and change block options
<CoursesContextMenu
posibleBlocks={possibleBlocksList[courseInfo.code] ?? []}
possibleBlocks={possibleBlocksList[courseInfo.code] ?? []}
points={points}
courseInfo={courseInfo}
courseDetails={findClassInPlan(validatablePlan?.classes ?? [], courseInfo)}
Expand Down
141 changes: 81 additions & 60 deletions frontend/src/pages/planner/utils/CoursesContextMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { type CoursePos, type PseudoCourseId } from '../utils/Types'
import { type EquivDetails } from '../../../client'

interface CoursesContextMenuProps {
posibleBlocks: EquivDetails[]
possibleBlocks: EquivDetails[]
points: { x: number, y: number }
coursePos?: CoursePos
courseInfo: {
Expand All @@ -18,71 +18,92 @@ interface CoursesContextMenuProps {
forceBlockChange: Function
}

const CoursesContextMenu = ({ posibleBlocks, points, courseInfo, setClicked, courseDetails, coursePos, remCourse, forceBlockChange }: CoursesContextMenuProps): JSX.Element => {
const CoursesContextMenu = ({ possibleBlocks, points, courseInfo, setClicked, courseDetails, coursePos, remCourse, forceBlockChange }: CoursesContextMenuProps): JSX.Element => {
const [showBlocks, setShowBlocks] = useState(false)
const [showMoreInfo, setShowMoreBlocks] = useState(false)

return (
<div id="context-menu" className="z-50 absolute w-40 bg-slate-100 border-slate-300 border-2 box-border" style={{ top: points.y, left: points.x }}>
<ul className="box-border m-0 list-none font-medium text-sm text-gray-900 ">
{courseDetails?.is_concrete === true && (
<div
className="block p-2 w-full text-left hover:cursor-pointer hover:bg-slate-200 border-slate-300"
onMouseEnter={() => { setShowMoreBlocks(true) }}
onMouseLeave={() => { setShowMoreBlocks(false) }}
>Mas información
{showMoreInfo && (
<div className="w-44 absolute top-0 left-full bg-slate-100 border-slate-300 border-2 shadow-md">
<a
className="block w-full p-2 text-left hover:bg-slate-200"
href={`https://catalogo.uc.cl/index.php?tmpl=component&option=com_catalogo&view=programa&sigla=${courseInfo.code}`} rel="noreferrer" target="_blank"
>Ver programa</a>
<a
className="block w-full p-2 text-left hover:bg-slate-200 border-t-2 border-slate-200"
href={`https://catalogo.uc.cl/index.php?tmpl=component&option=com_catalogo&view=requisitos&sigla=${courseInfo.code}`} rel="noreferrer" target="_blank"
>Ver requisitos</a>
<a
className="block w-full p-2 text-left hover:bg-slate-200 border-t-2 border-slate-200"
href={`https://buscacursos.uc.cl/?cxml_sigla=${courseInfo.code}`} rel="noreferrer" target="_blank"
>Ver en busca cursos</a>
</div>
)}
</div>
)}
const optionsName: Array<'moreinfo' | 'changeblock' | 'delete'> = []

{posibleBlocks.length > 0 && (
if (courseDetails?.is_concrete === true) {
optionsName.push('moreinfo')
}
if (possibleBlocks.length > 1) {
optionsName.push('changeblock')
}
optionsName.push('delete')

const options = optionsName.map((kind, idx) => {
const round = (idx === 0 ? 'rounded-t-lg ' : 'border-t-2 ') + (idx === optionsName.length - 1 ? 'rounded-b-lg' : '')
switch (kind) {
case 'moreinfo':
return (
<div
className="p-2 relative w-full text-left hover:cursor-pointer hover:bg-slate-200 border-t-2 border-slate-300"
onMouseEnter={() => { setShowBlocks(true) }}
onMouseLeave={() => { setShowBlocks(false) }}
>
Ver bloques posibles
{showBlocks && (
<div className="w-44 absolute top-0 left-full bg-slate-100 border-slate-300 border-2 shadow-md">
{posibleBlocks.map((block, index) => (
<button
key={index}
className={`block w-full p-2 text-left hover:bg-slate-300 ${courseDetails !== undefined && 'equivalence' in courseDetails && block.code === courseDetails.equivalence?.code ? 'bg-slate-200' : ''}`}
onClick={() => {
if (courseDetails !== undefined && 'equivalence' in courseDetails && block.code === courseDetails.equivalence?.code) return
forceBlockChange(block.code, coursePos, courseInfo.credits)
}}
>
{block.name}
</button>
))}
</div>
)}
className={`block p-2 w-full text-left hover:cursor-pointer hover:bg-slate-300 border-slate-200 ${round}`}
onMouseEnter={() => { setShowMoreBlocks(true) }}
onMouseLeave={() => { setShowMoreBlocks(false) }}
>Mas información
{showMoreInfo && (
<div className="w-44 absolute top-0 left-full bg-slate-100 border-slate-300 border-2 rounded-lg shadow-md">
<a
className="block w-full p-2 text-left hover:bg-slate-300"
href={`https://catalogo.uc.cl/index.php?tmpl=component&option=com_catalogo&view=programa&sigla=${courseInfo.code}`} rel="noreferrer" target="_blank"
>Ver programa</a>
<a
className="block w-full p-2 text-left hover:bg-slate-300 border-t-2 border-slate-200"
href={`https://catalogo.uc.cl/index.php?tmpl=component&option=com_catalogo&view=requisitos&sigla=${courseInfo.code}`} rel="noreferrer" target="_blank"
>Ver requisitos</a>
<a
className="block w-full p-2 text-left hover:bg-slate-300 border-t-2 border-slate-200"
href={`https://buscacursos.uc.cl/?cxml_sigla=${courseInfo.code}`} rel="noreferrer" target="_blank"
>Ver en busca cursos</a>
</div>
)}
</div>
)}
<button
id="delete-course"
className="p-2 w-full text-left hover:cursor-pointer hover:bg-slate-200 border-t-2 border-slate-300"
onClick={() => {
remCourse(courseInfo)
setClicked(false)
}}
>Eliminar</button>
)
case 'changeblock':
return (
<div
className={`p-2 relative w-full text-left hover:cursor-pointer hover:bg-slate-300 border-slate-200 ${round}`}
onMouseEnter={() => { setShowBlocks(true) }}
onMouseLeave={() => { setShowBlocks(false) }}
>
Ver bloques posibles
{showBlocks && (
<div className="w-44 absolute top-0 left-full bg-slate-100 border-slate-300 border-2 rounded-lg shadow-md">
{possibleBlocks.map((block, index) => (
<button
key={index}
className={`block w-full p-2 text-left hover:bg-slate-300 border-slate-200 ${index !== 0 ? 'border-t-2' : ''}`}
onClick={() => {
if (courseDetails !== undefined && 'equivalence' in courseDetails && block.code === courseDetails.equivalence?.code) return
forceBlockChange(block.code, coursePos, courseInfo.credits)
}}
>
{courseDetails !== undefined && 'equivalence' in courseDetails && block.code === courseDetails.equivalence?.code ? '✔ ' : ''}
{block.name}
</button>
))}
</div>
)}
</div>
)
case 'delete':
return (<button
id="delete-course"
className={`p-2 w-full text-left hover:cursor-pointer hover:bg-slate-300 border-slate-200 ${round}`}
onClick={() => {
remCourse(courseInfo)
setClicked(false)
}}
>Eliminar</button>)
}
return kind
})

return (
<div id="context-menu" className="z-50 absolute w-40 bg-slate-100 border-slate-300 border-2 rounded-lg box-border" style={{ top: points.y, left: points.x }}>
<ul className="box-border m-0 list-none font-medium text-sm text-gray-900 ">
{options}
</ul>
</div>
)
Expand Down

0 comments on commit 1dfb940

Please sign in to comment.