Skip to content
Snippets Groups Projects
Commit 86c1bf83 authored by Capucine Berthet's avatar Capucine Berthet Committed by Sébastien Blin
Browse files

CallInformationOverlay: new design 

GitLab: #1417
Change-Id: I11267d130f83421f23656f65925996caded6c10b
parent f7bf2899
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/commoncomponents/BaseModalDialog.qml
+ 1
− 0
View file @ 86c1bf83
......@@ -28,6 +28,7 @@ Popup {
// convient access to closePolicy
property bool autoClose: true
property alias backgroundColor: container.color
property alias backgroundOpacity: container.background.opacity
property alias title: titleText.text
property var popupcontainerSubContentLoader: containerSubContentLoader
......
src/app/mainview/components/CallInformationOverlay.qml
+ 143
− 168
View file @ 86c1bf83
......@@ -24,17 +24,15 @@ import net.jami.Constants 1.1
import Qt5Compat.GraphicalEffects
import "../../commoncomponents"
Popup {
BaseModalDialog {
id: root
property real maxHeight: parent.height * 40 / 100
property real maxTextWidth: parent.width * 30 / 100
property real maxTextWidth: parent.width * 20 / 100
property var advancedList
property var fps
width: container.width
height: container.height
maximumPopupWidth: popupContent.width + 2 * popupMargins
closePolicy: Popup.NoAutoClosed
onClosed: {
......@@ -48,203 +46,180 @@ Popup {
AvAdapter.setRendererInfo();
}
background: Rectangle {
color: JamiTheme.transparentColor
}
Rectangle {
id: container
color: JamiTheme.blackColor
opacity: 0.85
radius: 10
width: windowContent.width
height: windowContent.height
PushButton {
id: closeButton
anchors.top: container.top
anchors.topMargin: 5
anchors.right: container.right
anchors.rightMargin: 5
normalColor: JamiTheme.transparentColor
imageColor: JamiTheme.callInfoColor
source: JamiResources.round_close_24dp_svg
circled: false
toolTipText: JamiStrings.close
onClicked: {
root.close();
backgroundColor: JamiTheme.darkGreyColor
backgroundOpacity: 0.77
popupContent: RowLayout {
id: windowContent
spacing: JamiTheme.callInformationBlockSpacing
ColumnLayout {
spacing: JamiTheme.callInformationBlockSpacing
Layout.preferredWidth: callInfoListview.width
Layout.alignment: Qt.AlignTop
Text {
id: textTest
color: JamiTheme.callInfoColor
text: JamiStrings.callInformation
font.pointSize: JamiTheme.menuFontSize
font.bold: true
Layout.maximumWidth: root.maxTextWidth
elide: Text.ElideRight
}
}
RowLayout {
id: windowContent
ListView {
id: callInfoListview
ColumnLayout {
spacing: JamiTheme.callInformationBlockSpacing
Layout.margins: JamiTheme.callInformationlayoutMargins
Layout.preferredWidth: callInfoListview.width
Layout.alignment: Qt.AlignTop
Text {
id: textTest
color: JamiTheme.callInfoColor
text: JamiStrings.callInformation
font.pointSize: JamiTheme.titleFontPointSize
}
ListView {
id: callInfoListview
model: advancedList
Layout.preferredWidth: root.maxTextWidth
Layout.preferredHeight: contentItem.childrenRect.height < root.maxHeight ? contentItem.childrenRect.height : root.maxHeight
clip: true
model: advancedList
Layout.preferredWidth: root.maxTextWidth
Layout.preferredHeight: contentItem.childrenRect.height < root.maxHeight ? contentItem.childrenRect.height : root.maxHeight
spacing: JamiTheme.callInformationBlockSpacing
clip: true
delegate: Column {
delegate: Column {
spacing: JamiTheme.callInformationElementsSpacing
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.callId + ": " + CALL_ID
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.callId + ": " + CALL_ID
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
Text {
function stringWithoutRing(peerNumber) {
return peerNumber.replace("@ring.dht", "");
}
color: JamiTheme.callInfoColor
text: JamiStrings.peerNumber + ": " + stringWithoutRing(PEER_NUMBER)
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
Column {
id: socketLayout
Text {
function stringWithoutRing(peerNumber) {
return peerNumber.replace("@ring.dht", "");
}
color: JamiTheme.callInfoColor
text: JamiStrings.peerNumber + ": " + stringWithoutRing(PEER_NUMBER)
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
Column {
id: socketLayout
property bool showAll: false
width: callInfoListview.width
RowLayout {
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.sockets
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: socketLayout.width
}
property bool showAll: false
width: callInfoListview.width
bottomPadding: JamiTheme.callInformationBlockSpacing
topPadding: JamiTheme.callInformationBlockSpacing
PushButton {
source: socketLayout.showAll ? JamiResources.expand_less_24dp_svg : JamiResources.expand_more_24dp_svg
normalColor: JamiTheme.transparentColor
Layout.preferredWidth: 20
Layout.preferredHeight: 20
imageColor: JamiTheme.callInfoColor
onClicked: {
socketLayout.showAll = !socketLayout.showAll;
}
}
}
RowLayout {
Text {
color: JamiTheme.callInfoColor
text: SOCKETS
text: JamiStrings.sockets
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
visible: socketLayout.showAll
width: socketLayout.width
}
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.videoCodec + ": " + VIDEO_CODEC
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
JamiPushButton {
source: socketLayout.showAll ? JamiResources.expand_less_24dp_svg : JamiResources.expand_more_24dp_svg
normalColor: JamiTheme.transparentColor
Layout.preferredWidth: 20
Layout.preferredHeight: 20
imageColor: JamiTheme.callInfoColor
onClicked: {
socketLayout.showAll = !socketLayout.showAll;
}
}
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.audioCodec + ": " + AUDIO_CODEC + " " + AUDIO_SAMPLE_RATE + " Hz"
text: SOCKETS
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
visible: socketLayout.showAll
width: socketLayout.width
}
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.hardwareAcceleration + ": " + HARDWARE_ACCELERATION
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.videoCodec + ": " + VIDEO_CODEC
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.videoBitrate + ": " + VIDEO_BITRATE + " bps"
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.audioCodec + ": " + AUDIO_CODEC + " " + AUDIO_SAMPLE_RATE + " Hz"
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
}
}
ColumnLayout {
spacing: JamiTheme.callInformationBlockSpacing
Layout.margins: JamiTheme.callInformationlayoutMargins
Layout.preferredWidth: renderersInfoListview.width
Layout.alignment: Qt.AlignTop
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.renderersInformation
font.pointSize: JamiTheme.titleFontPointSize
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.hardwareAcceleration + ": " + HARDWARE_ACCELERATION
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
ListView {
id: renderersInfoListview
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.videoBitrate + ": " + VIDEO_BITRATE + " bps"
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: callInfoListview.width
}
}
}
}
Layout.preferredWidth: root.maxTextWidth
Layout.preferredHeight: contentItem.childrenRect.height < root.maxHeight ? contentItem.childrenRect.height : root.maxHeight
spacing: JamiTheme.callInformationBlockSpacing
model: fps
clip: true
ColumnLayout {
spacing: JamiTheme.callInformationBlockSpacing
Layout.preferredWidth: renderersInfoListview.width
Layout.alignment: Qt.AlignTop
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.renderersInformation
font.pointSize: JamiTheme.menuFontSize
font.bold: true
elide: Text.ElideRight
Layout.maximumWidth: root.maxTextWidth
}
delegate: Column {
spacing: JamiTheme.callInformationElementsSpacing
ListView {
id: renderersInfoListview
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.rendererId + ": " + RENDERER_ID
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: renderersInfoListview.width
}
Layout.preferredWidth: root.maxTextWidth
Layout.preferredHeight: contentItem.childrenRect.height < root.maxHeight ? contentItem.childrenRect.height : root.maxHeight
spacing: JamiTheme.callInformationBlockSpacing
model: fps
clip: true
delegate: Column {
spacing: JamiTheme.callInformationElementsSpacing
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.rendererId + ": " + RENDERER_ID
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: renderersInfoListview.width
}
Text {
id: testText
color: JamiTheme.callInfoColor
text: JamiStrings.fps_short + ": " + FPS
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: renderersInfoListview.width
}
Text {
id: testText
color: JamiTheme.callInfoColor
text: JamiStrings.fps_short + ": " + FPS
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: renderersInfoListview.width
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.resolution + ": " + RES
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: renderersInfoListview.width
}
Text {
color: JamiTheme.callInfoColor
text: JamiStrings.resolution + ": " + RES
font.pointSize: JamiTheme.textFontPointSize
wrapMode: Text.WrapAnywhere
width: renderersInfoListview.width
}
}
}
......
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