From 2529e208c153879723777f834ea7d8362be15ad0 Mon Sep 17 00:00:00 2001 From: Josh Perez <60019601+josh-signal@users.noreply.github.com> Date: Mon, 4 Jan 2021 13:47:14 -0500 Subject: [PATCH] Move confirmation_dialog_view to ts and React * Moves confirmation_dialog_view to ts and React * showConfirmationDialog API --- background.html | 14 +--- js/permissions_popup_start.js | 7 +- js/views/confirmation_dialog_view.js | 79 -------------------- js/views/whisper_view.js | 4 +- permissions_popup.html | 13 +--- permissions_popup_preload.js | 9 +++ stylesheets/_conversation.scss | 69 ----------------- stylesheets/_modules.scss | 3 +- test/index.html | 12 +-- ts/background.ts | 11 ++- ts/components/ConfirmationDialog.stories.tsx | 27 +++++-- ts/components/ConfirmationDialog.tsx | 11 +-- ts/shims/showConfirmationDialog.tsx | 77 +++++++++++++++++++ ts/util/lint/exceptions.json | 33 +------- ts/views/conversation_view.ts | 24 ++---- ts/window.d.ts | 15 +++- 16 files changed, 154 insertions(+), 254 deletions(-) delete mode 100644 js/views/confirmation_dialog_view.js create mode 100644 ts/shims/showConfirmationDialog.tsx diff --git a/background.html b/background.html index 5f0d2f78ab..bae48040bb 100644 --- a/background.html +++ b/background.html @@ -114,18 +114,6 @@ - - @@ -361,7 +349,7 @@ - + diff --git a/js/permissions_popup_start.js b/js/permissions_popup_start.js index 74119b5549..b7008a761a 100644 --- a/js/permissions_popup_start.js +++ b/js/permissions_popup_start.js @@ -1,7 +1,7 @@ // Copyright 2018-2020 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only -/* global $, Whisper, i18n */ +/* global $, i18n */ $(document).on('keydown', e => { if (e.keyCode === 27) { @@ -35,7 +35,8 @@ if (window.forCalling) { message = i18n('audioPermissionNeeded'); } -window.view = new Whisper.ConfirmationDialogView({ +window.showConfirmationDialog({ + confirmStyle: 'affirmative', message, okText: i18n('allowAccess'), resolve: () => { @@ -48,5 +49,3 @@ window.view = new Whisper.ConfirmationDialogView({ }, reject: window.closePermissionsPopup, }); - -window.view.$el.appendTo($body); diff --git a/js/views/confirmation_dialog_view.js b/js/views/confirmation_dialog_view.js deleted file mode 100644 index 4a95637de1..0000000000 --- a/js/views/confirmation_dialog_view.js +++ /dev/null @@ -1,79 +0,0 @@ -// Copyright 2015-2020 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -/* global Backbone, Whisper, i18n */ - -// eslint-disable-next-line func-names -(function () { - window.Whisper = window.Whisper || {}; - - Whisper.ConfirmationDialogView = Whisper.View.extend({ - className: 'confirmation-dialog modal', - templateName: 'confirmation-dialog', - initialize(options) { - this.previousFocus = document.activeElement; - - this.message = options.message; - this.hideCancel = options.hideCancel; - - this.resolve = options.resolve; - this.okText = options.okText || i18n('ok'); - - this.reject = options.reject; - this.cancelText = options.cancelText || i18n('cancel'); - - if (Whisper.activeConfirmationView) { - Whisper.activeConfirmationView.remove(); - Whisper.activeConfirmationView = null; - } - - Whisper.activeConfirmationView = this; - - this.render(); - }, - events: { - keydown: 'onKeydown', - 'click .ok': 'ok', - 'click .cancel': 'cancel', - }, - remove() { - if (this.previousFocus && this.previousFocus.focus) { - this.previousFocus.focus(); - } - Backbone.View.prototype.remove.call(this); - }, - render_attributes() { - return { - message: this.message, - showCancel: !this.hideCancel, - cancel: this.cancelText, - ok: this.okText, - }; - }, - ok() { - this.remove(); - if (this.resolve) { - this.resolve(); - } - }, - cancel() { - this.remove(); - if (this.reject) { - this.reject(new Error('User clicked cancel button')); - } - }, - onKeydown(event) { - if (event.key === 'Escape' || event.key === 'Esc') { - this.cancel(); - - event.preventDefault(); - event.stopPropagation(); - } - }, - focusCancel() { - // We delay this call because we might be called inside click handlers - // which would set focus to themselves afterwards! - setTimeout(() => this.$('.cancel').focus(), 1); - }, - }); -})(); diff --git a/js/views/whisper_view.js b/js/views/whisper_view.js index 1388b69c61..4fb4fbaddf 100644 --- a/js/views/whisper_view.js +++ b/js/views/whisper_view.js @@ -54,14 +54,12 @@ }, confirm(message, okText) { return new Promise((resolve, reject) => { - const dialog = new Whisper.ConfirmationDialogView({ + window.showConfirmationDialog({ message, okText, resolve, reject, }); - this.$el.append(dialog.el); - dialog.focusCancel(); }); }, }, diff --git a/permissions_popup.html b/permissions_popup.html index 6928005084..da6d2cd1b7 100644 --- a/permissions_popup.html +++ b/permissions_popup.html @@ -23,20 +23,9 @@ - - + diff --git a/permissions_popup_preload.js b/permissions_popup_preload.js index d7158b15ba..93b41003b9 100644 --- a/permissions_popup_preload.js +++ b/permissions_popup_preload.js @@ -3,9 +3,13 @@ /* global window */ +window.React = require('react'); +window.ReactDOM = require('react-dom'); + const { ipcRenderer, remote } = require('electron'); const url = require('url'); const i18n = require('./js/modules/i18n'); +const { ConfirmationModal } = require('./ts/components/ConfirmationModal'); const { makeGetter, makeSetter } = require('./preload_utils'); const { nativeTheme } = remote.require('electron'); @@ -20,6 +24,11 @@ window.theme = config.theme; window.i18n = i18n.setup(locale, localeMessages); window.forCalling = config.forCalling === 'true'; window.forCamera = config.forCamera === 'true'; +window.Signal = { + Components: { + ConfirmationModal, + }, +}; function setSystemTheme() { window.systemTheme = nativeTheme.shouldUseDarkColors ? 'dark' : 'light'; diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index cc2fad98d3..fc0b458368 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -292,79 +292,10 @@ cursor: pointer; } -.confirmation-dialog { - .content { - max-width: 350px; - margin: 100px auto; - padding: 1em; - - border-radius: 5px; - overflow: auto; - - @include light-theme { - background: $color-white; - box-shadow: 0px 0px 15px 0px $color-black-alpha-20; - } - @include dark-theme { - background: $color-black; - color: $color-gray-02; - box-shadow: 0px 0px 15px 0px $color-white-alpha-20; - } - - .buttons { - margin-top: 10px; - - button { - float: right; - margin-left: 10px; - padding: 5px 8px; - border-radius: 5px; - - outline: none; - @include keyboard-mode { - &:focus { - outline: -webkit-focus-ring-color auto 5px; - } - } - - @include light-theme { - background-color: $color-gray-02; - border: 1px solid $color-gray-15; - } - @include dark-theme { - background-color: $color-gray-90; - border: 1px solid $color-gray-45; - color: $color-gray-02; - } - - &:hover { - @include light-theme { - background-color: $color-gray-15; - border-color: $color-gray-25; - } - @include dark-theme { - background-color: $color-gray-75; - border-color: $color-gray-45; - } - } - } - } - } -} - .permissions-popup, .debug-log-window { .modal { background-color: transparent; padding: 0; } - - .confirmation-dialog .content { - box-shadow: 0px 0px 0px 0px; - max-width: 1000px; - margin: 0; - margin-left: auto; - margin-right: auto; - margin-top: 15px; - } } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 323d12eb02..70a51f220d 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -8308,7 +8308,8 @@ button.module-image__border-overlay:focus { display: flex; justify-content: center; align-items: center; - z-index: 5; + // THIS Z-INDEX IS OVER NINE THOUSAND. OVER NINE THOUSAND?! THAT CAN'T BE! + z-index: 9001; } &__container { diff --git a/test/index.html b/test/index.html index b3883d2ab8..f2b3930ea0 100644 --- a/test/index.html +++ b/test/index.html @@ -125,16 +125,8 @@ -