selfhosted
/
zer0bin
mirror of https://github.com/zer0bin-dev/zer0bin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: ♻️ Render icon method

This commit is contained in:
ThatOneCalculator 2022-04-04 00:35:27 -07:00
parent a2b6392b03
commit bbccfc4314
2 changed files with 30 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/icons.ts
View File

@ -15,6 +15,7 @@ import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpe
import tippy from "tippy.js" import tippy from "tippy.js"
import "../style/tooltip.scss" import "../style/tooltip.scss"
import "tippy.js/animations/scale.css" import "tippy.js/animations/scale.css"
import { IconDefinition } from "@ant-design/icons-svg/lib/types"
const saveButton = <HTMLButtonElement>document.getElementById("save-button") const saveButton = <HTMLButtonElement>document.getElementById("save-button")
const newButton = <HTMLButtonElement>document.getElementById("new-button") const newButton = <HTMLButtonElement>document.getElementById("new-button")
@ -28,36 +29,23 @@ const singleViewButton = <HTMLButtonElement>(
document.getElementById("single-view-button") document.getElementById("single-view-button")
) )
const extraSVGAttrs = { function renderIcon(elem: HTMLButtonElement, icon: IconDefinition) {
width: "1em", elem.innerHTML += renderIconDefinitionToSVGElement(icon, {
height: "1em", extraSVGAttrs: {
fill: "currentColor", width: "1em",
height: "1em",
fill: "currentColor",
},
})
} }
saveButton.innerHTML += renderIconDefinitionToSVGElement(SaveOutlined, { renderIcon(saveButton, SaveOutlined)
extraSVGAttrs: extraSVGAttrs, renderIcon(newButton, FileAddOutlined)
}) renderIcon(copyButton, CopyOutlined)
newButton.innerHTML += renderIconDefinitionToSVGElement(FileAddOutlined, { renderIcon(githubButton, GithubOutlined)
extraSVGAttrs: extraSVGAttrs, renderIcon(hideButton, EyeInvisibleOutlined)
}) renderIcon(markdownButton, FileMarkdownOutlined)
copyButton.innerHTML += renderIconDefinitionToSVGElement(CopyOutlined, { renderIcon(singleViewButton, FireOutlined)
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,
})
tippy("#save-button", { tippy("#save-button", {
content: "Save paste<br><span class='keybind'>Ctrl + S</span>", content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
@ -103,11 +91,11 @@ tippy("#copy-button", {
tippy("#github-button", { tippy("#github-button", {
content: `GitHub<br><span class='keybind'> content: `GitHub<br><span class='keybind'>
${renderIconDefinitionToSVGElement(StarOutlined, { ${renderIconDefinitionToSVGElement(StarOutlined, {
extraSVGAttrs: extraSVGAttrs, extraSVGAttrs: { fill: "currentColor" },
})} ${renderIconDefinitionToSVGElement(ForkOutlined, { })} ${renderIconDefinitionToSVGElement(ForkOutlined, {
extraSVGAttrs: extraSVGAttrs, extraSVGAttrs: { fill: "currentColor" },
})} ${renderIconDefinitionToSVGElement(HeartOutlined, { })} ${renderIconDefinitionToSVGElement(HeartOutlined, {
extraSVGAttrs: extraSVGAttrs, extraSVGAttrs: { fill: "currentColor" },
})}</span>`, })}</span>`,
placement: "bottom", placement: "bottom",
animation: "scale", animation: "scale",
@ -149,12 +137,20 @@ export function toggleHiddenIcon(hidden: boolean) {
hideButton.innerHTML = renderIconDefinitionToSVGElement( hideButton.innerHTML = renderIconDefinitionToSVGElement(
EyeInvisibleOutlined, EyeInvisibleOutlined,
{ {
extraSVGAttrs: extraSVGAttrs, extraSVGAttrs: {
width: "1em",
height: "1em",
fill: "currentColor",
},
} }
) )
} else { } else {
hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeOutlined, { hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeOutlined, {
extraSVGAttrs: extraSVGAttrs, extraSVGAttrs: {
width: "1em",
height: "1em",
fill: "currentColor",
},
}) })
} }
} }

2
frontend/style/style.scss
View File

@ -188,7 +188,7 @@ a {
.btn { .btn {
color: $muted; color: $muted;
&:hover { &:hover {
color: $foam; color: $gold;
} }
} }
} }