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 "../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 = {
width: "1em",
height: "1em",
fill: "currentColor",
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",
},
})
}
}

2
frontend/style/style.scss
View File

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