Dependencies resorted and modal adjustments

_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"

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,

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() {

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 = {}) {
+    initialize(options) {
-      this.okText = options.okText || i18n('ok');
+      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 {
+    render() {
-        ok: this.okText,
+      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();
     },

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;
+      }
+    },
+  });
+})();

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",

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;
+  }
+}

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<Props, State> {
       loading: true,
       view: 'default',
       pubKeyRequests: [],
-      data: ['22452653255643252533'],
+      data: [],
     };
   }
 
-  public componentDidMount() {
+  componentDidMount() {
     this.getSecondaryDevices();
   }
 
@@ -59,13 +59,6 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     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<Props, State> {
                 <div className="spacer-lg" />
 
                 <div id="qr">
-                  <QRCode value={window.textsecure.storage.user.getNumber()} />
+                  <QRCode
+                    value={window.textsecure.storage.user.getNumber()}
+                    bgColor="#FFFFFF"
+                    fgColor="#000000"
+                    level="L" 
+                  />
                 </div>
 
                 <div className="spacer-lg" />

ts/components/session/SessionDropdownTrigger.tsx

@@ -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} />;
-  }
-}

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<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>
+      );
+    }
+  }

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:
+react-qr-svg@^2.2.1:
-  version "0.2.0"
+  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-qrcode/-/react-qrcode-0.2.0.tgz#a05cf2ae5ac57c3a9751e512132a821ed60533f9"
+  resolved "https://registry.yarnpkg.com/react-qr-svg/-/react-qr-svg-2.2.1.tgz#f6f25820fdb2c39ad0d66a14a758e2f575717c68"
-  integrity sha512-3JzSzkTUUMb26sbq5/u75zw9l3gQ1BLvdCAYgRnAZ1wGJj1Su94pzv4g/XfzaJEj6h8Y0H9mYX4djmKBGZQHSQ==
+  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"