From 7eede6a7b43d213b40ec0dafea90cb1c4f3ef24d Mon Sep 17 00:00:00 2001
From: LKollar <jednomije@gmail.com>
Date: Mon, 31 Oct 2022 16:52:07 +0100
Subject: [PATCH 1/2] added menu

---
 src/popup/modules/UserInterface.js | 26 ++++++++++++++++++
 src/popup/qrcode.css               | 43 ++++++++++++++++++++++++++++++
 src/popup/qrcode.html              |  8 ++++++
 src/popup/qrcode.js                |  1 +
 4 files changed, 78 insertions(+)

diff --git a/src/popup/modules/UserInterface.js b/src/popup/modules/UserInterface.js
index 6da4d662..8bdcbf27 100644
--- a/src/popup/modules/UserInterface.js
+++ b/src/popup/modules/UserInterface.js
@@ -43,6 +43,9 @@ const qrCodePlaceholder = document.getElementById("qrcode-placeholder");
 const qrCodeContainer = document.getElementById("qrcode-container");
 const qrCodeResizeContainer = document.getElementById("qrcode-resize-container");
 const qrCodeText = document.getElementById("qrcodetext");
+const saveButtonSVG = document.getElementById("save-button-SVG");
+const saveButtonPNG = document.getElementById("save-button-png");
+const copyButton = document.getElementById("copy-button");
 
 let resizeMutationObserver;
 
@@ -505,6 +508,27 @@ function menuClicked(event) {
     }
 }
 
+function saveSVG(){
+    const requestDownloadPermissions = browser.permissions.request(DOWNLOAD_PERMISSION);
+    let filename = generateFilename();
+    filename= filename + ".svg";
+    const svgElem = QrCreator.getQrCodeSvgFromLib();
+    const svgString = (new XMLSerializer()).serializeToString(svgElem);
+    const file = new File([svgString], filename, { type: "image/svg+xml;charset=utf-8" });
+    triggerFileSave(file, filename, requestDownloadPermissions);
+}
+
+function savePNG(){
+    const requestDownloadPermissions = browser.permissions.request(DOWNLOAD_PERMISSION);
+    let filename = generateFilename();
+    filename= filename + ".png";
+    const canvasElem = QrCreator.getQrCodeCanvasFromLib();
+    canvasElem.toBlob((blob) => {
+        const file = new File([blob], filename, { type: "image/png" });
+        triggerFileSave(file, filename, requestDownloadPermissions);
+    }, "image/png");
+}
+
 /**
  * Creates the context menu entries for the popup.
  *
@@ -590,6 +614,8 @@ export function init() {
     // add event listeners
     qrCodeText.addEventListener("input", refreshQrCode);
     qrCodeText.addEventListener("focus", selectAllText);
+    saveButtonSVG.addEventListener("click", saveSVG);
+    saveButtonPNG.addEventListener("click", savePNG);
 
     const applyingMonospaceFont = AddonSettings.get("monospaceFont").then((monospaceFont) => {
         if (monospaceFont) {
diff --git a/src/popup/qrcode.css b/src/popup/qrcode.css
index bb410fcf..efd94ed1 100644
--- a/src/popup/qrcode.css
+++ b/src/popup/qrcode.css
@@ -75,6 +75,48 @@ html, body {
   background-color: var(--grey-20-a90);
 }
 
+.menu-dropdown{
+  display: inline-block;
+  position: relative;
+}
+
+.menu-dropdown > button{
+  display: block;
+  border-radius: 5px;
+  width: 150px;
+  border: none;
+  text-align: center;
+}
+
+.menu-dropdown-button{
+  padding: 2px;
+}
+
+.menu-dropdown-content {
+  display: none;
+  width: 100%;
+  position: absolute;
+  overflow: auto;
+  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
+}
+
+.menu-dropdown:hover .menu-dropdown-content {
+  display: block;
+}
+
+.menu-dropdown-content a {
+  display: block;
+  color: #000000;
+  background-color: #FFFFFF;
+  text-decoration: none;
+  text-align: center;
+}
+
+.menu-dropdown-content a:hover {
+  color: #FFFFFF;
+  background-color: #00A4BD;
+}
+
 #qrcode-container {
   width: 100%;
   height: 100%;
@@ -87,6 +129,7 @@ html, body {
   /* center QR code itself */
   justify-content: center;
 }
+
 #qrcode-resize-container {
   /* overflow: hidden; */
   width: 100%;
diff --git a/src/popup/qrcode.html b/src/popup/qrcode.html
index b8f80503..2afb04f6 100644
--- a/src/popup/qrcode.html
+++ b/src/popup/qrcode.html
@@ -23,10 +23,18 @@
 			</div>
 		</div>
 		<div id="qrcode-container" class="center-container">
+			<div class="menu-dropdown">
+				<button>Hover for menu</button>
+				<div class="menu-dropdown-content">
+					<a class="menu-dropdown-button" id="save-button-SVG">Save QR code as SVG</a>
+					<a class="menu-dropdown-button" id="save-button-png">Save QR code as png</a>
+				</div>
+			</div>
 			<div id="qrcode-resize-container">
 				<div id="qrcode" class="qrcode invisible">
 					<img src="" width="200" height="200"></img>
 				</div>
+				
 				<img id="qrcode-placeholder" class="qrcode" src="img/qr-grey.svg" alt="QR code placeholder image"
 					width="200"
 					height="200"
diff --git a/src/popup/qrcode.js b/src/popup/qrcode.js
index d7cbc811..cc024620 100644
--- a/src/popup/qrcode.js
+++ b/src/popup/qrcode.js
@@ -11,6 +11,7 @@ import { tips } from "/common/modules/data/Tips.js";
 import * as RandomTips from "/common/modules/RandomTips/RandomTips.js";
 
 import "./modules/InitQrCode.js";
+import "./modules/UserInterface.js";
 
 RandomTips.init(tips).then(() => {
     RandomTips.setContext("popup");

From 1e5e5cf377b2fce6e23bc914ef93783bccc16693 Mon Sep 17 00:00:00 2001
From: LKollar <jednomije@gmail.com>
Date: Mon, 31 Oct 2022 16:59:06 +0100
Subject: [PATCH 2/2] added menu

---
 src/popup/modules/UserInterface.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/popup/modules/UserInterface.js b/src/popup/modules/UserInterface.js
index 8bdcbf27..d74f56f5 100644
--- a/src/popup/modules/UserInterface.js
+++ b/src/popup/modules/UserInterface.js
@@ -45,7 +45,6 @@ const qrCodeResizeContainer = document.getElementById("qrcode-resize-container")
 const qrCodeText = document.getElementById("qrcodetext");
 const saveButtonSVG = document.getElementById("save-button-SVG");
 const saveButtonPNG = document.getElementById("save-button-png");
-const copyButton = document.getElementById("copy-button");
 
 let resizeMutationObserver;