diff --git a/linphone-app/src/components/other/colors/ColorListModel.hpp b/linphone-app/src/components/other/colors/ColorListModel.hpp index 15f90805e..b9da325b4 100644 --- a/linphone-app/src/components/other/colors/ColorListModel.hpp +++ b/linphone-app/src/components/other/colors/ColorListModel.hpp @@ -327,6 +327,8 @@ class ColorListModel : public ProxyListModel { ADD_COLOR_WITH_ALPHA("g", 20, "") ADD_COLOR_WITH_ALPHA("g", 90, "") ADD_COLOR_WITH_ALPHA("i", 30, "") + ADD_COLOR_WITH_ALPHA("j", 50, "") + ADD_COLOR_WITH_ALPHA("j", 90, "") ADD_COLOR_WITH_ALPHA("l", 50, "") ADD_COLOR_WITH_ALPHA("l", 80, "") ADD_COLOR_WITH_ALPHA("q", 50, "") diff --git a/linphone-app/ui/modules/Common/Popup/Popup.qml b/linphone-app/ui/modules/Common/Popup/Popup.qml index e8b59683e..4b265f913 100644 --- a/linphone-app/ui/modules/Common/Popup/Popup.qml +++ b/linphone-app/ui/modules/Common/Popup/Popup.qml @@ -18,6 +18,8 @@ Item { default property alias _content: popup.contentItem property alias closePolicy : popup.closePolicy + property alias backgroundPopup: backgroundPopup.color + property bool showShadow : true // --------------------------------------------------------------------------- @@ -79,12 +81,13 @@ Item { width: wrapper.width background: Rectangle { + id: backgroundPopup color: PopupStyle.backgroundColor height: popup.height width: popup.width layer { - enabled: true + enabled: wrapper.showShadow effect: PopupShadow {} } } diff --git a/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml b/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml index 7d7ef486a..1e9cb9e09 100644 --- a/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml +++ b/linphone-app/ui/modules/Linphone/Calls/CallStatistics.qml @@ -11,106 +11,132 @@ Popup { id: callStatistics property var call + backgroundPopup: CallStatisticsStyle.outsideColor + showShadow: false // if true, we get a brownish/yollow color due to alphas // --------------------------------------------------------------------------- delayClosing: true - Rectangle { - color: CallStatisticsStyle.color + Item{ 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 - } + MouseArea{ + anchors.fill: parent + onClicked: callStatistics.close() } - - // ------------------------------------------------------------------------- - // 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 + Rectangle { + color: CallStatisticsStyle.color + anchors.fill: parent + anchors.topMargin: CallStatisticsStyle.popup.topMargin + anchors.bottomMargin: CallStatisticsStyle.popup.bottomMargin + anchors.leftMargin: CallStatisticsStyle.popup.leftMargin + anchors.rightMargin: CallStatisticsStyle.popup.rightMargin + radius: 10 + Row { + anchors { + fill: parent + topMargin: CallStatisticsStyle.topMargin + leftMargin: CallStatisticsStyle.leftMargin + rightMargin: CallStatisticsStyle.rightMargin } - Text { - Layout.fillWidth: true + Loader { + property string $label: qsTr('audioStatsLabel') + property var $data: callStatistics.call?callStatistics.call.audioStats:null - color: CallStatisticsStyle.value.color - elide: Text.ElideRight - font.pointSize: CallStatisticsStyle.value.pointSize + sourceComponent: media + width: parent.width / 2 + } + + Loader { + property string $label: qsTr('videoStatsLabel') + property var $data: callStatistics.call?callStatistics.call.videoStats:null - text: modelData.value + sourceComponent: media + width: parent.width / 2 } } - } - - // ------------------------------------------------------------------------- - // 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 + // ------------------------------------------------------------------------- + // 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 - Repeater { - model: $data - delegate: line + 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 + } } } + ActionButton{ + id: closeButton + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 10 + anchors.rightMargin: 10 + + isCustom: true + backgroundRadius: width/2 + colorSet: CallStatisticsStyle.cancel + onClicked: callStatistics.close() + } } } } diff --git a/linphone-app/ui/modules/Linphone/Styles/Calls/CallStatisticsStyle.qml b/linphone-app/ui/modules/Linphone/Styles/Calls/CallStatisticsStyle.qml index f015675b8..a4001ecb8 100644 --- a/linphone-app/ui/modules/Linphone/Styles/Calls/CallStatisticsStyle.qml +++ b/linphone-app/ui/modules/Linphone/Styles/Calls/CallStatisticsStyle.qml @@ -8,27 +8,46 @@ import ColorsList 1.0 QtObject { property string sectionName: 'CallStats' - property color color: ColorsList.add(sectionName, 'e').color + property color outsideColor: ColorsList.add(sectionName+'_outside_bg', 'j50').color + property color color: ColorsList.add(sectionName+'_bg', 'j90').color property int height: 280 property int leftMargin: 12 property int rightMargin: 12 property int spacing: 8 - property int topMargin: 10 + property int topMargin: 100 + property QtObject popup: QtObject{ + property int topMargin: 60 + property int bottomMargin: 100 + property int leftMargin: 110 + property int rightMargin: 110 + property int radius: 10 + } property QtObject title: QtObject { - property color color: ColorsList.add(sectionName+'_title', 'd').color + property color color: ColorsList.add(sectionName+'_title', 'q').color property int bottomMargin: 20 property int pointSize: Units.dp * 16 } property QtObject key: QtObject { - property color color: ColorsList.add(sectionName+'_key', 'd').color + property color color: ColorsList.add(sectionName+'_key', 'q').color property int pointSize: Units.dp * 10 property int width: 200 } property QtObject value: QtObject { - property color color: ColorsList.add(sectionName+'_value', 'd').color + property color color: ColorsList.add(sectionName+'_value', 'q').color property int pointSize: Units.dp * 10 } + property QtObject cancel: QtObject { + property int iconSize: 40 + property string icon : 'cancel_custom' + property string name : 'cancel' + property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 'me_h_b_bg').color + property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon, 'me_n_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_h_b_fg').color + property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon, 'me_n_b_inv_fg').color + property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon, 'me_p_b_fg').color + } } diff --git a/linphone-app/ui/views/App/Calls/VideoConference.qml b/linphone-app/ui/views/App/Calls/VideoConference.qml index 12754c422..9fc494681 100644 --- a/linphone-app/ui/views/App/Calls/VideoConference.qml +++ b/linphone-app/ui/views/App/Calls/VideoConference.qml @@ -487,17 +487,14 @@ Rectangle { id: callStatistics call: conference.callModel - width: conference.width - 20 - height: conference.height * 2/3 - relativeTo: conference - relativeY: CallStyle.header.stats.relativeY - relativeX: 10 + width: conference.width + height: conference.height } TelKeypad { id: telKeypad showHistory:true call: callModel visible: SettingsModel.showTelKeypadAutomatically - y: 50 + y: 55 } }