mainview: add sip input panel

Add sip input panel to be able to use DTMF functionalities.

Gitlab: #18
Change-Id: Iaa53ae2b34d9ce0d5cf19aa82dd41a5607203c62
diff --git a/src/mainview/components/CallOverlay.qml b/src/mainview/components/CallOverlay.qml
index 75774d3..1f2ed4e 100644
--- a/src/mainview/components/CallOverlay.qml
+++ b/src/mainview/components/CallOverlay.qml
@@ -110,6 +110,12 @@
 
     anchors.fill: parent
 
+    SipInputPanel {
+        id: sipInputPanel
+
+        x: callOverlayRect.width / 2 - sipInputPanel.width / 2
+        y: callOverlayRect.height / 2 - sipInputPanel.height / 2
+    }
 
     /*
      * Timer to decide when overlay fade out.
diff --git a/src/mainview/components/CallOverlayButtonGroup.qml b/src/mainview/components/CallOverlayButtonGroup.qml
index c360a7c..107ab9e 100644
--- a/src/mainview/components/CallOverlayButtonGroup.qml
+++ b/src/mainview/components/CallOverlayButtonGroup.qml
@@ -50,8 +50,6 @@
         root.isSip = isSIP
         noVideoButton.visible = !isAudioOnly
         addToConferenceButton.visible = !isSIP && isMaster
-        transferCallButton.visible = isSIP
-        sipInputPanelButton.visible = isSIP
 
         noMicButton.checked = isAudioMuted
         noVideoButton.checked = isVideoMuted
diff --git a/src/mainview/components/CallViewContextMenu.qml b/src/mainview/components/CallViewContextMenu.qml
index 23da3fd..2deeeaa 100644
--- a/src/mainview/components/CallViewContextMenu.qml
+++ b/src/mainview/components/CallViewContextMenu.qml
@@ -113,6 +113,23 @@
     }
 
     GeneralMenuItem {
+        id: showSipInputPanelButton
+
+        visible: isSIP
+        height: isSIP? undefined : 0
+
+        itemName: qsTr("Sip Input Panel")
+        iconSource: "qrc:/images/icons/ic_keypad.svg"
+        leftBorderWidth: commonBorderWidth
+        rightBorderWidth: commonBorderWidth
+
+        onClicked: {
+            root.close()
+            sipInputPanel.open()
+        }
+    }
+
+    GeneralMenuItem {
         id: transferCallButton
 
         visible: isSIP
diff --git a/src/mainview/components/SipInputPanel.qml b/src/mainview/components/SipInputPanel.qml
new file mode 100644
index 0000000..8d547a2
--- /dev/null
+++ b/src/mainview/components/SipInputPanel.qml
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls.Universal 2.12
+import net.jami.Models 1.0
+
+import "../../commoncomponents"
+
+/*
+ * SipInputPanel is a key pad that is designed to be
+ * used in sip calls.
+ */
+Popup {
+    id: sipInputPanelPopUp
+
+    /*
+     * Space between sipInputPanelRect and grid layout
+     */
+    property int sipPanelPadding: 20
+
+    contentWidth: sipInputPanelRectGridLayout.implicitWidth + 20
+    contentHeight: sipInputPanelRectGridLayout.implicitHeight + 20
+
+    padding: 0
+
+    modal: true
+
+    contentItem: Rectangle {
+        id: sipInputPanelRect
+
+        radius: 10
+
+        GridLayout {
+            id: sipInputPanelRectGridLayout
+
+            anchors.centerIn: parent
+
+            columns: 4
+
+            Repeater {
+                id: sipInputPanelRectGridLayoutRepeater
+                model: ["1", "2", "3", "A", "4", "5", "6", "B", "7",
+                        "8", "9", "C", "*", "0", "#", "D"]
+
+                HoverableButton {
+                    id: sipInputPanelButton
+
+                    Layout.preferredWidth: 30
+                    Layout.preferredHeight: 30
+
+                    radius: 30
+                    buttonText: modelData
+                    buttonTextColor: "white"
+                    checkable: false
+                    backgroundColor: JamiTheme.sipInputButtonBackgroundColor
+                    onEnterColor: JamiTheme.sipInputButtonHoverColor
+                    onExitColor: JamiTheme.sipInputButtonBackgroundColor
+                    onPressColor: JamiTheme.sipInputButtonPressColor
+                    onReleaseColor: JamiTheme.sipInputButtonHoverColor
+
+                    toolTipText: modelData
+
+                    onClicked: {
+                        CallAdapter.sipInputPanelPlayDTMF(modelData)
+                    }
+                }
+            }
+        }
+    }
+
+    background: Rectangle {
+        color: "transparent"
+    }
+}