From 589c67999f19aa233ba07646b4606597bcb0a5c0 Mon Sep 17 00:00:00 2001 From: Gaelle Braud Date: Thu, 4 Apr 2024 14:32:41 +0200 Subject: [PATCH] screencast panel ui --- Linphone/data/image/hand-waving.svg | 3 + Linphone/data/image/screencast.svg | 1 + Linphone/view/App/CallsWindow.qml | 31 ++++++- Linphone/view/App/Layout/LoginLayout.qml | 4 +- Linphone/view/CMakeLists.txt | 6 +- .../view/Item/Call/Menu/ScreencastPanel.qml | 86 +++++++++++++++++++ ...List.qml => ParticipantDeviceListView.qml} | 0 ...cipantList.qml => ParticipantListView.qml} | 0 Linphone/view/Item/TabBar.qml | 32 +++---- Linphone/view/Page/Login/RegisterPage.qml | 39 ++++++++- Linphone/view/Style/AppIcons.qml | 2 + 11 files changed, 176 insertions(+), 28 deletions(-) create mode 100644 Linphone/data/image/hand-waving.svg create mode 100644 Linphone/data/image/screencast.svg create mode 100644 Linphone/view/Item/Call/Menu/ScreencastPanel.qml rename Linphone/view/Item/Participant/{ParticipantDeviceList.qml => ParticipantDeviceListView.qml} (100%) rename Linphone/view/Item/Participant/{ParticipantList.qml => ParticipantListView.qml} (100%) diff --git a/Linphone/data/image/hand-waving.svg b/Linphone/data/image/hand-waving.svg new file mode 100644 index 00000000..2c6a61a8 --- /dev/null +++ b/Linphone/data/image/hand-waving.svg @@ -0,0 +1,3 @@ + + + diff --git a/Linphone/data/image/screencast.svg b/Linphone/data/image/screencast.svg new file mode 100644 index 00000000..c3befc54 --- /dev/null +++ b/Linphone/data/image/screencast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Linphone/view/App/CallsWindow.qml b/Linphone/view/App/CallsWindow.qml index 7ab08f08..796d7307 100644 --- a/Linphone/view/App/CallsWindow.qml +++ b/Linphone/view/App/CallsWindow.qml @@ -456,6 +456,7 @@ Window { Layout.fillWidth: true text: qsTr("La disposition choisie sera enregistrée pour vos prochaines réunions") font.pixelSize: 14 * DefaultStyle.dp + color: DefaultStyle.main2_500main } RoundedBackgroundControl { Layout.fillWidth: true @@ -634,6 +635,13 @@ Window { call: mainWindow.call } } + Component { + id: screencastPanel + ScreencastPanel { + call: mainwindow.call + Control.StackView.onActivated: rightPanel.headerTitleText = qsTr("Partage de votre écran") + } + } Component { id: participantListPanel Control.StackView { @@ -651,7 +659,7 @@ Window { Component { id: participantListComp - ParticipantList { + ParticipantListView { id: participantList call: mainWindow.call onAddParticipantRequested: participantsStack.push(addParticipantComp) @@ -894,7 +902,7 @@ Window { Layout.preferredHeight: 55 * DefaultStyle.dp icon.width: 32 * DefaultStyle.dp icon.height: 32 * DefaultStyle.dp - onCheckedChanged: mainWindow.call.core.lSetCameraEnabled(!mainWindow.call.core.cameraEnabled) + onClicked: mainWindow.call.core.lSetCameraEnabled(!mainWindow.call.core.cameraEnabled) } CheckableButton { iconUrl: AppIcons.microphone @@ -904,12 +912,27 @@ Window { Layout.preferredHeight: 55 * DefaultStyle.dp icon.width: 32 * DefaultStyle.dp icon.height: 32 * DefaultStyle.dp - onCheckedChanged: mainWindow.call.core.lSetMicrophoneMuted(!mainWindow.call.core.microphoneMuted) + onClicked: mainWindow.call.core.lSetMicrophoneMuted(!mainWindow.call.core.microphoneMuted) + } + CheckableButton { + iconUrl: AppIcons.screencast + checkedColor: DefaultStyle.main2_400 + Layout.preferredWidth: 55 * DefaultStyle.dp + Layout.preferredHeight: 55 * DefaultStyle.dp + icon.width: 32 * DefaultStyle.dp + icon.height: 32 * DefaultStyle.dp + onCheckedChanged: { + if (checked) { + rightPanel.visible = true + rightPanel.replace(screencastPanel) + } else { + rightPanel.visible = false + } + } } CheckableButton { visible: mainWindow.conference iconUrl: AppIcons.usersTwo - checked: mainWindow.call && mainWindow.call.core.microphoneMuted checkedColor: DefaultStyle.main2_400 Layout.preferredWidth: 55 * DefaultStyle.dp Layout.preferredHeight: 55 * DefaultStyle.dp diff --git a/Linphone/view/App/Layout/LoginLayout.qml b/Linphone/view/App/Layout/LoginLayout.qml index 40d15af5..0129bf40 100644 --- a/Linphone/view/App/Layout/LoginLayout.qml +++ b/Linphone/view/App/Layout/LoginLayout.qml @@ -33,9 +33,7 @@ Rectangle { Button { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter // Layout.bottomMargin: 20 - background: Rectangle { - color: "transparent" - } + background: Item{} contentItem: RowLayout { Image { fillMode: Image.PreserveAspectFit diff --git a/Linphone/view/CMakeLists.txt b/Linphone/view/CMakeLists.txt index 1591be80..621d5bc6 100644 --- a/Linphone/view/CMakeLists.txt +++ b/Linphone/view/CMakeLists.txt @@ -23,12 +23,14 @@ list(APPEND _LINPHONEAPP_QML_FILES view/Item/Call/InCallSettingsPanel.qml view/Item/Call/OngoingCallRightPanel.qml view/Item/Call/WaitingRoom.qml + + view/Item/Call/Menu/ScreencastPanel.qml view/Item/Notification/Notification.qml view/Item/Notification/NotificationReceivedCall.qml - view/Item/Participant/ParticipantDeviceList.qml - view/Item/Participant/ParticipantList.qml + view/Item/Participant/ParticipantDeviceListView.qml + view/Item/Participant/ParticipantListView.qml view/Item/Prototype/CanvasCircle.qml diff --git a/Linphone/view/Item/Call/Menu/ScreencastPanel.qml b/Linphone/view/Item/Call/Menu/ScreencastPanel.qml new file mode 100644 index 00000000..b72f6ec3 --- /dev/null +++ b/Linphone/view/Item/Call/Menu/ScreencastPanel.qml @@ -0,0 +1,86 @@ +import QtQuick 2.15 +import QtQuick.Layouts +import QtQuick.Effects +import QtQuick.Controls as Control +import Linphone +import UtilsCpp 1.0 + +ColumnLayout { + property CallGui call + + spacing: 12 * DefaultStyle.dp + + Text { + Layout.fillWidth: true + text: qsTr("Veuillez choisir l’écran ou la fenêtre que vous souihaitez partager au autres participants") + font.pixelSize: 14 * DefaultStyle.dp + color: DefaultStyle.main2_500main + } + TabBar { + Layout.fillWidth: true + id: bar + pixelSize: 16 * DefaultStyle.dp + model: [qsTr("Ecran entier"), qsTr("Fenêtre")] + } + component ScreenPreviewLayout: Control.Control { + id: screenPreview + signal clicked() + property var screenSource + property int screenIndex + property bool selected: false + leftPadding: 18 * DefaultStyle.dp + rightPadding: 18 * DefaultStyle.dp + topPadding: 13 * DefaultStyle.dp + bottomPadding: 13 * DefaultStyle.dp + background: Rectangle { + anchors.fill: parent + color: screenPreview.selected ? DefaultStyle.main2_100 : DefaultStyle.grey_0 + border.width: 2 * DefaultStyle.dp + border.color: screenPreview.selected ? DefaultStyle.main2_400 : DefaultStyle.main2_200 + radius: 10 * DefaultStyle.dp + MouseArea { + anchors.fill: parent + onClicked: { + screenPreview.clicked() + } + } + } + contentItem: ColumnLayout { + // TODO : replace this by screen preview + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 170 * DefaultStyle.dp + } + Text { + text: qsTr("Ecran %1").arg(screenIndex) + horizontalAlignment: Text.AlignHCenter + font.pixelSize: 14 * DefaultStyle.dp + Layout.fillWidth: true + } + } + } + StackLayout { + currentIndex: bar.currentIndex + ColumnLayout { + id: screensLayout + property int selectedIndex + Repeater { + model: 2 //TODO : screensModel + ScreenPreviewLayout { + Layout.fillWidth: true + screenIndex: index + onClicked: screensLayout.selectedIndex = index + selected: screensLayout.selectedIndex === index + } + } + } + Text { + Layout.topMargin: 30 * DefaultStyle.dp + font.pixelSize: 20 * DefaultStyle.dp + text: qsTr("Cliquez sur la fenêtre à partager") + } + } + Button { + text: qsTr("Partager") + } +} \ No newline at end of file diff --git a/Linphone/view/Item/Participant/ParticipantDeviceList.qml b/Linphone/view/Item/Participant/ParticipantDeviceListView.qml similarity index 100% rename from Linphone/view/Item/Participant/ParticipantDeviceList.qml rename to Linphone/view/Item/Participant/ParticipantDeviceListView.qml diff --git a/Linphone/view/Item/Participant/ParticipantList.qml b/Linphone/view/Item/Participant/ParticipantListView.qml similarity index 100% rename from Linphone/view/Item/Participant/ParticipantList.qml rename to Linphone/view/Item/Participant/ParticipantListView.qml diff --git a/Linphone/view/Item/TabBar.qml b/Linphone/view/Item/TabBar.qml index b0f30edf..df37c651 100644 --- a/Linphone/view/Item/TabBar.qml +++ b/Linphone/view/Item/TabBar.qml @@ -1,4 +1,4 @@ -import QtQuick 2.7 as Quick +import QtQuick 2.7 import QtQuick.Layouts 1.3 import QtQuick.Controls 2.2 as Control import Linphone @@ -10,12 +10,14 @@ Control.TabBar { ? itemAt(0).x : 0 spacing: 40 * DefaultStyle.dp + property int pixelSize: 22 * DefaultStyle.dp + property int textWeight: 800 * DefaultStyle.dp wheelEnabled: true - background: Quick.Item { + background: Item { id: tabBarBackground anchors.fill: parent - Quick.Rectangle { + Rectangle { id: barBG height: 4 * DefaultStyle.dp color: DefaultStyle.grey_200 @@ -23,7 +25,7 @@ Control.TabBar { width: parent.width } - // Quick.Rectangle { + // Rectangle { // height: 4 // color: DefaultStyle.main1_500_main // anchors.bottom: parent.bottom @@ -34,12 +36,12 @@ Control.TabBar { // : 0 // width: mainItem.currentItem ? mainItem.currentItem.width : 0 // // clip: true - // Quick.Behavior on x { Quick.NumberAnimation {duration: 100}} - // Quick.Behavior on width {Quick.NumberAnimation {duration: 100}} + // Behavior on x { NumberAnimation {duration: 100}} + // Behavior on width {NumberAnimation {duration: 100}} // } } - Quick.Repeater { + Repeater { model: mainItem.model Control.TabButton { required property string modelData @@ -53,12 +55,12 @@ Control.TabBar { text: modelData } - background: Quick.Item { + background: Item { anchors.fill: parent - Quick.Rectangle { + Rectangle { visible: mainItem.currentIndex === index - height: 4 * DefaultStyle.dp + height: 5 * DefaultStyle.dp color: DefaultStyle.main1_500_main anchors.bottom: parent.bottom anchors.left: parent.left @@ -66,21 +68,21 @@ Control.TabBar { } } - contentItem: Quick.Text { + contentItem: Text { id: tabText anchors.fill: parent - font.bold: true + font.weight: mainItem.textWeight color: mainItem.currentIndex === index ? DefaultStyle.main2_600 : DefaultStyle.main2_400 font.family: DefaultStyle.defaultFont - font.pixelSize: 22 * DefaultStyle.dp - elide: Quick.Text.ElideRight + font.pixelSize: mainItem.pixelSize + elide: Text.ElideRight maximumLineCount: 1 text: txtMeter.elidedText // width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x))) bottomPadding: 5 * DefaultStyle.dp } - Quick.TextMetrics { + TextMetrics { id: txtMeter font: tabText.font text: modelData diff --git a/Linphone/view/Page/Login/RegisterPage.qml b/Linphone/view/Page/Login/RegisterPage.qml index 0d13c4af..3be7f9e7 100644 --- a/Linphone/view/Page/Login/RegisterPage.qml +++ b/Linphone/view/Page/Login/RegisterPage.qml @@ -61,11 +61,12 @@ LoginLayout { } StackLayout { currentIndex: bar.currentIndex + Layout.topMargin: 50 * DefaultStyle.dp + RowLayout { ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - Layout.topMargin: 20 * DefaultStyle.dp spacing: 15 * DefaultStyle.dp RowLayout { FormItemLayout { @@ -136,9 +137,39 @@ LoginLayout { RowLayout { CheckBox { } - Text { - Layout.preferredWidth: 450 * DefaultStyle.dp - text: qsTr("I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy.") + RowLayout { + spacing: 0 + Layout.fillWidth: true + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + text: qsTr("I accept the Terms and Conditions: ") + } + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + font.underline: true + text: qsTr("Read the Terms and Conditions.") + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor + onClicked: console.log("TODO : display terms and conditions") + } + } + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + text: qsTr("I accept the Privacy policy: ") + } + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + font.underline: true + text: qsTr("Read the Privacy policy.") + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor + onClicked: console.log("TODO : display privacy policy") + } + } } } Button { diff --git a/Linphone/view/Style/AppIcons.qml b/Linphone/view/Style/AppIcons.qml index b168e2db..48d6837c 100644 --- a/Linphone/view/Style/AppIcons.qml +++ b/Linphone/view/Style/AppIcons.qml @@ -84,4 +84,6 @@ QtObject { property string pip: "image://internal/pip.svg" property string waveform: "image://internal/waveform.svg" property string squaresFour: "image://internal/squares-four.svg" + property string handWaving: "image://internal/hand-waving.svg" + property string screencast: "image://internal/screencast.svg" }