Dependencies resorted and modal adjustments
Vincent
5 years ago
parent
899b2b277b
commit
2caffa9289
@ -0,0 +1,47 @@
|
||||
/* global Whisper, i18n, QRCode */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.QRDialogView = Whisper.View.extend({
|
||||
templateName: 'qr-code-template',
|
||||
className: 'loki-dialog qr-dialog modal',
|
||||
initialize(options = {}) {
|
||||
this.okText = options.okText || i18n('ok');
|
||||
this.render();
|
||||
this.$('.qr-dialog').bind('keyup', event => this.onKeyup(event));
|
||||
|
||||
if (options.string) {
|
||||
this.qr = new QRCode(this.$('#qr')[0], {
|
||||
correctLevel: QRCode.CorrectLevel.L,
|
||||
}).makeCode(options.string);
|
||||
this.$('#qr').addClass('ready');
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'click .ok': 'close',
|
||||
},
|
||||
render_attributes() {
|
||||
return {
|
||||
ok: this.okText,
|
||||
};
|
||||
},
|
||||
close() {
|
||||
this.remove();
|
||||
},
|
||||
onKeyup(event) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
case 'Escape':
|
||||
case 'Esc':
|
||||
this.close();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
//mouseButton: Number;
|
||||
posX: number;
|
||||
posY: number;
|
||||
}
|
||||
|
||||
export class SessionDropdownTrigger extends React.Component<Props> {
|
||||
public static defaultProps = {
|
||||
//mouseButton: 2, // 0 is left click, 2 is right click
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
};
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public handleDropdownClick = (event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let x = event.clientX || (event.touches && event.touches[0].pageX);
|
||||
let y = event.clientY || (event.touches && event.touches[0].pageY);
|
||||
|
||||
if (this.props.posX) {
|
||||
x -= this.props.posX;
|
||||
}
|
||||
if (this.props.posY) {
|
||||
y -= this.props.posY;
|
||||
}
|
||||
};
|
||||
|
||||
public render() {
|
||||
return <div role="button" onClick={this.handleDropdownClick} />;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { QRCode } from 'react-qr-svg';
|
||||
|
||||
import { SessionModal } from './SessionModal';
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export class SessionQRModal extends React.Component<Props> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { value } = this.props;
|
||||
|
||||
console.log('skbsvbsgb');
|
||||
console.log('skbsvbsgb');
|
||||
console.log('skbsvbsgb');
|
||||
|
||||
return (
|
||||
<SessionModal
|
||||
title={window.i18n('QRCodeTitle')}
|
||||
onOk={() => null}
|
||||
onClose={() => null}
|
||||
>
|
||||
<div className="spacer-sm"></div>
|
||||
|
||||
<div className='qr-dialog__description text-subtle'>
|
||||
<p>
|
||||
{window.i18n('QRCodeDescription')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="spacer-lg"></div>
|
||||
|
||||
<div id="qr">
|
||||
<QRCode
|
||||
value={value}
|
||||
bgColor="#FFFFFF"
|
||||
fgColor="#000000"
|
||||
level="L"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</SessionModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue