numericpad item

This commit is contained in:
Gaelle Braud 2024-09-19 14:48:53 +02:00
parent 34e5a28482
commit 4170e1d5af
7 changed files with 274 additions and 223 deletions

View file

@ -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

View file

@ -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
}
}
}
}

View file

@ -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 {

View file

@ -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)}
}
}

View file

@ -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 {

View file

@ -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

View file

@ -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