Add dialpad to transfer dialog + various dialpad UI improvements (#6363)

Co-authored-by: Germain <germain@souquet.com> Co-authored-by: Andrew Morgan <andrew@amorgan.xyz> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2021-07-15 09:55:58 +01:00 · 2021-07-15 09:55:58 +01:00 · f4788a6427
commit f4788a6427
parent c7c29f2119
21 changed files with 704 additions and 184 deletions
--- 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<IProps, IState> {
        };
    }

+    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<IProps, IState> {
    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<IProps, IState> {
        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 (
-            <div className="mx_TabbedView">
+            <div className={tabbedViewClasses}>
                <div className="mx_TabbedView_tabLabels">
                    {labels}
                </div>
--- 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<IProps> {
    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();
    };
--- 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<IProps, IState>
        this.setState({ value: this.state.value + digit });
    };

+    onCancelClick = () => {
+        this.props.onFinished();
+    };
+
    onChange = (ev) => {
        this.setState({ value: ev.target.value });
    };

    render() {
        return <ContextMenu {...this.props}>
-            <div className="mx_DialPadContextMenu_header">
+            <div className="mx_DialPadContextMenuWrapper">
                <div>
-                    <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
+                    <AccessibleButton className="mx_DialPadContextMenu_cancel" onClick={this.onCancelClick} />
+                </div>
+                <div className="mx_DialPadContextMenu_header">
+                    <Field className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value} autoFocus={true}
+                        onChange={this.onChange}
+                    />
+                </div>
+                <div className="mx_DialPadContextMenu_dialPad">
+                    <DialPad onDigitPress={this.onDigitPress} hasDial={false} />
                </div>
-                <Field className="mx_DialPadContextMenu_dialled"
-                    value={this.state.value} autoFocus={true}
-                    onChange={this.onChange}
-                />
-            </div>
-            <div className="mx_DialPadContextMenu_horizSep" />
-            <div className="mx_DialPadContextMenu_dialPad">
-                <Dialpad onDigitPress={this.onDigitPress} hasDialAndDelete={false} />
            </div>
        </ContextMenu>;
    }
--- 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<IInviteDialogProps
            canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
            tryingIdentityServer: false,
            consultFirst: false,
+            dialPadValue: '',
+            currentTabId: TabId.UserDirectory,

            // These two flags are used for the 'Go' button to communicate what is going on.
            busy: false,
@ -768,44 +784,32 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
    };

    private transferCall = async () => {
-        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<IInviteDialogProps
        }
    };

+    private onCancel = () => {
+        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<IInviteDialogProps
    private toggleMember = (member: Member) => {
        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<IInviteDialogProps
    }

    private renderEditor() {
+        const hasPlaceholder = (
+            this.props.kind == KIND_CALL_TRANSFER &&
+            this.state.targets.length === 0 &&
+            this.state.filterText.length === 0
+        );
        const targets = this.state.targets.map(t => (
            <DMUserTile member={t} onRemove={!this.state.busy && this.removeMember} key={t.userId} />
        ));
@ -1201,8 +1217,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                ref={this.editorRef}
                onPaste={this.onPaste}
                autoFocus={true}
-                disabled={this.state.busy}
+                disabled={this.state.busy || (this.props.kind == KIND_CALL_TRANSFER && this.state.targets.length > 0)}
                autoComplete="off"
+                placeholder={hasPlaceholder ? _t("Search") : null}
            />
        );
        return (
@ -1249,6 +1266,28 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
        }
    }

+    private onDialFormSubmit = ev => {
+        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<IInviteDialogProps
        let helpText;
        let buttonText;
        let goButtonFn;
+        let consultConnectSection;
        let extraSection;
        let footer;
        let keySharingWarning = <span />;

        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<IInviteDialogProps
            }
        } else if (this.props.kind === KIND_CALL_TRANSFER) {
            title = _t("Transfer");
-            buttonText = _t("Transfer");
-            goButtonFn = this.transferCall;
-            footer = <div>
+
+            consultConnectSection = <div className="mx_InviteDialog_transferConsultConnect">
                <label>
                    <input type="checkbox" checked={this.state.consultFirst} onChange={this.onConsultFirstChange} />
                    {_t("Consult first")}
                </label>
+                <AccessibleButton
+                    kind="secondary"
+                    onClick={this.onCancel}
+                    className='mx_InviteDialog_transferConsultConnect_pushRight'
+                >
+                    {_t("Cancel")}
+                </AccessibleButton>
+                <AccessibleButton
+                    kind="primary"
+                    onClick={this.transferCall}
+                    className='mx_InviteDialog_transferButton'
+                    disabled={!hasSelection && this.state.dialPadValue === ''}
+                >
+                    {_t("Transfer")}
+                </AccessibleButton>
            </div>;
        } 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 : <AccessibleButton
