Add instructions for custom templates tab
This commit is contained in:
1ilit
parent
ba1dd5ab54
commit
78d0a26807
74
package-lock.json
generated
74
package-lock.json
generated
@ -8,7 +8,7 @@
|
|||||||
"name": "client-vite",
|
"name": "client-vite",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@douyinfe/semi-ui": "^2.49.0",
|
"@douyinfe/semi-ui": "^2.51.3",
|
||||||
"@lexical/react": "^0.12.5",
|
"@lexical/react": "^0.12.5",
|
||||||
"@monaco-editor/react": "^4.6.0",
|
"@monaco-editor/react": "^4.6.0",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
@ -469,34 +469,34 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-animation": {
|
"node_modules/@douyinfe/semi-animation": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.51.3.tgz",
|
||||||
"integrity": "sha512-2x+mMAG/+yiEMWUNUepEkBwwCeurAZH6pCNJVyXufTLeU+yZab+/S9NK2y+lmEbZ9wvOE6nE2csHSGLaNsv7lg==",
|
"integrity": "sha512-S9MUvbzHQoV70G29QNpdJvOnGvU5NoQjZDEgcBSBVLcuAVXVTgbl3Syld0CYSzWfVUIdTbK9l7eHYPN2D1Bf0w==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bezier-easing": "^2.1.0"
|
"bezier-easing": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-animation-react": {
|
"node_modules/@douyinfe/semi-animation-react": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.51.3.tgz",
|
||||||
"integrity": "sha512-z0mEdPOl3gPwJVMr4uCQFN6F6xIjlOOQ6SkOVZ6aMIEw1St/QD+HXgPAtP/LvBZZpu7T62rJquTk/gIqbeNEZw==",
|
"integrity": "sha512-esalw4JW6IkzH6BkLvxHmogBlEuFDVmcPN5XNgpjpZCWUGk/qYHExxQ4Fcyp5BCNJDrKNgah4OOUDVPAzBiFPQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@douyinfe/semi-animation": "2.49.0",
|
"@douyinfe/semi-animation": "2.51.3",
|
||||||
"@douyinfe/semi-animation-styled": "2.49.0",
|
"@douyinfe/semi-animation-styled": "2.51.3",
|
||||||
"classnames": "^2.2.6"
|
"classnames": "^2.2.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-animation-styled": {
|
"node_modules/@douyinfe/semi-animation-styled": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.51.3.tgz",
|
||||||
"integrity": "sha512-v7WjtR7toe2q62L+jsbRB8e9HuAq+GrYy7mZs1NyeQqo29eH7098rwzawqBUsTJSDn9U4ptsNTVe2LJJmKyNDA=="
|
"integrity": "sha512-wb59wgq23ZRh/ma47CW6KDOU9U8PH/j12sk6pvLRPVmCsKQC+Ir3t+TIGOsEAAuaNN860KnW6ks2iJKfgS/2DQ=="
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-foundation": {
|
"node_modules/@douyinfe/semi-foundation": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.51.3.tgz",
|
||||||
"integrity": "sha512-uUUxPZKkNrgghZdnhI+/SMnAQjvmE7PiqcUH1vWMi5VNjmMkWIFXVnNOHZX6YurgEFtloWSuIWU7kj2wxPUaoQ==",
|
"integrity": "sha512-Tx9AVTkLhgaSsUo36XZP6OJhNPKE3qUv8u9STy/eDfCdZtBeqG0Zy5A6AkAR3Mnhp4PHyT8Nu8ix+XEcFS/tQQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@douyinfe/semi-animation": "2.49.0",
|
"@douyinfe/semi-animation": "2.51.3",
|
||||||
"async-validator": "^3.5.0",
|
"async-validator": "^3.5.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"date-fns": "^2.29.3",
|
"date-fns": "^2.29.3",
|
||||||
@ -507,9 +507,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-icons": {
|
"node_modules/@douyinfe/semi-icons": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.51.3.tgz",
|
||||||
"integrity": "sha512-1ZHyIAWNkspQybsaNNzeJTn3mNDC/AvZwwqYXTtMVUSGQhFBZnVUbzKazC8T8395PoqyZlcMQfy9EQco9DOJ2w==",
|
"integrity": "sha512-jH2XEF3CIvMkPjTc0tNMw+VMFx+xP4DthGmfsyqDR2+wUMqtW+mW8Z5wee/rumyBuEKNEwifHNU6NskNNywLHw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.6"
|
"classnames": "^2.2.6"
|
||||||
},
|
},
|
||||||
@ -518,35 +518,35 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-illustrations": {
|
"node_modules/@douyinfe/semi-illustrations": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.51.3.tgz",
|
||||||
"integrity": "sha512-zvm31F7zoO+gUHQwCna575wvrw2rRCQEikcBjr7pUkSuV5Q+ru9f1BU7I5XZ1+EgEEhxz6c/o/uwT8a0OkAfQA==",
|
"integrity": "sha512-UK7i8+MT/pDwRMgOOint+JjnjdL2XsAGiMVKXsaxB4dz2OO+xa4QYcXg5Y62ggJwebKeKXJP0J22Dm3SG+hpxw==",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-theme-default": {
|
"node_modules/@douyinfe/semi-theme-default": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.51.3.tgz",
|
||||||
"integrity": "sha512-ndhZZqKAK9zXU7Hn892Mh2QkPtTA38F1T01rlRTZ/OVPHj3wUsLHBblvJ6j44YwbmEiDBtpg00AmouvxzKg+Tg==",
|
"integrity": "sha512-WH3O3igZiYR2s2tPCyMz6GJmrITcP32gAgPCth7W6KofD3ez2JNDYhtSmwnsKEya9N3ER8ADRroZNbVrI4gK8A==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"glob": "^7.1.6"
|
"glob": "^7.1.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@douyinfe/semi-ui": {
|
"node_modules/@douyinfe/semi-ui": {
|
||||||
"version": "2.49.0",
|
"version": "2.51.3",
|
||||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.49.0.tgz",
|
"resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.51.3.tgz",
|
||||||
"integrity": "sha512-wqgOPeKF+AwGiTnqGeP0cWjTTpuH08O6H6fpWwk+cRAN7pXYFIWnm1etk4ZzumCySN9Uwa07Q967SyFfPElNSw==",
|
"integrity": "sha512-uqyEeH9OrNpp4VOK/wKzpteEYoGaYv4IIJ9oYyyGGFpZgF4ev2azRs/rNGWgrPMYDCw/jAc32QD/edaBIsNbVQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dnd-kit/core": "^6.0.8",
|
"@dnd-kit/core": "^6.0.8",
|
||||||
"@dnd-kit/sortable": "^7.0.2",
|
"@dnd-kit/sortable": "^7.0.2",
|
||||||
"@dnd-kit/utilities": "^3.2.1",
|
"@dnd-kit/utilities": "^3.2.1",
|
||||||
"@douyinfe/semi-animation": "2.49.0",
|
"@douyinfe/semi-animation": "2.51.3",
|
||||||
"@douyinfe/semi-animation-react": "2.49.0",
|
"@douyinfe/semi-animation-react": "2.51.3",
|
||||||
"@douyinfe/semi-foundation": "2.49.0",
|
"@douyinfe/semi-foundation": "2.51.3",
|
||||||
"@douyinfe/semi-icons": "2.49.0",
|
"@douyinfe/semi-icons": "2.51.3",
|
||||||
"@douyinfe/semi-illustrations": "2.49.0",
|
"@douyinfe/semi-illustrations": "2.51.3",
|
||||||
"@douyinfe/semi-theme-default": "2.49.0",
|
"@douyinfe/semi-theme-default": "2.51.3",
|
||||||
"async-validator": "^3.5.0",
|
"async-validator": "^3.5.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"copy-text-to-clipboard": "^2.1.1",
|
"copy-text-to-clipboard": "^2.1.1",
|
||||||
@ -2187,9 +2187,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/classnames": {
|
"node_modules/classnames": {
|
||||||
"version": "2.3.2",
|
"version": "2.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||||
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
|
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
|
||||||
},
|
},
|
||||||
"node_modules/clsx": {
|
"node_modules/clsx": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@douyinfe/semi-ui": "^2.49.0",
|
"@douyinfe/semi-ui": "^2.51.3",
|
||||||
"@lexical/react": "^0.12.5",
|
"@lexical/react": "^0.12.5",
|
||||||
"@monaco-editor/react": "^4.6.0",
|
"@monaco-editor/react": "^4.6.0",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
|
|||||||
BIN
src/assets/template_screenshot.png
Normal file
BIN
src/assets/template_screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@ -1,7 +1,8 @@
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import logo_light from "../assets/logo_light_46.png";
|
import logo_light from "../assets/logo_light_46.png";
|
||||||
|
import template_screenshot from "../assets/template_screenshot.png"
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { Tabs, TabPane } from "@douyinfe/semi-ui";
|
import { Tabs, TabPane, Banner, Steps } from "@douyinfe/semi-ui";
|
||||||
import { IconDeleteStroked } from "@douyinfe/semi-icons";
|
import { IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||||
import { db } from "../data/db";
|
import { db } from "../data/db";
|
||||||
import { useLiveQuery } from "dexie-react-hooks";
|
import { useLiveQuery } from "dexie-react-hooks";
|
||||||
@ -81,9 +82,8 @@ function Thumbnail({ diagram, i }) {
|
|||||||
</div>
|
</div>
|
||||||
{table.fields.map((f, j) => (
|
{table.fields.map((f, j) => (
|
||||||
<div
|
<div
|
||||||
className={`flex justify-between items-center py-[2px] px-[3px] ${
|
className={`flex justify-between items-center py-[2px] px-[3px] ${j < table.fields.length - 1 ? "border-b" : ""
|
||||||
j < table.fields.length - 1 ? "border-b" : ""
|
}`}
|
||||||
}`}
|
|
||||||
key={j}
|
key={j}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-start">
|
<div className="flex items-center justify-start">
|
||||||
@ -127,24 +127,19 @@ function Thumbnail({ diagram, i }) {
|
|||||||
return (
|
return (
|
||||||
<g key={n.id}>
|
<g key={n.id}>
|
||||||
<path
|
<path
|
||||||
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
|
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${x + w
|
||||||
x + w
|
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${x + w - r
|
||||||
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
|
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${y + h - r
|
||||||
x + w - r
|
} L${x} ${y + fold}`}
|
||||||
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
|
|
||||||
y + h - r
|
|
||||||
} L${x} ${y + fold}`}
|
|
||||||
fill={n.color}
|
fill={n.color}
|
||||||
stroke="rgb(168 162 158)"
|
stroke="rgb(168 162 158)"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth="0.5"
|
strokeWidth="0.5"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d={`M${x} ${y + fold} L${x + fold - r} ${
|
d={`M${x} ${y + fold} L${x + fold - r} ${y + fold
|
||||||
y + fold
|
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${x + fold
|
||||||
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
|
} ${y} L${x} ${y + fold} Z`}
|
||||||
x + fold
|
|
||||||
} ${y} L${x} ${y + fold} Z`}
|
|
||||||
fill={n.color}
|
fill={n.color}
|
||||||
stroke={"rgb(168 162 158)"}
|
stroke={"rgb(168 162 158)"}
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
@ -255,48 +250,81 @@ export default function Templates() {
|
|||||||
tab={<span className="mx-2">Your templates</span>}
|
tab={<span className="mx-2">Your templates</span>}
|
||||||
itemKey="2"
|
itemKey="2"
|
||||||
>
|
>
|
||||||
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
|
{
|
||||||
{customTemplates?.map((c, i) => (
|
customTemplates?.length > 0 ?
|
||||||
<div
|
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
|
||||||
key={i}
|
{customTemplates?.map((c, i) => (
|
||||||
className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
|
<div
|
||||||
>
|
key={i}
|
||||||
<Thumbnail diagram={c} i={"2" + i} />
|
className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
|
||||||
<div className="px-4 py-3 w-full">
|
>
|
||||||
<div className="flex justify-between">
|
<Thumbnail diagram={c} i={"2" + i} />
|
||||||
<div className="text-lg font-bold text-zinc-700">
|
<div className="px-4 py-3 w-full">
|
||||||
{c.title}
|
<div className="flex justify-between">
|
||||||
</div>
|
<div className="text-lg font-bold text-zinc-700">
|
||||||
<div>
|
{c.title}
|
||||||
<button
|
</div>
|
||||||
className="me-1 border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
|
<div>
|
||||||
onClick={() => forkTemplate(c.id)}
|
<button
|
||||||
>
|
className="me-1 border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
|
||||||
<i className="fa-solid fa-code-fork"></i>
|
onClick={() => forkTemplate(c.id)}
|
||||||
</button>
|
>
|
||||||
|
<i className="fa-solid fa-code-fork"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-around mt-2">
|
||||||
|
<button
|
||||||
|
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500"
|
||||||
|
onClick={() => editTemplate(c.id)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-pencil-fill"></i>
|
||||||
|
<div className="ms-1.5 font-semibold">Edit</div>
|
||||||
|
</button>
|
||||||
|
<div className="border-l border-gray-300 mx-2" />
|
||||||
|
<button
|
||||||
|
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
|
||||||
|
onClick={() => deleteTemplate(c.id)}
|
||||||
|
>
|
||||||
|
<IconDeleteStroked />
|
||||||
|
<div className="ms-1.5 font-semibold">Delete</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-around mt-2">
|
))}
|
||||||
<button
|
</div> :
|
||||||
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500"
|
<div className="py-5">
|
||||||
onClick={() => editTemplate(c.id)}
|
<Banner
|
||||||
>
|
fullMode={false}
|
||||||
<i className="bi bi-pencil-fill"></i>
|
type="info"
|
||||||
<div className="ms-1.5 font-semibold">Edit</div>
|
bordered
|
||||||
</button>
|
icon={null}
|
||||||
<div className="border-l border-gray-300 mx-2" />
|
closeIcon={null}
|
||||||
<button
|
description={<div>You have no custom templates saved.</div>}
|
||||||
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
|
/>
|
||||||
onClick={() => deleteTemplate(c.id)}
|
<div className="grid grid-cols-5 sm:grid-cols-1 gap-4 place-content-center my-4">
|
||||||
>
|
<img src={template_screenshot} className="border col-span-3 sm:cols-span-1 rounded" />
|
||||||
<IconDeleteStroked />
|
<div className="col-span-2 sm:cols-span-1">
|
||||||
<div className="ms-1.5 font-semibold">Delete</div>
|
<div className="text-xl font-bold my-4">How to save a template</div>
|
||||||
</button>
|
<Steps direction="vertical" style={{ margin: "12px" }}>
|
||||||
|
<Steps.Step
|
||||||
|
title="Build a diagram"
|
||||||
|
description="Build the template in the editor"
|
||||||
|
/>
|
||||||
|
<Steps.Step
|
||||||
|
title="Save as template"
|
||||||
|
description="Editor > File > Save as template"
|
||||||
|
/>
|
||||||
|
<Steps.Step
|
||||||
|
title="Load a template"
|
||||||
|
description="Fork a template to build on"
|
||||||
|
/>
|
||||||
|
</Steps>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
}
|
||||||
</div>
|
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user