From 6cbda2cea14626b49b5979b8ac7263bf2e2517a0 Mon Sep 17 00:00:00 2001
From: cberthet <capucine.berthet@savoirfairelinux.com>
Date: Thu, 9 Nov 2023 14:08:15 -0500
Subject: [PATCH] LinkDeviceDialog: new design
GitLab: #1417
Change-Id: I8039355efcac28bf6ccc39dea1c785ef7f86b9f4
---
.../components/LinkDeviceDialog.qml | 221 ++++++++----------
1 file changed, 102 insertions(+), 119 deletions(-)
diff --git a/src/app/settingsview/components/LinkDeviceDialog.qml b/src/app/settingsview/components/LinkDeviceDialog.qml
index c0ad198aa..ddf596dd4 100644
--- a/src/app/settingsview/components/LinkDeviceDialog.qml
+++ b/src/app/settingsview/components/LinkDeviceDialog.qml
@@ -87,7 +87,6 @@ BaseModalDialog {
function onExportOnRingEnded(status, pin) {
stackedWidget.setExportPage(status, pin);
- countdownTimer.start();
}
}
@@ -161,15 +160,16 @@ BaseModalDialog {
id: btnConfirm
Layout.alignment: Qt.AlignCenter
- height: 40
- width: 40
- preferredSize: 60
+ height: 36
+ width: 36
hoverEnabled: false
enabled: false
- imageColor: JamiTheme.tintedBlue
- source: JamiResources.check_box_24dp_svg
+ imageColor: JamiTheme.secondaryBackgroundColor
+ hoveredColor: JamiTheme.buttonTintedBlueHovered
+ source: JamiResources.check_black_24dp_svg
+ normalColor: JamiTheme.tintedBlue
onClicked: stackedWidget.setGeneratingPage()
@@ -187,7 +187,7 @@ BaseModalDialog {
onHeightChanged: {
stackedWidget.height = spinnerLayout.implicitHeight
}
-
+ onWidthChanged: stackedWidget.width = exportingLayout.implicitWidth
ColumnLayout {
id: spinnerLayout
@@ -234,6 +234,7 @@ BaseModalDialog {
onHeightChanged: {
stackedWidget.height = exportingLayout.implicitHeight
}
+ onWidthChanged: stackedWidget.width = exportingLayout.implicitWidth
ColumnLayout {
id: exportingLayout
@@ -243,158 +244,140 @@ BaseModalDialog {
Label {
id: instructionLabel
- Layout.maximumWidth: JamiTheme.preferredDialogWidth
- Layout.alignment: Qt.AlignCenter
+ Layout.maximumWidth: Math.min(root.maximumPopupWidth, root.width) - 2 * root.popupMargins
+ Layout.alignment: Qt.AlignLeft
color: JamiTheme.textColor
- padding: 8
wrapMode: Text.Wrap
text: JamiStrings.linkingInstructions
font.pointSize: JamiTheme.textFontSize
font.kerning: true
- horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
- Rectangle {
- Layout.alignment: Qt.AlignCenter
-
- border.width: 3
- border.color: JamiTheme.textColor
- radius: JamiTheme.primaryRadius
- color: darkTheme ? JamiTheme.textColor : JamiTheme.secondaryBackgroundColor
- width: 170
- height: 170
-
- Image {
- id: qrImage
+ RowLayout {
+ spacing: 10
+ Layout.maximumWidth: Math.min(root.maximumPopupWidth, root.width) - 2 * root.popupMargins
- anchors.fill: parent
- anchors.margins: 10
+ Rectangle {
+ Layout.alignment: Qt.AlignCenter
- mipmap: false
- smooth: false
+ radius: 5
+ color: JamiTheme.backgroundRectangleColor
+ width: 100
+ height: 100
+
+ Rectangle {
+ width: qrImage.width + 4
+ height: qrImage.height + 4
+ anchors.centerIn: parent
+ radius: 5
+ color: JamiTheme.darkTheme ? JamiTheme.whiteColor : JamiTheme.jamiButtonBorderColor
+ Image {
+ id: qrImage
+ anchors.centerIn: parent
+ mipmap: false
+ smooth: false
+ source: "image://qrImage/raw_" + exportedPIN.text
+ sourceSize.width: 80
+ sourceSize.height: 80
+ }
+ }
- source: "image://qrImage/raw_" + exportedPIN.text
- sourceSize.width: 150
- sourceSize.height: 150
}
- }
-
- Rectangle {
- id: pinRectangle
- radius: 15
- color: darkTheme ? JamiTheme.tintedBlue : JamiTheme.pinBackgroundColor
+ Rectangle {
+ id: pinRectangle
- width: exportedPIN.implicitWidth + 4 * JamiTheme.preferredMarginSize
- height: exportedPIN.implicitHeight + 2 * JamiTheme.preferredMarginSize
+ radius: 5
+ color: JamiTheme.backgroundRectangleColor
+ Layout.fillWidth: true
+ height: 100
+ Layout.minimumWidth: exportedPIN.width + 20
- Layout.alignment: Qt.AlignCenter
- Layout.margins: JamiTheme.preferredMarginSize
+ Layout.alignment: Qt.AlignCenter
- MaterialLineEdit {
- id: exportedPIN
+ MaterialLineEdit {
+ id: exportedPIN
- padding: 0
- anchors.centerIn: parent
+ padding: 10
+ anchors.centerIn: parent
- text: JamiStrings.pin
- wrapMode: Text.NoWrap
+ text: JamiStrings.pin
+ wrapMode: Text.NoWrap
- backgroundColor: darkTheme ? JamiTheme.tintedBlue : JamiTheme.pinBackgroundColor
+ backgroundColor: JamiTheme.backgroundRectangleColor
- color: darkTheme ? JamiTheme.textColor : JamiTheme.tintedBlue
- selectByMouse: true
- readOnly: true
- font.pointSize: JamiTheme.headerFontSize
- font.kerning: true
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
+ color: darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
+ selectByMouse: true
+ readOnly: true
+ font.pointSize: JamiTheme.tinyCreditsTextSize
+ font.kerning: true
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ }
}
}
- RowLayout {
-
- Layout.alignment: Qt.AlignCenter
- Layout.bottomMargin: JamiTheme.preferredMarginSize
- spacing: 0
-
- Label {
- id: validityLabel
-
- Layout.alignment: Qt.AlignRight
+ Rectangle {
+ radius: 5
+ color: JamiTheme.infoRectangleColor
+ Layout.fillWidth: true
+ Layout.preferredHeight: infoLabels.height + 38
- color: JamiTheme.textColor
- text: JamiStrings.pinValidity
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
- }
+ RowLayout {
+ id: infoLayout
- Label {
- id: countdownLabel
+ anchors.centerIn: parent
+ anchors.fill: parent
+ anchors.margins: 14
+ spacing: 10
- color: JamiTheme.textColor
- Layout.alignment: Qt.AlignLeft
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
+ ResponsiveImage{
+ Layout.fillWidth: true
- text: "10:00"
- }
+ source: JamiResources.outline_info_24dp_svg
+ fillMode: Image.PreserveAspectFit
- Timer {
- id: countdownTimer
- interval: 1000
- repeat: true
+ color: darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
+ Layout.fillHeight: true
+ }
- property int remainingTime: 600
+ ColumnLayout{
+ id: infoLabels
- onTriggered: {
- remainingTime--
+ Layout.fillHeight: true
+ Layout.fillWidth: true
- var minutes = Math.floor(remainingTime / 60)
- var seconds = remainingTime % 60
- countdownLabel.text = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds
+ Label {
+ id: otherDeviceLabel
- if (remainingTime <= 0) {
- validityLabel.visible = false
- countdownLabel.text = JamiStrings.pinExpired
- countdownLabel.color = JamiTheme.redColor
- countdownTimer.stop()
- }
- }
- }
+ Layout.alignment: Qt.AlignLeft
+ color: JamiTheme.textColor
+ text: JamiStrings.onAnotherDevice
- }
+ font.pointSize: JamiTheme.smallFontSize
+ font.kerning: true
+ font.bold: true
+ }
- Label {
- id: otherDeviceLabel
+ Label {
+ id: otherInstructionLabel
- Layout.alignment: Qt.AlignCenter
+ Layout.fillWidth: true
+ Layout.alignment: Qt.AlignLeft
- color: JamiTheme.textColor
- text: JamiStrings.onAnotherDevice
- font.pointSize: JamiTheme.smallFontSize
- font.kerning: true
- font.bold: true
- }
+ wrapMode: Text.Wrap
+ color: JamiTheme.textColor
+ text: JamiStrings.onAnotherDeviceInstruction
- Label {
- id: otherInstructionLabel
-
- Layout.maximumWidth: JamiTheme.preferredDialogWidth
- Layout.bottomMargin: JamiTheme.preferredMarginSize
- Layout.alignment: Qt.AlignCenter
- wrapMode: Text.Wrap
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
-
- color: JamiTheme.textColor
- text: JamiStrings.onAnotherDeviceInstruction
- font.pointSize: JamiTheme.smallFontSize
- font.kerning: true
+ font.pointSize: JamiTheme.smallFontSize
+ font.kerning: true
+ }
+ }
+ }
}
// Displays error messages
--
GitLab