From fc6d5b79c4d54864c707dea802c21c43492ca44a Mon Sep 17 00:00:00 2001 From: Julien Wadel Date: Wed, 29 Jun 2022 19:47:19 +0200 Subject: [PATCH] Replace call quality percentage algorithm by a set of icons. Upgrade Popup with a delay in order to avoid instant reopening with clicked events. Change colors and checked behaviour of call statistics. Fix action buttons layout on calls and buttons sizes (dialpad/call quality) Add Participant view in video conference fullscreen mode and fix options toggle display. --- .../assets/images/call_quality_0_custom.svg | 67 ++++++ .../assets/images/call_quality_1_custom.svg | 75 +++++++ .../assets/images/call_quality_2_custom.svg | 83 +++++++ .../assets/images/call_quality_3_custom.svg | 91 ++++++++ .../assets/images/call_quality_4_custom.svg | 99 +++++++++ .../assets/images/call_quality_custom.svg | 81 ------- .../assets/images/participants_custom.svg | 18 +- linphone-app/resources.qrc | 6 +- .../ui/modules/Common/Popup/Popup.qml | 175 ++++++++------- .../modules/Linphone/Calls/CallStatistics.qml | 210 +++++++++--------- linphone-app/ui/views/App/Calls/Incall.qml | 16 +- .../App/Calls/IncallFullscreenWindow.qml | 17 +- .../ui/views/App/Calls/VideoConference.qml | 20 +- .../App/Calls/VideoConferenceFullscreen.qml | 35 ++- .../App/Styles/Calls/CallFullscreenStyle.qml | 35 ++- .../ui/views/App/Styles/Calls/CallStyle.qml | 35 ++- .../App/Styles/Calls/VideoConferenceStyle.qml | 35 ++- 17 files changed, 731 insertions(+), 367 deletions(-) create mode 100644 linphone-app/assets/images/call_quality_0_custom.svg create mode 100644 linphone-app/assets/images/call_quality_1_custom.svg create mode 100644 linphone-app/assets/images/call_quality_2_custom.svg create mode 100644 linphone-app/assets/images/call_quality_3_custom.svg create mode 100644 linphone-app/assets/images/call_quality_4_custom.svg delete mode 100644 linphone-app/assets/images/call_quality_custom.svg diff --git a/linphone-app/assets/images/call_quality_0_custom.svg b/linphone-app/assets/images/call_quality_0_custom.svg new file mode 100644 index 000000000..3d4d5fb61 --- /dev/null +++ b/linphone-app/assets/images/call_quality_0_custom.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + diff --git a/linphone-app/assets/images/call_quality_1_custom.svg b/linphone-app/assets/images/call_quality_1_custom.svg new file mode 100644 index 000000000..f9822a133 --- /dev/null +++ b/linphone-app/assets/images/call_quality_1_custom.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + diff --git a/linphone-app/assets/images/call_quality_2_custom.svg b/linphone-app/assets/images/call_quality_2_custom.svg new file mode 100644 index 000000000..5ee935b05 --- /dev/null +++ b/linphone-app/assets/images/call_quality_2_custom.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + diff --git a/linphone-app/assets/images/call_quality_3_custom.svg b/linphone-app/assets/images/call_quality_3_custom.svg new file mode 100644 index 000000000..7568f33bb --- /dev/null +++ b/linphone-app/assets/images/call_quality_3_custom.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + diff --git a/linphone-app/assets/images/call_quality_4_custom.svg b/linphone-app/assets/images/call_quality_4_custom.svg new file mode 100644 index 000000000..75808e3dc --- /dev/null +++ b/linphone-app/assets/images/call_quality_4_custom.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + diff --git a/linphone-app/assets/images/call_quality_custom.svg b/linphone-app/assets/images/call_quality_custom.svg deleted file mode 100644 index 0524cd0c3..000000000 --- a/linphone-app/assets/images/call_quality_custom.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - image/svg+xml - - call_quality_custom - - - - - - call_quality_custom - Created with Sketch. - - - - - - - - - diff --git a/linphone-app/assets/images/participants_custom.svg b/linphone-app/assets/images/participants_custom.svg index d0d62689a..c97edf312 100644 --- a/linphone-app/assets/images/participants_custom.svg +++ b/linphone-app/assets/images/participants_custom.svg @@ -4,8 +4,8 @@ height="80" version="1.1" id="svg8" - sodipodi:docname="conference_participants_custom.svg" - inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)" + sodipodi:docname="participants_custom.svg" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -23,18 +23,18 @@ showgrid="false" inkscape:zoom="4.232442" inkscape:cx="-17.602131" - inkscape:cy="66.982607" - inkscape:window-width="1852" - inkscape:window-height="1088" - inkscape:window-x="1983" - inkscape:window-y="355" - inkscape:window-maximized="0" + inkscape:cy="66.864472" + inkscape:window-width="1920" + inkscape:window-height="1043" + inkscape:window-x="1920" + inkscape:window-y="0" + inkscape:window-maximized="1" inkscape:current-layer="svg8" /> + transform="matrix(2.3076824,0,0,2.2226387,10.000172,20)"> diff --git a/linphone-app/resources.qrc b/linphone-app/resources.qrc index a12958040..8eafdeeae 100644 --- a/linphone-app/resources.qrc +++ b/linphone-app/resources.qrc @@ -22,7 +22,11 @@ assets/images/call_chat_unsecure_custom.svg assets/images/call_custom.svg assets/images/call_history_custom.svg - assets/images/call_quality_custom.svg + assets/images/call_quality_0_custom.svg + assets/images/call_quality_1_custom.svg + assets/images/call_quality_2_custom.svg + assets/images/call_quality_3_custom.svg + assets/images/call_quality_4_custom.svg assets/images/call_menu_custom.svg assets/images/call_sign_connected.svg assets/images/call_sign_ended.svg diff --git a/linphone-app/ui/modules/Common/Popup/Popup.qml b/linphone-app/ui/modules/Common/Popup/Popup.qml index 443932600..e8b59683e 100644 --- a/linphone-app/ui/modules/Common/Popup/Popup.qml +++ b/linphone-app/ui/modules/Common/Popup/Popup.qml @@ -7,88 +7,95 @@ import Utils 1.0 // ============================================================================= Item { - id: wrapper - - // Optionnal parameters, set the position of popup relative to this item. - property var relativeTo - property int relativeX: 0 - property int relativeY: 0 - - default property alias _content: popup.contentItem - property alias closePolicy : popup.closePolicy - - // --------------------------------------------------------------------------- - - signal closed - signal opened - - // --------------------------------------------------------------------------- - - function open () { - if (popup.visible) { - return - } - - if (relativeTo) { - var parent = Utils.getTopParent(this) - - popup.x = Qt.binding(function () { - return relativeTo ? relativeTo.mapToItem(null, relativeX, relativeY).x : 0 - }) - popup.y = Qt.binding(function () { - return relativeTo ? relativeTo.mapToItem(null, relativeX, relativeY).y : 0 - }) - } else { - popup.x = Qt.binding(function () { - return x - }) - popup.y = Qt.binding(function () { - return y - }) - } - - popup.open() - } - - function close () { - if (!popup.visible) { - return - } - - popup.x = 0 - popup.y = 0 - - popup.close() - } - - // --------------------------------------------------------------------------- - - visible: false - - // --------------------------------------------------------------------------- - - Controls.Popup { - id: popup - - height: wrapper.height - width: wrapper.width - - background: Rectangle { - color: PopupStyle.backgroundColor - height: popup.height - width: popup.width - - layer { - enabled: true - effect: PopupShadow {} - } - } - - padding: 0 - - Component.onCompleted: parent = Utils.getTopParent(this) - - onClosed: wrapper.closed() - onOpened: wrapper.opened() - } + id: wrapper + + property bool isOpen : popup.visible || (!popup.visible && closeDelay.running) // This way, we prevent instant reopening on lost focus with clicked events + property bool delayClosing : false + // Optionnal parameters, set the position of popup relative to this item. + property var relativeTo + property int relativeX: 0 + property int relativeY: 0 + + default property alias _content: popup.contentItem + property alias closePolicy : popup.closePolicy + + // --------------------------------------------------------------------------- + + signal closed + signal opened + + // --------------------------------------------------------------------------- + + function open () { + if (popup.visible) { + return + } + + if (relativeTo) { + var parent = Utils.getTopParent(this) + + popup.x = Qt.binding(function () { + return relativeTo ? relativeTo.mapToItem(null, relativeX, relativeY).x : 0 + }) + popup.y = Qt.binding(function () { + return relativeTo ? relativeTo.mapToItem(null, relativeX, relativeY).y : 0 + }) + } else { + popup.x = Qt.binding(function () { + return x + }) + popup.y = Qt.binding(function () { + return y + }) + } + + popup.open() + } + function close(){ + if (!popup.visible) { + return + } + + popup.x = 0 + popup.y = 0 + + popup.close() + + } + + // --------------------------------------------------------------------------- + + visible: false + + // --------------------------------------------------------------------------- + Timer{// This way, we prevent instant reopening on lost focus with clicked events + id: closeDelay + interval: 100 + } + Controls.Popup { + id: popup + + height: wrapper.height + width: wrapper.width + + background: Rectangle { + color: PopupStyle.backgroundColor + height: popup.height + width: popup.width + + layer { + enabled: true + effect: PopupShadow {} + } + } + + padding: 0 + + Component.onCompleted: parent = Utils.getTopParent(this) + + onClosed: { if(wrapper.delayClosing) closeDelay.restart() + wrapper.closed() + } + onOpened: wrapper.opened() + } } diff --git a/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml b/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml index b60738420..7d7ef486a 100644 --- a/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml +++ b/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml @@ -8,109 +8,109 @@ import Linphone.Styles 1.0 // ============================================================================= Popup { - id: callStatistics - - property var call - // --------------------------------------------------------------------------- - - Rectangle { - color: CallStatisticsStyle.color - height: callStatistics.height - width: callStatistics.width - Row { - anchors { - fill: parent - topMargin: CallStatisticsStyle.topMargin - leftMargin: CallStatisticsStyle.leftMargin - rightMargin: CallStatisticsStyle.rightMargin - } - - Loader { - property string $label: qsTr('audioStatsLabel') - property var $data: callStatistics.call?callStatistics.call.audioStats:null - - sourceComponent: media - width: parent.width / 2 - } - - Loader { - property string $label: qsTr('videoStatsLabel') - property var $data: callStatistics.call?callStatistics.call.videoStats:null - - sourceComponent: media - width: parent.width / 2 - } - } - - // ------------------------------------------------------------------------- - // Line. - // ------------------------------------------------------------------------- - - Component { - id: line - - RowLayout { - spacing: CallStatisticsStyle.spacing - width: parent.width - - Text { - Layout.preferredWidth: CallStatisticsStyle.key.width - - color: CallStatisticsStyle.key.color - elide: Text.ElideRight - - font { - pointSize: CallStatisticsStyle.key.pointSize - bold: true - } - - horizontalAlignment: Text.AlignRight - verticalAlignment: Text.AlignVCenter - - text: modelData.key - } - - Text { - Layout.fillWidth: true - - color: CallStatisticsStyle.value.color - elide: Text.ElideRight - font.pointSize: CallStatisticsStyle.value.pointSize - - text: modelData.value - } - } - } - - // ------------------------------------------------------------------------- - // Media. - // ------------------------------------------------------------------------- - - Component { - id: media - - Column { - Text { - color: CallStatisticsStyle.title.color - - font { - bold: true - pointSize: CallStatisticsStyle.title.pointSize - } - - elide: Text.ElideRight - horizontalAlignment: Text.AlignHCenter - text: $label - - height: contentHeight + CallStatisticsStyle.title.bottomMargin - width: parent.width - } - - Repeater { - model: $data - delegate: line - } - } - } - } + id: callStatistics + + property var call + // --------------------------------------------------------------------------- + delayClosing: true + Rectangle { + color: CallStatisticsStyle.color + height: callStatistics.height + width: callStatistics.width + Row { + anchors { + fill: parent + topMargin: CallStatisticsStyle.topMargin + leftMargin: CallStatisticsStyle.leftMargin + rightMargin: CallStatisticsStyle.rightMargin + } + + Loader { + property string $label: qsTr('audioStatsLabel') + property var $data: callStatistics.call?callStatistics.call.audioStats:null + + sourceComponent: media + width: parent.width / 2 + } + + Loader { + property string $label: qsTr('videoStatsLabel') + property var $data: callStatistics.call?callStatistics.call.videoStats:null + + sourceComponent: media + width: parent.width / 2 + } + } + + // ------------------------------------------------------------------------- + // Line. + // ------------------------------------------------------------------------- + + Component { + id: line + + RowLayout { + spacing: CallStatisticsStyle.spacing + width: parent.width + + Text { + Layout.preferredWidth: CallStatisticsStyle.key.width + + color: CallStatisticsStyle.key.color + elide: Text.ElideRight + + font { + pointSize: CallStatisticsStyle.key.pointSize + bold: true + } + + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + + text: modelData.key + } + + Text { + Layout.fillWidth: true + + color: CallStatisticsStyle.value.color + elide: Text.ElideRight + font.pointSize: CallStatisticsStyle.value.pointSize + + text: modelData.value + } + } + } + + // ------------------------------------------------------------------------- + // Media. + // ------------------------------------------------------------------------- + + Component { + id: media + + Column { + Text { + color: CallStatisticsStyle.title.color + + font { + bold: true + pointSize: CallStatisticsStyle.title.pointSize + } + + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + text: $label + + height: contentHeight + CallStatisticsStyle.title.bottomMargin + width: parent.width + } + + Repeater { + model: $data + delegate: line + } + } + } + } } diff --git a/linphone-app/ui/views/App/Calls/Incall.qml b/linphone-app/ui/views/App/Calls/Incall.qml index 0c38b5c8f..62fbf8aca 100644 --- a/linphone-app/ui/views/App/Calls/Incall.qml +++ b/linphone-app/ui/views/App/Calls/Incall.qml @@ -82,8 +82,7 @@ Rectangle { isCustom: true backgroundRadius: 4 colorSet: CallStyle.buttons.callQuality - - percentageDisplayed: 0 + icon: CallStyle.buttons.callQuality.icon_0 onClicked: Logic.openCallStatistics() @@ -97,10 +96,16 @@ Rectangle { onTriggered: { // Note: `quality` is in the [0, 5] interval and -1. var quality = call.quality - if(quality >= 0) - callQuality.percentageDisplayed = quality * 100 / 5 + if(quality > 4) + callQuality.icon = CallStyle.buttons.callQuality.icon_4 + else if(quality > 3) + callQuality.icon = CallStyle.buttons.callQuality.icon_3 + else if(quality > 2) + callQuality.icon = CallStyle.buttons.callQuality.icon_2 + else if(quality > 1) + callQuality.icon = CallStyle.buttons.callQuality.icon_1 else - callQuality.percentageDisplayed = 0 + callQuality.icon = CallStyle.buttons.callQuality.icon_0 } } @@ -127,6 +132,7 @@ Rectangle { } ActionButton { + anchors.verticalCenter: parent.verticalCenter id: callSecure isCustom: true backgroundRadius: 90 diff --git a/linphone-app/ui/views/App/Calls/IncallFullscreenWindow.qml b/linphone-app/ui/views/App/Calls/IncallFullscreenWindow.qml index 6a09c238c..db6802540 100644 --- a/linphone-app/ui/views/App/Calls/IncallFullscreenWindow.qml +++ b/linphone-app/ui/views/App/Calls/IncallFullscreenWindow.qml @@ -149,8 +149,7 @@ Window { isCustom: true backgroundRadius: 4 colorSet: CallFullscreenStyle.buttons.callQuality - iconSize: CallFullscreenStyle.header.iconSize - percentageDisplayed: 0 + icon: CallStyle.buttons.callQuality.icon_0 onClicked: Logic.openCallStatistics() // See: http://www.linphone.org/docs/liblinphone/group__call__misc.html#ga62c7d3d08531b0cc634b797e273a0a73 @@ -163,10 +162,16 @@ Window { onTriggered: { // Note: `quality` is in the [0, 5] interval and -1. var quality = window.call.quality - if(quality >= 0) - callQuality.percentageDisplayed = quality * 100 / 5 + if(quality > 4) + callQuality.icon = CallStyle.buttons.callQuality.icon_4 + else if(quality > 3) + callQuality.icon = CallStyle.buttons.callQuality.icon_3 + else if(quality > 2) + callQuality.icon = CallStyle.buttons.callQuality.icon_2 + else if(quality > 1) + callQuality.icon = CallStyle.buttons.callQuality.icon_1 else - callQuality.percentageDisplayed = 0 + callQuality.icon = CallStyle.buttons.callQuality.icon_0 } } @@ -187,13 +192,13 @@ Window { isCustom: true backgroundRadius: 90 colorSet: CallFullscreenStyle.buttons.telKeyad - iconSize: CallFullscreenStyle.header.iconSize onClicked: telKeypad.visible = !telKeypad.visible } ActionButton { id: callSecure + anchors.verticalCenter: parent.verticalCenter isCustom: true backgroundRadius: 90 colorSet: window.call && window.call.isSecured ? CallFullscreenStyle.buttons.secure : CallFullscreenStyle.buttons.unsecure diff --git a/linphone-app/ui/views/App/Calls/VideoConference.qml b/linphone-app/ui/views/App/Calls/VideoConference.qml index 54cea6eab..aa2676b8c 100644 --- a/linphone-app/ui/views/App/Calls/VideoConference.qml +++ b/linphone-app/ui/views/App/Calls/VideoConference.qml @@ -394,11 +394,12 @@ Rectangle { id: callQuality isCustom: true - backgroundRadius: 4 + backgroundRadius: width/2 colorSet: VideoConferenceStyle.buttons.callQuality - percentageDisplayed: 0 + icon: VideoConferenceStyle.buttons.callQuality.icon_0 + toggled: callStatistics.isOpen - onClicked: {Logic.openCallStatistics();} + onClicked: callStatistics.isOpen ? callStatistics.close() : callStatistics.open() Timer { interval: 500 repeat: true @@ -407,10 +408,16 @@ Rectangle { onTriggered: { // Note: `quality` is in the [0, 5] interval and -1. var quality = callModel.quality - if(quality >= 0) - callQuality.percentageDisplayed = quality * 100 / 5 + if(quality > 4) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_4 + else if(quality > 3) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_3 + else if(quality > 2) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_2 + else if(quality > 1) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_1 else - callQuality.percentageDisplayed = 0 + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_0 } } } @@ -435,7 +442,6 @@ Rectangle { relativeTo: conference relativeY: CallStyle.header.stats.relativeY relativeX: 10 - onClosed: Logic.handleCallStatisticsClosed() } TelKeypad { id: telKeypad diff --git a/linphone-app/ui/views/App/Calls/VideoConferenceFullscreen.qml b/linphone-app/ui/views/App/Calls/VideoConferenceFullscreen.qml index 5199d6a08..a7d24030a 100644 --- a/linphone-app/ui/views/App/Calls/VideoConferenceFullscreen.qml +++ b/linphone-app/ui/views/App/Calls/VideoConferenceFullscreen.qml @@ -416,17 +416,25 @@ Window { isCustom: true backgroundRadius: width/2 colorSet: VideoConferenceStyle.buttons.participants - visible: false // TODO + toggled: rightMenu.visible && rightMenu.isParticipantsMenu + onClicked: { + if(toggled) + rightMenu.visible = false + else + rightMenu.showParticipantsMenu() + } } ActionButton { id: callQuality isCustom: true - backgroundRadius: 4 + backgroundRadius: width/2 colorSet: VideoConferenceStyle.buttons.callQuality - percentageDisplayed: 0 - - onClicked: {Logic.openCallStatistics();} + icon: VideoConferenceStyle.buttons.callQuality.icon_0 + toggled: callStatistics.isOpen + + onClicked: callStatistics.isOpen ? callStatistics.close() : callStatistics.open() + Timer { interval: 500 repeat: true @@ -436,10 +444,16 @@ Window { if(callModel) { // Note: `quality` is in the [0, 5] interval and -1. var quality = callModel.quality - if(quality >= 0) - callQuality.percentageDisplayed = quality * 100 / 5 + if(quality > 4) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_4 + else if(quality > 3) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_3 + else if(quality > 2) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_2 + else if(quality > 1) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_1 else - callQuality.percentageDisplayed = 0 + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_0 } } } @@ -448,6 +462,7 @@ Window { isCustom: true backgroundRadius: width/2 colorSet: VideoConferenceStyle.buttons.options + toggled: rightMenu.visible onClicked: rightMenu.visible = !rightMenu.visible } } @@ -464,7 +479,6 @@ Window { relativeTo: conference relativeY: CallStyle.header.stats.relativeY relativeX: 10 - onClosed: Logic.handleCallStatisticsClosed() } } TelKeypad { @@ -495,7 +509,8 @@ Window { anchors.fill: parent acceptedButtons: Qt.NoButton propagateComposedEvents: true - cursorShape: Qt.ArrowCursor + cursorShape: undefined + //cursorShape: Qt.ArrowCursor onEntered: hideButtonsTimer.startTimer() onExited: hideButtonsTimer.stopTimer() diff --git a/linphone-app/ui/views/App/Styles/Calls/CallFullscreenStyle.qml b/linphone-app/ui/views/App/Styles/Calls/CallFullscreenStyle.qml index 92322859d..167e430b7 100644 --- a/linphone-app/ui/views/App/Styles/Calls/CallFullscreenStyle.qml +++ b/linphone-app/ui/views/App/Styles/Calls/CallFullscreenStyle.qml @@ -102,29 +102,24 @@ QtObject { // Button colors property QtObject buttons: QtObject { property QtObject callQuality: QtObject { - property int iconSize: 16 + property int iconSize: 30 property string name : 'quality' - property string icon : 'call_quality_custom' - property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 'me_n_b_bg').color - property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon, 'me_d_b_bg').color - property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon, 'me_h_b_bg').color - property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon, 'me_p_b_bg').color - property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon, 'me_n_b_fg').color - property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon, 'me_d_b_fg').color - property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon, 'me_h_b_fg').color - property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon, 'me_p_b_fg').color - - property color backgroundHiddenPartNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_n', icon, 'me_n_b_inv_bg').color - property color backgroundHiddenPartDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_d', icon, 'me_d_b_inv_bg').color - property color backgroundHiddenPartHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_h', icon, 'me_h_b_inv_bg').color - property color backgroundHiddenPartPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_p', icon, 'me_p_b_inv_bg').color - property color foregroundHiddenPartNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_n', icon, 'me_h_b_inv_fg').color - property color foregroundHiddenPartDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_d', icon, 'me_d_b_inv_fg').color - property color foregroundHiddenPartHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_h', icon, 'me_h_b_inv_fg').color - property color foregroundHiddenPartPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_p', icon, 'me_p_b_inv_fg').color + property string icon_0 : 'call_quality_0_custom' + property string icon_1 : 'call_quality_1_custom' + property string icon_2 : 'call_quality_2_custom' + property string icon_3 : 'call_quality_3_custom' + property string icon_4 : 'call_quality_4_custom' + property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon_2, 'me_n_b_bg').color + property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon_2, 'me_d_b_bg').color + property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon_2, 'me_h_b_bg').color + property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon_2, 'me_p_b_bg').color + property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon_2, 'me_n_b_fg').color + property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon_2, 'me_d_b_fg').color + property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon_2, 'me_h_b_fg').color + property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon_2, 'me_p_b_fg').color } property QtObject telKeyad: QtObject { - property int iconSize: 16 + property int iconSize: 30 property string name : 'telKeypad' property string icon : 'dialpad_custom' property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 'me_n_b_bg').color diff --git a/linphone-app/ui/views/App/Styles/Calls/CallStyle.qml b/linphone-app/ui/views/App/Styles/Calls/CallStyle.qml index 15f8e61a4..e46ca6124 100644 --- a/linphone-app/ui/views/App/Styles/Calls/CallStyle.qml +++ b/linphone-app/ui/views/App/Styles/Calls/CallStyle.qml @@ -102,29 +102,24 @@ QtObject { // Button colors property QtObject buttons: QtObject { property QtObject callQuality: QtObject { - property int iconSize: 16 + property int iconSize: 30 property string name : 'quality' - property string icon : 'call_quality_custom' - property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 'me_n_b_bg').color - property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon, 'me_d_b_bg').color - property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon, 'me_h_b_bg').color - property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon, 'me_p_b_bg').color - property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon, 'me_n_b_fg').color - property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon, 'me_d_b_fg').color - property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon, 'me_h_b_fg').color - property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon, 'me_p_b_fg').color - - property color backgroundHiddenPartNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_n', icon, 'me_n_b_inv_bg').color - property color backgroundHiddenPartDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_d', icon, 'me_d_b_inv_bg').color - property color backgroundHiddenPartHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_h', icon, 'me_h_b_inv_bg').color - property color backgroundHiddenPartPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_p', icon, 'me_p_b_inv_bg').color - property color foregroundHiddenPartNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_n', icon, 'me_h_b_inv_fg').color - property color foregroundHiddenPartDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_d', icon, 'me_d_b_inv_fg').color - property color foregroundHiddenPartHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_h', icon, 'me_h_b_inv_fg').color - property color foregroundHiddenPartPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_p', icon, 'me_p_b_inv_fg').color + property string icon_0 : 'call_quality_0_custom' + property string icon_1 : 'call_quality_1_custom' + property string icon_2 : 'call_quality_2_custom' + property string icon_3 : 'call_quality_3_custom' + property string icon_4 : 'call_quality_4_custom' + property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon_2, 'me_n_b_bg').color + property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon_2, 'me_d_b_bg').color + property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon_2, 'me_h_b_bg').color + property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon_2, 'me_p_b_bg').color + property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon_2, 'me_n_b_fg').color + property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon_2, 'me_d_b_fg').color + property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon_2, 'me_h_b_fg').color + property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon_2, 'me_p_b_fg').color } property QtObject telKeyad: QtObject { - property int iconSize: 16 + property int iconSize: 30 property string name : 'telKeypad' property string icon : 'dialpad_custom' property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 'me_n_b_bg').color diff --git a/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml b/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml index 8eb197968..a91533596 100644 --- a/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml +++ b/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml @@ -386,26 +386,23 @@ QtObject { property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_c', icon, 'me_c_b_inv_fg').color } property QtObject callQuality: QtObject { - property int iconSize: 20 + property int iconSize: 40 property string name : 'quality' - property string icon : 'call_quality_custom' - property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 'me_n_b_bg').color - property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon, 'me_d_b_bg').color - property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon, 'me_h_b_bg').color - property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon, 'me_p_b_bg').color - property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon, 'me_n_b_fg').color - property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon, 'me_d_b_fg').color - property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon, 'me_h_b_fg').color - property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon, 'me_p_b_fg').color - - property color backgroundHiddenPartNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_n', icon, 'me_n_b_inv_bg').color - property color backgroundHiddenPartDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_d', icon, 'me_d_b_inv_bg').color - property color backgroundHiddenPartHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_h', icon, 'me_h_b_inv_bg').color - property color backgroundHiddenPartPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_bg_p', icon, 'me_p_b_inv_bg').color - property color foregroundHiddenPartNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_n', icon, 'me_n_b_inv_fg').color - property color foregroundHiddenPartDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_d', icon, 'me_d_b_inv_fg').color - property color foregroundHiddenPartHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_h', icon, 'me_h_b_inv_fg').color - property color foregroundHiddenPartPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_hidden_fg_p', icon, 'me_p_b_inv_fg').color + property string icon_0 : 'call_quality_0_custom' + property string icon_1 : 'call_quality_1_custom' + property string icon_2 : 'call_quality_2_custom' + property string icon_3 : 'call_quality_3_custom' + property string icon_4 : 'call_quality_4_custom' + property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon_2, 'me_n_b_inv_bg').color + property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon_2, 'me_d_b_inv_bg').color + property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon_2, 'me_h_b_inv_bg').color + property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon_2, 'me_p_b_inv_bg').color + property color backgroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_c', icon_2, 'me_c_b_inv_bg').color + property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon_2, 'me_n_b_inv_fg').color + property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon_2, 'me_d_b_inv_fg').color + property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon_2, 'me_h_b_inv_fg').color + property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon_2, 'me_p_b_inv_fg').color + property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_c', icon_2, 'me_c_b_inv_fg').color } property QtObject options: QtObject { property int iconSize: 40