Add an option to activate/deactivate the shadow of a popup.

Change call statics design.
This commit is contained in:
Julien Wadel 2022-07-11 14:17:36 +02:00
parent 6325f6885c
commit b19bd5644a
5 changed files with 142 additions and 95 deletions

View file

@ -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, "")

View file

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

View file

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

View file

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

View file

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