Menu

src/popup/modules/UserInterface.js

@@ -43,6 +43,8 @@ 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");
 
 let resizeMutationObserver;
 
@@ -505,6 +507,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 +613,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) {

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%;

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"

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");