From 2caffa9289aeb4fadcab18cd047f20785def3084 Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 6 Jan 2020 09:30:29 +1100 Subject: [PATCH] Dependencies resorted and modal adjustments --- _locales/en/messages.json | 8 +++ js/modules/signal.js | 3 ++ js/views/app_view.js | 4 +- js/views/qr_dialog_view.js | 37 +++++++------- js/views/qr_dialog_view_old.js | 47 ++++++++++++++++++ package.json | 2 +- stylesheets/_session.scss | 21 ++++++++ ts/components/DevicePairingDialog.tsx | 20 ++++---- .../session/SessionDropdownTrigger.tsx | 37 -------------- ts/components/session/SessionQRModal.tsx | 49 +++++++++++++++++++ yarn.lock | 16 ++++-- 11 files changed, 171 insertions(+), 73 deletions(-) create mode 100644 js/views/qr_dialog_view_old.js delete mode 100644 ts/components/session/SessionDropdownTrigger.tsx create mode 100644 ts/components/session/SessionQRModal.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index afefeff60..e16cef15d 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2106,6 +2106,14 @@ "description": "Button action that the user can click to view their unique seed" }, + "QRCodeTitle": { + "message": "Your Public Key QRCode", + "description": "Title given to QRCode modal" + }, + "QRCodeDescription": { + "message": "Your friends can scan this QR code to start a conversation with you.", + "description": "Description given to QRCode modal" + }, "showQRCode": { "message": "Show QR code", "description": "Button action that the user can click to view their QR code" diff --git a/js/modules/signal.js b/js/modules/signal.js index 47b6c5543..e8b9006ce 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -61,9 +61,11 @@ const { const { SessionToast } = require('../../ts/components/session/SessionToast'); const { SessionToggle } = require('../../ts/components/session/SessionToggle'); const { SessionModal } = require('../../ts/components/session/SessionModal'); +const { SessionQRModal } = require('../../ts/components/session/SessionQRModal'); const { SessionConfirm, } = require('../../ts/components/session/SessionConfirm'); + const { SessionDropdown, } = require('../../ts/components/session/SessionDropdown'); @@ -272,6 +274,7 @@ exports.setup = (options = {}) => { SessionToggle, SessionConfirm, SessionModal, + SessionQRModal, SessionDropdown, MediaGallery, Message, diff --git a/js/views/app_view.js b/js/views/app_view.js index ab8fbc193..f0e16347b 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -205,7 +205,9 @@ this.el.append(dialog.el); }, showQRDialog(string) { - const dialog = new Whisper.QRDialogView({ string }); + const dialog = new Whisper.QRDialogView({ + value: string, + }); this.el.append(dialog.el); }, showDevicePairingDialog() { diff --git a/js/views/qr_dialog_view.js b/js/views/qr_dialog_view.js index c365166c7..440a6694c 100644 --- a/js/views/qr_dialog_view.js +++ b/js/views/qr_dialog_view.js @@ -1,4 +1,4 @@ -/* global Whisper, i18n, QRCode */ +/* global Whisper */ // eslint-disable-next-line func-names (function() { @@ -7,28 +7,27 @@ 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'); + initialize(options) { + this.value = options.value || ''; + this.close = this.close.bind(this); + this.onKeyup = this.onKeyup.bind(this); 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, - }; + + render() { + this.dialogView = new Whisper.ReactWrapperView({ + className: 'qr-dialog', + Component: window.Signal.Components.SessionQRModal, + props: { + value: this.value, + }, + }); + + this.$el.append(this.dialogView.el); + return this; }, + close() { this.remove(); }, diff --git a/js/views/qr_dialog_view_old.js b/js/views/qr_dialog_view_old.js new file mode 100644 index 000000000..c365166c7 --- /dev/null +++ b/js/views/qr_dialog_view_old.js @@ -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; + } + }, + }); +})(); diff --git a/package.json b/package.json index a2305a59a..2ee4e6a2a 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "react-contextmenu": "2.11.0", "react-dom": "16.8.3", "react-portal": "^4.2.0", - "react-qrcode": "^0.2.0", + "react-qr-svg": "^2.2.1", "react-redux": "6.0.1", "react-virtualized": "9.21.0", "read-last-lines": "1.3.0", diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 228286ead..d1efe5f37 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -101,6 +101,10 @@ div.spacer-lg { opacity: 0.4; } +.text-center { + text-align: center; +} + .fullwidth { width: 100%; } @@ -111,6 +115,8 @@ $session-icon-size-sm: 15px; $session-icon-size-md: 20px; $session-icon-size-lg: 30px; +$session-modal-size: 220px; + $session-conversation-header-height: 60px; @mixin fontWasaBold { @@ -795,3 +801,18 @@ label { } } } + +#qr svg { + width: $session-modal-size; + height: $session-modal-size; + border: 6px solid white; + border-radius: 3px; +} + +.qr-dialog { + &__description { + max-width: $session-modal-size; + text-align: center; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/ts/components/DevicePairingDialog.tsx b/ts/components/DevicePairingDialog.tsx index 5b72f9d55..6c5f3b44b 100644 --- a/ts/components/DevicePairingDialog.tsx +++ b/ts/components/DevicePairingDialog.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { QRCode } from 'react-qrcode'; +import { QRCode } from 'react-qr-svg'; import { SessionModal } from './session/SessionModal'; import { SessionButton } from './session/SessionButton'; @@ -45,11 +45,11 @@ export class DevicePairingDialog extends React.Component { loading: true, view: 'default', pubKeyRequests: [], - data: ['22452653255643252533'], + data: [], }; } - public componentDidMount() { + componentDidMount() { this.getSecondaryDevices(); } @@ -59,13 +59,6 @@ export class DevicePairingDialog extends React.Component { const waitingForRequest = this.state.view === 'waitingForRequest'; const nothingPaired = this.state.data.length === 0; - console.log(this.state); - console.log(this.state); - console.log(this.state); - console.log(this.state); - console.log(this.state); - - console.log('dAAVIHN'); // const renderPairedDevices = this.state.data.map((pubKey: any) => { // const pubKeyInfo = this.getPubkeyName(pubKey); // const isFinalItem = @@ -101,7 +94,12 @@ export class DevicePairingDialog extends React.Component {
- +
diff --git a/ts/components/session/SessionDropdownTrigger.tsx b/ts/components/session/SessionDropdownTrigger.tsx deleted file mode 100644 index 0a366388f..000000000 --- a/ts/components/session/SessionDropdownTrigger.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -interface Props { - //mouseButton: Number; - posX: number; - posY: number; -} - -export class SessionDropdownTrigger extends React.Component { - 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
; - } -} diff --git a/ts/components/session/SessionQRModal.tsx b/ts/components/session/SessionQRModal.tsx new file mode 100644 index 000000000..0c9ed3411 --- /dev/null +++ b/ts/components/session/SessionQRModal.tsx @@ -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 { + constructor(props: any) { + super(props); + } + + public render() { + const { value } = this.props; + + console.log('skbsvbsgb'); + console.log('skbsvbsgb'); + console.log('skbsvbsgb'); + + return ( + null} + onClose={() => null} + > +
+ +
+

+ {window.i18n('QRCodeDescription')} +

+
+
+ +
+ +
+ + + ); + } + } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9a1347020..20e87d833 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7520,6 +7520,11 @@ q@^1.1.2, q@~1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1" +qr.js@0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f" + integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8= + qrcode@^1.4.4: version "1.4.4" resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83" @@ -7758,10 +7763,13 @@ react-portal@^4.2.0: dependencies: prop-types "^15.5.8" -react-qrcode@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/react-qrcode/-/react-qrcode-0.2.0.tgz#a05cf2ae5ac57c3a9751e512132a821ed60533f9" - integrity sha512-3JzSzkTUUMb26sbq5/u75zw9l3gQ1BLvdCAYgRnAZ1wGJj1Su94pzv4g/XfzaJEj6h8Y0H9mYX4djmKBGZQHSQ== +react-qr-svg@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/react-qr-svg/-/react-qr-svg-2.2.1.tgz#f6f25820fdb2c39ad0d66a14a758e2f575717c68" + integrity sha512-rLDCZI9pIqD5lbBIatrqUMhP1gqQ7glqubXO/m/X87ikEPhXuY0hMLhYMuKoH4834G36ap8Az0HI4bXEJUN//w== + dependencies: + prop-types "^15.5.8" + qr.js "0.0.0" react-redux@6.0.1: version "6.0.1"