add short help text below qr code

Change-Id: I1f3cbeaf58b2d56eda30e6450a25f88efb2e6e99

Author: reloxx13

assets/js/core.js

@@ -1225,12 +1225,24 @@ const photoBooth = (function () {
                 if (document.getElementById('resultQR')) {
                     document.getElementById('resultQR').remove();
                 }
+                const qrWrapper = document.createElement('div');
+                qrWrapper.id = 'resultQR';
+                qrWrapper.setAttribute('class', 'stage-code ' + config.qr.result);
+
                 const qrResultImage = document.createElement('img');
                 qrResultImage.src = environment.publicFolders.api + '/qrcode.php?filename=' + filename;
                 qrResultImage.alt = 'qr code';
-                qrResultImage.id = 'resultQR';
-                qrResultImage.setAttribute('class', 'stage-code ' + config.qr.result);
-                resultPage.append(qrResultImage);
+                qrResultImage.classList.add('stage-code__image');
+                qrWrapper.append(qrResultImage);
+
+                const qrShortText = config.qr.short_text;
+                if (qrShortText && qrShortText.length > 0) {
+                    const qrCaption = document.createElement('p');
+                    qrCaption.classList.add('stage-code__caption');
+                    qrCaption.textContent = qrShortText;
+                    qrWrapper.append(qrCaption);
+                }
+                resultPage.append(qrWrapper);
             }
 
             if (!filternav.hasClass('sidenav--open')) {

assets/js/photoswipe.js

@@ -184,15 +184,28 @@ function initPhotoSwipeFromDOM(gallerySelector) {
                                 if (document.getElementById('pswpQR')) {
                                     document.getElementById('pswpQR').remove();
                                 }
+                                const qrWrapper = document.createElement('div');
+                                qrWrapper.id = 'pswpQR';
+                                qrWrapper.setAttribute('class', 'pswp-qrcode ' + config.qr.pswp);
                                 const qrImage = document.createElement('img');
+
                                 qrImage.src =
                                     environment.publicFolders.api +
                                     '/qrcode.php?filename=' +
                                     pswp.currSlide.data.src.split('\\').pop().split('/').pop();
                                 qrImage.alt = 'qr code';
-                                qrImage.id = 'pswpQR';
-                                qrImage.setAttribute('class', 'pswp-qrcode ' + config.qr.pswp);
-                                $('.pswp').append(qrImage);
+                                qrImage.classList.add('pswp-qrcode__image');
+                                qrWrapper.append(qrImage);
+
+                                const qrShortText = config.qr.short_text;
+                                if (qrShortText && qrShortText.length > 0) {
+                                    const qrCaption = document.createElement('p');
+                                    qrCaption.classList.add('pswp-qrcode__caption');
+                                    qrCaption.textContent = qrShortText;
+                                    qrWrapper.append(qrCaption);
+                                }
+
+                                $('.pswp').append(qrWrapper);
                             });
                         }
                     },

assets/sass/components/_stage.scss

