From 4170e1d5af412b88cbe58b4ef6b43ed0dcced57e Mon Sep 17 00:00:00 2001 From: Gaelle Braud Date: Thu, 19 Sep 2024 14:48:53 +0200 Subject: [PATCH] numericpad item --- Linphone/view/CMakeLists.txt | 1 + Linphone/view/Control/Input/NumericPad.qml | 352 ++++++++---------- Linphone/view/Control/Input/SearchBar.qml | 11 +- .../view/Control/Popup/NumericPadPopup.qml | 81 ++++ Linphone/view/Page/Form/Call/NewCallForm.qml | 4 +- Linphone/view/Page/Main/Call/CallPage.qml | 8 +- .../view/Page/Window/Call/CallsWindow.qml | 40 +- 7 files changed, 274 insertions(+), 223 deletions(-) create mode 100644 Linphone/view/Control/Popup/NumericPadPopup.qml diff --git a/Linphone/view/CMakeLists.txt b/Linphone/view/CMakeLists.txt index 919faa54e..600556e47 100644 --- a/Linphone/view/CMakeLists.txt +++ b/Linphone/view/CMakeLists.txt @@ -63,6 +63,7 @@ list(APPEND _LINPHONEAPP_QML_FILES view/Control/Popup/DesktopPopup.qml view/Control/Popup/InformationPopup.qml + view/Control/Popup/NumericPadPopup.qml view/Control/Popup/Popup.qml view/Control/Popup/Dialog/AuthenticationDialog.qml view/Control/Popup/Dialog/Dialog.qml diff --git a/Linphone/view/Control/Input/NumericPad.qml b/Linphone/view/Control/Input/NumericPad.qml index 4eae2c7d5..3600cd030 100644 --- a/Linphone/view/Control/Input/NumericPad.qml +++ b/Linphone/view/Control/Input/NumericPad.qml @@ -6,233 +6,173 @@ import Linphone import UtilsCpp import LinphoneCallsCpp -Control.Popup { +FocusScope{ id: mainItem - closePolicy: Control.Popup.CloseOnEscape - leftPadding: 72 * DefaultStyle.dp - rightPadding: 72 * DefaultStyle.dp - topPadding: 41 * DefaultStyle.dp - bottomPadding: 18 * DefaultStyle.dp - property bool closeButtonVisible: true - property bool roundedBottom: false + property var currentCall + onButtonPressed: (text) => { if (currentCall) currentCall.core.lSendDtmf(text) else UtilsCpp.playDtmf(text) } - onOpened: numPad.forceActiveFocus() signal buttonPressed(string text) signal launchCall() signal wipe() - background: Item { + Layout.GridLayout { + id: numPadGrid anchors.fill: parent - Rectangle { - id: numPadBackground - width: parent.width - height: parent.height - color: DefaultStyle.grey_100 - radius: 20 * DefaultStyle.dp - } - MultiEffect { - id: effect - anchors.fill: numPadBackground - source: numPadBackground - shadowEnabled: true - shadowColor: DefaultStyle.grey_1000 - shadowOpacity: 0.1 - shadowBlur: 1 - z: -1 - } - Rectangle { - width: parent.width - height: parent.height / 2 - anchors.bottom: parent.bottom - color: DefaultStyle.grey_100 - visible: !mainItem.roundedBottom - } - Button { - id: closeButton - visible: mainItem.closeButtonVisible - anchors.top: parent.top - anchors.right: parent.right - anchors.topMargin: 10 * DefaultStyle.dp - anchors.rightMargin: 10 * DefaultStyle.dp - background: Item { - anchors.fill: parent - visible: false - } - icon.source: AppIcons.closeX - width: 24 * DefaultStyle.dp - height: 24 * DefaultStyle.dp - icon.width: 24 * DefaultStyle.dp - icon.height: 24 * DefaultStyle.dp - onClicked: mainItem.close() - } - } - contentItem: FocusScope{ - id: numPad - anchors.fill: parent - anchors.topMargin: 41 * DefaultStyle.dp - anchors.bottomMargin: 18 * DefaultStyle.dp - anchors.rightMargin: 72 * DefaultStyle.dp - anchors.leftMargin: 72 * DefaultStyle.dp - - Layout.GridLayout { - id: numPadGrid - anchors.fill: parent - columns: 3 - columnSpacing: 40 * DefaultStyle.dp - rowSpacing: 10 * DefaultStyle.dp - function getButtonAt(index){ - index = (index+15) % 15 - if(index >= 0){ - if( index < 9){ - return numPadRepeater.itemAt(index) - }else if( index < 12){ - return digitRepeater.itemAt(index-9) - }else if (index < 14){ - return launchCallButton - }else if( index < 15){ - return eraseButton - } + columns: 3 + columnSpacing: 40 * DefaultStyle.dp + rowSpacing: 10 * DefaultStyle.dp + function getButtonAt(index){ + index = (index+15) % 15 + if(index >= 0){ + if( index < 9){ + return numPadRepeater.itemAt(index) + }else if( index < 12){ + return digitRepeater.itemAt(index-9) + }else if (index < 14){ + return launchCallButton + }else if( index < 15){ + return eraseButton } } - Repeater { - id: numPadRepeater - model: 9 - Button { - id: numPadButton - Layout.Layout.alignment: Qt.AlignHCenter - required property int index - implicitWidth: 60 * DefaultStyle.dp - implicitHeight: 60 * DefaultStyle.dp - focus: index == 4 - onClicked: { - mainItem.buttonPressed(innerText.text) - } - KeyNavigation.left: numPadGrid.getButtonAt(index - 1) - KeyNavigation.right: numPadGrid.getButtonAt(index + 1) - KeyNavigation.up: numPadGrid.getButtonAt(index - 3) - KeyNavigation.down: numPadGrid.getButtonAt(index + 3) - background: Rectangle { - anchors.fill: parent - color: numPadButton.down || numPadButton.shadowEnabled? DefaultStyle.numericPadPressedButtonColor : DefaultStyle.grey_0 - radius: 71 * DefaultStyle.dp - } - contentItem: Text { - id: innerText - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - anchors.centerIn: parent - text: index + 1 - font { - pixelSize: 32 * DefaultStyle.dp - weight: 400 * DefaultStyle.dp - } - } - } - } - Repeater { - id: digitRepeater - model: [ - {pressText: "*"}, - {pressText: "0", longPressText: "+"}, - {pressText: "#"} - ] - Button { - id: digitButton - Layout.Layout.alignment: Qt.AlignHCenter - implicitWidth: 60 * DefaultStyle.dp - implicitHeight: 60 * DefaultStyle.dp - - onClicked: mainItem.buttonPressed(pressText.text) - onPressAndHold: mainItem.buttonPressed(longPressText.text) - - KeyNavigation.left: numPadGrid.getButtonAt((index - 1)+9) - KeyNavigation.right: numPadGrid.getButtonAt((index + 1)+9) - KeyNavigation.up: numPadGrid.getButtonAt((index - 3)+9) - KeyNavigation.down: numPadGrid.getButtonAt((index + 3)+9) - - background: Rectangle { - anchors.fill: parent - color: digitButton.down || digitButton.shadowEnabled? DefaultStyle.numericPadPressedButtonColor : DefaultStyle.grey_0 - radius: 71 * DefaultStyle.dp - } - contentItem: Item { - anchors.fill: parent - Text { - id: pressText - height: contentHeight - anchors.left: parent.left - anchors.right: parent.right - horizontalAlignment: Text.AlignHCenter - Component.onCompleted: {if (modelData.longPressText === undefined) anchors.centerIn= parent} - text: modelData.pressText - font.pixelSize: 32 * DefaultStyle.dp - } - Text { - id: longPressText - height: contentHeight - anchors.left: parent.left - anchors.right: parent.right - y: digitButton.height/2 - horizontalAlignment: Text.AlignHCenter - visible: modelData.longPressText ? modelData.longPressText.length > 0 : false - text: modelData.longPressText ? modelData.longPressText : "" - font.pixelSize: 22 * DefaultStyle.dp - } - } - } - } - Item { - // Invisible item to move the last two buttons to the right - } + } + Repeater { + id: numPadRepeater + model: 9 Button { - id: launchCallButton - implicitWidth: 75 * DefaultStyle.dp - implicitHeight: 55 * DefaultStyle.dp + id: numPadButton Layout.Layout.alignment: Qt.AlignHCenter - icon.source: AppIcons.phone - icon.width: 32 * DefaultStyle.dp - icon.height: 32 * DefaultStyle.dp - contentImageColor: DefaultStyle.grey_0 - - onClicked: mainItem.launchCall() - - KeyNavigation.left: eraseButton - KeyNavigation.right: eraseButton - KeyNavigation.up: numPadGrid.getButtonAt(10) - KeyNavigation.down: numPadGrid.getButtonAt(1) - + required property int index + implicitWidth: 60 * DefaultStyle.dp + implicitHeight: 60 * DefaultStyle.dp + focus: index == 4 + onClicked: { + mainItem.buttonPressed(innerText.text) + } + KeyNavigation.left: numPadGrid.getButtonAt(index - 1) + KeyNavigation.right: numPadGrid.getButtonAt(index + 1) + KeyNavigation.up: numPadGrid.getButtonAt(index - 3) + KeyNavigation.down: numPadGrid.getButtonAt(index + 3) background: Rectangle { anchors.fill: parent - color: DefaultStyle.success_500main + color: numPadButton.down || numPadButton.shadowEnabled? DefaultStyle.numericPadPressedButtonColor : DefaultStyle.grey_0 radius: 71 * DefaultStyle.dp } - } - Button { - id: eraseButton - leftPadding: 5 * DefaultStyle.dp - rightPadding: 5 * DefaultStyle.dp - topPadding: 5 * DefaultStyle.dp - bottomPadding: 5 * DefaultStyle.dp - Layout.Layout.alignment: Qt.AlignHCenter - icon.source: AppIcons.backspaceFill - icon.width: 38 * DefaultStyle.dp - icon.height: 38 * DefaultStyle.dp - - onClicked: mainItem.wipe() - - KeyNavigation.left: launchCallButton - KeyNavigation.right: launchCallButton - KeyNavigation.up: numPadGrid.getButtonAt(11) - KeyNavigation.down: numPadGrid.getButtonAt(1) - - background: Item { - visible: false + contentItem: Text { + id: innerText + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + anchors.centerIn: parent + text: index + 1 + font { + pixelSize: 32 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } } } + Repeater { + id: digitRepeater + model: [ + {pressText: "*"}, + {pressText: "0", longPressText: "+"}, + {pressText: "#"} + ] + Button { + id: digitButton + Layout.Layout.alignment: Qt.AlignHCenter + implicitWidth: 60 * DefaultStyle.dp + implicitHeight: 60 * DefaultStyle.dp + + onClicked: mainItem.buttonPressed(pressText.text) + onPressAndHold: mainItem.buttonPressed(longPressText.text) + + KeyNavigation.left: numPadGrid.getButtonAt((index - 1)+9) + KeyNavigation.right: numPadGrid.getButtonAt((index + 1)+9) + KeyNavigation.up: numPadGrid.getButtonAt((index - 3)+9) + KeyNavigation.down: numPadGrid.getButtonAt((index + 3)+9) + + background: Rectangle { + anchors.fill: parent + color: digitButton.down || digitButton.shadowEnabled? DefaultStyle.numericPadPressedButtonColor : DefaultStyle.grey_0 + radius: 71 * DefaultStyle.dp + } + contentItem: Item { + anchors.fill: parent + Text { + id: pressText + height: contentHeight + anchors.left: parent.left + anchors.right: parent.right + horizontalAlignment: Text.AlignHCenter + Component.onCompleted: {if (modelData.longPressText === undefined) anchors.centerIn= parent} + text: modelData.pressText + font.pixelSize: 32 * DefaultStyle.dp + } + Text { + id: longPressText + height: contentHeight + anchors.left: parent.left + anchors.right: parent.right + y: digitButton.height/2 + horizontalAlignment: Text.AlignHCenter + visible: modelData.longPressText ? modelData.longPressText.length > 0 : false + text: modelData.longPressText ? modelData.longPressText : "" + font.pixelSize: 22 * DefaultStyle.dp + } + } + } + } + Item { + // Invisible item to move the last two buttons to the right + } + Button { + id: launchCallButton + implicitWidth: 75 * DefaultStyle.dp + implicitHeight: 55 * DefaultStyle.dp + Layout.Layout.alignment: Qt.AlignHCenter + icon.source: AppIcons.phone + icon.width: 32 * DefaultStyle.dp + icon.height: 32 * DefaultStyle.dp + contentImageColor: DefaultStyle.grey_0 + + onClicked: mainItem.launchCall() + + KeyNavigation.left: eraseButton + KeyNavigation.right: eraseButton + KeyNavigation.up: numPadGrid.getButtonAt(10) + KeyNavigation.down: numPadGrid.getButtonAt(1) + + background: Rectangle { + anchors.fill: parent + color: DefaultStyle.success_500main + radius: 71 * DefaultStyle.dp + } + } + Button { + id: eraseButton + leftPadding: 5 * DefaultStyle.dp + rightPadding: 5 * DefaultStyle.dp + topPadding: 5 * DefaultStyle.dp + bottomPadding: 5 * DefaultStyle.dp + Layout.Layout.alignment: Qt.AlignHCenter + icon.source: AppIcons.backspaceFill + icon.width: 38 * DefaultStyle.dp + icon.height: 38 * DefaultStyle.dp + + onClicked: mainItem.wipe() + + KeyNavigation.left: launchCallButton + KeyNavigation.right: launchCallButton + KeyNavigation.up: numPadGrid.getButtonAt(11) + KeyNavigation.down: numPadGrid.getButtonAt(1) + + background: Item { + visible: false + } + } } } diff --git a/Linphone/view/Control/Input/SearchBar.qml b/Linphone/view/Control/Input/SearchBar.qml index 2761d4678..674f903c7 100644 --- a/Linphone/view/Control/Input/SearchBar.qml +++ b/Linphone/view/Control/Input/SearchBar.qml @@ -14,23 +14,24 @@ FocusScope { property string text: textField.text property bool magnifierVisible: true property var validator: RegularExpressionValidator{} - property Control.Popup numericPad + property Control.Popup numericPadPopup property alias numericPadButton: dialerButton readonly property bool hasActiveFocus: textField.activeFocus property alias color: backgroundItem.color - onVisibleChanged: if (!visible && numericPad) numericPad.close() + onVisibleChanged: if (!visible && numericPadPopup) numericPadPopup.close() function clearText() { textField.text = "" } Connections { - enabled: numericPad != undefined - target: numericPad ? numericPad : null + enabled: numericPadPopup != undefined + target: numericPadPopup ? numericPadPopup : null function onAboutToHide() { mainItem.numericPadButton.checked = false } function onAboutToShow() { mainItem.numericPadButton.checked = true } function onButtonPressed(text) { + console.log("text", text) textField.text += text } function onWipe(){ textField.text = textField.text.slice(0, -1)} @@ -87,7 +88,7 @@ FocusScope { } Button { id: dialerButton - visible: numericPad != undefined && textField.text.length === 0 + visible: numericPadPopup != undefined && textField.text.length === 0 checkable: true checked: false background: Rectangle { diff --git a/Linphone/view/Control/Popup/NumericPadPopup.qml b/Linphone/view/Control/Popup/NumericPadPopup.qml new file mode 100644 index 000000000..5544822be --- /dev/null +++ b/Linphone/view/Control/Popup/NumericPadPopup.qml @@ -0,0 +1,81 @@ +import QtQuick +import QtQuick.Controls as Control +import QtQuick.Layouts as Layout +import QtQuick.Effects +import Linphone +import UtilsCpp +import LinphoneCallsCpp + +Control.Popup { + id: mainItem + closePolicy: Control.Popup.CloseOnEscape + leftPadding: 72 * DefaultStyle.dp + rightPadding: 72 * DefaultStyle.dp + topPadding: 41 * DefaultStyle.dp + bottomPadding: 18 * DefaultStyle.dp + property bool closeButtonVisible: true + property bool roundedBottom: false + property var currentCall + onOpened: numPad.forceActiveFocus() + signal buttonPressed(string text) + signal launchCall() + signal wipe() + + background: Item { + anchors.fill: parent + Rectangle { + id: numPadBackground + width: parent.width + height: parent.height + color: DefaultStyle.grey_100 + radius: 20 * DefaultStyle.dp + } + MultiEffect { + id: effect + anchors.fill: numPadBackground + source: numPadBackground + shadowEnabled: true + shadowColor: DefaultStyle.grey_1000 + shadowOpacity: 0.1 + shadowBlur: 1 + z: -1 + } + Rectangle { + width: parent.width + height: parent.height / 2 + anchors.bottom: parent.bottom + color: DefaultStyle.grey_100 + visible: !mainItem.roundedBottom + } + Button { + id: closeButton + visible: mainItem.closeButtonVisible + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 10 * DefaultStyle.dp + anchors.rightMargin: 10 * DefaultStyle.dp + background: Item { + anchors.fill: parent + visible: false + } + icon.source: AppIcons.closeX + width: 24 * DefaultStyle.dp + height: 24 * DefaultStyle.dp + icon.width: 24 * DefaultStyle.dp + icon.height: 24 * DefaultStyle.dp + onClicked: mainItem.close() + } + } + contentItem: NumericPad{ + id: numPad + currentCall: currentCall + anchors.fill: parent + anchors.topMargin: 41 * DefaultStyle.dp + anchors.bottomMargin: 18 * DefaultStyle.dp + anchors.rightMargin: 72 * DefaultStyle.dp + anchors.leftMargin: 72 * DefaultStyle.dp + onButtonPressed: (text) => { + console.log("BUTTON PRESSED NUMPAD") + mainItem.buttonPressed(text)} + } +} diff --git a/Linphone/view/Page/Form/Call/NewCallForm.qml b/Linphone/view/Page/Form/Call/NewCallForm.qml index bd1bcb8f9..feac8379d 100644 --- a/Linphone/view/Page/Form/Call/NewCallForm.qml +++ b/Linphone/view/Page/Form/Call/NewCallForm.qml @@ -14,7 +14,7 @@ FocusScope { property color searchBarBorderColor: "transparent" property alias searchBar: searchBar property FriendGui selectedContact - property NumericPad numPad + property NumericPadPopup numPadPopup signal callButtonPressed(string address) signal callSelectedContact() signal groupCallCreationRequested() @@ -40,7 +40,7 @@ FocusScope { color: mainItem.searchBarColor borderColor: mainItem.searchBarBorderColor placeholderText: qsTr("Rechercher un contact") - numericPad: mainItem.numPad + numericPadPopup: mainItem.numPadPopup KeyNavigation.down: grouCallButton } Flickable { diff --git a/Linphone/view/Page/Main/Call/CallPage.qml b/Linphone/view/Page/Main/Call/CallPage.qml index 76efde54c..4a4ffdf57 100644 --- a/Linphone/view/Page/Main/Call/CallPage.qml +++ b/Linphone/view/Page/Main/Call/CallPage.qml @@ -104,8 +104,8 @@ AbstractMainPage { anchors.left: parent.left anchors.right: parent.right height: 402 * DefaultStyle.dp - NumericPad { - id: numericPad + NumericPadPopup { + id: numericPadPopup width: parent.width height: parent.height visible: false @@ -495,7 +495,7 @@ AbstractMainPage { Layout.fillWidth: true Layout.fillHeight: true focus: true - numPad: numericPad + numPadPopup: numericPadPopup groupCallVisible: true searchBarColor: DefaultStyle.grey_100 //onSelectedContactChanged: mainWindow.startCallWithContact(selectedContact, false, callContactsList) @@ -511,7 +511,7 @@ AbstractMainPage { function onOpenNumPadRequest(){ if (!callContactsList.searchBar.numericPadButton.checked) callContactsList.searchBar.numericPadButton.checked = true} } Binding { - target: numericPad + target: numericPadPopup property: "visible" value: true when: callContactsList.searchBar.numericPadButton.checked diff --git a/Linphone/view/Page/Window/Call/CallsWindow.qml b/Linphone/view/Page/Window/Call/CallsWindow.qml index 294d7d22e..35e7ec530 100644 --- a/Linphone/view/Page/Window/Call/CallsWindow.qml +++ b/Linphone/view/Page/Window/Call/CallsWindow.qml @@ -563,7 +563,7 @@ AbstractWindow { } } NewCallForm { - id: callcontactslist + id: newCallForm anchors.fill: parent anchors.topMargin: 21 * DefaultStyle.dp anchors.leftMargin: 16 * DefaultStyle.dp @@ -572,7 +572,35 @@ AbstractWindow { searchBarColor: DefaultStyle.grey_0 searchBarBorderColor: DefaultStyle.grey_200 onSelectedContactChanged: { - if (selectedContact) mainWindow.transferCallToContact(mainWindow.call, selectedContact, callcontactslist) + if (selectedContact) mainWindow.transferCallToContact(mainWindow.call, selectedContact, newCallForm) + } + numPadPopup: numPadPopup + Binding { + target: numPadPopup + property: "visible" + value: true + when: newCallForm.searchBar.numericPadButton.checked + restoreMode: Binding.RestoreValue + } + + Item { + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + height: 402 * DefaultStyle.dp + NumericPadPopup { + id: numPadPopup + width: parent.width + roundedBottom: true + visible: false + leftPadding: 40 * DefaultStyle.dp + rightPadding: 40 * DefaultStyle.dp + topPadding: 41 * DefaultStyle.dp + bottomPadding: 18 * DefaultStyle.dp + onLaunchCall: { + UtilsCpp.createCall(dialerTextInput.text) + } + } } } } @@ -601,15 +629,15 @@ AbstractWindow { color: DefaultStyle.grey_0 borderColor: DefaultStyle.grey_200 placeholderText: "" - numericPad: numPad + numericPadPopup: numPadPopup numericPadButton.visible: false } Item { Layout.preferredWidth: parent.width - Layout.preferredHeight: numPad.height + Layout.preferredHeight: numPadPopup.height Layout.topMargin: 10 * DefaultStyle.dp - NumericPad { - id: numPad + NumericPadPopup { + id: numPadPopup width: parent.width closeButtonVisible: false roundedBottom: true