titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch to lists for timeline

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:55 +03:00
parent aec4d826b5
commit be0ec46e4b
2 changed files with 122 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/sidebar.jsx
View File

@ -4,7 +4,7 @@ import botIcon from "../assets/bot.png";
import teamIcon from "../assets/group.png"; import teamIcon from "../assets/group.png";
import timeLine from "../assets/process.png"; import timeLine from "../assets/process.png";
import todo from "../assets/calendar.png"; import todo from "../assets/calendar.png";
import { Tooltip, SideSheet } from "@douyinfe/semi-ui"; import { Tooltip, SideSheet, List } from "@douyinfe/semi-ui";
import { UndoRedoContext } from "../pages/editor"; import { UndoRedoContext } from "../pages/editor";
import Todo from "./todo"; import Todo from "./todo";
@ -115,18 +115,17 @@ export default function Sidebar() {
function renderTimeline() { function renderTimeline() {
if (undoStack.length > 0) { if (undoStack.length > 0) {
return ( return (
<div className="m-5"> <List>
<hr />
{[...undoStack].reverse().map((e) => ( {[...undoStack].reverse().map((e) => (
<> <List.Item style={{ padding: "4px 18px 4px 18px" }}
<div className="flex items-center py-1"> className="hover:bg-slate-100">
<div className="flex items-center py-1 w-full">
<i className="block fa-regular fa-circle fa-xs"></i> <i className="block fa-regular fa-circle fa-xs"></i>
<div className="ms-2">{e.message}</div> <div className="ms-2">{e.message}</div>
</div> </div>
<hr /> </List.Item>
</>
))} ))}
</div> </List>
); );
} else { } else {
return ( return (

219
src/components/todo.jsx
View File

@ -143,112 +143,123 @@ export default function Todo() {
Add task Add task
</Button> </Button>
</div> </div>
<List> {tasks.length > 0 ? (
{tasks.map((t, i) => ( <List>
<List.Item {tasks.map((t, i) => (
key={i} <List.Item
style={{ paddingLeft: "18px", paddingRight: "18px" }} key={i}
className={`${t.complete ? "bg-emerald-50" : "hover:bg-slate-100"}`} style={{ paddingLeft: "18px", paddingRight: "18px" }}
onClick={() => setActiveTask(i)} className={`${
> t.complete ? "bg-emerald-50" : "hover:bg-slate-100"
<div className="w-full"> }`}
<Row gutter={6} align="middle" type="flex" className="mb-2"> onClick={() => setActiveTask(i)}
<Col span={2}> >
<Checkbox <div className="w-full">
checked={t.complete} <Row gutter={6} align="middle" type="flex" className="mb-2">
onChange={(e) => <Col span={2}>
updateTask(i, { complete: e.target.checked }) <Checkbox
} checked={t.complete}
></Checkbox> onChange={(e) =>
</Col> updateTask(i, { complete: e.target.checked })
<Col span={19}> }
<Input ></Checkbox>
placeholder="Title" </Col>
onChange={(v) => updateTask(i, { title: v })} <Col span={19}>
value={t.title} <Input
></Input> placeholder="Title"
</Col> onChange={(v) => updateTask(i, { title: v })}
<Col span={3}> value={t.title}
<Popover ></Input>
content={ </Col>
<div className="p-2"> <Col span={3}>
<div className="mb-2 font-semibold">Set priority: </div> <Popover
<RadioGroup content={
onChange={(e) => <div className="p-2">
updateTask(i, { priority: e.target.value }) <div className="mb-2 font-semibold">
} Set priority:{" "}
value={t.priority} </div>
direction="vertical" <RadioGroup
> onChange={(e) =>
<Radio value={Priority.NONE}> updateTask(i, { priority: e.target.value })
<Tag color={priorityColor(Priority.NONE)}> }
{priorityLabel(Priority.NONE)} value={t.priority}
</Tag> direction="vertical"
</Radio> >
<Radio value={Priority.LOW}> <Radio value={Priority.NONE}>
<Tag color={priorityColor(Priority.LOW)}> <Tag color={priorityColor(Priority.NONE)}>
{priorityLabel(Priority.LOW)} {priorityLabel(Priority.NONE)}
</Tag> </Tag>
</Radio> </Radio>
<Radio value={Priority.MEDIUM}> <Radio value={Priority.LOW}>
<Tag color={priorityColor(Priority.MEDIUM)}> <Tag color={priorityColor(Priority.LOW)}>
{priorityLabel(Priority.MEDIUM)} {priorityLabel(Priority.LOW)}
</Tag> </Tag>
</Radio> </Radio>
<Radio value={Priority.HIGH}> <Radio value={Priority.MEDIUM}>
<Tag color={priorityColor(Priority.HIGH)}> <Tag color={priorityColor(Priority.MEDIUM)}>
{priorityLabel(Priority.HIGH)} {priorityLabel(Priority.MEDIUM)}
</Tag> </Tag>
</Radio> </Radio>
</RadioGroup> <Radio value={Priority.HIGH}>
<Button <Tag color={priorityColor(Priority.HIGH)}>
icon={<IconDeleteStroked />} {priorityLabel(Priority.HIGH)}
type="danger" </Tag>
block </Radio>
style={{ marginTop: "12px" }} </RadioGroup>
onClick={() => <Button
setTasks((prev) => icon={<IconDeleteStroked />}
prev.filter((task, j) => i !== j) type="danger"
) block
} style={{ marginTop: "12px" }}
> onClick={() =>
Delete setTasks((prev) =>
</Button> prev.filter((task, j) => i !== j)
</div> )
} }
trigger="click" >
showArrow Delete
className="w-[180px]" </Button>
> </div>
<Button icon={<IconMore />} type="tertiary"></Button> }
</Popover> trigger="click"
</Col> showArrow
</Row> className="w-[180px]"
{activeTask === i && ( >
<Row className="mb-2"> <Button icon={<IconMore />} type="tertiary"></Button>
<Col span={2}></Col> </Popover>
<Col span={22}>
<TextArea
placeholder="Details"
onChange={(v) => updateTask(i, { details: v })}
value={t.details}
></TextArea>
</Col> </Col>
</Row> </Row>
)} {activeTask === i && (
<Row> <Row className="mb-2">
<Col span={2}></Col> <Col span={2}></Col>
<Col span={22}> <Col span={22}>
Priority:{" "} <TextArea
<Tag color={priorityColor(t.priority)}> placeholder="Details"
{priorityLabel(t.priority)} onChange={(v) => updateTask(i, { details: v })}
</Tag> value={t.details}
</Col> ></TextArea>
</Row> </Col>
</div> </Row>
</List.Item> )}
))} <Row>
</List> <Col span={2}></Col>
<Col span={22}>
Priority:{" "}
<Tag color={priorityColor(t.priority)}>
{priorityLabel(t.priority)}
</Tag>
</Col>
</Row>
</div>
</List.Item>
))}
</List>
) : (
<div className="m-5">
You have no tasks yet. Add your to-dos and keep track of your
progress.
</div>
)}
</> </>
); );
} }