mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: various UI updates
This commit is contained in:
swve
parent
52bc9e556b
commit
d5ad9e2f2f
10 changed files with 214 additions and 291 deletions
|
|
@ -7,7 +7,7 @@ function InfoCalloutComponent(props: any) {
|
|||
return (
|
||||
<NodeViewWrapper>
|
||||
<InfoCalloutWrapper contentEditable={props.extension.options.editable}>
|
||||
<AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
|
||||
<AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
|
||||
</InfoCalloutWrapper>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
|
|
@ -17,7 +17,7 @@ const InfoCalloutWrapper = styled.div`
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #1f3a8a;
|
||||
background-color: #dbe9fe;
|
||||
background-color: #dbe9fe;
|
||||
border: 1px solid #c1d9fb;
|
||||
border-radius: 16px;
|
||||
margin: 1rem 0;
|
||||
|
|
@ -36,14 +36,6 @@ const InfoCalloutWrapper = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const DragHandle = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1rem;
|
||||
height: 100%;
|
||||
cursor: move;
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
|
||||
export default InfoCalloutComponent;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ function Canva(props: Editor) {
|
|||
|
||||
const CanvaWrapper = styled.div`
|
||||
padding-top: 20px;
|
||||
width: 1300px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function Activity(props: any) {
|
|||
<Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
|
||||
{(provided) => (
|
||||
<div
|
||||
className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
|
||||
className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2 w-auto" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
|
||||
<p>{props.activity.name} </p>
|
||||
<Link
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import Activity from "./Activity";
|
||||
import { PlusSquare } from "lucide-react";
|
||||
|
||||
function Chapter(props: any) {
|
||||
return (
|
||||
|
|
@ -16,16 +17,9 @@ function Chapter(props: any) {
|
|||
>
|
||||
<h3 className="pt-3 font-bold text-md">
|
||||
{props.info.list.chapter.name}
|
||||
<button
|
||||
onClick={() => {
|
||||
props.openNewActivityModal(props.info.list.chapter.id);
|
||||
}}
|
||||
>
|
||||
|
||||
Create Activity
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
props.deleteChapter(props.info.list.chapter.id);
|
||||
|
|
@ -37,13 +31,24 @@ function Chapter(props: any) {
|
|||
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
|
||||
{(provided) => (
|
||||
<ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{props.info.list.activities.map((activity: any, index: any) => (
|
||||
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
<div className="flex flex-col ">
|
||||
{props.info.list.activities.map((activity: any, index: any) => (
|
||||
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
|
||||
<div onClick={() => {
|
||||
props.openNewActivityModal(props.info.list.chapter.id);
|
||||
}} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center outline outline-3 text-slate-500 outline-slate-200 bg-slate-50 hover:cursor-pointer">
|
||||
<PlusSquare className="" size={17} />
|
||||
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity</div>
|
||||
</div>
|
||||
</div>
|
||||
</ActivitiesList>
|
||||
|
||||
)}
|
||||
</Droppable>
|
||||
|
||||
</ChapterWrapper>
|
||||
)}
|
||||
</Draggable>
|
||||
|
|
|
|||
73
front/components/Pages/Courses/ActivityIndicators.tsx
Normal file
73
front/components/Pages/Courses/ActivityIndicators.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import ToolTip from '@components/UI/Tooltip/Tooltip'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
|
||||
interface Props {
|
||||
course: any
|
||||
orgslug: string
|
||||
current_activity?: any
|
||||
}
|
||||
|
||||
function ActivityIndicators(props: Props) {
|
||||
const course = props.course
|
||||
const orgslug = props.orgslug
|
||||
const courseid = course.course.course_id.replace("course_", "")
|
||||
|
||||
const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
|
||||
const black_activity_style = 'bg-black hover:bg-gray-700'
|
||||
const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
|
||||
|
||||
|
||||
function isActivityDone(activity: any) {
|
||||
if (course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing") {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function isActivityCurrent(activity: any) {
|
||||
let activityid = activity.id.replace("activity_", "")
|
||||
if (props.current_activity && props.current_activity == activityid) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function getActivityClass(activity: any) {
|
||||
if (isActivityDone(activity)) {
|
||||
return done_activity_style
|
||||
}
|
||||
if (isActivityCurrent(activity)) {
|
||||
return current_activity_style
|
||||
}
|
||||
return black_activity_style
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='grid grid-flow-col justify-stretch space-x-6'>
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
<>
|
||||
<div className='grid grid-flow-col justify-stretch space-x-2'>
|
||||
{chapter.activities.map((activity: any) => {
|
||||
return (
|
||||
<ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
|
||||
<div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>
|
||||
|
||||
</Link>
|
||||
</ToolTip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityIndicators
|
||||
|
|
@ -79,7 +79,7 @@ const contentClose = keyframes({
|
|||
const DialogOverlay = styled(Dialog.Overlay, {
|
||||
backgroundColor: blackA.blackA9,
|
||||
position: 'fixed',
|
||||
|
||||
zIndex: 500,
|
||||
inset: 0,
|
||||
animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
'&[data-state="closed"]': {
|
||||
|
|
@ -111,6 +111,7 @@ const DialogContent = styled(Dialog.Content, {
|
|||
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 18,
|
||||
zIndex: 501,
|
||||
boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue