Merge pull request #45 from zer0bin-dev/hide-button

frontend/index.pug

@@ -19,10 +19,9 @@ head
 	meta(property='twitter:description' content='🖊 Just a place to paste')
 	meta(property='twitter:image' content='https://raw.githubusercontent.com/zer0bin-dev/.github/main/zer0bin.png')
 	script(defer='' type='module' src='src/index.ts')
-	script(defer='' type='module' src='src/icons.ts')
 
 ul.noselect#messages
-.button-wrapper.noselect(style='position: fixed')
+.button-wrapper.noselect()
 	a.logo.noselect(href='/') zer0bin
 	.buttons.noselect
 		button#save-button.btn(aria-label='Save')
@@ -31,11 +30,15 @@ ul.noselect#messages
 		button#copy-button.btn(aria-label='Copy')
 		a(href='https://github.com/zer0bin-dev/zer0bin' aria-label='GitHub repo')
 			button#github-button.btn(aria-label='GitHub')
-	span.viewcounter.noselect#viewcounter-label Views: 
-	span.viewcounter.noselect#viewcounter-count
+	span.viewcounter.noselect#viewcounter-label(style='display: none') Views: 
+	span.viewcounter.noselect#viewcounter-count(style='display: none')
+
+.hide-button-wrapper
+	button#hide-button.btn(aria-label='Hide')
+
 .scrollbar-container
 	.wrapper
 		.line-numbers.noselect
-		pre#code-view-pre
+		pre#code-view-pre(style='display: none')
 			code#code-view
-		textarea#text-area(spellcheck='false' autofocus='' name='value' aria-label='Paste input area' disabled='')
+		textarea#text-area(spellcheck='false' autofocus='' name='value' aria-label='Paste input area' disabled='' style='display: none')

frontend/package.json

@@ -23,7 +23,7 @@
 		"@ant-design/icons-svg": "^4.2.1",
 		"@parcel/core": "^2.4.0",
 		"@parcel/transformer-pug": "^2.4.0",
-		"highlight.js": "^11.4.0",
+		"highlight.js": "^11.5.0",
 		"js-confetti": "^0.10.2",
 		"marked": "^4.0.12",
 		"no-darkreader": "^1.0.1",

frontend/src/icons.ts

@@ -6,6 +6,8 @@ import {
 	ForkOutlined,
 	HeartOutlined,
 	StarOutlined,
+	EyeOutlined,
+	EyeInvisibleOutlined
 } from "@ant-design/icons-svg"
 import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
 import tippy from "tippy.js"
@@ -15,6 +17,7 @@ import "tippy.js/animations/scale.css"
 const saveButton = <HTMLButtonElement>document.getElementById("save-button")
 const newButton = <HTMLButtonElement>document.getElementById("new-button")
 const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
+const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
 const githubButton = <HTMLButtonElement>document.getElementById("github-button")
 
 const extraSVGAttrs = {
@@ -35,6 +38,9 @@ copyButton.innerHTML += renderIconDefinitionToSVGElement(CopyOutlined, {
 githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
 	extraSVGAttrs: extraSVGAttrs,
 })
+hideButton.innerHTML += renderIconDefinitionToSVGElement(EyeInvisibleOutlined, {
+	extraSVGAttrs: extraSVGAttrs,
+})
 
 tippy("#save-button", {
 	content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
@@ -75,6 +81,15 @@ tippy("#github-button", {
 	allowHTML: true,
 })
 
+tippy("#hide-button", {
+	content: "Hide the button pane",
+	placement: "top",
+	animation: "scale",
+	theme: "rosepine",
+	allowHTML: true,
+})
+
+
 const observer = new MutationObserver(callback)
 
 function callback() {
@@ -95,3 +110,15 @@ function callback() {
 observer.observe(document.getElementById("code-view-pre"), {
 	attributes: true,
 })
+
+export function toggleHiddenIcon(hidden: boolean) {
+	if (!hidden) {
+		hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeInvisibleOutlined, {
+			extraSVGAttrs: extraSVGAttrs,
+		})
+	} else {
+		hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeOutlined, {
+			extraSVGAttrs: extraSVGAttrs,
+		})
+	}
+}

frontend/src/index.ts

@@ -1,19 +1,24 @@
 import "no-darkreader"
 
-import hljs from "highlight.js"
+import hljs from "highlight.js/lib/common"
 import { marked } from "marked"
 import JSConfetti from "js-confetti"
 import Scrollbar from "smooth-scrollbar"
 
+import "./icons"
+
 import config from "../config.json"
+import { toggleHiddenIcon } from "./icons"
 const apiUrl = config.api_url
 const confettiChance = parseInt(config.confetti_chance)
 let rawContent = ""
+let buttonPaneHidden = false
 
 const jsConfetti = new JSConfetti()
 
 const lineNumbers = <HTMLElement>document.querySelector(".line-numbers")
 const wrapper = <HTMLPreElement>document.querySelector(".wrapper")
+const buttonWrapper = <HTMLPreElement>document.querySelector(".button-wrapper")
 const editor = <HTMLTextAreaElement>document.getElementById("text-area")
 const codeViewPre = <HTMLPreElement>document.getElementById("code-view-pre")
 const codeView = <HTMLElement>document.getElementById("code-view")
@@ -27,6 +32,7 @@ const viewCounter = <HTMLSpanElement>(
 const saveButton = <HTMLButtonElement>document.getElementById("save-button")
 const newButton = <HTMLButtonElement>document.getElementById("new-button")
 const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
+const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
 
 function hide(element: HTMLElement) {
 	element.style.display = "none"
@@ -261,6 +267,20 @@ newButton.addEventListener("click", function () {
 	window.location.href = "/"
 })
 
+hideButton.addEventListener("click", function () {
+	if (!buttonPaneHidden) {
+		// The button pane is currently visible so we hide it
+		buttonPaneHidden = true
+		hide(buttonWrapper)
+	} else {
+		// The button pane isnt visible so we show it
+		buttonPaneHidden = false
+		show(buttonWrapper)
+	}
+
+	toggleHiddenIcon(buttonPaneHidden)
+})
+
 async function handlePopstate() {
 	const path = window.location.pathname
 

frontend/style/style.scss

@@ -175,6 +175,20 @@ a {
 	color: $muted;
 	cursor: auto;
 }
+.hide-button-wrapper {
+	position: fixed !important;
+	bottom: 0;
+	right: 0;
+	padding: 1rem 1rem 0.5rem 1rem;
+	z-index: 10;
+
+	.btn {
+		color: $muted;
+		&:hover {
+			color: $foam;
+		}
+	}
+}
 .keybind {
 	color: $subtle;
 	font-size: 11px;

frontend/style/tooltip.scss

@@ -11,6 +11,7 @@ $font-mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
 	opacity: 0.8;
 	padding: 10px;
 	font-family: $font-mono;
+	font-size: 13px;
 	> .tippy-backdrop {
 		background-color: $bg;
 	}

frontend/yarn.lock

@@ -1791,7 +1791,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"highlight.js@npm:^11.4.0":
+"highlight.js@npm:^11.5.0":
   version: 11.5.0
   resolution: "highlight.js@npm:11.5.0"
   checksum: a4339278d5be464fa29047fd00bc91f3d3966f5acbbb861ec51a09f3eea7c79ca63c2e0a2ba0c7b3d3663ee56b11c6470ab2759c7278e0d11af5cb0efa26e6eb
@@ -3291,7 +3291,7 @@ __metadata:
     "@parcel/transformer-sass": ^2.4.0
     "@types/core-js": ^2.5.5
     "@types/node": ^17.0.21
-    highlight.js: ^11.4.0
+    highlight.js: ^11.5.0
     js-confetti: ^0.10.2
     marked: ^4.0.12
     no-darkreader: ^1.0.1