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

feat: ✨ Close #27: Tooltips

This commit is contained in:
ThatOneCalculator 2022-03-21 17:23:33 -07:00
parent ac440256c4
commit e9041ff13d
6 changed files with 102 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/package.json
View File

@ -26,6 +26,7 @@
"@ant-design/icons-svg": "^4.2.1",
"highlight.js": "^11.4.0",
"js-confetti": "^0.10.2",
"smooth-scrollbar": "^8.7.4"
"smooth-scrollbar": "^8.7.4",
"tippy.js": "^6.3.7"
}
}

27
frontend/src/icons.ts
View File

@ -5,6 +5,9 @@ import {
CopyOutlined,
} from "@ant-design/icons-svg"
import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
import tippy from "tippy.js"
import "../style/tooltip.css"
import "tippy.js/animations/scale.css"
const saveButton = <HTMLButtonElement>document.getElementById("save-button")
const newButton = <HTMLButtonElement>document.getElementById("new-button")
@ -29,3 +32,27 @@ copyButton.innerHTML += renderIconDefinitionToSVGElement(CopyOutlined, {
githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
extraSVGAttrs: extraSVGAttrs,
})
tippy("#save-button", {
content: "Save paste",
animation: "scale",
theme: "rosepine",
})
tippy("#new-button", {
content: "New paste",
animation: "scale",
theme: "rosepine",
})
tippy("#copy-button", {
content: "Duplicate paste",
animation: "scale",
theme: "rosepine",
})
tippy("#github-button", {
content: "GitHub",
animation: "scale",
theme: "rosepine",
})

19
frontend/style/font.css Normal file
View File

@ -0,0 +1,19 @@
@font-face {
font-family: "Cartograph CF";
src: url("../fonts/CartographCF-Regular.woff2") format("woff2"),
url("../fonts/CartographCF-Regular.woff") format("woff"),
url("../fonts/CartographCF-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Cartograph CF";
src: url("../fonts/CartographCF-RegularItalic.woff2") format("woff2"),
url("../fonts/CartographCF-RegularItalic.woff") format("woff"),
url("../fonts/CartographCF-RegularItalic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
}

19
frontend/style/style.scss
View File

@ -1,21 +1,4 @@
@font-face {
font-family: "Cartograph CF";
src: url("../fonts/CartographCF-Regular.woff2") format("woff2"),
url("../fonts/CartographCF-Regular.woff") format("woff"),
url("../fonts/CartographCF-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Cartograph CF";
src: url("../fonts/CartographCF-RegularItalic.woff2") format("woff2"),
url("../fonts/CartographCF-RegularItalic.woff") format("woff"),
url("../fonts/CartographCF-RegularItalic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@import url("./font.css");
$love: #eb6f92;
$gold: #f6c177;

36
frontend/style/tooltip.css Normal file
View File

@ -0,0 +1,36 @@
@import url("./font.css");
.tippy-box[data-theme~="rosepine"] {
color: #e0def4;
box-shadow: 0 0 20px 4px rgba(82, 79, 103, 0.15),
0 4px 80px -8px rgba(64, 61, 82, 0.25),
0 4px 4px -2px rgba(33, 32, 46, 0.15);
background-color: #26233a;
opacity: 0.8;
margin-top: 10px;
padding: 10px;
font-family: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono", "Courier New", monospace;
}
.tippy-box[data-theme~="rosepine"][data-placement^="top"]
> .tippy-arrow:before {
border-top-color: #26233a;
}
.tippy-box[data-theme~="rosepine"][data-placement^="bottom"]
> .tippy-arrow:before {
border-bottom-color: #26233a;
}
.tippy-box[data-theme~="rosepine"][data-placement^="left"]
> .tippy-arrow:before {
border-left-color: #26233a;
}
.tippy-box[data-theme~="rosepine"][data-placement^="right"]
> .tippy-arrow:before {
border-right-color: #26233a;
}
.tippy-box[data-theme~="rosepine"] > .tippy-backdrop {
background-color: #26233a;
}
.tippy-box[data-theme~="rosepine"] > .tippy-svg-arrow {
fill: #26233a;
}

17
frontend/yarn.lock
View File

@ -830,6 +830,13 @@ __metadata:
languageName: node
linkType: hard
"@popperjs/core@npm:^2.9.0":
version: 2.11.4
resolution: "@popperjs/core@npm:2.11.4"
checksum: 36168d274aa164368a50aef2e7b2f858e1b9145d9250af9dc1315ff719d874a367177760f8285efb75c8cf48267194a50e7dc9cdb41bf0b1958c38805c13564c
languageName: node
linkType: hard
"@swc/helpers@npm:^0.2.11":
version: 0.2.14
resolution: "@swc/helpers@npm:0.2.14"
@ -3478,6 +3485,15 @@ __metadata:
languageName: node
linkType: hard
"tippy.js@npm:^6.3.7":
version: 6.3.7
resolution: "tippy.js@npm:6.3.7"
dependencies:
"@popperjs/core": ^2.9.0
checksum: cac955318a65288e8d2dca05059878b003c6e66f92c94f7810f5bc5448eb6646abdf7dacc9bd00020e2611592598d0aae3a28ec9a45349a159603c3fdddce5fb
languageName: node
linkType: hard
"to-fast-properties@npm:^2.0.0":
version: 2.0.0
resolution: "to-fast-properties@npm:2.0.0"
@ -3645,5 +3661,6 @@ __metadata:
js-confetti: ^0.10.2
parcel: ^2.3.2
smooth-scrollbar: ^8.7.4
tippy.js: ^6.3.7
languageName: unknown
linkType: soft