commit 1a8bd365aa28b39fdd13659527544d3b0ef19897
parent de2138b230abc3dabeed9faa432a695b5c424ac7
Author: Jan Dankert <devnull@localhost>
Date: Wed, 5 Dec 2018 01:30:26 +0100
QR-Code nicht inline anzeigen, sondern als Dialog öffnen.
Diffstat:
4 files changed, 40 insertions(+), 8 deletions(-)
diff --git a/modules/cms-ui/themes/default/style/openrat-ui.less b/modules/cms-ui/themes/default/style/openrat-ui.less
@@ -103,6 +103,7 @@
&.image-icon--menu-fullscreen:after { content: "fullscreen"; }
&.image-icon--menu-menu:after { content: "menu"; }
+ &.image-icon--menu-qrcode:after { content: "phone_android"; }
&.image-icon--node-open:after { content: "expand_more"; }
&.image-icon--node-closed:after { content: "chevron_right"; }
@@ -854,4 +855,19 @@ img.image-icon {
padding:1em;
.border-radius(0.5em);
}
+}
+
+
+
+.qrcode-wrapper {
+ width:100%;
+ border: 0;
+ font-size: 2em;
+ .border-radius(1em);
+ padding:2em;
+ text-align: center;
+
+ > div {
+ display: inline-block;
+ }
}
\ No newline at end of file
diff --git a/modules/language/language.yml b/modules/language/language.yml
@@ -6122,3 +6122,6 @@ CMS:
SEARCH_FILTER:
de: Filter
en: Filter
+QRCODE_SHOW:
+ de: QR-Code anzeigen
+ en: Show QR-Code+
\ No newline at end of file
diff --git a/modules/template-engine/components/html/qrcode/Qrcode.class.php b/modules/template-engine/components/html/qrcode/Qrcode.class.php
@@ -12,8 +12,9 @@ class QrcodeComponent extends Component
protected function begin()
{
$value = $this->htmlvalue($this->value);
+ $title = lang('QRCODE_SHOW');
echo <<<HTML
-<div class="qrcode" data-qrcode="{$value}" title="{$value}"></div>
+<i class="image-icon image-icon--menu-qrcode qrcode" data-qrcode="{$value}" title="{$title}"></i>
HTML;
}
diff --git a/modules/template-engine/components/html/qrcode/qrcode.js b/modules/template-engine/components/html/qrcode/qrcode.js
@@ -2,13 +2,24 @@
$(document).on('orViewLoaded',function(event, data) {
// QR-Code anzeigen.
- $(event.target).find('[data-qrcode]').each( function() {
-
- var qrcodetext = $(this).attr('data-qrcode');
- $(this).removeAttr('data-qrcode');
-
- $(this).qrcode( { render : 'div',
+ $(event.target).find('.qrcode').click( function() {
+
+ let wrapper = $('<div class="qrcode-wrapper"></div>');
+
+ $('div#dialog > .view').append(wrapper);
+
+ $('div#dialog').removeClass('is-closed').addClass('is-open');
+
+ var qrcodetext = $(this).attr('data-qrcode');
+
+ $(wrapper).qrcode( { render : 'div',
text : qrcodetext,
fill : 'currentColor' } );
- } );
+
+
+ wrapper.attr('title',qrcodetext);
+ //$(wrapper).append( $('<p>'+qrcodetext+'</p>') );
+ $('div#dialog > .view').fadeIn();
+ } );
+
} );
\ No newline at end of file
