mirror of https://github.com/zer0bin-dev/zer0bin
refactor: ♻️ Render icon method
This commit is contained in:
parent
a2b6392b03
commit
bbccfc4314
|
@ -15,6 +15,7 @@ import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpe
|
|||
import tippy from "tippy.js"
|
||||
import "../style/tooltip.scss"
|
||||
import "tippy.js/animations/scale.css"
|
||||
import { IconDefinition } from "@ant-design/icons-svg/lib/types"
|
||||
|
||||
const saveButton = <HTMLButtonElement>document.getElementById("save-button")
|
||||
const newButton = <HTMLButtonElement>document.getElementById("new-button")
|
||||
|
@ -28,36 +29,23 @@ const singleViewButton = <HTMLButtonElement>(
|
|||
document.getElementById("single-view-button")
|
||||
)
|
||||
|
||||
const extraSVGAttrs = {
|
||||
function renderIcon(elem: HTMLButtonElement, icon: IconDefinition) {
|
||||
elem.innerHTML += renderIconDefinitionToSVGElement(icon, {
|
||||
extraSVGAttrs: {
|
||||
width: "1em",
|
||||
height: "1em",
|
||||
fill: "currentColor",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
saveButton.innerHTML += renderIconDefinitionToSVGElement(SaveOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
})
|
||||
newButton.innerHTML += renderIconDefinitionToSVGElement(FileAddOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
})
|
||||
copyButton.innerHTML += renderIconDefinitionToSVGElement(CopyOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
})
|
||||
githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
})
|
||||
hideButton.innerHTML += renderIconDefinitionToSVGElement(EyeInvisibleOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
})
|
||||
markdownButton.innerHTML += renderIconDefinitionToSVGElement(
|
||||
FileMarkdownOutlined,
|
||||
{
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
}
|
||||
)
|
||||
singleViewButton.innerHTML += renderIconDefinitionToSVGElement(FireOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
})
|
||||
renderIcon(saveButton, SaveOutlined)
|
||||
renderIcon(newButton, FileAddOutlined)
|
||||
renderIcon(copyButton, CopyOutlined)
|
||||
renderIcon(githubButton, GithubOutlined)
|
||||
renderIcon(hideButton, EyeInvisibleOutlined)
|
||||
renderIcon(markdownButton, FileMarkdownOutlined)
|
||||
renderIcon(singleViewButton, FireOutlined)
|
||||
|
||||
tippy("#save-button", {
|
||||
content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
|
||||
|
@ -103,11 +91,11 @@ tippy("#copy-button", {
|
|||
tippy("#github-button", {
|
||||
content: `GitHub<br><span class='keybind'>
|
||||
${renderIconDefinitionToSVGElement(StarOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
extraSVGAttrs: { fill: "currentColor" },
|
||||
})} ${renderIconDefinitionToSVGElement(ForkOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
extraSVGAttrs: { fill: "currentColor" },
|
||||
})} ${renderIconDefinitionToSVGElement(HeartOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
extraSVGAttrs: { fill: "currentColor" },
|
||||
})}</span>`,
|
||||
placement: "bottom",
|
||||
animation: "scale",
|
||||
|
@ -149,12 +137,20 @@ export function toggleHiddenIcon(hidden: boolean) {
|
|||
hideButton.innerHTML = renderIconDefinitionToSVGElement(
|
||||
EyeInvisibleOutlined,
|
||||
{
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
extraSVGAttrs: {
|
||||
width: "1em",
|
||||
height: "1em",
|
||||
fill: "currentColor",
|
||||
},
|
||||
}
|
||||
)
|
||||
} else {
|
||||
hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeOutlined, {
|
||||
extraSVGAttrs: extraSVGAttrs,
|
||||
extraSVGAttrs: {
|
||||
width: "1em",
|
||||
height: "1em",
|
||||
fill: "currentColor",
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -188,7 +188,7 @@ a {
|
|||
.btn {
|
||||
color: $muted;
|
||||
&:hover {
|
||||
color: $foam;
|
||||
color: $gold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue