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",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@douyinfe/semi-ui": "^2.49.0",
|
||||
"@douyinfe/semi-ui": "^2.51.3",
|
||||
"@lexical/react": "^0.12.5",
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"axios": "^1.6.2",
|
||||
@ -469,34 +469,34 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-animation": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.49.0.tgz",
|
||||
"integrity": "sha512-2x+mMAG/+yiEMWUNUepEkBwwCeurAZH6pCNJVyXufTLeU+yZab+/S9NK2y+lmEbZ9wvOE6nE2csHSGLaNsv7lg==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.51.3.tgz",
|
||||
"integrity": "sha512-S9MUvbzHQoV70G29QNpdJvOnGvU5NoQjZDEgcBSBVLcuAVXVTgbl3Syld0CYSzWfVUIdTbK9l7eHYPN2D1Bf0w==",
|
||||
"dependencies": {
|
||||
"bezier-easing": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-animation-react": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.49.0.tgz",
|
||||
"integrity": "sha512-z0mEdPOl3gPwJVMr4uCQFN6F6xIjlOOQ6SkOVZ6aMIEw1St/QD+HXgPAtP/LvBZZpu7T62rJquTk/gIqbeNEZw==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.51.3.tgz",
|
||||
"integrity": "sha512-esalw4JW6IkzH6BkLvxHmogBlEuFDVmcPN5XNgpjpZCWUGk/qYHExxQ4Fcyp5BCNJDrKNgah4OOUDVPAzBiFPQ==",
|
||||
"dependencies": {
|
||||
"@douyinfe/semi-animation": "2.49.0",
|
||||
"@douyinfe/semi-animation-styled": "2.49.0",
|
||||
"@douyinfe/semi-animation": "2.51.3",
|
||||
"@douyinfe/semi-animation-styled": "2.51.3",
|
||||
"classnames": "^2.2.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-animation-styled": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.49.0.tgz",
|
||||
"integrity": "sha512-v7WjtR7toe2q62L+jsbRB8e9HuAq+GrYy7mZs1NyeQqo29eH7098rwzawqBUsTJSDn9U4ptsNTVe2LJJmKyNDA=="
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.51.3.tgz",
|
||||
"integrity": "sha512-wb59wgq23ZRh/ma47CW6KDOU9U8PH/j12sk6pvLRPVmCsKQC+Ir3t+TIGOsEAAuaNN860KnW6ks2iJKfgS/2DQ=="
|
||||
},
|
||||
"node_modules/@douyinfe/semi-foundation": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.49.0.tgz",
|
||||
"integrity": "sha512-uUUxPZKkNrgghZdnhI+/SMnAQjvmE7PiqcUH1vWMi5VNjmMkWIFXVnNOHZX6YurgEFtloWSuIWU7kj2wxPUaoQ==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.51.3.tgz",
|
||||
"integrity": "sha512-Tx9AVTkLhgaSsUo36XZP6OJhNPKE3qUv8u9STy/eDfCdZtBeqG0Zy5A6AkAR3Mnhp4PHyT8Nu8ix+XEcFS/tQQ==",
|
||||
"dependencies": {
|
||||
"@douyinfe/semi-animation": "2.49.0",
|
||||
"@douyinfe/semi-animation": "2.51.3",
|
||||
"async-validator": "^3.5.0",
|
||||
"classnames": "^2.2.6",
|
||||
"date-fns": "^2.29.3",
|
||||
@ -507,9 +507,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-icons": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.49.0.tgz",
|
||||
"integrity": "sha512-1ZHyIAWNkspQybsaNNzeJTn3mNDC/AvZwwqYXTtMVUSGQhFBZnVUbzKazC8T8395PoqyZlcMQfy9EQco9DOJ2w==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.51.3.tgz",
|
||||
"integrity": "sha512-jH2XEF3CIvMkPjTc0tNMw+VMFx+xP4DthGmfsyqDR2+wUMqtW+mW8Z5wee/rumyBuEKNEwifHNU6NskNNywLHw==",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6"
|
||||
},
|
||||
@ -518,35 +518,35 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-illustrations": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.49.0.tgz",
|
||||
"integrity": "sha512-zvm31F7zoO+gUHQwCna575wvrw2rRCQEikcBjr7pUkSuV5Q+ru9f1BU7I5XZ1+EgEEhxz6c/o/uwT8a0OkAfQA==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.51.3.tgz",
|
||||
"integrity": "sha512-UK7i8+MT/pDwRMgOOint+JjnjdL2XsAGiMVKXsaxB4dz2OO+xa4QYcXg5Y62ggJwebKeKXJP0J22Dm3SG+hpxw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-theme-default": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.49.0.tgz",
|
||||
"integrity": "sha512-ndhZZqKAK9zXU7Hn892Mh2QkPtTA38F1T01rlRTZ/OVPHj3wUsLHBblvJ6j44YwbmEiDBtpg00AmouvxzKg+Tg==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.51.3.tgz",
|
||||
"integrity": "sha512-WH3O3igZiYR2s2tPCyMz6GJmrITcP32gAgPCth7W6KofD3ez2JNDYhtSmwnsKEya9N3ER8ADRroZNbVrI4gK8A==",
|
||||
"dependencies": {
|
||||
"glob": "^7.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-ui": {
|
||||
"version": "2.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.49.0.tgz",
|
||||
"integrity": "sha512-wqgOPeKF+AwGiTnqGeP0cWjTTpuH08O6H6fpWwk+cRAN7pXYFIWnm1etk4ZzumCySN9Uwa07Q967SyFfPElNSw==",
|
||||
"version": "2.51.3",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.51.3.tgz",
|
||||
"integrity": "sha512-uqyEeH9OrNpp4VOK/wKzpteEYoGaYv4IIJ9oYyyGGFpZgF4ev2azRs/rNGWgrPMYDCw/jAc32QD/edaBIsNbVQ==",
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.0.8",
|
||||
"@dnd-kit/sortable": "^7.0.2",
|
||||
"@dnd-kit/utilities": "^3.2.1",
|
||||
"@douyinfe/semi-animation": "2.49.0",
|
||||
"@douyinfe/semi-animation-react": "2.49.0",
|
||||
"@douyinfe/semi-foundation": "2.49.0",
|
||||
"@douyinfe/semi-icons": "2.49.0",
|
||||
"@douyinfe/semi-illustrations": "2.49.0",
|
||||
"@douyinfe/semi-theme-default": "2.49.0",
|
||||
"@douyinfe/semi-animation": "2.51.3",
|
||||
"@douyinfe/semi-animation-react": "2.51.3",
|
||||
"@douyinfe/semi-foundation": "2.51.3",
|
||||
"@douyinfe/semi-icons": "2.51.3",
|
||||
"@douyinfe/semi-illustrations": "2.51.3",
|
||||
"@douyinfe/semi-theme-default": "2.51.3",
|
||||
"async-validator": "^3.5.0",
|
||||
"classnames": "^2.2.6",
|
||||
"copy-text-to-clipboard": "^2.1.1",
|
||||
@ -2187,9 +2187,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
|
||||
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "1.2.1",
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@douyinfe/semi-ui": "^2.49.0",
|
||||
"@douyinfe/semi-ui": "^2.51.3",
|
||||
"@lexical/react": "^0.12.5",
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"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 logo_light from "../assets/logo_light_46.png";
|
||||
import template_screenshot from "../assets/template_screenshot.png"
|
||||
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 { db } from "../data/db";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
@ -81,8 +82,7 @@ function Thumbnail({ diagram, i }) {
|
||||
</div>
|
||||
{table.fields.map((f, j) => (
|
||||
<div
|
||||
className={`flex justify-between items-center py-[2px] px-[3px] ${
|
||||
j < table.fields.length - 1 ? "border-b" : ""
|
||||
className={`flex justify-between items-center py-[2px] px-[3px] ${j < table.fields.length - 1 ? "border-b" : ""
|
||||
}`}
|
||||
key={j}
|
||||
>
|
||||
@ -127,12 +127,9 @@ function Thumbnail({ diagram, i }) {
|
||||
return (
|
||||
<g key={n.id}>
|
||||
<path
|
||||
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
|
||||
x + w
|
||||
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
|
||||
x + w - r
|
||||
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
|
||||
y + h - r
|
||||
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${x + w
|
||||
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${x + w - r
|
||||
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${y + h - r
|
||||
} L${x} ${y + fold}`}
|
||||
fill={n.color}
|
||||
stroke="rgb(168 162 158)"
|
||||
@ -140,10 +137,8 @@ function Thumbnail({ diagram, i }) {
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d={`M${x} ${y + fold} L${x + fold - r} ${
|
||||
y + fold
|
||||
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
|
||||
x + fold
|
||||
d={`M${x} ${y + fold} L${x + fold - r} ${y + fold
|
||||
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${x + fold
|
||||
} ${y} L${x} ${y + fold} Z`}
|
||||
fill={n.color}
|
||||
stroke={"rgb(168 162 158)"}
|
||||
@ -255,6 +250,8 @@ export default function Templates() {
|
||||
tab={<span className="mx-2">Your templates</span>}
|
||||
itemKey="2"
|
||||
>
|
||||
{
|
||||
customTemplates?.length > 0 ?
|
||||
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
|
||||
{customTemplates?.map((c, i) => (
|
||||
<div
|
||||
@ -296,7 +293,38 @@ export default function Templates() {
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div> :
|
||||
<div className="py-5">
|
||||
<Banner
|
||||
fullMode={false}
|
||||
type="info"
|
||||
bordered
|
||||
icon={null}
|
||||
closeIcon={null}
|
||||
description={<div>You have no custom templates saved.</div>}
|
||||
/>
|
||||
<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" />
|
||||
<div className="col-span-2 sm:cols-span-1">
|
||||
<div className="text-xl font-bold my-4">How to save a template</div>
|
||||
<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>
|
||||
}
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user