generated from Klectr/KTemplate
Merge pull request 'add tooltips to creation buttons' (#3) from feat/tooltips into main
Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/3
This commit is contained in:
commit
22d5c3ed4e
@ -1,4 +1,5 @@
|
|||||||
import { ImagesSignal, NotesSigal } from "../../signals"
|
import { ImagesSignal, NotesSigal } from "../../signals"
|
||||||
|
import { Tooltip } from "./Tooltip"
|
||||||
import { defaultClassName } from "./utils"
|
import { defaultClassName } from "./utils"
|
||||||
|
|
||||||
export function ExportButton() {
|
export function ExportButton() {
|
||||||
@ -25,23 +26,25 @@ export function ExportButton() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<Tooltip message="Export Json File">
|
||||||
onclick={_handleExport}
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
onclick={_handleExport}
|
||||||
width="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="24"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
stroke-width="2"
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
className={defaultClassName}
|
stroke-linejoin="round"
|
||||||
>
|
className={defaultClassName}
|
||||||
<path
|
>
|
||||||
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
<path
|
||||||
<polyline points="7 10 12 15 17 10" />
|
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||||
<line x1="12" x2="12" y1="15" y2="3" />
|
<polyline points="7 10 12 15 17 10" />
|
||||||
</svg>
|
<line x1="12" x2="12" y1="15" y2="3" />
|
||||||
|
</svg>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { ImagesSignal } from "../../signals"
|
import { ImagesSignal } from "../../signals"
|
||||||
import images from "../../signals/images"
|
import images from "../../signals/images"
|
||||||
import { updateLocalStorage } from "../../utils/localStorage"
|
import { updateLocalStorage } from "../../utils/localStorage"
|
||||||
|
import { Tooltip } from "./Tooltip"
|
||||||
import { defaultClassName } from "./utils"
|
import { defaultClassName } from "./utils"
|
||||||
|
|
||||||
export function ImageCardButton() {
|
export function ImageCardButton() {
|
||||||
@ -48,31 +49,33 @@ export function ImageCardButton() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<Tooltip message="Create an Image">
|
||||||
onclick={_handleClick}
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
onclick={_handleClick}
|
||||||
width="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="24"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
stroke-width="2"
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
className={defaultClassName}>
|
stroke-linejoin="round"
|
||||||
<rect
|
className={defaultClassName}>
|
||||||
width="18"
|
<rect
|
||||||
height="18"
|
width="18"
|
||||||
x="3"
|
height="18"
|
||||||
y="3"
|
x="3"
|
||||||
rx="2"
|
y="3"
|
||||||
ry="2" />
|
rx="2"
|
||||||
<circle
|
ry="2" />
|
||||||
cx="9"
|
<circle
|
||||||
cy="9"
|
cx="9"
|
||||||
r="2" />
|
cy="9"
|
||||||
<path
|
r="2" />
|
||||||
d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
|
<path
|
||||||
</svg>
|
d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
|
||||||
|
</svg>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import notes from "../../signals/notes"
|
|||||||
import { Card } from "../../types"
|
import { Card } from "../../types"
|
||||||
import { convertBase64ToJson } from "../../utils/convertBase64ToJson"
|
import { convertBase64ToJson } from "../../utils/convertBase64ToJson"
|
||||||
import { updateLocalStorage } from "../../utils/localStorage"
|
import { updateLocalStorage } from "../../utils/localStorage"
|
||||||
|
import { Tooltip } from "./Tooltip"
|
||||||
import { defaultClassName } from "./utils"
|
import { defaultClassName } from "./utils"
|
||||||
|
|
||||||
export function ImportButton() {
|
export function ImportButton() {
|
||||||
@ -44,23 +45,25 @@ export function ImportButton() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<Tooltip message="Import Json File">
|
||||||
onclick={_handleImport}
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
onclick={_handleImport}
|
||||||
width="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="24"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
stroke-width="2"
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
className={"rotate-[180deg] " + defaultClassName}
|
stroke-linejoin="round"
|
||||||
>
|
className={"rotate-[180deg] " + defaultClassName}
|
||||||
<path
|
>
|
||||||
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
<path
|
||||||
<polyline points="7 10 12 15 17 10" />
|
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||||
<line x1="12" x2="12" y1="15" y2="3" />
|
<polyline points="7 10 12 15 17 10" />
|
||||||
</svg>
|
<line x1="12" x2="12" y1="15" y2="3" />
|
||||||
|
</svg>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { NotesSigal } from "../../signals"
|
import { NotesSigal } from "../../signals"
|
||||||
import notes from "../../signals/notes"
|
import notes from "../../signals/notes"
|
||||||
import { updateLocalStorage } from "../../utils/localStorage"
|
import { updateLocalStorage } from "../../utils/localStorage"
|
||||||
|
import { Tooltip } from "./Tooltip"
|
||||||
import { defaultClassName } from "./utils"
|
import { defaultClassName } from "./utils"
|
||||||
|
|
||||||
export function StickyNoteButton() {
|
export function StickyNoteButton() {
|
||||||
@ -22,23 +23,25 @@ export function StickyNoteButton() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<Tooltip message="Create a Sticky Note">
|
||||||
onclick={_handleClick}
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
onclick={_handleClick}
|
||||||
width="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="24"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
stroke-width="2"
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
className={defaultClassName}>
|
stroke-linejoin="round"
|
||||||
<path
|
className={defaultClassName}>
|
||||||
d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
|
<path
|
||||||
<path
|
d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
|
||||||
d="M15 3v4a2 2 0 0 0 2 2h4" />
|
<path
|
||||||
</svg>
|
d="M15 3v4a2 2 0 0 0 2 2h4" />
|
||||||
|
</svg>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,23 +1,26 @@
|
|||||||
|
import { Tooltip } from "./Tooltip";
|
||||||
import { defaultClassName } from "./utils";
|
import { defaultClassName } from "./utils";
|
||||||
|
|
||||||
export function TextButton() {
|
export function TextButton() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<Tooltip message="Create a Text Node">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
width="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="24"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
stroke-width="2"
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
className={defaultClassName}
|
stroke-linejoin="round"
|
||||||
>
|
className={defaultClassName}
|
||||||
<path d="M4 20h16" />
|
>
|
||||||
<path d="m6 16 6-12 6 12" />
|
<path d="M4 20h16" />
|
||||||
<path d="M8 12h8" />
|
<path d="m6 16 6-12 6 12" />
|
||||||
</svg>
|
<path d="M8 12h8" />
|
||||||
|
</svg>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
8
src/components/cardSelector/Tooltip.tsx
Normal file
8
src/components/cardSelector/Tooltip.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export function Tooltip({ children, message }: { children: JSX.Element, message: string }) {
|
||||||
|
return (
|
||||||
|
<div title={message}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user