commit 3f9baf0386540d4a33995624091771627635601e
parent 5d20b7b856685ec437f32d2893bb7d01577e18eb
Author: dankert <openrat@jandankert.de>
Date: Tue, 22 Feb 2022 21:37:08 +0100
Fix: Displaying the QRCode was broken. Now the QR code is styled with CSS :)
Diffstat:
6 files changed, 61 insertions(+), 33 deletions(-)
diff --git a/modules/cms/action/profile/ProfileUserinfoAction.class.php b/modules/cms/action/profile/ProfileUserinfoAction.class.php
@@ -28,6 +28,9 @@ class ProfileUserinfoAction extends ProfileAction implements Method {
// Theme base color for smartphones colorizing their status bar.
$this->setTemplateVar('theme-color', UIUtils::getColorHexCode($themeStyle->getThemeColor()));
+
+ // Output all theme colors
+ $this->setTemplateVar('theme' , $themeStyle->getProperties() );
}
diff --git a/modules/cms/ui/themes/default/script/Oquery.js b/modules/cms/ui/themes/default/script/Oquery.js
@@ -69,6 +69,17 @@ export class OQuery {
};
+ /**
+ * 'length' property is the size of all nodes in this object.
+ * this property is readonly.
+ *
+ * @return size of all elements
+ */
+ get length() {
+ return this.nodes.length;
+ }
+
+
parent() {
return this.createNew( this.nodes.map(node => node.parentNode ).filter( node => node !== null ) );
};
diff --git a/modules/cms/ui/themes/default/script/Oquery.min.js b/modules/cms/ui/themes/default/script/Oquery.min.js
@@ -46,6 +46,9 @@ return this.nodes[idx];
first() {
return this.createNew( this.nodes.length > 0 ? [this.nodes[0]] : [] );
};
+get length() {
+return this.nodes.length;
+}
parent() {
return this.createNew( this.nodes.map(node => node.parentNode ).filter( node => node !== null ) );
};
diff --git a/modules/cms/ui/themes/default/style/theme/openrat-theme.less b/modules/cms/ui/themes/default/style/theme/openrat-theme.less
@@ -60,7 +60,15 @@ html {
.or {
- &-loader {
+ &-qrcode {
+ &-value {
+ background-color: @cms-dialog-background-color;
+ fill: @cms-image-color;
+ .box-shadow(3px, 3px, 10px, @cms-dialog-title-background-color);
+ }
+ }
+
+ &-loader {
border-color: @cms-inactive-background-color;
border-top-color: @cms-image-color;
}
diff --git a/modules/template_engine/components/html/component_qrcode/qrcode.js b/modules/template_engine/components/html/component_qrcode/qrcode.js
@@ -6,25 +6,28 @@ export default function(element ) {
let Kjua = (await import("../../../../cms/ui/themes/default/script/tools/kjua.min.js")).default;
- let wrapper = $('<div class="or-info-popup or-qrcode-value"></div>');
+ let wrapper = $.create('div').addClass('info-popup').addClass('qrcode-value');
let element = Kjua( {
- text : text,
+ text : value,
render : 'svg',
- mode :'label',
- label : text,
+ mode :'plain',
+ label : '',
rounded : 1,
- fill : 'currentColor',
- back : 'black'
+ fill : null,
+ back : null,
} );
// Title is disturbing the qr-code. Do not inherit it.
wrapper.attr('title','');
- wrapper.append( element );
+
+ // OQuery is not supporting appending SVGs.
+ // We must append the SVG to the native HTML element.
+ wrapper.get(0).appendChild( element );
if ( text )
- wrapper.append('<small class="or-qrcode-text">' + text + '</small>');
+ wrapper.append( $.create('small').addClass('qrcode-text').text(text) );
return wrapper;
}
@@ -32,22 +35,22 @@ export default function(element ) {
$(element).find('.or-qrcode').click( async function() {
- let $element = $(this);
+ let $qrCodeElement = $(this);
// Create QRCode on first click.
- if ( ! $element.children().length ) {
+ if ( ! $qrCodeElement.children('.or-info-popup').length ) {
- let qrcodeValue = $(element).attr('data-qrcode');
- let qrcodeText = $(element).attr('data-qrcode-text');
+ let qrcodeValue = $qrCodeElement.data('qrcode');
+ let qrcodeText = $qrCodeElement.data('qrcode-text');
- if ( $element.children().length > 0 )
+ if ( $qrCodeElement.children().length > 0 )
return;
- $element.append( await createQRCode(qrcodeValue,qrcodeText) );
+ $qrCodeElement.append( await createQRCode(qrcodeValue,qrcodeText) );
}
- $element.toggleClass('info--open');
- $element.toggleClass('btn--is-active');
+ $qrCodeElement.toggleClass('info--open');
+ $qrCodeElement.toggleClass('btn--is-active');
});
};
\ No newline at end of file
diff --git a/modules/template_engine/components/html/component_qrcode/qrcode.min.js b/modules/template_engine/components/html/component_qrcode/qrcode.min.js
@@ -2,32 +2,32 @@ import $ from "../../../../cms/ui/themes/default/script/jquery-global.min.js";
export default function(element ) {
let createQRCode = async function( value,text) {
let Kjua = (await import("../../../../cms/ui/themes/default/script/tools/kjua.min.js")).default;
-let wrapper = $('<div class="or-info-popup or-qrcode-value"></div>');
+let wrapper = $.create('div').addClass('info-popup').addClass('qrcode-value');
let element = Kjua( {
-text : text,
+text : value,
render : 'svg',
-mode :'label',
-label : text,
+mode :'plain',
+label : '',
rounded : 1,
-fill : 'currentColor',
-back : 'black'
+fill : null,
+back : null,
} );
wrapper.attr('title','');
-wrapper.append( element );
+wrapper.get(0).appendChild( element );
if ( text )
-wrapper.append('<small class="or-qrcode-text">' + text + '</small>');
+wrapper.append( $.create('small').addClass('qrcode-text').text(text) );
return wrapper;
}
$(element).find('.or-qrcode').click( async function() {
-let $element = $(this);
-if ( ! $element.children().length ) {
-let qrcodeValue = $(element).attr('data-qrcode');
-let qrcodeText = $(element).attr('data-qrcode-text');
-if ( $element.children().length > 0 )
+let $qrCodeElement = $(this);
+if ( ! $qrCodeElement.children('.or-info-popup').length ) {
+let qrcodeValue = $qrCodeElement.data('qrcode');
+let qrcodeText = $qrCodeElement.data('qrcode-text');
+if ( $qrCodeElement.children().length > 0 )
return;
-$element.append( await createQRCode(qrcodeValue,qrcodeText) );
+$qrCodeElement.append( await createQRCode(qrcodeValue,qrcodeText) );
}
-$element.toggleClass('info--open');
-$element.toggleClass('btn--is-active');
+$qrCodeElement.toggleClass('info--open');
+$qrCodeElement.toggleClass('btn--is-active');
});
};
\ No newline at end of file
