Commit da63972a authored by Ronan Abhamon's avatar Ronan Abhamon

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

parent 41c388e6
<?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">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>settings_call_default</title>
<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 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>dialer_dtmf</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="settings_call_default" stroke="#FF5E00" stroke-width="1.5">
<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="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="08-INCALL-02-Simple-Chiffrement" transform="translate(-301.000000, -64.000000)" fill="#FF5E00">
<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>
</svg>
<?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">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>settings_call_default</title>
<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 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>dialer_dtmf</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="settings_call_default" stroke="#6B7A86" stroke-width="1.5">
<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="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="08-INCALL-02-Simple-Chiffrement" transform="translate(-301.000000, -64.000000)" fill="#6B7A86">
<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>
</svg>
<?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">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>settings_call_default</title>
<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 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>dialer_dtmf</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="settings_call_default" stroke="#FF5E00" stroke-width="1.5">
<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="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="08-INCALL-02-Simple-Chiffrement" transform="translate(-301.000000, -64.000000)" fill="#FF5E00">
<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>
</svg>
......@@ -62,34 +62,45 @@ Rectangle {
Layout.rightMargin: CallStyle.header.rightMargin
Layout.preferredHeight: CallStyle.header.contactDescription.height
ActionButton {
id: callQuality
ActionBar {
id: leftActions
anchors.left: parent.left
icon: 'call_quality_0'
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
Timer {
interval: 5000
repeat: true
running: true
triggeredOnStart: true
onClicked: callStatistics.open()
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 {
id: callStatistics
relativeTo: callQuality
relativeY: CallStyle.header.stats.relativeY
}
}
call: incall.call
width: container.width
ActionButton {
icon: 'tel_keypad'
relativeTo: callQuality
relativeY: CallStyle.header.stats.relativeY
onClicked: telKeypad.visible = !telKeypad.visible
}
}
......@@ -102,7 +113,7 @@ Rectangle {
username: LinphoneUtils.getContactUsername(_sipAddressObserver.contact || sipAddress)
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 {
// -----------------------------------------------------------------------
ActionBar {
id: cameraActions
id: rightActions
anchors.right: parent.right
iconSize: CallStyle.header.iconSize
ActionButton {
icon: 'tel_keypad'
onClicked: telKeypad.visible = !telKeypad.visible
}
ActionButton {
icon: 'screenshot'
visible: incall.call.videoEnabled
......
......@@ -115,30 +115,40 @@ Window {
Layout.preferredHeight: CallStyle.header.contactDescription.height
Layout.rightMargin: CallStyle.header.rightMargin
Icon {
id: callQuality
ActionBar {
anchors.left: parent.left
icon: 'call_quality_0'
iconSize: CallStyle.header.iconSize
visible: !hideButtons
// See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73
Timer {
interval: 5000
repeat: true
running: true
triggeredOnStart: true
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
)
Icon {
id: callQuality
icon: 'call_quality_0'
iconSize: parent.iconSize
// See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73
Timer {
interval: 5000
repeat: true
running: true
triggeredOnStart: true
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 {
iconSize: CallStyle.header.iconSize
visible: !hideButtons
ActionButton {
icon: 'tel_keypad'
onClicked: telKeypad.visible = !telKeypad.visible
}
ActionButton {
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