change the way the qr code is displayed

Closes #995

Merge request studip/studip!583

resources/assets/javascripts/bootstrap/qr_code.js

-jQuery(document).on('click', 'a[data-qr-code]', STUDIP.QRCode.show);
+jQuery(document).on('click', 'a[data-qr-code]', function (event) {
+    const data = $(this).data();
+    STUDIP.QRCode.show(this.href, {
+        print: data.qrCodePrint ?? false,
+        title: data.qrTitle ?? null,
+        description: data.qrCode || null,
+    });
+
+    event.preventDefault();
+});
 
 STUDIP.ready((event) => {
     $('code.qr', event.target).each(function () {

resources/assets/javascripts/lib/qr_code.js

 import QRCodeGenerator from "../vendor/qrcode-04f46c6.js"
+import { $gettext } from "./gettext.js";
+import Dialog from "./dialog.js";
 
 const QRCode = {
-    show: function() {
-        jQuery('#qr_code').remove();
-        jQuery("<div id='qr_code'/>").appendTo('body');
-        var title = jQuery(this).data('qr-title');
-        if (title) {
-            jQuery('#qr_code').append('<h1 class="title">' + title + '</h1>');
-        } else {
-            jQuery('#qr_code').append("<div class='header'/>");
+    defaultOptions: {
+        title: false,
+    },
+    show(text, options = {}) {
+        options = Object.assign({}, QRCode.defaultOptions, options);
+
+        // Prepare content
+        const content = $('<div class="qr-code-display"/>');
+        $('<img/>').attr('src', STUDIP.ASSETS_URL + 'images/logos/logoklein.png').appendTo(content);
+        if (options.title) {
+            $('<h1>').text(options.title).appendTo(content);
+        }
+
+        const code = $('<div class="code"/>').appendTo(content);
+        const url = $('<div class="url"/>').appendTo(content);
+        $('<a/>', {
+            href: text,
+            target: '_blank'
+        }).text(text).appendTo(url);
+
+        if (options.description) {
+            const description = $('<div class="description"/>').text(options.description).appendTo(content);
         }
-        jQuery('#qr_code').append("<div class='code'/>");
-        jQuery('#qr_code').append("<div class='url'/>");
-        jQuery('#qr_code').append("<div class='description'/>");
 
-        var code = new QRCodeGenerator(jQuery('#qr_code .code')[0], {
-            text: jQuery(this).attr('href'),
+        // Actually generate code
+        new QRCodeGenerator(code[0], {
+            text: text,
             width: 1280,
             height: 1280,
             correctLevel: 3
         });
 
-        jQuery('#qr_code .url').text(jQuery(this).attr('href'));
-        jQuery('#qr_code .description').text(jQuery(this).data('qr-code'));
-        var print_button_enabled = jQuery(this).data('qr-code-print');
-        if (print_button_enabled) {
-            var icon_path = STUDIP.URLHelper.getURL(
-                'assets/images/icons/blue/print.svg'
-            );
-            var print_element = jQuery('<img></img>');
-            jQuery(print_element).attr('src', icon_path);
-            jQuery(print_element).addClass('PrintAction');
-            jQuery('#qr_code').append(print_element);
-        }
+        // Prepare dialog
+        let buttons = {
+            fullscreen: {
+                text: $gettext('Vollbild'),
+                'class': 'fullscreen',
+                click () {
+                    if (content[0].requestFullscreen) {
+                        content[0].requestFullscreen();
+                    } else if (content[0].msRequestFullscreen) {
+                        content[0].msRequestFullscreen();
+                    } else if (content[0].mozRequestFullScreen) {
+                        content[0].mozRequestFullScreen();
+                    } else if (content[0].webkitRequestFullscreen) {
+                        content[0].webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+                    }
+                }
+            },
+            cancel: {
+                text: $gettext('Schließen'),
+                'class': 'cancel',
+                click () {
+                    Dialog.close();
+                }
+            },
+        };
 
-        //jQuery("#qr_code .code").html(jQuery(this).find(".qrcode_image").clone());
-        var qr = jQuery('#qr_code')[0];
-        if (qr.requestFullscreen) {
-            qr.requestFullscreen();
-        } else if (qr.msRequestFullscreen) {
-            qr.msRequestFullscreen();
-        } else if (qr.mozRequestFullScreen) {
-            qr.mozRequestFullScreen();
-        } else if (qr.webkitRequestFullscreen) {
-            qr.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        if (options.print) {
+            buttons = Object.assign({
+                print: {
+                    text: $gettext('Drucken'),
+                    'class': 'print',
+                    click () {
+                        var openWindow = window.open("", '_blank');
+                        openWindow.document.write(`<body style="text-align: center;">${content.html()}</body>`);
+                        openWindow.document.close();
+                        openWindow.focus();
+                        openWindow.print();
+                        openWindow.close();
+                    }
+                },
+            }, buttons);
         }
-        return false;
+
+
+        Dialog.show(content, {
+            title: options.title ?? $gettext('QR-Code'),
+            size: 'big',
+            buttons
+        });
     },
     generate: function (element, text, options = {}) {
         options.text = text;

resources/assets/stylesheets/less/qrcode-print.less

-@media print {
-    div#qr_code {
-        text-align: center;
-
-        h1.title {
-            margin-bottom: 10mm;
-        }
-
-        div.code img {
-            width: 170mm;
-            height: 170mm;
-        }
-
-        .PrintAction {
-            display: none;
-        }
-
-        div.url {
-            margin-top: 10mm;
-            font-size: 14px;
-            font-weight: bold;
-        }
-    }
-}

resources/assets/stylesheets/less/qrcode.less

-#qr_code {
-    display: none;
-    background-color: white;
-    width: 100%;
-    height: 100%;
+.qr-code-display {
+    display: flex;
     flex-direction: column;
-    justify-content: space-around;
     align-items: center;
-    color: #444444;
-
-    .code > div {
-        margin-left: auto;
-        margin-right: auto;
-        text-align: center;
-    }
+    justify-content: center;
+    height: 100%;
+    width: 100%;
 
-    .code img {
-        width: 70vh;
-        height: 70vh;
+    h1 {
+        display: none;
     }
 
-    .header {
-        background-image: url("@{image-path}/logos/logoklein.png");
-        height: 100px;
+    .code {
+        flex: 0 1 auto;
+        max-height: 90%; // TODO This will not scale well if description grows
         width: 100%;
-        background-repeat: no-repeat;
-        background-position: center center;
+
+        img {
+            margin: auto;
+            max-height: 100%;
+            object-fit: contain;
+        }
     }
 
-    h1 {
-        text-align: center;
-        font-size: 1.5em;
+    .url,
+    .description {
+        flex: 0 0 auto;
+        margin-top: 1em;
     }
 
-    &.print-view {
-        .code img {
-            width: 170mm;
-            height: 170mm;
-        }
+    &:fullscreen {
+        background: var(--white);
 
-        .PrintAction {
-            display: none;
+        h1 {
+            display: initial;
+            font-size: 3em;
         }
 
-        .url {
-            font-size: 14px;
+        .code {
+            max-height: 80%;
         }
     }
-}
 
-#qr_code:-moz-full-screen {
-    display: flex;
-}
-
-#qr_code:-webkit-full-screen {
-    display: flex;
-}
-
-#qr_code:-ms-fullscreen {
-    display: flex;
-}
-
-#qr_code:fullscreen {
-    display: flex;
+    @media not print {
+        & > img {
+            display: none;
+        }
+    }
 }

resources/assets/stylesheets/print.less

@@ -3,7 +3,6 @@
 @import "less/visibility.less";
 @import "less/fullcalendar-print.less";
 @import "less/resources-print.less";
-@import "less/qrcode-print.less";
 @import (reference) "less/schedule.less";