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

add dark theme

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:51:08 +03:00
parent 8a17540d31
commit 1dd645f1a7
19 changed files with 213 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -26,7 +26,7 @@
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body theme-mode="light">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="h-full"></div> <div id="root" class="h-full"></div>
<!-- <!--

BIN
src/assets/process_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

16
src/components/area.jsx
View File

@ -16,6 +16,7 @@ import {
AreaContext, AreaContext,
LayoutContext, LayoutContext,
SelectContext, SelectContext,
SettingsContext,
TabContext, TabContext,
UndoRedoContext, UndoRedoContext,
} from "../pages/editor"; } from "../pages/editor";
@ -25,6 +26,7 @@ export default function Area(props) {
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const [editField, setEditField] = useState({}); const [editField, setEditField] = useState({});
const { layout } = useContext(LayoutContext); const { layout } = useContext(LayoutContext);
const { settings } = useContext(SettingsContext);
const { tab, setTab } = useContext(TabContext); const { tab, setTab } = useContext(TabContext);
const { updateArea, deleteArea } = useContext(AreaContext); const { updateArea, deleteArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
@ -70,7 +72,7 @@ export default function Area(props) {
style={{ backgroundColor: props.areaData.color }} style={{ backgroundColor: props.areaData.color }}
/> />
</div> </div>
<div className="text-gray-900 absolute top-2 left-3 select-none"> <div className="text-color absolute top-2 left-3 select-none">
{props.areaData.name} {props.areaData.name}
</div> </div>
{(hovered || {(hovered ||
@ -94,7 +96,7 @@ export default function Area(props) {
}} }}
stopPropagation stopPropagation
content={ content={
<div> <div className="popover-theme">
<div className="font-semibold mb-2 ms-1"> <div className="font-semibold mb-2 ms-1">
Edit subject area Edit subject area
</div> </div>
@ -126,7 +128,7 @@ export default function Area(props) {
/> />
<Popover <Popover
content={ content={
<div> <div className="popover-theme">
<div className="flex justify-between items-center p-2"> <div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div> <div className="font-medium">Theme</div>
<Button <Button
@ -306,7 +308,7 @@ export default function Area(props) {
cx={props.areaData.x} cx={props.areaData.x}
cy={props.areaData.y} cy={props.areaData.y}
r={6} r={6}
fill="white" fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db" stroke="#5891db"
strokeWidth={3} strokeWidth={3}
cursor="nwse-resize" cursor="nwse-resize"
@ -316,7 +318,7 @@ export default function Area(props) {
cx={props.areaData.x + props.areaData.width} cx={props.areaData.x + props.areaData.width}
cy={props.areaData.y} cy={props.areaData.y}
r={6} r={6}
fill="white" fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db" stroke="#5891db"
strokeWidth={3} strokeWidth={3}
cursor="nesw-resize" cursor="nesw-resize"
@ -326,7 +328,7 @@ export default function Area(props) {
cx={props.areaData.x} cx={props.areaData.x}
cy={props.areaData.y + props.areaData.height} cy={props.areaData.y + props.areaData.height}
r={6} r={6}
fill="white" fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db" stroke="#5891db"
strokeWidth={3} strokeWidth={3}
cursor="nesw-resize" cursor="nesw-resize"
@ -336,7 +338,7 @@ export default function Area(props) {
cx={props.areaData.x + props.areaData.width} cx={props.areaData.x + props.areaData.width}
cy={props.areaData.y + props.areaData.height} cy={props.areaData.y + props.areaData.height}
r={6} r={6}
fill="white" fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db" stroke="#5891db"
strokeWidth={3} strokeWidth={3}
cursor="nwse-resize" cursor="nwse-resize"

12
src/components/area_overview.jsx
View File

@ -58,7 +58,9 @@ export default function AreaOverview(props) {
showClear showClear
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder="Search..." placeholder="Search..."
emptyContent={<div className="p-3">No areas found</div>} emptyContent={
<div className="p-3 popover-theme">No areas found</div>
}
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
@ -77,13 +79,13 @@ export default function AreaOverview(props) {
</Col> </Col>
</Row> </Row>
{areas.length <= 0 ? ( {areas.length <= 0 ? (
<div className="select-none"> <div className="select-none mt-2">
<Empty <Empty
image={ image={
<IllustrationNoContent style={{ width: 160, height: 160 }} /> <IllustrationNoContent style={{ width: 154, height: 154 }} />
} }
darkModeImage={ darkModeImage={
<IllustrationNoContentDark style={{ width: 160, height: 160 }} /> <IllustrationNoContentDark style={{ width: 154, height: 154 }} />
} }
title="No subject areas" title="No subject areas"
description="Add subject areas to compartmentalize tables!" description="Add subject areas to compartmentalize tables!"
@ -127,7 +129,7 @@ export default function AreaOverview(props) {
<Col span={3}> <Col span={3}>
<Popover <Popover
content={ content={
<div> <div className="popover-theme">
<div className="flex justify-between items-center p-2"> <div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div> <div className="font-medium">Theme</div>
<Button <Button

4
src/components/canvas.jsx
View File

@ -369,9 +369,11 @@ export default function Canvas(props) {
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
className="w-full h-full bg-white" className="w-full h-full"
style={{ style={{
cursor: cursor, cursor: cursor,
backgroundColor:
settings.mode === "light" ? "white" : "rgba(22, 22, 26, 1)",
}} }}
> >
{settings.showGrid && ( {settings.showGrid && (

4
src/components/chat.jsx
View File

@ -9,7 +9,7 @@ export default function Chat() {
const { messages } = useContext(MessageContext); const { messages } = useContext(MessageContext);
return ( return (
<div className="mx-5 flex flex-col h-full"> <div className="mx-5 flex flex-col h-full sidesheet-theme">
<div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2"> <div className="h-full flex-1 overflow-y-auto flex flex-col-reverse py-2">
{messages.map((m, i) => {messages.map((m, i) =>
m.type === "note" ? ( m.type === "note" ? (
@ -24,7 +24,7 @@ export default function Chat() {
size="small" size="small"
alt={m.name} alt={m.name}
color={m.color} color={m.color}
className="border border-grey-900" className="border border-color"
> >
{m.name.split(" ").map((c) => c[0])} {m.name.split(" ").map((c) => c[0])}
</Avatar> </Avatar>

68
src/components/control_panel.jsx
View File

@ -9,6 +9,7 @@ import {
IconSaveStroked, IconSaveStroked,
IconUndo, IconUndo,
IconRedo, IconRedo,
IconRowsStroked,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import icon from "../assets/icon_dark_64.png"; import icon from "../assets/icon_dark_64.png";
@ -844,7 +845,26 @@ export default function ControlPanel(props) {
shortcut: "Ctrl+Shift+G", shortcut: "Ctrl+Shift+G",
}, },
Theme: { Theme: {
children: [{ Light: () => {} }, { Dark: () => {} }], children: [
{
Light: () => {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
setSettings((prev) => ({ ...prev, mode: "light" }));
},
},
{
Dark: () => {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
setSettings((prev) => ({ ...prev, mode: "dark" }));
},
},
],
function: () => {}, function: () => {},
}, },
"Zoom in": { "Zoom in": {
@ -917,7 +937,7 @@ export default function ControlPanel(props) {
return ( return (
<div> <div>
{layout.header && header()} {layout.header && header()}
<div className="py-1 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden"> <div className="py-1 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 md:mx-6 select-none overflow-x-hidden toolbar-theme">
<div className="flex justify-start items-center"> <div className="flex justify-start items-center">
{layoutDropdown()} {layoutDropdown()}
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
@ -963,7 +983,7 @@ export default function ControlPanel(props) {
} }
trigger="click" trigger="click"
> >
<div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center justify-center"> <div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
<div className="w-[40px]">{Math.floor(settings.zoom * 100)}%</div> <div className="w-[40px]">{Math.floor(settings.zoom * 100)}%</div>
<div> <div>
<IconCaretdown /> <IconCaretdown />
@ -971,7 +991,7 @@ export default function ControlPanel(props) {
</div> </div>
</Dropdown> </Dropdown>
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded text-lg" className="py-1 px-2 hover-2 rounded text-lg"
title="Zoom in" title="Zoom in"
onClick={() => onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 })) setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
@ -980,7 +1000,7 @@ export default function ControlPanel(props) {
<i className="fa-solid fa-magnifying-glass-plus"></i> <i className="fa-solid fa-magnifying-glass-plus"></i>
</button> </button>
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded text-lg" className="py-1 px-2 hover-2 rounded text-lg"
title="Zoom out" title="Zoom out"
onClick={() => onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 })) setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
@ -990,7 +1010,7 @@ export default function ControlPanel(props) {
</button> </button>
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center" className="py-1 px-2 hover-2 rounded flex items-center"
title="Undo" title="Undo"
onClick={undo} onClick={undo}
> >
@ -1000,7 +1020,7 @@ export default function ControlPanel(props) {
/> />
</button> </button>
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center" className="py-1 px-2 hover-2 rounded flex items-center"
title="Redo" title="Redo"
onClick={redo} onClick={redo}
> >
@ -1011,37 +1031,34 @@ export default function ControlPanel(props) {
</button> </button>
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
<button <button
className="flex items-center py-1 px-2 hover:bg-slate-200 rounded" className="flex items-center py-1 px-2 hover-2 rounded"
title="Add new table" title="Add new table"
onClick={() => addTable()} onClick={() => addTable()}
> >
<IconAddTable /> <IconAddTable theme={settings.mode} />
</button> </button>
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center" className="py-1 px-2 hover-2 rounded flex items-center"
title="Add subject area" title="Add subject area"
onClick={() => addArea()} onClick={() => addArea()}
> >
<IconAddArea /> <IconAddArea theme={settings.mode} />
</button> </button>
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center" className="py-1 px-2 hover-2 rounded flex items-center"
title="Add new note" title="Add new note"
onClick={() => addNote()} onClick={() => addNote()}
> >
<IconAddNote /> <IconAddNote theme={settings.mode} />
</button> </button>
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
<button <button
className="py-1 px-2 hover:bg-slate-200 rounded flex items-center" className="py-1 px-2 hover-2 rounded flex items-center"
title="Save" title="Save"
> >
<IconSaveStroked size="extra-large" /> <IconSaveStroked size="extra-large" />
</button> </button>
<button <button className="py-1 px-2 hover-2 rounded text-xl" title="Commit">
className="py-1 px-2 hover:bg-slate-200 rounded text-xl"
title="Commit"
>
<i className="fa-solid fa-code-branch"></i> <i className="fa-solid fa-code-branch"></i>
</button> </button>
</div> </div>
@ -1211,13 +1228,14 @@ export default function ControlPanel(props) {
) : exportData.data !== "" || exportData.data ? ( ) : exportData.data !== "" || exportData.data ? (
<> <>
{visible === MODAL.IMG ? ( {visible === MODAL.IMG ? (
<Image src={exportData.data} alt="Diagram" height={220} /> <Image src={exportData.data} alt="Diagram" height={280} />
) : ( ) : (
<Editor <Editor
height="360px" height="360px"
value={exportData.data} value={exportData.data}
language={exportData.extension} language={exportData.extension}
options={{ readOnly: true }} options={{ readOnly: true }}
theme={settings.mode === "light" ? "light" : "vs-dark"}
/> />
)} )}
<div className="text-sm font-semibold mt-2">Filename:</div> <div className="text-sm font-semibold mt-2">Filename:</div>
@ -1243,7 +1261,7 @@ export default function ControlPanel(props) {
function header() { function header() {
return ( return (
<nav className="flex justify-between pt-1 items-center whitespace-nowrap"> <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
<div className="flex justify-start items-center text-slate-800"> <div className="flex justify-start items-center">
<Link to="/"> <Link to="/">
<img <img
width={54} width={54}
@ -1327,9 +1345,7 @@ export default function ControlPanel(props) {
</Dropdown.Menu> </Dropdown.Menu>
} }
> >
<div className="px-3 py-1 hover:bg-gray-100 rounded"> <div className="px-3 py-1 hover-2 rounded">{category}</div>
{category}
</div>
</Dropdown> </Dropdown>
))} ))}
</div> </div>
@ -1453,10 +1469,8 @@ export default function ControlPanel(props) {
} }
trigger="click" trigger="click"
> >
<div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center justify-center"> <div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
<div> <IconRowsStroked size="extra-large" />
<i className="fa-solid fa-table-list text-xl me-1"></i>
</div>
<div> <div>
<IconCaretdown /> <IconCaretdown />
</div> </div>

12
src/components/custom_icons.jsx
View File

@ -1,11 +1,11 @@
import React from "react"; import React from "react";
export function IconAddTable() { export function IconAddTable({ theme }) {
return ( return (
<svg height="26" width="26"> <svg height="26" width="26">
<path <path
fill="none" fill="none"
stroke="rgb(51 65 85)" stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
strokeWidth="2" strokeWidth="2"
d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21 M1 8 L22 8" d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21 M1 8 L22 8"
/> />
@ -13,12 +13,12 @@ export function IconAddTable() {
); );
} }
export function IconAddArea() { export function IconAddArea({ theme }) {
return ( return (
<svg height="26" width="26"> <svg height="26" width="26">
<path <path
fill="none" fill="none"
stroke="rgb(51 65 85)" stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
strokeWidth="2" strokeWidth="2"
d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21" d="M4 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 4 A4 4 0 0 1 5 2 M22 17 L22 25 M18 21 L26 21"
/> />
@ -26,12 +26,12 @@ export function IconAddArea() {
); );
} }
export function IconAddNote() { export function IconAddNote({ theme }) {
return ( return (
<svg height="26" width="26"> <svg height="26" width="26">
<path <path
fill="none" fill="none"
stroke="rgb(51 65 85)" stroke={theme === "light" ? "rgb(51 65 85)" : "lightgrey"}
strokeWidth="2" strokeWidth="2"
d="M12 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 12 L12 2 M1 12 L9 12 A3 3 0 0 0 12 9 L12 1 M22 17 L22 25 M18 21 L26 21" d="M12 2 L20 2 A4 4 0 0 1 22 4 L22 14 M14 22 L4 22 A4 4 0 0 1 1 18 L1 12 L12 2 M1 12 L9 12 A3 3 0 0 0 12 9 L12 1 M22 17 L22 25 M18 21 L26 21"
/> />

10
src/components/editor_panel.jsx
View File

@ -28,7 +28,7 @@ const EditorPanel = (props) => {
return ( return (
<div className="flex h-full"> <div className="flex h-full">
<div <div
className="flex flex-col h-full relative border-r border-gray-200" className="flex flex-col h-full relative border-r border-color"
style={{ width: `${props.width}px` }} style={{ width: `${props.width}px` }}
> >
<div className="h-full flex-1 overflow-y-auto"> <div className="h-full flex-1 overflow-y-auto">
@ -45,18 +45,18 @@ const EditorPanel = (props) => {
</Tabs> </Tabs>
</div> </div>
{layout.issues && ( {layout.issues && (
<div className="mt-auto border-t-2 border-gray-200 shadow-inner shadow-neutral-200"> <div className="mt-auto border-t-2 border-color shadow-inner">
<Issues /> <Issues />
</div> </div>
)} )}
</div> </div>
<div <div
className={`flex justify-center items-center p-1 h-auto hover:bg-slate-400 cursor-col-resize ${ className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
props.resize ? "bg-slate-300" : "" props.resize ? "bg-semi-grey-2" : ""
}`} }`}
onMouseDown={() => props.setResize(true)} onMouseDown={() => props.setResize(true)}
> >
<div className="w-1 border-x border-white h-1/6" /> <div className="w-1 border-x border-color h-1/6" />
</div> </div>
</div> </div>
); );

6
src/components/note.jsx
View File

@ -134,7 +134,7 @@ export default function Note(props) {
}} }}
stopPropagation stopPropagation
content={ content={
<div> <div className="popover-theme">
<div className="font-semibold mb-2 ms-1">Edit note</div> <div className="font-semibold mb-2 ms-1">Edit note</div>
<div className="w-[280px] flex items-center mb-2"> <div className="w-[280px] flex items-center mb-2">
<Input <Input
@ -164,8 +164,8 @@ export default function Note(props) {
/> />
<Popover <Popover
content={ content={
<div> <div className="popover-theme">
<div className="font-medium">Theme</div> <div className="font-medium mb-1">Theme</div>
<hr /> <hr />
<div className="py-3"> <div className="py-3">
{noteThemes.map((c) => ( {noteThemes.map((c) => (

14
src/components/notes_overview.jsx
View File

@ -55,7 +55,9 @@ export default function NotesOverview(props) {
showClear showClear
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder="Search..." placeholder="Search..."
emptyContent={<div className="p-3">No notes found</div>} emptyContent={
<div className="p-3 popover-theme">No notes found</div>
}
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
@ -75,13 +77,13 @@ export default function NotesOverview(props) {
</Col> </Col>
</Row> </Row>
{notes.length <= 0 ? ( {notes.length <= 0 ? (
<div className="select-none"> <div className="select-none mt-2">
<Empty <Empty
image={ image={
<IllustrationNoContent style={{ width: 160, height: 160 }} /> <IllustrationNoContent style={{ width: 154, height: 154 }} />
} }
darkModeImage={ darkModeImage={
<IllustrationNoContentDark style={{ width: 160, height: 160 }} /> <IllustrationNoContentDark style={{ width: 154, height: 154 }} />
} }
title="No text notes" title="No text notes"
description="Add notes cuz why not!" description="Add notes cuz why not!"
@ -139,8 +141,8 @@ export default function NotesOverview(props) {
<div className="ms-2"> <div className="ms-2">
<Popover <Popover
content={ content={
<div> <div className="popover-theme">
<div className="font-medium">Theme</div> <div className="font-medium mb-1">Theme</div>
<hr /> <hr />
<div className="py-3"> <div className="py-3">
{noteThemes.map((c) => ( {noteThemes.map((c) => (

12
src/components/reference_overview.jsx
View File

@ -63,7 +63,9 @@ export default function ReferenceOverview(props) {
showClear showClear
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder="Search..." placeholder="Search..."
emptyContent={<div className="p-3">No relationships found</div>} emptyContent={
<div className="p-3 popover-theme">No relationships found</div>
}
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
@ -81,14 +83,14 @@ export default function ReferenceOverview(props) {
accordion accordion
> >
{relationships.length <= 0 ? ( {relationships.length <= 0 ? (
<div className="select-none"> <div className="select-none mt-2">
<Empty <Empty
image={ image={
<IllustrationNoContent style={{ width: 160, height: 160 }} /> <IllustrationNoContent style={{ width: 154, height: 154 }} />
} }
darkModeImage={ darkModeImage={
<IllustrationNoContentDark <IllustrationNoContentDark
style={{ width: 160, height: 160 }} style={{ width: 154, height: 154 }}
/> />
} }
title="No relationships" title="No relationships"
@ -111,7 +113,7 @@ export default function ReferenceOverview(props) {
<div className="ms-1"> <div className="ms-1">
<Popover <Popover
content={ content={
<div className="p-2"> <div className="p-2 popover-theme">
<Table <Table
columns={columns} columns={columns}
dataSource={[ dataSource={[

4
src/components/relationship.jsx
View File

@ -87,9 +87,9 @@ export default function Relationship(props) {
<feDropShadow <feDropShadow
dx="0" dx="0"
dy="0" dy="0"
stdDeviation="6" stdDeviation="4"
floodColor="gray" floodColor="gray"
floodOpacity="0.5" floodOpacity="0.3"
/> />
</filter> </filter>
</defs> </defs>

35
src/components/sidebar.jsx
View File

@ -3,9 +3,14 @@ import chatIcon from "../assets/chat.png";
import botIcon from "../assets/bot.png"; 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 timeLineDark from "../assets/process_dark.png";
import todo from "../assets/calendar.png"; import todo from "../assets/calendar.png";
import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui"; import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
import { MessageContext, UndoRedoContext } from "../pages/editor"; import {
MessageContext,
SettingsContext,
UndoRedoContext,
} from "../pages/editor";
import Todo from "./todo"; import Todo from "./todo";
import Chat from "./chat"; import Chat from "./chat";
@ -20,16 +25,21 @@ export default function Sidebar() {
}; };
const { undoStack } = useContext(UndoRedoContext); const { undoStack } = useContext(UndoRedoContext);
const { messages } = useContext(MessageContext); const { messages } = useContext(MessageContext);
const { settings } = useContext(SettingsContext);
const [sidesheet, setSidesheet] = useState(SidesheetType.NONE); const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
const [seen, setSeen] = useState(0) const [seen, setSeen] = useState(0);
const [count, setCount] = useState(messages.length-seen); const [count, setCount] = useState(messages.length - seen);
const getTitle = (type) => { const getTitle = (type) => {
switch (type) { switch (type) {
case SidesheetType.TIMELINE: case SidesheetType.TIMELINE:
return ( return (
<div className="flex items-center"> <div className="flex items-center">
<img src={timeLine} className="w-7" alt="chat icon" /> <img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-7"
alt="chat icon"
/>
<div className="ms-3">Timeline</div> <div className="ms-3">Timeline</div>
</div> </div>
); );
@ -73,7 +83,7 @@ export default function Sidebar() {
return ( return (
<> <>
<div className="ps-3 pe-4 py-4 shadow-lg h-full select-none"> <div className="ps-3 pe-4 py-4 shadow-lg h-full select-none border-l border-color">
<Tooltip content="Chat"> <Tooltip content="Chat">
<Badge <Badge
count={count === 0 ? null : count} count={count === 0 ? null : count}
@ -109,7 +119,11 @@ export default function Sidebar() {
className="block" className="block"
onClick={() => setSidesheet(SidesheetType.TIMELINE)} onClick={() => setSidesheet(SidesheetType.TIMELINE)}
> >
<img src={timeLine} className="w-8 mb-5" alt="chat icon" /> <img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-8 mb-5"
alt="chat icon"
/>
</button> </button>
</Tooltip> </Tooltip>
<Tooltip content="Botle"> <Tooltip content="Botle">
@ -137,11 +151,11 @@ export default function Sidebar() {
function renderTimeline() { function renderTimeline() {
if (undoStack.length > 0) { if (undoStack.length > 0) {
return ( return (
<List> <List className="sidesheet-theme">
{[...undoStack].reverse().map((e) => ( {[...undoStack].reverse().map((e) => (
<List.Item <List.Item
style={{ padding: "4px 18px 4px 18px" }} style={{ padding: "4px 18px 4px 18px" }}
className="hover:bg-slate-100" className="hover-1"
> >
<div className="flex items-center py-1 w-full"> <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>
@ -153,8 +167,9 @@ export default function Sidebar() {
); );
} else { } else {
return ( return (
<div className="m-5"> <div className="m-5 sidesheet-theme">
You havent added anything to your diagram yet. No activity was recorded. You have not added anything to your diagram
yet.
</div> </div>
); );
} }

42
src/components/table.jsx
View File

@ -81,13 +81,21 @@ export default function Table(props) {
props.active && !props.moving && "border-blue-500 border-4" props.active && !props.moving && "border-blue-500 border-4"
} ${ } ${
props.moving && "border-blue-500 border-4 border-dashed" props.moving && "border-blue-500 border-4 border-dashed"
} bg-gray-100 select-none rounded-lg w-full`} } select-none rounded-lg w-full ${
settings.mode === "light"
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
}`}
> >
<div <div
className={`h-[10px] w-full rounded-t-md`} className={`h-[10px] w-full rounded-t-md`}
style={{ backgroundColor: props.tableData.color }} style={{ backgroundColor: props.tableData.color }}
/> />
<div className="font-bold text-slate-800 h-[40px] flex justify-between items-center border-b border-gray-400 bg-gray-200"> <div
className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
}`}
>
<div className="px-3"> <div className="px-3">
{isHovered {isHovered
? props.tableData.name.length < 10 ? props.tableData.name.length < 10
@ -133,7 +141,7 @@ export default function Table(props) {
></Button> ></Button>
<Popover <Popover
content={ content={
<div className="text-slate-600"> <div className="popover-theme">
<div className="mb-2"> <div className="mb-2">
<strong>Comment :</strong>{" "} <strong>Comment :</strong>{" "}
{props.tableData.comment === "" ? ( {props.tableData.comment === "" ? (
@ -142,7 +150,7 @@ export default function Table(props) {
<div>{props.tableData.comment}</div> <div>{props.tableData.comment}</div>
)} )}
</div> </div>
<div className="text-slate-600"> <div>
<strong <strong
className={`${ className={`${
props.tableData.indices.length === 0 ? "" : "block" props.tableData.indices.length === 0 ? "" : "block"
@ -156,8 +164,12 @@ export default function Table(props) {
<div> <div>
{props.tableData.indices.map((index, k) => ( {props.tableData.indices.map((index, k) => (
<div <div
className="flex items-center my-1 px-2 py-1 rounded bg-gray-100"
key={k} key={k}
className={`flex items-center my-1 px-2 py-1 rounded ${
settings.mode === "light"
? "bg-gray-100"
: "bg-zinc-800"
}`}
> >
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i> <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
<div> <div>
@ -209,10 +221,10 @@ export default function Table(props) {
<Popover <Popover
key={i} key={i}
content={ content={
<> <div className="popover-theme">
<div className="flex justify-between items-center pb-2"> <div className="flex justify-between items-center pb-2">
<p className="me-4 font-bold">{e.name}</p> <p className="me-4 font-bold">{e.name}</p>
<p className="ms-4 text-slate-600">{e.type}</p> <p className="ms-4">{e.type}</p>
</div> </div>
<hr /> <hr />
{e.primary && ( {e.primary && (
@ -235,11 +247,11 @@ export default function Table(props) {
Increment Increment
</Tag> </Tag>
)} )}
<p className="text-slate-600"> <p>
<strong>Default :</strong>{" "} <strong>Default :</strong>{" "}
{e.default === "" ? "Not set" : e.default} {e.default === "" ? "Not set" : e.default}
</p> </p>
</> </div>
} }
position="right" position="right"
showArrow showArrow
@ -268,7 +280,7 @@ export default function Table(props) {
} }
style={{ paddingBottom: "16px" }} style={{ paddingBottom: "16px" }}
> >
<div className="flex items-center"> <div className="flex items-center sidesheet-theme">
<div className="text-md font-semibold">Name: </div> <div className="text-md font-semibold">Name: </div>
<Input <Input
value={props.tableData.name} value={props.tableData.name}
@ -298,7 +310,7 @@ export default function Table(props) {
</div> </div>
<div> <div>
{props.tableData.fields.map((f, j) => ( {props.tableData.fields.map((f, j) => (
<Row gutter={6} key={j} className="hover:bg-slate-100 mt-2"> <Row gutter={6} key={j} className="hover-2 mt-2">
<Col span={7}> <Col span={7}>
<Input <Input
value={f.name} value={f.name}
@ -425,7 +437,7 @@ export default function Table(props) {
<Col span={3}> <Col span={3}>
<Popover <Popover
content={ content={
<div className="px-1 w-[240px]"> <div className="px-1 w-[240px] popover-theme">
<div className="font-semibold">Default value</div> <div className="font-semibold">Default value</div>
<Input <Input
className="my-2" className="my-2"
@ -782,7 +794,7 @@ export default function Table(props) {
/> />
<Popover <Popover
content={ content={
<div className="px-1"> <div className="px-1 popover-theme">
<div className="font-semibold mb-1">Index name: </div> <div className="font-semibold mb-1">Index name: </div>
<Input <Input
value={idx.name} value={idx.name}
@ -1124,7 +1136,7 @@ export default function Table(props) {
setHoveredField(-1); setHoveredField(-1);
}} }}
> >
<div className={`${hoveredField === index ? "text-slate-500" : ""}`}> <div className={`${hoveredField === index ? "text-zinc-400" : ""}`}>
<button <button
className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`} className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
onMouseDown={(ev) => { onMouseDown={(ev) => {
@ -1142,7 +1154,7 @@ export default function Table(props) {
></button> ></button>
{fieldData.name} {fieldData.name}
</div> </div>
<div className="text-slate-400"> <div className="text-zinc-400">
{hoveredField === index ? ( {hoveredField === index ? (
<Popconfirm <Popconfirm
title="Are you sure you want to delete this field?" title="Are you sure you want to delete this field?"

17
src/components/table_overview.jsx
View File

@ -77,6 +77,9 @@ export default function TableOverview(props) {
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder="Search..." placeholder="Search..."
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
emptyContent={
<div className="p-3 popover-theme">No tables found</div>
}
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
const { id } = tables.find((t) => t.name === v); const { id } = tables.find((t) => t.name === v);
@ -112,14 +115,14 @@ export default function TableOverview(props) {
accordion accordion
> >
{tables.length <= 0 ? ( {tables.length <= 0 ? (
<div className="select-none"> <div className="select-none mt-2">
<Empty <Empty
image={ image={
<IllustrationNoContent style={{ width: 160, height: 160 }} /> <IllustrationNoContent style={{ width: 154, height: 154 }} />
} }
darkModeImage={ darkModeImage={
<IllustrationNoContentDark <IllustrationNoContentDark
style={{ width: 160, height: 160 }} style={{ width: 154, height: 154 }}
/> />
} }
title="No tables" title="No tables"
@ -131,7 +134,7 @@ export default function TableOverview(props) {
<div id={`scroll_table_${t.id}`} key={t.id}> <div id={`scroll_table_${t.id}`} key={t.id}>
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}> <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
{t.fields.map((f, j) => ( {t.fields.map((f, j) => (
<Row gutter={6} key={j} className="hover:bg-slate-100 mb-2"> <Row gutter={6} key={j} className="hover-1 mb-2">
<Col span={7}> <Col span={7}>
<Input <Input
value={f.name} value={f.name}
@ -256,7 +259,7 @@ export default function TableOverview(props) {
<Col span={3}> <Col span={3}>
<Popover <Popover
content={ content={
<div className="px-1 w-[240px]"> <div className="px-1 w-[240px] popover-theme">
<div className="font-semibold">Default value</div> <div className="font-semibold">Default value</div>
<Input <Input
className="my-2" className="my-2"
@ -625,7 +628,7 @@ export default function TableOverview(props) {
/> />
<Popover <Popover
content={ content={
<div className="px-1"> <div className="px-1 popover-theme">
<div className="font-semibold mb-1"> <div className="font-semibold mb-1">
Index name:{" "} Index name:{" "}
</div> </div>
@ -767,7 +770,7 @@ export default function TableOverview(props) {
<Col span={8}> <Col span={8}>
<Popover <Popover
content={ content={
<div> <div className="popover-theme">
<div className="flex justify-between items-center p-2"> <div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div> <div className="font-medium">Theme</div>
<Button <Button

12
src/components/todo.jsx
View File

@ -98,7 +98,7 @@ export default function Todo() {
return ( return (
<> <>
<div className="flex justify-between items-center mx-5 mb-2"> <div className="flex justify-between items-center mx-5 mb-2 sidesheet-theme">
<Dropdown <Dropdown
render={ render={
<Dropdown.Menu> <Dropdown.Menu>
@ -145,14 +145,12 @@ export default function Todo() {
</Button> </Button>
</div> </div>
{tasks.length > 0 ? ( {tasks.length > 0 ? (
<List> <List className="sidesheet-theme">
{tasks.map((t, i) => ( {tasks.map((t, i) => (
<List.Item <List.Item
key={i} key={i}
style={{ paddingLeft: "18px", paddingRight: "18px" }} style={{ paddingLeft: "18px", paddingRight: "18px" }}
className={`${ className="hover-1"
t.complete ? "bg-emerald-50" : "hover:bg-slate-100"
}`}
onClick={() => setActiveTask(i)} onClick={() => setActiveTask(i)}
> >
<div className="w-full"> <div className="w-full">
@ -175,7 +173,7 @@ export default function Todo() {
<Col span={3}> <Col span={3}>
<Popover <Popover
content={ content={
<div className="p-2"> <div className="p-2 popover-theme">
<div className="mb-2 font-semibold"> <div className="mb-2 font-semibold">
Set priority:{" "} Set priority:{" "}
</div> </div>
@ -256,7 +254,7 @@ export default function Todo() {
))} ))}
</List> </List>
) : ( ) : (
<div className="m-5"> <div className="m-5 sidesheet-theme">
You have no tasks yet. Add your to-dos and keep track of your You have no tasks yet. Add your to-dos and keep track of your
progress. progress.
</div> </div>

57
src/index.css
View File

@ -17,23 +17,66 @@
overflow: hidden; overflow: hidden;
} }
.semi-card .semi-collapse-item{ .semi-card .semi-collapse-item {
border: none !important; border: none !important;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #f1f1f1; opacity: 0;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #c5c5c5; background-color: rgba(var(--semi-grey-2), 1);
border-radius: 10px; border-radius: 8px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #b9b9b9; background-color: rgba(var(--semi-grey-3), 1);
} }
.theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-0);
}
.sidesheet-theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-2);
}
.popover-theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-3);
}
.toolbar-theme {
background-color: rgba(var(--semi-grey-1), 1);
}
.hover-1:hover {
background-color: rgba(var(--semi-grey-1), 1);
}
.bg-semi-grey-2 {
background-color: rgba(var(--semi-grey-2), 1);
}
.hover-2:hover {
background-color: rgba(var(--semi-grey-2), 1);
}
.text-color {
color: var(--semi-color-text-1);
}
.border-color {
border-color: rgba(var(--semi-grey-9), 0.08);
}
.table-border {
border-color: rgba(var(--semi-grey-2), 1);
}

3
src/pages/editor.jsx
View File

@ -51,6 +51,7 @@ export default function Editor(props) {
zoom: 1, zoom: 1,
pan: { x: 0, y: 0 }, pan: { x: 0, y: 0 },
showGrid: true, showGrid: true,
mode: "light",
}); });
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
const [messages, setMessages] = useState([]); const [messages, setMessages] = useState([]);
@ -477,7 +478,7 @@ export default function Editor(props) {
<TaskContext.Provider <TaskContext.Provider
value={{ tasks, setTasks, updateTask }} value={{ tasks, setTasks, updateTask }}
> >
<div className="h-[100vh] overflow-hidden"> <div className="h-[100vh] overflow-hidden theme">
<ControlPanel /> <ControlPanel />
<div <div
className={ className={