@@ -137,6 +137,30 @@
   &-code {
     position: absolute;
     width: 10rem;
+    box-sizing: border-box;
+    text-align: center;
+    color: #000;
+    background: #fff;
+    padding: 0.6rem;
+    border-radius: var(--button-border-radius, 0.8rem);
+    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.16);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__image {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    &__caption {
+      margin: 0;
+      display: inline-block;
+      font-size: 1rem;
+      line-height: 1;
+      padding: 0;
+    }
     &.left {
       left: 2rem;
       &--top {

assets/sass/vendor/_photoswipe.scss

@@ -88,6 +88,30 @@
 .pswp-qrcode {
   position: absolute;
   width: 8rem;
+  box-sizing: border-box;
+  background: #fff;
+  color: #000;
+  padding: 0.5rem;
+  border-radius: var(--button-border-radius, 0.8rem);
+  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.16);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+
+  &__image {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  &__caption {
+    margin: 0;
+    font-size: 1.2rem;
+    line-height: 1.2;
+    text-align: center;
+  }
+
   &.left {
     left: 2rem;
     &--top {

lib/configsetup.inc.php

@@ -2107,6 +2107,13 @@
             'name' => 'qr[append_filename]',
             'value' => $config['qr']['append_filename'],
         ],
+        'qr_short_text' => [
+            'view' => 'advanced',
+            'type' => 'input',
+            'placeholder' => $defaultConfig['qr']['short_text'],
+            'name' => 'qr[short_text]',
+            'value' => htmlentities($config['qr']['short_text'] ?? ''),
+        ],
         'qr_custom_text' => [
             'view' => 'advanced',
             'type' => 'checkbox',

resources/lang/de.json

@@ -615,6 +615,7 @@
   "manual:qr:qr_pswp": "Wählen Sie eine Position, um den QR-Code innerhalb der Galerie neben dem Bild anzuzeigen. QR-Code muss aktiviert sein. Wählen Sie \"hidden\" um den QR-Code auszublenden. Wenn Sie eine Position wählen, wird die QR Schaltfläche in der Galerie ausgeblendet.",
   "manual:qr:qr_result": "Wählen Sie eine Position, um den QR-Code direkt nach Aufnahme eines Bildes auf dem Ergebnisbildschirm anzuzeigen. Die QR-Code-Anzeige muss aktiviert sein. Wählen Sie \"versteckt\" um den QR-Code auszublenden.",
   "manual:qr:qr_text": "Definieren Sie einen eigenen Hilfetext, der unter dem QR-Code angezeigt wird.",
+  "manual:qr:qr_short_text": "Optionaler kurzer Text direkt unter dem QR-Code (Ergebnis & Galerie). Leer lassen, um den Standard \"Zum Herunterladen scannen\" zu verwenden.",
   "manual:qr:qr_url": "Definieren Sie eine URL, auf die über den QR-Code verwiesen werden soll.",
   "manual:remotebuzzer:remotebuzzer_collagebutton": "Wenn aktiviert, kann die Collage über eine HTTP-Anfrage ausgelöst werden.",
   "manual:remotebuzzer:remotebuzzer_custombutton": "Wenn aktiviert, kann die benutzerdefinierte Aktion über eine HTTP-Anfrage ausgelöst werden.",
@@ -850,8 +851,10 @@
   "qr:qr_enabled": "QR-Codes aktivieren",
   "qr:qr_pswp": "QR-Code Position innerhalb der Galerie:",
   "qr:qr_result": "QR-Code Position auf Ergebnisbildschirm:",
+  "qr:qr_short_text": "Kurzer QR-Text (unter dem Code)",
   "qr:qr_text": "Eigener Hilfetext",
   "qr:qr_url": "URL für QR-Code",
+  "qrScanToDownload": "Zum Herunterladen scannen",
   "qrHelp": "Um das Bild auf Ihr Handy herunterzuladen, verbinden Sie sich mit dem WLAN:",
   "share": "Teilen",
   "viewer_photo_title": "Dein Foto",

resources/lang/en.json

@@ -638,6 +638,7 @@
   "manual:qr:qr_enabled": "If enabled, a QR-Button is visible on the result screen and inside gallery. User can download a picture while scanning the QR Code. If you're accessing Photobooth via \"localhost\", \"127.0.0.1\" or if you have Photobooth installed inside a subfolder, please define IP address of the Photobooth web server to make the QR Code working. <p>Example if Photobooth can be accessed directly: <code>192.168.0.50</code>.</p><p>Example if Photobooth is installed inside a subfolder: <code>192.168.0.50/photobooth</code>.</p>",
   "manual:qr:qr_pswp": "Choose a position to show the QR Code inside the gallery aside the image. QR Code must be enabled. Choose \"hidden\" to hide the QR Code. Selecting a position hides the qr button inside the gallery.",
   "manual:qr:qr_result": "Choose a position to show the QR Code on the result screen directly after taking a picture. QR Code must be enabled. Choose \"hidden\" to hide the QR Code.",
+  "manual:qr:qr_short_text": "Optional short caption shown directly under the QR code (result screen & gallery). Leave empty to use the default \"Scan to download\" text.",
   "manual:qr:qr_text": "Define own help text which will be visible below the QR Code.",
   "manual:qr:qr_url": "Define a URL to point at via QR Code.",
   "manual:remotebuzzer:remotebuzzer_collagebutton": "If enabled, collage can be triggered via HTTP request.",
@@ -890,6 +891,7 @@
   "qr:qr_enabled": "Use QR Codes",
   "qr:qr_pswp": "QR Code position inside the gallery:",
   "qr:qr_result": "QR Code position on result screen:",
+  "qr:qr_short_text": "Short QR caption (below code)",
   "qr:qr_text": "Own help text",
   "qr:qr_url": "URL for QR Code",
   "qrHelp": "To download the picture to your smartphone, connect to the WiFi:",

src/Configuration/Section/QrConfiguration.php

@@ -15,6 +15,7 @@ public static function getNode(): NodeDefinition
                 ->booleanNode('enabled')->defaultValue(true)->end()
                 ->scalarNode('url')->defaultValue('')->end()
                 ->booleanNode('append_filename')->defaultValue(true)->end()
+            ->scalarNode('short_text')->defaultValue('')->end()
                 ->booleanNode('custom_text')->defaultValue(false)->end()
                 ->scalarNode('text')->defaultValue('')->end()
                 ->enumNode('result')