Klectr/KSlab
1
0
Fork 0
generated from Klectr/KTemplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'add tooltips to creation buttons' (#3) from feat/tooltips into main

Browse Source 
Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/3
This commit is contained in:
Triston Armstrong 2024-10-07 05:33:55 +00:00
commit 22d5c3ed4e
6 changed files with 118 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/cardSelector/ExportButton.tsx
View File

@ -1,4 +1,5 @@
import { ImagesSignal, NotesSigal } from "../../signals"
import { Tooltip } from "./Tooltip"
import { defaultClassName } from "./utils"
export function ExportButton() {
@ -25,23 +26,25 @@ export function ExportButton() {
}
return (
<svg
onclick={_handleExport}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" x2="12" y1="15" y2="3" />
</svg>
<Tooltip message="Export Json File">
<svg
onclick={_handleExport}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" x2="12" y1="15" y2="3" />
</svg>
</Tooltip>
)
}

55
src/components/cardSelector/ImageCardButton.tsx
View File

@ -1,6 +1,7 @@
import { ImagesSignal } from "../../signals"
import images from "../../signals/images"
import { updateLocalStorage } from "../../utils/localStorage"
import { Tooltip } from "./Tooltip"
import { defaultClassName } from "./utils"
export function ImageCardButton() {
@ -48,31 +49,33 @@ export function ImageCardButton() {
}
return (
<svg
onclick={_handleClick}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}>
<rect
width="18"
height="18"
x="3"
y="3"
rx="2"
ry="2" />
<circle
cx="9"
cy="9"
r="2" />
<path
d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
</svg>
<Tooltip message="Create an Image">
<svg
onclick={_handleClick}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}>
<rect
width="18"
height="18"
x="3"
y="3"
rx="2"
ry="2" />
<circle
cx="9"
cy="9"
r="2" />
<path
d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
</svg>
</Tooltip>
)
}

39
src/components/cardSelector/ImportButton.tsx
View File

@ -3,6 +3,7 @@ import notes from "../../signals/notes"
import { Card } from "../../types"
import { convertBase64ToJson } from "../../utils/convertBase64ToJson"
import { updateLocalStorage } from "../../utils/localStorage"
import { Tooltip } from "./Tooltip"
import { defaultClassName } from "./utils"
export function ImportButton() {
@ -44,23 +45,25 @@ export function ImportButton() {
}
return (
<svg
onclick={_handleImport}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={"rotate-[180deg] " + defaultClassName}
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" x2="12" y1="15" y2="3" />
</svg>
<Tooltip message="Import Json File">
<svg
onclick={_handleImport}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={"rotate-[180deg] " + defaultClassName}
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" x2="12" y1="15" y2="3" />
</svg>
</Tooltip>
)
}

37
src/components/cardSelector/StickyNoteButton.tsx
View File

@ -1,6 +1,7 @@
import { NotesSigal } from "../../signals"
import notes from "../../signals/notes"
import { updateLocalStorage } from "../../utils/localStorage"
import { Tooltip } from "./Tooltip"
import { defaultClassName } from "./utils"
export function StickyNoteButton() {
@ -22,23 +23,25 @@ export function StickyNoteButton() {
}
return (
<svg
onclick={_handleClick}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}>
<path
d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
<path
d="M15 3v4a2 2 0 0 0 2 2h4" />
</svg>
<Tooltip message="Create a Sticky Note">
<svg
onclick={_handleClick}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}>
<path
d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
<path
d="M15 3v4a2 2 0 0 0 2 2h4" />
</svg>
</Tooltip>
)
}

35
src/components/cardSelector/TextButton.tsx
View File

@ -1,23 +1,26 @@
import { Tooltip } from "./Tooltip";
import { defaultClassName } from "./utils";
export function TextButton() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}
>
<path d="M4 20h16" />
<path d="m6 16 6-12 6 12" />
<path d="M8 12h8" />
</svg>
<Tooltip message="Create a Text Node">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={defaultClassName}
>
<path d="M4 20h16" />
<path d="m6 16 6-12 6 12" />
<path d="M8 12h8" />
</svg>
</Tooltip>
)
}

8
src/components/cardSelector/Tooltip.tsx Normal file
View File

@ -0,0 +1,8 @@
export function Tooltip({ children, message }: { children: JSX.Element, message: string }) {
return (
<div title={message}
>
{children}
</div>
)
}