diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3abb9c344..bce73fc7e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1127,7 +1127,7 @@ "Shown on the drop-down menu for an individual message, deletes single message" }, "deleteMessages": { - "message": "Delete messages", + "message": "Delete Messages", "description": "Menu item for deleting messages, title case." }, "deletePublicConversationConfirmation": { @@ -1152,7 +1152,7 @@ "Confirmation dialog text that tells the user what will happen if they leave the public channel." }, "deleteContact": { - "message": "Delete contact", + "message": "Delete Contact", "description": "Confirmation dialog title that asks the user if they really wish to delete the contact. Answer buttons use the strings 'ok' and 'cancel'. The deletion is permanent, i.e. it cannot be undone." }, diff --git a/background.html b/background.html index 0a03d5540..4b71134a2 100644 --- a/background.html +++ b/background.html @@ -52,6 +52,7 @@ + diff --git a/js/background.js b/js/background.js index 94d98147b..acec57704 100644 --- a/js/background.js +++ b/js/background.js @@ -802,12 +802,21 @@ appView.openConversation(groupId, {}); }; - // $(document).ready(() => { - // window.settingsView = new Whisper.SessionSettingsView({ - // el: $('#settings-container'), - // }); - // window.settingsView.render(); - // }); + + + window.confirmationDialog = params => { + const confirmDialog = new Whisper.SessionConfirmView({ + el: $('#session-confirm-container'), + title: params.title, + message: params.message, + resolve: params.resolve || undefined, + reject: params.reject || undefined, + okText: params.okText || undefined, + cancelText: params.cancelText || undefined, + hideCancel: params.hideCancel || false, + }); + confirmDialog.render(); + } window.generateID = () => Math.random() diff --git a/js/models/conversations.js b/js/models/conversations.js index 667af34da..a427dfacd 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -2665,13 +2665,18 @@ }, deleteContact() { + const title = this.isPublic() + ? i18n('deletePublicChannel') + : i18n('deleteContact'); + const message = this.isPublic() ? i18n('deletePublicChannelConfirmation') : i18n('deleteContactConfirmation'); - Whisper.events.trigger('showConfirmationDialog', { + window.confirmationDialog({ + title, message, - onOk: () => ConversationController.deleteContact(this.id), + resolve: () => ConversationController.deleteContact(this.id), }); }, @@ -2721,17 +2726,23 @@ deleteMessages() { this.resetMessageSelection(); + + let params; if (this.isPublic()) { - Whisper.events.trigger('showConfirmationDialog', { + params = { + title: i18n('deleteMessages'), message: i18n('deletePublicConversationConfirmation'), - onOk: () => ConversationController.deleteContact(this.id), - }); + resolve: () => ConversationController.deleteContact(this.id), + }; } else { - Whisper.events.trigger('showConfirmationDialog', { + params = { + title: i18n('deleteMessages'), message: i18n('deleteConversationConfirmation'), - onOk: () => this.destroyMessages(), - }); + resolve: () => this.destroyMessages(), + }; } + + window.confirmationDialog(params); }, async destroyMessages() { diff --git a/js/modules/signal.js b/js/modules/signal.js index 0e8d4936f..0a023fffe 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -61,6 +61,7 @@ const { const { SessionToast } = require('../../ts/components/session/SessionToast'); const { SessionToggle } = require('../../ts/components/session/SessionToggle'); const { SessionModal } = require('../../ts/components/session/SessionModal'); +const { SessionConfirm } = require('../../ts/components/session/SessionConfirm'); const { SessionDropdown, } = require('../../ts/components/session/SessionDropdown'); @@ -267,6 +268,7 @@ exports.setup = (options = {}) => { SessionSettings, SessionToast, SessionToggle, + SessionConfirm, SessionModal, SessionDropdown, MediaGallery, diff --git a/js/permissions_popup_start.js b/js/permissions_popup_start.js index f153a0bf9..6dc10461a 100644 --- a/js/permissions_popup_start.js +++ b/js/permissions_popup_start.js @@ -8,11 +8,8 @@ $(document).on('keyup', e => { } }); -const $body = $(document.body); -$body.addClass(`${window.theme}-theme`); - -window.view = new Whisper.ConfirmationDialogView({ - message: i18n('audioPermissionNeeded'), +const dialogParams = { + title: i18n('audioPermissionNeeded'), okText: i18n('allowAccess'), resolve: () => { 'use strict'; @@ -20,7 +17,7 @@ window.view = new Whisper.ConfirmationDialogView({ window.setMediaPermissions(true); window.closePermissionsPopup(); }, - reject: window.closePermissionsPopup, -}); + onClose: window.closePermissionsPopup, +}; +window.confirmationDialog(dialogParams); -window.view.$el.appendTo($body); diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 06df077dc..8d9a7d7fe 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -1328,6 +1328,7 @@ message.resend(contact.id); }, + }); this.$el.prepend(dialog.el); diff --git a/js/views/session_confirm_view.js b/js/views/session_confirm_view.js new file mode 100644 index 000000000..4b943e225 --- /dev/null +++ b/js/views/session_confirm_view.js @@ -0,0 +1,55 @@ +/* global Whisper */ + +// eslint-disable-next-line func-names +(function() { + 'use strict'; + + window.Whisper = window.Whisper || {}; + + Whisper.SessionConfirmView = Whisper.View.extend({ + initialize(options) { + this.props = { + title: options.title, + message: options.message, + onClickOk: this.ok.bind(this), + onClickClose: this.cancel.bind(this), + resolve: options.resolve, + reject: options.reject, + okText: options.okText, + cancelText: options.cancelText, + hideCancel: options.hideCancel, + }; + }, + + render() { + this.$('.session-confirm-wrapper').remove(); + + this.confirmView = new Whisper.ReactWrapperView({ + className: 'session-confirm-wrapper', + Component: window.Signal.Components.SessionConfirm, + props: this.props, + }); + + this.$el.append(this.confirmView.el); + }, + + ok() { + this.$('.session-confirm-wrapper').remove(); + if (this.props.resolve){ + this.props.resolve() + } + }, + cancel() { + this.$('.session-confirm-wrapper').remove(); + if (this.props.reject) { + this.props.reject() + } + }, + onKeyup(event) { + if (event.key === 'Escape' || event.key === 'Esc') { + this.cancel(); + } + }, + + }); +})(); diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index b0834d274..affdb351f 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -7,6 +7,7 @@ import { SessionButtonColor, SessionButtonType, } from './session/SessionButton'; +import { SessionConfirm } from './session/SessionConfirm'; interface Props { i18n: any; diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx new file mode 100644 index 000000000..e563ad6fa --- /dev/null +++ b/ts/components/session/SessionConfirm.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { SessionModal } from './SessionModal'; +import { SessionButton } from './SessionButton'; + +interface Props { + message: string; + title: string; + onOk?: any; + onClose?: any; + onClickOk: any, + onClickClose: any, + okText?: string; + cancelText?: string; + hideCancel: boolean; +} + +export class SessionConfirm extends React.Component { + public static defaultProps = { + title: '', + hideCancel: false, + } + + constructor(props: any) { + super(props); + } + + public render() { + const { title, + message, + onClickOk, + onClickClose, + hideCancel, + } = this.props; + + const okText = this.props.okText || window.i18n('ok'); + const cancelText = this.props.cancelText || window.i18n('cancel'); + const showHeader = !! this.props.title; + + return ( + null} + onOk={() => null} + showExitIcon={false} + showHeader={showHeader} + > + { showHeader ? null : ( +
+ )} + +
+ + {message} + +
+ +
+ +
+ + + { hideCancel ? null : ( + + )} +
+ + ); + } + +} diff --git a/ts/components/session/SessionModal.tsx b/ts/components/session/SessionModal.tsx index 9977046d7..4181e49d4 100644 --- a/ts/components/session/SessionModal.tsx +++ b/ts/components/session/SessionModal.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import classNames from 'classnames'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/'; @@ -7,6 +6,8 @@ interface Props { title: string; onClose: any; onOk: any; + showExitIcon?: boolean; + showHeader?: boolean; //Maximum of two icons in header headerIconButtons?: Array<{ type: SessionIconType; @@ -18,7 +19,12 @@ interface State { isVisible: boolean; } -export class SessionModal extends React.PureComponent { +export class SessionModal extends React.PureComponent { + public static defaultProps = { + showExitIcon: true, + showHeader: true, + }; + constructor(props: any) { super(props); this.state = { @@ -32,34 +38,40 @@ export class SessionModal extends React.PureComponent { } public render() { - const { title, headerIconButtons } = this.props; + const { title, headerIconButtons, showExitIcon, showHeader } = this.props; const { isVisible } = this.state; return isVisible ? ( -
-
-
- -
-
{title}
-
- {headerIconButtons - ? headerIconButtons.map((iconItem: any) => { - return ( - - ); - }) - : null} -
-
+
+ { showHeader ? ( + <> +
+
+ {showExitIcon ? ( + + ) : null } +
+
{title}
+
+ {headerIconButtons + ? headerIconButtons.map((iconItem: any) => { + return ( + + ); + }) + : null} +
+
+ + ) : null }
{this.props.children}