Transfer by Dialpad

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,19 +21,99 @@ limitations under the License.
     padding: 0 0 0 16px;
     display: flex;
     flex-direction: column;
-    position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     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;
+    }
+
+    .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: 22px;
+        height: 22px;
+    }
+}
+
 .mx_TabbedView_tabLabels {
-    width: 170px;
-    max-width: 170px;
     color: $tab-label-fg-color;
-    position: fixed;
 }
 
 .mx_TabbedView_tabLabel {
@@ -46,43 +127,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;
     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
 }
 

res/css/views/dialogs/_InviteDialog.scss

@@ -286,14 +286,31 @@ 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
+}
+
+.mx_InviteDialog_transfer {
+    width: 496px;
+    height: 466px;
     flex-direction: column;
 
     .mx_InviteDialog_content {
+        flex-direction: column;
+
+        .mx_TabbedView {
+            height: calc(100% - 40px);
+        }
         overflow: hidden;
     }
 }
@@ -302,7 +319,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 {
@@ -316,3 +332,33 @@ limitations under the License.
 .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
     padding: 0;
 }
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
+    border-top: 0px;
+    border-left: 0px;
+    border-right: 0px;
+    border-radius: 0px;
+
+    input {
+        font-size: 18px;
+        font-weight: 600;
+    }
+}
+
+.mx_InviteDialog_dialPad {
+    width: 224px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_InviteDialog_transferButton {
+    float: right;
+}
+
+.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');
+}

res/css/views/voip/_DialPad.scss

@@ -30,6 +30,8 @@ limitations under the License.
     text-align: center;
     vertical-align: middle;
     line-height: 40px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_DialPad_deleteButton, .mx_DialPad_dialButton {

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");
 

src/components/structures/TabbedView.tsx

@@ -21,6 +21,7 @@ import {_t} from '../../languageHandler';
 import * as sdk from "../../index";
 import AutoHideScrollbar from './AutoHideScrollbar';
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import classNames from "classnames";
 
 /**
  * Represents a tab for the TabbedView.
@@ -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");
@@ -121,8 +134,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>

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -54,7 +54,7 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
             </div>
             <div className="mx_DialPadContextMenu_horizSep" />
             <div className="mx_DialPadContextMenu_dialPad">
-                <Dialpad onDigitPress={this.onDigitPress} hasDialAndDelete={false} />
+                <Dialpad onDigitPress={this.onDigitPress} hasDial={false} hasDelete={false} />
             </div>
         </ContextMenu>;
     }