From f4788a642784cd918265a8879486f72c59f7ef45 Mon Sep 17 00:00:00 2001 From: Andrew Morgan <1342360+anoadragon453@users.noreply.github.com> Date: Thu, 15 Jul 2021 09:55:58 +0100 Subject: [PATCH] Add dialpad to transfer dialog + various dialpad UI improvements (#6363) Co-authored-by: Germain Co-authored-by: Andrew Morgan Co-authored-by: David Baker --- res/css/_components.scss | 1 + res/css/structures/_TabbedView.scss | 110 ++++++-- res/css/views/dialogs/_InviteDialog.scss | 106 +++++++- .../elements/_DialPadBackspaceButton.scss | 40 +++ res/css/views/voip/_DialPad.scss | 41 +-- res/css/views/voip/_DialPadContextMenu.scss | 49 ++-- res/css/views/voip/_DialPadModal.scss | 36 +-- res/img/voip/tab-dialpad.svg | 3 + res/img/voip/tab-userdirectory.svg | 7 + res/themes/dark/css/_dark.scss | 2 +- src/CallHandler.tsx | 50 +++- src/components/structures/TabbedView.tsx | 21 +- .../views/context_menus/CallContextMenu.tsx | 2 +- .../context_menus/DialpadContextMenu.tsx | 29 +- src/components/views/dialogs/InviteDialog.tsx | 247 +++++++++++++----- .../views/elements/DialPadBackspaceButton.tsx | 31 +++ src/components/views/voip/DialPad.tsx | 23 +- src/components/views/voip/DialPadModal.tsx | 38 ++- src/dispatcher/actions.ts | 12 + .../payloads/TransferCallPayload.ts | 33 +++ src/i18n/strings/en_EN.json | 7 +- 21 files changed, 704 insertions(+), 184 deletions(-) create mode 100644 res/css/views/elements/_DialPadBackspaceButton.scss create mode 100644 res/img/voip/tab-dialpad.svg create mode 100644 res/img/voip/tab-userdirectory.svg create mode 100644 src/components/views/elements/DialPadBackspaceButton.tsx create mode 100644 src/dispatcher/payloads/TransferCallPayload.ts diff --git a/res/css/_components.scss b/res/css/_components.scss index 8f80f1bf97..bb22446258 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -120,6 +120,7 @@ @import "./views/elements/_AddressTile.scss"; @import "./views/elements/_DesktopBuildsNotice.scss"; @import "./views/elements/_DesktopCapturerSourcePicker.scss"; +@import "./views/elements/_DialPadBackspaceButton.scss"; @import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 39a8ebed32..833450a25b 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -1,6 +1,7 @@ /* Copyright 2017 Travis Ralston Copyright 2019 New Vector Ltd +Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,7 +21,6 @@ limitations under the License. padding: 0 0 0 16px; display: flex; flex-direction: column; - position: absolute; top: 0; bottom: 0; left: 0; @@ -28,11 +28,93 @@ limitations under the License. margin-top: 8px; } +.mx_TabbedView_tabsOnLeft { + flex-direction: column; + position: absolute; + + .mx_TabbedView_tabLabels { + width: 170px; + max-width: 170px; + position: fixed; + } + + .mx_TabbedView_tabPanel { + margin-left: 240px; // 170px sidebar + 70px padding + flex-direction: column; + } + + .mx_TabbedView_tabLabel_active { + background-color: $tab-label-active-bg-color; + color: $tab-label-active-fg-color; + } + + .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { + background-color: $tab-label-active-icon-bg-color; + } + + .mx_TabbedView_maskedIcon { + width: 16px; + height: 16px; + margin-left: 8px; + margin-right: 16px; + } + + .mx_TabbedView_maskedIcon::before { + mask-size: 16px; + width: 16px; + height: 16px; + } +} + +.mx_TabbedView_tabsOnTop { + flex-direction: column; + + .mx_TabbedView_tabLabels { + display: flex; + margin-bottom: 8px; + } + + .mx_TabbedView_tabLabel { + padding-left: 0px; + padding-right: 52px; + + .mx_TabbedView_tabLabel_text { + font-size: 15px; + color: $tertiary-fg-color; + } + } + + .mx_TabbedView_tabPanel { + flex-direction: row; + } + + .mx_TabbedView_tabLabel_active { + color: $accent-color; + .mx_TabbedView_tabLabel_text { + color: $accent-color; + } + } + + .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { + background-color: $accent-color; + } + + .mx_TabbedView_maskedIcon { + width: 22px; + height: 22px; + margin-left: 0px; + margin-right: 8px; + } + + .mx_TabbedView_maskedIcon::before { + mask-size: 22px; + width: inherit; + height: inherit; + } +} + .mx_TabbedView_tabLabels { - width: 170px; - max-width: 170px; color: $tab-label-fg-color; - position: fixed; } .mx_TabbedView_tabLabel { @@ -46,43 +128,25 @@ limitations under the License. position: relative; } -.mx_TabbedView_tabLabel_active { - background-color: $tab-label-active-bg-color; - color: $tab-label-active-fg-color; -} - .mx_TabbedView_maskedIcon { - margin-left: 8px; - margin-right: 16px; - width: 16px; - height: 16px; display: inline-block; } .mx_TabbedView_maskedIcon::before { display: inline-block; - background-color: $tab-label-icon-bg-color; + background-color: $icon-button-color; mask-repeat: no-repeat; - mask-size: 16px; - width: 16px; - height: 16px; mask-position: center; content: ''; } -.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { - background-color: $tab-label-active-icon-bg-color; -} - .mx_TabbedView_tabLabel_text { vertical-align: middle; } .mx_TabbedView_tabPanel { - margin-left: 240px; // 170px sidebar + 70px padding flex-grow: 1; display: flex; - flex-direction: column; min-height: 0; // firefox } diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index c01b43c1c4..9fc4b7a15c 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -14,6 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_InviteDialog_transferWrapper .mx_Dialog { + padding-bottom: 16px; +} + .mx_InviteDialog_addressBar { display: flex; flex-direction: row; @@ -286,16 +290,41 @@ limitations under the License. } } -.mx_InviteDialog { +.mx_InviteDialog_other { // Prevent the dialog from jumping around randomly when elements change. height: 600px; padding-left: 20px; // the design wants some padding on the left - display: flex; + + .mx_InviteDialog_userSections { + height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements + } +} + +.mx_InviteDialog_content { + height: calc(100% - 36px); // full height minus the size of the header + overflow: hidden; +} + +.mx_InviteDialog_transfer { + width: 496px; + height: 466px; flex-direction: column; .mx_InviteDialog_content { - overflow: hidden; - height: 100%; + flex-direction: column; + + .mx_TabbedView { + height: calc(100% - 60px); + } + overflow: visible; + } + + .mx_InviteDialog_addressBar { + margin-top: 8px; + } + + input[type="checkbox"] { + margin-right: 8px; } } @@ -303,7 +332,6 @@ limitations under the License. margin-top: 4px; overflow-y: auto; padding: 0 45px 4px 0; - height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements } .mx_InviteDialog_hasFooter .mx_InviteDialog_userSections { @@ -318,6 +346,74 @@ limitations under the License. padding: 0; } +.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField { + border-top: 0; + border-left: 0; + border-right: 0; + border-radius: 0; + margin-top: 0; + border-color: $quaternary-fg-color; + + input { + font-size: 18px; + font-weight: 600; + padding-top: 0; + } +} + +.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within { + border-color: $accent-color; +} + +.mx_InviteDialog_dialPadField .mx_Field_postfix { + /* Remove border separator between postfix and field content */ + border-left: none; +} + +.mx_InviteDialog_dialPad { + width: 224px; + margin-top: 16px; + margin-left: auto; + margin-right: auto; +} + +.mx_InviteDialog_dialPad .mx_DialPad { + row-gap: 16px; + column-gap: 48px; + + margin-left: auto; + margin-right: auto; +} + +.mx_InviteDialog_transferConsultConnect { + padding-top: 16px; + /* This wants a drop shadow the full width of the dialog, so relative-position it + * and make it wider, then compensate with padding + */ + position: relative; + width: 496px; + left: -24px; + padding-left: 24px; + padding-right: 24px; + border-top: 1px solid $message-body-panel-bg-color; + + display: flex; + flex-direction: row; + align-items: center; +} + +.mx_InviteDialog_transferConsultConnect_pushRight { + margin-left: auto; +} + +.mx_InviteDialog_userDirectoryIcon::before { + mask-image: url('$(res)/img/voip/tab-userdirectory.svg'); +} + +.mx_InviteDialog_dialPadIcon::before { + mask-image: url('$(res)/img/voip/tab-dialpad.svg'); +} + .mx_InviteDialog_multiInviterError { > h4 { font-size: $font-15px; diff --git a/res/css/views/elements/_DialPadBackspaceButton.scss b/res/css/views/elements/_DialPadBackspaceButton.scss new file mode 100644 index 0000000000..40e4af7025 --- /dev/null +++ b/res/css/views/elements/_DialPadBackspaceButton.scss @@ -0,0 +1,40 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_DialPadBackspaceButton { + position: relative; + height: 28px; + width: 28px; + + &::before { + /* force this element to appear on the DOM */ + content: ""; + + background-color: #8D97A5; + width: inherit; + height: inherit; + top: 0px; + left: 0px; + position: absolute; + display: inline-block; + vertical-align: middle; + + mask-image: url('$(res)/img/element-icons/call/delete.svg'); + mask-position: 8px; + mask-size: 20px; + mask-repeat: no-repeat; + } +} diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss index 483b131bfe..eefd2e9ba5 100644 --- a/res/css/views/voip/_DialPad.scss +++ b/res/css/views/voip/_DialPad.scss @@ -16,11 +16,21 @@ limitations under the License. .mx_DialPad { display: grid; + row-gap: 16px; + column-gap: 0px; + margin-top: 24px; + margin-left: auto; + margin-right: auto; + + /* squeeze the dial pad buttons together horizontally */ grid-template-columns: repeat(3, 1fr); - gap: 16px; } .mx_DialPad_button { + display: flex; + flex-direction: column; + justify-content: center; + width: 40px; height: 40px; background-color: $dialpad-button-bg-color; @@ -29,10 +39,19 @@ limitations under the License. font-weight: 600; text-align: center; vertical-align: middle; - line-height: 40px; + margin-left: auto; + margin-right: auto; } -.mx_DialPad_deleteButton, .mx_DialPad_dialButton { +.mx_DialPad_button .mx_DialPad_buttonSubText { + font-size: 8px; +} + +.mx_DialPad_dialButton { + /* Always show the dial button in the center grid column */ + grid-column: 2; + background-color: $accent-color; + &::before { content: ''; display: inline-block; @@ -42,21 +61,7 @@ limitations under the License. mask-repeat: no-repeat; mask-size: 20px; mask-position: center; - background-color: $primary-bg-color; - } -} - -.mx_DialPad_deleteButton { - background-color: $notice-primary-color; - &::before { - mask-image: url('$(res)/img/element-icons/call/delete.svg'); - mask-position: 9px; // delete icon is right-heavy so have to be slightly to the left to look centered - } -} - -.mx_DialPad_dialButton { - background-color: $accent-color; - &::before { + background-color: #FFF; // on all themes mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); } } diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss index 31327113cf..0019994e72 100644 --- a/res/css/views/voip/_DialPadContextMenu.scss +++ b/res/css/views/voip/_DialPadContextMenu.scss @@ -14,10 +14,40 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_DialPadContextMenu_dialPad .mx_DialPad { + row-gap: 16px; + column-gap: 32px; +} + +.mx_DialPadContextMenuWrapper { + padding: 15px; +} + .mx_DialPadContextMenu_header { - margin-top: 12px; - margin-left: 12px; - margin-right: 12px; + border: none; + margin-top: 32px; + margin-left: 20px; + margin-right: 20px; + + /* a separator between the input line and the dial buttons */ + border-bottom: 1px solid $quaternary-fg-color; + transition: border-bottom 0.25s; +} + +.mx_DialPadContextMenu_cancel { + float: right; + mask: url('$(res)/img/feather-customised/cancel.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: cover; + width: 14px; + height: 14px; + background-color: $dialog-close-fg-color; + cursor: pointer; +} + +.mx_DialPadContextMenu_header:focus-within { + border-bottom: 1px solid $accent-color; } .mx_DialPadContextMenu_title { @@ -30,7 +60,6 @@ limitations under the License. height: 1.5em; font-size: 18px; font-weight: 600; - max-width: 150px; border: none; margin: 0px; } @@ -38,7 +67,7 @@ limitations under the License. font-size: 18px; font-weight: 600; overflow: hidden; - max-width: 150px; + max-width: 185px; text-align: left; direction: rtl; padding: 8px 0px; @@ -48,13 +77,3 @@ limitations under the License. .mx_DialPadContextMenu_dialPad { margin: 16px; } - -.mx_DialPadContextMenu_horizSep { - position: relative; - &::before { - content: ''; - position: absolute; - width: 100%; - border-bottom: 1px solid $input-darker-bg-color; - } -} diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss index f9d7673a38..b8042f77ae 100644 --- a/res/css/views/voip/_DialPadModal.scss +++ b/res/css/views/voip/_DialPadModal.scss @@ -19,14 +19,23 @@ limitations under the License. } .mx_DialPadModal { - width: 192px; - height: 368px; + width: 292px; + height: 370px; + padding: 16px 0px 0px 0px; } .mx_DialPadModal_header { - margin-top: 12px; - margin-left: 12px; - margin-right: 12px; + margin-top: 32px; + margin-left: 40px; + margin-right: 40px; + + /* a separator between the input line and the dial buttons */ + border-bottom: 1px solid $quaternary-fg-color; + transition: border-bottom 0.25s; +} + +.mx_DialPadModal_header:focus-within { + border-bottom: 1px solid $accent-color; } .mx_DialPadModal_title { @@ -45,11 +54,18 @@ limitations under the License. height: 14px; background-color: $dialog-close-fg-color; cursor: pointer; + margin-right: 16px; } .mx_DialPadModal_field { border: none; margin: 0px; + height: 30px; +} + +.mx_DialPadModal_field .mx_Field_postfix { + /* Remove border separator between postfix and field content */ + border-left: none; } .mx_DialPadModal_field input { @@ -62,13 +78,3 @@ limitations under the License. margin-right: 16px; margin-top: 16px; } - -.mx_DialPadModal_horizSep { - position: relative; - &::before { - content: ''; - position: absolute; - width: 100%; - border-bottom: 1px solid $input-darker-bg-color; - } -} diff --git a/res/img/voip/tab-dialpad.svg b/res/img/voip/tab-dialpad.svg new file mode 100644 index 0000000000..b7add0addb --- /dev/null +++ b/res/img/voip/tab-dialpad.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/voip/tab-userdirectory.svg b/res/img/voip/tab-userdirectory.svg new file mode 100644 index 0000000000..792ded7be4 --- /dev/null +++ b/res/img/voip/tab-userdirectory.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 57cbc7efa9..74b33fbd02 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -118,7 +118,7 @@ $voipcall-plinth-color: #394049; // ******************** $theme-button-bg-color: #e3e8f0; -$dialpad-button-bg-color: #6F7882; +$dialpad-button-bg-color: #394049; $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-filter-active-bg-color: $bg-color; diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index a0adee6b8d..f90854ee64 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -394,7 +394,7 @@ export default class CallHandler extends EventEmitter { } private setCallListeners(call: MatrixCall) { - let mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call); + let mappedRoomId = this.roomIdForCall(call); call.on(CallEvent.Error, (err: CallError) => { if (!this.matchesCallForThisRoom(call)) return; @@ -871,6 +871,12 @@ export default class CallHandler extends EventEmitter { case Action.DialNumber: this.dialNumber(payload.number); break; + case Action.TransferCallToMatrixID: + this.startTransferToMatrixID(payload.call, payload.destination, payload.consultFirst); + break; + case Action.TransferCallToPhoneNumber: + this.startTransferToPhoneNumber(payload.call, payload.destination, payload.consultFirst); + break; } }; @@ -905,6 +911,48 @@ export default class CallHandler extends EventEmitter { }); } + private async startTransferToPhoneNumber(call: MatrixCall, destination: string, consultFirst: boolean) { + const results = await this.pstnLookup(destination); + if (!results || results.length === 0 || !results[0].userid) { + Modal.createTrackedDialog('', '', ErrorDialog, { + title: _t("Unable to transfer call"), + description: _t("There was an error looking up the phone number"), + }); + return; + } + + await this.startTransferToMatrixID(call, results[0].userid, consultFirst); + } + + private async startTransferToMatrixID(call: MatrixCall, destination: string, consultFirst: boolean) { + if (consultFirst) { + const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), destination); + + dis.dispatch({ + action: 'place_call', + type: call.type, + room_id: dmRoomId, + transferee: call, + }); + dis.dispatch({ + action: 'view_room', + room_id: dmRoomId, + should_peek: false, + joining: false, + }); + } else { + try { + await call.transfer(destination); + } catch (e) { + console.log("Failed to transfer call", e); + Modal.createTrackedDialog('Failed to transfer call', '', ErrorDialog, { + title: _t('Transfer Failed'), + description: _t('Failed to transfer call'), + }); + } + } + } + setActiveCallRoomId(activeCallRoomId: string) { logger.info("Setting call in room " + activeCallRoomId + " active"); diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx index dcfde94811..19694cd769 100644 --- a/src/components/structures/TabbedView.tsx +++ b/src/components/structures/TabbedView.tsx @@ -20,6 +20,7 @@ import * as React from "react"; import { _t } from '../../languageHandler'; import AutoHideScrollbar from './AutoHideScrollbar'; import { replaceableComponent } from "../../utils/replaceableComponent"; +import classNames from "classnames"; import AccessibleButton from "../views/elements/AccessibleButton"; /** @@ -37,9 +38,16 @@ export class Tab { } } +export enum TabLocation { + LEFT = 'left', + TOP = 'top', +} + interface IProps { tabs: Tab[]; initialTabId?: string; + tabLocation: TabLocation; + onChange?: (tabId: string) => void; } interface IState { @@ -62,6 +70,10 @@ export default class TabbedView extends React.Component { }; } + static defaultProps = { + tabLocation: TabLocation.LEFT, + }; + private _getActiveTabIndex() { if (!this.state || !this.state.activeTabIndex) return 0; return this.state.activeTabIndex; @@ -75,6 +87,7 @@ export default class TabbedView extends React.Component { private _setActiveTab(tab: Tab) { const idx = this.props.tabs.indexOf(tab); if (idx !== -1) { + if (this.props.onChange) this.props.onChange(tab.id); this.setState({ activeTabIndex: idx }); } else { console.error("Could not find tab " + tab.label + " in tabs"); @@ -119,8 +132,14 @@ export default class TabbedView extends React.Component { const labels = this.props.tabs.map(tab => this._renderTabLabel(tab)); const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]); + const tabbedViewClasses = classNames({ + 'mx_TabbedView': true, + 'mx_TabbedView_tabsOnLeft': this.props.tabLocation == TabLocation.LEFT, + 'mx_TabbedView_tabsOnTop': this.props.tabLocation == TabLocation.TOP, + }); + return ( -
+
{labels}
diff --git a/src/components/views/context_menus/CallContextMenu.tsx b/src/components/views/context_menus/CallContextMenu.tsx index 428e18ed30..76e1670669 100644 --- a/src/components/views/context_menus/CallContextMenu.tsx +++ b/src/components/views/context_menus/CallContextMenu.tsx @@ -53,7 +53,7 @@ export default class CallContextMenu extends React.Component { onTransferClick = () => { Modal.createTrackedDialog( 'Transfer Call', '', InviteDialog, { kind: KIND_CALL_TRANSFER, call: this.props.call }, - /*className=*/null, /*isPriority=*/false, /*isStatic=*/true, + /*className=*/"mx_InviteDialog_transferWrapper", /*isPriority=*/false, /*isStatic=*/true, ); this.props.onFinished(); }; diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx index 28a73ba8d4..39dfd50795 100644 --- a/src/components/views/context_menus/DialpadContextMenu.tsx +++ b/src/components/views/context_menus/DialpadContextMenu.tsx @@ -15,11 +15,11 @@ limitations under the License. */ import React from 'react'; -import { _t } from '../../../languageHandler'; +import AccessibleButton from "../elements/AccessibleButton"; import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu'; import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call'; import Field from "../elements/Field"; -import Dialpad from '../voip/DialPad'; +import DialPad from '../voip/DialPad'; import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps extends IContextMenuProps { @@ -45,24 +45,29 @@ export default class DialpadContextMenu extends React.Component this.setState({ value: this.state.value + digit }); }; + onCancelClick = () => { + this.props.onFinished(); + }; + onChange = (ev) => { this.setState({ value: ev.target.value }); }; render() { return -
+
- {_t("Dial pad")} + +
+
+ +
+
+
- -
-
-
-
; } diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index c9475d4849..f8b2297f5c 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -32,7 +32,6 @@ import Modal from "../../../Modal"; import { humanizeTime } from "../../../utils/humanize"; import createRoom, { canEncryptToAllUsers, - ensureDMExists, findDMForUser, privateShouldBeEncrypted, } from "../../../createRoom"; @@ -64,9 +63,14 @@ import { copyPlaintext, selectText } from "../../../utils/strings"; import * as ContextMenu from "../../structures/ContextMenu"; import { toRightOf } from "../../structures/ContextMenu"; import GenericTextContextMenu from "../context_menus/GenericTextContextMenu"; +import { TransferCallPayload } from '../../../dispatcher/payloads/TransferCallPayload'; +import Field from '../elements/Field'; +import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView'; +import Dialpad from '../voip/DialPad'; import QuestionDialog from "./QuestionDialog"; import Spinner from "../elements/Spinner"; import BaseDialog from "./BaseDialog"; +import DialPadBackspaceButton from "../elements/DialPadBackspaceButton"; // we have a number of types defined from the Matrix spec which can't reasonably be altered here. /* eslint-disable camelcase */ @@ -79,11 +83,19 @@ interface IRecentUser { export const KIND_DM = "dm"; export const KIND_INVITE = "invite"; +// NB. This dialog needs the 'mx_InviteDialog_transferWrapper' wrapper class to have the correct +// padding on the bottom (because all modals have 24px padding on all sides), so this needs to +// be passed when creating the modal export const KIND_CALL_TRANSFER = "call_transfer"; const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked +enum TabId { + UserDirectory = 'users', + DialPad = 'dialpad', +} + // This is the interface that is expected by various components in the Invite Dialog and RoomInvite. // It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support // for 3PIDs/email addresses. @@ -356,6 +368,8 @@ interface IInviteDialogState { canUseIdentityServer: boolean; tryingIdentityServer: boolean; consultFirst: boolean; + dialPadValue: string; + currentTabId: TabId; // These two flags are used for the 'Go' button to communicate what is going on. busy: boolean; @@ -407,6 +421,8 @@ export default class InviteDialog extends React.PureComponent { - this.convertFilter(); - const targets = this.convertFilter(); - const targetIds = targets.map(t => t.userId); - if (targetIds.length > 1) { - this.setState({ - errorText: _t("A call can only be transferred to a single user."), - }); - } - - if (this.state.consultFirst) { - const dmRoomId = await ensureDMExists(MatrixClientPeg.get(), targetIds[0]); - - dis.dispatch({ - action: 'place_call', - type: this.props.call.type, - room_id: dmRoomId, - transferee: this.props.call, - }); - dis.dispatch({ - action: 'view_room', - room_id: dmRoomId, - should_peek: false, - joining: false, - }); - this.props.onFinished(); - } else { - this.setState({ busy: true }); - try { - await this.props.call.transfer(targetIds[0]); - this.setState({ busy: false }); - this.props.onFinished(); - } catch (e) { + if (this.state.currentTabId == TabId.UserDirectory) { + this.convertFilter(); + const targets = this.convertFilter(); + const targetIds = targets.map(t => t.userId); + if (targetIds.length > 1) { this.setState({ - busy: false, - errorText: _t("Failed to transfer call"), + errorText: _t("A call can only be transferred to a single user."), }); + return; } + + dis.dispatch({ + action: Action.TransferCallToMatrixID, + call: this.props.call, + destination: targetIds[0], + consultFirst: this.state.consultFirst, + } as TransferCallPayload); + } else { + dis.dispatch({ + action: Action.TransferCallToPhoneNumber, + call: this.props.call, + destination: this.state.dialPadValue, + consultFirst: this.state.consultFirst, + } as TransferCallPayload); } + this.props.onFinished(); }; private onKeyDown = (e) => { @@ -827,6 +831,10 @@ export default class InviteDialog extends React.PureComponent { + this.props.onFinished([]); + }; + private updateSuggestions = async (term) => { MatrixClientPeg.get().searchUserDirectory({ term }).then(async r => { if (term !== this.state.filterText) { @@ -962,11 +970,14 @@ export default class InviteDialog extends React.PureComponent { if (!this.state.busy) { let filterText = this.state.filterText; - const targets = this.state.targets.map(t => t); // cheap clone for mutation + let targets = this.state.targets.map(t => t); // cheap clone for mutation const idx = targets.indexOf(member); if (idx >= 0) { targets.splice(idx, 1); } else { + if (this.props.kind === KIND_CALL_TRANSFER && targets.length > 0) { + targets = []; + } targets.push(member); filterText = ""; // clear the filter when the user accepts a suggestion } @@ -1189,6 +1200,11 @@ export default class InviteDialog extends React.PureComponent ( )); @@ -1201,8 +1217,9 @@ export default class InviteDialog extends React.PureComponent 0)} autoComplete="off" + placeholder={hasPlaceholder ? _t("Search") : null} /> ); return ( @@ -1249,6 +1266,28 @@ export default class InviteDialog extends React.PureComponent { + ev.preventDefault(); + this.transferCall(); + }; + + private onDialChange = ev => { + this.setState({ dialPadValue: ev.currentTarget.value }); + }; + + private onDigitPress = digit => { + this.setState({ dialPadValue: this.state.dialPadValue + digit }); + }; + + private onDeletePress = () => { + if (this.state.dialPadValue.length === 0) return; + this.setState({ dialPadValue: this.state.dialPadValue.slice(0, -1) }); + }; + + private onTabChange = (tabId: TabId) => { + this.setState({ currentTabId: tabId }); + }; + private async onLinkClick(e) { e.preventDefault(); selectText(e.target); @@ -1278,12 +1317,16 @@ export default class InviteDialog extends React.PureComponent; const identityServersEnabled = SettingsStore.getValue(UIFeature.IdentityServer); + const hasSelection = this.state.targets.length > 0 + || (this.state.filterText && this.state.filterText.includes('@')); + const cli = MatrixClientPeg.get(); const userId = cli.getUserId(); if (this.props.kind === KIND_DM) { @@ -1421,23 +1464,116 @@ export default class InviteDialog extends React.PureComponent + + consultConnectSection =
+ + {_t("Cancel")} + + + {_t("Transfer")} +
; } else { console.error("Unknown kind of InviteDialog: " + this.props.kind); } - const hasSelection = this.state.targets.length > 0 - || (this.state.filterText && this.state.filterText.includes('@')); + const goButton = this.props.kind == KIND_CALL_TRANSFER ? null : + {buttonText} + ; + + const usersSection = +

{helpText}

+
+ {this.renderEditor()} +
+ {goButton} + {spinner} +
+
+ {keySharingWarning} + {this.renderIdentityServerWarning()} +
{this.state.errorText}
+
+ {this.renderSection('recents')} + {this.renderSection('suggestions')} + {extraSection} +
+ {footer} + ; + + let dialogContent; + if (this.props.kind === KIND_CALL_TRANSFER) { + const tabs = []; + tabs.push(new Tab( + TabId.UserDirectory, _td("User Directory"), 'mx_InviteDialog_userDirectoryIcon', usersSection, + )); + + const backspaceButton = ( + + ); + + // Only show the backspace button if the field has content + let dialPadField; + if (this.state.dialPadValue.length !== 0) { + dialPadField = ; + } else { + dialPadField = ; + } + + const dialPadSection =
+
+ {dialPadField} +
+ +
; + tabs.push(new Tab(TabId.DialPad, _td("Dial pad"), 'mx_InviteDialog_dialPadIcon', dialPadSection)); + dialogContent = + + {consultConnectSection} + ; + } else { + dialogContent = + {usersSection} + {consultConnectSection} + ; + } + return (
-

{helpText}

-
- {this.renderEditor()} -
- - {buttonText} - - {spinner} -
-
- {keySharingWarning} - {this.renderIdentityServerWarning()} -
{this.state.errorText}
-
- {this.renderSection('recents')} - {this.renderSection('suggestions')} - {extraSection} -
- {footer} + {dialogContent}
); diff --git a/src/components/views/elements/DialPadBackspaceButton.tsx b/src/components/views/elements/DialPadBackspaceButton.tsx new file mode 100644 index 0000000000..69f0fcb39a --- /dev/null +++ b/src/components/views/elements/DialPadBackspaceButton.tsx @@ -0,0 +1,31 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import * as React from "react"; +import AccessibleButton from "./AccessibleButton"; + +interface IProps { + // Callback for when the button is pressed + onBackspacePress: () => void; +} + +export default class DialPadBackspaceButton extends React.PureComponent { + render() { + return
+ +
; + } +} diff --git a/src/components/views/voip/DialPad.tsx b/src/components/views/voip/DialPad.tsx index dff7a8f748..6687c89b52 100644 --- a/src/components/views/voip/DialPad.tsx +++ b/src/components/views/voip/DialPad.tsx @@ -19,16 +19,17 @@ import AccessibleButton from "../elements/AccessibleButton"; import { replaceableComponent } from "../../../utils/replaceableComponent"; const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']; +const BUTTON_LETTERS = ['', 'ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQRS', 'TUV', 'WXYZ', '', '+', '']; enum DialPadButtonKind { Digit, - Delete, Dial, } interface IButtonProps { kind: DialPadButtonKind; digit?: string; + digitSubtext?: string; onButtonPress: (string) => void; } @@ -42,11 +43,10 @@ class DialPadButton extends React.PureComponent { case DialPadButtonKind.Digit: return {this.props.digit} +
+ {this.props.digitSubtext} +
; - case DialPadButtonKind.Delete: - return ; case DialPadButtonKind.Dial: return ; } @@ -55,7 +55,7 @@ class DialPadButton extends React.PureComponent { interface IProps { onDigitPress: (string) => void; - hasDialAndDelete: boolean; + hasDial: boolean; onDeletePress?: (string) => void; onDialPress?: (string) => void; } @@ -65,16 +65,15 @@ export default class Dialpad extends React.PureComponent { render() { const buttonNodes = []; - for (const button of BUTTONS) { + for (let i = 0; i < BUTTONS.length; i++) { + const button = BUTTONS[i]; + const digitSubtext = BUTTON_LETTERS[i]; buttonNodes.push(); } - if (this.props.hasDialAndDelete) { - buttonNodes.push(); + if (this.props.hasDial) { buttonNodes.push(); diff --git a/src/components/views/voip/DialPadModal.tsx b/src/components/views/voip/DialPadModal.tsx index 5e5903531e..033aa2e700 100644 --- a/src/components/views/voip/DialPadModal.tsx +++ b/src/components/views/voip/DialPadModal.tsx @@ -15,7 +15,6 @@ limitations under the License. */ import * as React from "react"; -import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; import Field from "../elements/Field"; import DialPad from './DialPad'; @@ -23,6 +22,7 @@ import dis from '../../../dispatcher/dispatcher'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { DialNumberPayload } from "../../../dispatcher/payloads/DialNumberPayload"; import { Action } from "../../../dispatcher/actions"; +import DialPadBackspaceButton from "../elements/DialPadBackspaceButton"; interface IProps { onFinished: (boolean) => void; @@ -74,22 +74,38 @@ export default class DialpadModal extends React.PureComponent { }; render() { + const backspaceButton = ( + + ); + + // Only show the backspace button if the field has content + let dialPadField; + if (this.state.value.length !== 0) { + dialPadField = ; + } else { + dialPadField = ; + } + return
+
+ +
-
- {_t("Dial pad")} - -
- + {dialPadField}
-
-