+            kind="primary"
+            onClick={goButtonFn}
+            className='mx_InviteDialog_goButton'
+            disabled={this.state.busy || !hasSelection}
+        >
+            {buttonText}
+        </AccessibleButton>;
+
+        const usersSection = <React.Fragment>
+            <p className='mx_InviteDialog_helpText'>{helpText}</p>
+            <div className='mx_InviteDialog_addressBar'>
+                {this.renderEditor()}
+                <div className='mx_InviteDialog_buttonAndSpinner'>
+                    {goButton}
+                    {spinner}
+                </div>
+            </div>
+            {keySharingWarning}
+            {this.renderIdentityServerWarning()}
+            <div className='error'>{this.state.errorText}</div>
+            <div className='mx_InviteDialog_userSections'>
+                {this.renderSection('recents')}
+                {this.renderSection('suggestions')}
+                {extraSection}
+            </div>
+            {footer}
+        </React.Fragment>;
+
+        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 = (
+                <DialPadBackspaceButton onBackspacePress={this.onDeletePress} />
+            );
+
+            // Only show the backspace button if the field has content
+            let dialPadField;
+            if (this.state.dialPadValue.length !== 0) {
+                dialPadField = <Field className="mx_InviteDialog_dialPadField" id="dialpad_number"
+                    value={this.state.dialPadValue}
+                    autoFocus={true}
+                    onChange={this.onDialChange}
+                    postfixComponent={backspaceButton}
+                />;
+            } else {
+                dialPadField = <Field className="mx_InviteDialog_dialPadField" id="dialpad_number"
+                    value={this.state.dialPadValue}
+                    autoFocus={true}
+                    onChange={this.onDialChange}
+                />;
+            }
+
+            const dialPadSection = <div className="mx_InviteDialog_dialPad">
+                <form onSubmit={this.onDialFormSubmit}>
+                    {dialPadField}
+                </form>
+                <Dialpad hasDial={false}
+                    onDigitPress={this.onDigitPress} onDeletePress={this.onDeletePress}
+                />
+            </div>;
+            tabs.push(new Tab(TabId.DialPad, _td("Dial pad"), 'mx_InviteDialog_dialPadIcon', dialPadSection));
+            dialogContent = <React.Fragment>
+                <TabbedView tabs={tabs} initialTabId={this.state.currentTabId}
+                    tabLocation={TabLocation.TOP} onChange={this.onTabChange}
+                />
+                {consultConnectSection}
+            </React.Fragment>;
+        } else {
+            dialogContent = <React.Fragment>
+                {usersSection}
+                {consultConnectSection}
+            </React.Fragment>;
+        }
+
        return (
            <BaseDialog
-                className={classNames("mx_InviteDialog", {
+                className={classNames({
+                    mx_InviteDialog_transfer: this.props.kind === KIND_CALL_TRANSFER,
+                    mx_InviteDialog_other: this.props.kind !== KIND_CALL_TRANSFER,
                    mx_InviteDialog_hasFooter: !!footer,
                })}
                hasCancel={true}
@ -1445,30 +1581,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                title={title}
            >
                <div className='mx_InviteDialog_content'>
-                    <p className='mx_InviteDialog_helpText'>{helpText}</p>
-                    <div className='mx_InviteDialog_addressBar'>
-                        {this.renderEditor()}
-                        <div className='mx_InviteDialog_buttonAndSpinner'>
-                            <AccessibleButton
-                                kind="primary"
-                                onClick={goButtonFn}
-                                className='mx_InviteDialog_goButton'
-                                disabled={this.state.busy || !hasSelection}
-                            >
-                                {buttonText}
-                            </AccessibleButton>
-                            {spinner}
-                        </div>
-                    </div>
-                    {keySharingWarning}
-                    {this.renderIdentityServerWarning()}
-                    <div className='error'>{this.state.errorText}</div>
-                    <div className='mx_InviteDialog_userSections'>
-                        {this.renderSection('recents')}
-                        {this.renderSection('suggestions')}
-                        {extraSection}
-                    </div>
-                    {footer}
+                    {dialogContent}
                </div>
            </BaseDialog>
        );
--- a/src/components/views/elements/DialPadBackspaceButton.tsx
+++ 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<IProps> {
+    render() {
+        return <div className="mx_DialPadBackspaceButtonWrapper">
+            <AccessibleButton className="mx_DialPadBackspaceButton" onClick={this.props.onBackspacePress} />
+        </div>;
+    }
+}
--- 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<IButtonProps> {
            case DialPadButtonKind.Digit:
                return <AccessibleButton className="mx_DialPad_button" onClick={this.onClick}>
                    {this.props.digit}
+                    <div className="mx_DialPad_buttonSubText">
+                        {this.props.digitSubtext}
+                    </div>
                </AccessibleButton>;
-            case DialPadButtonKind.Delete:
-                return <AccessibleButton className="mx_DialPad_button mx_DialPad_deleteButton"
-                    onClick={this.onClick}
-                />;
            case DialPadButtonKind.Dial:
                return <AccessibleButton className="mx_DialPad_button mx_DialPad_dialButton" onClick={this.onClick} />;
        }
@ -55,7 +55,7 @@ class DialPadButton extends React.PureComponent<IButtonProps> {

 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<IProps> {
    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(<DialPadButton key={button} kind={DialPadButtonKind.Digit}
-                digit={button} onButtonPress={this.props.onDigitPress}
+                digit={button} digitSubtext={digitSubtext} onButtonPress={this.props.onDigitPress}
            />);
        }

-        if (this.props.hasDialAndDelete) {
-            buttonNodes.push(<DialPadButton key="del" kind={DialPadButtonKind.Delete}
-                onButtonPress={this.props.onDeletePress}
-            />);
+        if (this.props.hasDial) {
            buttonNodes.push(<DialPadButton key="dial" kind={DialPadButtonKind.Dial}
                onButtonPress={this.props.onDialPress}
            />);
--- 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<IProps, IState> {
    };

    render() {
+        const backspaceButton = (
+            <DialPadBackspaceButton onBackspacePress={this.onDeletePress} />
+        );
+
+        // Only show the backspace button if the field has content
+        let dialPadField;
+        if (this.state.value.length !== 0) {
+            dialPadField = <Field className="mx_DialPadModal_field" id="dialpad_number"
+                value={this.state.value}
+                autoFocus={true}
+                onChange={this.onChange}
+                postfixComponent={backspaceButton}
+            />;
+        } else {
+            dialPadField = <Field className="mx_DialPadModal_field" id="dialpad_number"
+                value={this.state.value}
+                autoFocus={true}
+                onChange={this.onChange}
+            />;
+        }
+
        return <div className="mx_DialPadModal">
+            <div>
+                <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
+            </div>
            <div className="mx_DialPadModal_header">
-                <div>
-                    <span className="mx_DialPadModal_title">{_t("Dial pad")}</span>
-                    <AccessibleButton className="mx_DialPadModal_cancel" onClick={this.onCancelClick} />
-                </div>
                <form onSubmit={this.onFormSubmit}>
-                    <Field className="mx_DialPadModal_field" id="dialpad_number"
-                        value={this.state.value} autoFocus={true}
-                        onChange={this.onChange}
-                    />
+                    {dialPadField}
                </form>
            </div>
-            <div className="mx_DialPadModal_horizSep" />
            <div className="mx_DialPadModal_dialPad">
-                <DialPad hasDialAndDelete={true}
+                <DialPad hasDial={true}
                    onDigitPress={this.onDigitPress}
                    onDeletePress={this.onDeletePress}
                    onDialPress={this.onDialPress}