Skip to content

L
linphone-desktop
Commit da63972a authored by Ronan Abhamon's avatar Ronan Abhamon
Browse files
Options

feat(ui/views/App/Calls/Incall): update with correct icons, and add a `leftActions` bar

parent 41c388e6
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 69 deletions
linphone-desktop/assets/images/tel_keypad_hovered.svg
View file @ da63972a
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="12px" height="13px" viewBox="0 0 12 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>settings_call_default</title> <title>dialer_dtmf</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="settings_call_default" stroke="#FF5E00" stroke-width="1.5"> <g id="08-INCALL-02-Simple-Chiffrement" transform="translate(-301.000000, -64.000000)" fill="#FF5E00">
<path d="M4.55461126,14.3889991 L4.61101441,14.4450242 C7.3002852,17.1350119 12.0969113,18.7974809 15.4512283,17.6111264 L17.995659,14.2747867 L14.5299113,10.8085083 L11.3593468,13.4904363 L8.46175774,10.5924679 L8.4061407,10.5364429 L5.50894471,7.63847454 L8.18956832,4.46588524 L4.7251964,1 L1.38876333,3.54530555 C0.202724956,6.90169626 1.8647509,11.6984217 4.55461126,14.3889991 Z" id="call_icon"></path> <g id="dialer_dtmf" transform="translate(301.000000, 64.000000)">
<g id="Group-2">
<rect id="Rectangle" x="0" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle" x="0" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle" x="0" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
</g>
</g>
</g> </g>
</g> </g>
</svg> </svg>
linphone-desktop/assets/images/tel_keypad_normal.svg
View file @ da63972a
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="12px" height="13px" viewBox="0 0 12 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>settings_call_default</title> <title>dialer_dtmf</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="settings_call_default" stroke="#6B7A86" stroke-width="1.5"> <g id="08-INCALL-02-Simple-Chiffrement" transform="translate(-301.000000, -64.000000)" fill="#6B7A86">
<path d="M4.55461126,14.3889991 L4.61101441,14.4450242 C7.3002852,17.1350119 12.0969113,18.7974809 15.4512283,17.6111264 L17.995659,14.2747867 L14.5299113,10.8085083 L11.3593468,13.4904363 L8.46175774,10.5924679 L8.4061407,10.5364429 L5.50894471,7.63847454 L8.18956832,4.46588524 L4.7251964,1 L1.38876333,3.54530555 C0.202724956,6.90169626 1.8647509,11.6984217 4.55461126,14.3889991 Z" id="call_icon"></path> <g id="dialer_dtmf" transform="translate(301.000000, 64.000000)">
<g id="Group-2">
<rect id="Rectangle" x="0" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle" x="0" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle" x="0" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
</g>
</g>
</g> </g>
</g> </g>
</svg> </svg>
linphone-desktop/assets/images/tel_keypad_pressed.svg
View file @ da63972a
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="12px" height="13px" viewBox="0 0 12 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>settings_call_default</title> <title>dialer_dtmf</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="settings_call_default" stroke="#FF5E00" stroke-width="1.5"> <g id="08-INCALL-02-Simple-Chiffrement" transform="translate(-301.000000, -64.000000)" fill="#FF5E00">
<path d="M4.55461126,14.3889991 L4.61101441,14.4450242 C7.3002852,17.1350119 12.0969113,18.7974809 15.4512283,17.6111264 L17.995659,14.2747867 L14.5299113,10.8085083 L11.3593468,13.4904363 L8.46175774,10.5924679 L8.4061407,10.5364429 L5.50894471,7.63847454 L8.18956832,4.46588524 L4.7251964,1 L1.38876333,3.54530555 C0.202724956,6.90169626 1.8647509,11.6984217 4.55461126,14.3889991 Z" id="call_icon"></path> <g id="dialer_dtmf" transform="translate(301.000000, 64.000000)">
<g id="Group-2">
<rect id="Rectangle" x="0" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="0.295454545" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle" x="0" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="4.66520244" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle" x="0" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy" x="4.23529412" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
<rect id="Rectangle-Copy-2" x="8.47058824" y="9.03495034" width="3.52941176" height="3.64145658" rx="1"></rect>
</g>
</g>
</g> </g>
</g> </g>
</svg> </svg>
linphone-desktop/ui/views/App/Calls/Incall.qml
View file @ da63972a
...@@ -62,34 +62,45 @@ Rectangle { ...@@ -62,34 +62,45 @@ Rectangle {
Layout.rightMargin: CallStyle.header.rightMargin Layout.rightMargin: CallStyle.header.rightMargin
Layout.preferredHeight: CallStyle.header.contactDescription.height Layout.preferredHeight: CallStyle.header.contactDescription.height
ActionButton { ActionBar {
id: callQuality id: leftActions
anchors.left: parent.left anchors.left: parent.left
icon: 'call_quality_0'
iconSize: CallStyle.header.iconSize iconSize: CallStyle.header.iconSize
useStates: false
onClicked: callStatistics.open() ActionButton {
id: callQuality
icon: 'call_quality_0'
useStates: false
// See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73 onClicked: callStatistics.open()
Timer {
interval: 5000
repeat: true
running: true
triggeredOnStart: true
onTriggered: Logic.updateCallQualityIcon() // See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73
} Timer {
interval: 5000
repeat: true
running: true
triggeredOnStart: true
onTriggered: Logic.updateCallQualityIcon()
}
CallStatistics {
id: callStatistics
call: incall.call
width: container.width
CallStatistics { relativeTo: callQuality
id: callStatistics relativeY: CallStyle.header.stats.relativeY
}
}
call: incall.call ActionButton {
width: container.width icon: 'tel_keypad'
relativeTo: callQuality onClicked: telKeypad.visible = !telKeypad.visible
relativeY: CallStyle.header.stats.relativeY
} }
} }
...@@ -102,7 +113,7 @@ Rectangle { ...@@ -102,7 +113,7 @@ Rectangle {
username: LinphoneUtils.getContactUsername(_sipAddressObserver.contact || sipAddress) username: LinphoneUtils.getContactUsername(_sipAddressObserver.contact || sipAddress)
height: parent.height height: parent.height
width: parent.width - cameraActions.width - callQuality.width - CallStyle.header.contactDescription.width width: parent.width - rightActions.width - leftActions.width - CallStyle.header.contactDescription.width
} }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
...@@ -110,17 +121,11 @@ Rectangle { ...@@ -110,17 +121,11 @@ Rectangle {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
ActionBar { ActionBar {
id: cameraActions id: rightActions
anchors.right: parent.right anchors.right: parent.right
iconSize: CallStyle.header.iconSize iconSize: CallStyle.header.iconSize
ActionButton {
icon: 'tel_keypad'
onClicked: telKeypad.visible = !telKeypad.visible
}
ActionButton { ActionButton {
icon: 'screenshot' icon: 'screenshot'
visible: incall.call.videoEnabled visible: incall.call.videoEnabled
......
linphone-desktop/ui/views/App/Calls/IncallFullscreenWindow.qml
View file @ da63972a
...@@ -115,30 +115,40 @@ Window { ...@@ -115,30 +115,40 @@ Window {
Layout.preferredHeight: CallStyle.header.contactDescription.height Layout.preferredHeight: CallStyle.header.contactDescription.height
Layout.rightMargin: CallStyle.header.rightMargin Layout.rightMargin: CallStyle.header.rightMargin
Icon { ActionBar {
id: callQuality
anchors.left: parent.left anchors.left: parent.left
icon: 'call_quality_0'
iconSize: CallStyle.header.iconSize iconSize: CallStyle.header.iconSize
visible: !hideButtons visible: !hideButtons
// See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73 Icon {
Timer { id: callQuality
interval: 5000
repeat: true icon: 'call_quality_0'
running: true iconSize: parent.iconSize
triggeredOnStart: true
// See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73
onTriggered: { Timer {
var quality = call.quality interval: 5000
callQuality.icon = 'call_quality_' + ( repeat: true
// Note: `quality` is in the [0, 5] interval. running: true
// It's necessary to map in the `call_quality_` interval. ([0, 3]) triggeredOnStart: true
quality >= 0 ? Math.round(quality / (5 / 3)) : 0
) onTriggered: {
var quality = call.quality
callQuality.icon = 'call_quality_' + (
// Note: `quality` is in the [0, 5] interval.
// It's necessary to map in the `call_quality_` interval. ([0, 3])
quality >= 0 ? Math.round(quality / (5 / 3)) : 0
)
}
} }
} }
ActionButton {
icon: 'tel_keypad'
onClicked: telKeypad.visible = !telKeypad.visible
}
} }
// --------------------------------------------------------------------- // ---------------------------------------------------------------------
...@@ -181,12 +191,6 @@ Window { ...@@ -181,12 +191,6 @@ Window {
iconSize: CallStyle.header.iconSize iconSize: CallStyle.header.iconSize
visible: !hideButtons visible: !hideButtons
ActionButton {
icon: 'tel_keypad'
onClicked: telKeypad.visible = !telKeypad.visible
}
ActionButton { ActionButton {
icon: 'screenshot' icon: 'screenshot'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023