lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-15 13:05:23 +02:00
Code Activity

LinkDeviceDialog: new design

Browse source 
GitLab: #1417
Change-Id: I8039355efcac28bf6ccc39dea1c785ef7f86b9f4
This commit is contained in:
cberthet 2023-11-09 14:08:15 -05:00 • committed by Sébastien Blin
parent 2656769a59
commit 6cbda2cea1
1 changed files with 114 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
src/app/settingsview/components/LinkDeviceDialog.qml
View file

@ -87,7 +87,6 @@ BaseModalDialog {
function onExportOnRingEnded(status, pin) { function onExportOnRingEnded(status, pin) {
stackedWidget.setExportPage(status, pin); stackedWidget.setExportPage(status, pin);
countdownTimer.start();
} }
} }
@ -161,15 +160,16 @@ BaseModalDialog {
id: btnConfirm id: btnConfirm
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
height: 40 height: 36
width: 40 width: 36
preferredSize: 60
hoverEnabled: false hoverEnabled: false
enabled: false enabled: false
imageColor: JamiTheme.tintedBlue imageColor: JamiTheme.secondaryBackgroundColor
source: JamiResources.check_box_24dp_svg hoveredColor: JamiTheme.buttonTintedBlueHovered
source: JamiResources.check_black_24dp_svg
normalColor: JamiTheme.tintedBlue
onClicked: stackedWidget.setGeneratingPage() onClicked: stackedWidget.setGeneratingPage()
@ -187,7 +187,7 @@ BaseModalDialog {
onHeightChanged: { onHeightChanged: {
stackedWidget.height = spinnerLayout.implicitHeight stackedWidget.height = spinnerLayout.implicitHeight
} }
onWidthChanged: stackedWidget.width = exportingLayout.implicitWidth
ColumnLayout { ColumnLayout {
id: spinnerLayout id: spinnerLayout
@ -234,6 +234,7 @@ BaseModalDialog {
onHeightChanged: { onHeightChanged: {
stackedWidget.height = exportingLayout.implicitHeight stackedWidget.height = exportingLayout.implicitHeight
} }
onWidthChanged: stackedWidget.width = exportingLayout.implicitWidth
ColumnLayout { ColumnLayout {
id: exportingLayout id: exportingLayout
@ -243,139 +244,120 @@ BaseModalDialog {
Label { Label {
id: instructionLabel id: instructionLabel
Layout.maximumWidth: JamiTheme.preferredDialogWidth Layout.maximumWidth: Math.min(root.maximumPopupWidth, root.width) - 2 * root.popupMargins
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignLeft
color: JamiTheme.textColor color: JamiTheme.textColor
padding: 8
wrapMode: Text.Wrap wrapMode: Text.Wrap
text: JamiStrings.linkingInstructions text: JamiStrings.linkingInstructions
font.pointSize: JamiTheme.textFontSize font.pointSize: JamiTheme.textFontSize
font.kerning: true font.kerning: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
RowLayout {
spacing: 10
Layout.maximumWidth: Math.min(root.maximumPopupWidth, root.width) - 2 * root.popupMargins
Rectangle { Rectangle {
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
border.width: 3 radius: 5
border.color: JamiTheme.textColor color: JamiTheme.backgroundRectangleColor
radius: JamiTheme.primaryRadius width: 100
color: darkTheme ? JamiTheme.textColor : JamiTheme.secondaryBackgroundColor height: 100
width: 170
height: 170
Rectangle {
width: qrImage.width + 4
height: qrImage.height + 4
anchors.centerIn: parent
radius: 5
color: JamiTheme.darkTheme ? JamiTheme.whiteColor : JamiTheme.jamiButtonBorderColor
Image { Image {
id: qrImage id: qrImage
anchors.centerIn: parent
anchors.fill: parent
anchors.margins: 10
mipmap: false mipmap: false
smooth: false smooth: false
source: "image://qrImage/raw_" + exportedPIN.text source: "image://qrImage/raw_" + exportedPIN.text
sourceSize.width: 150 sourceSize.width: 80
sourceSize.height: 150 sourceSize.height: 80
} }
} }
}
Rectangle { Rectangle {
id: pinRectangle id: pinRectangle
radius: 15 radius: 5
color: darkTheme ? JamiTheme.tintedBlue : JamiTheme.pinBackgroundColor color: JamiTheme.backgroundRectangleColor
Layout.fillWidth: true
width: exportedPIN.implicitWidth + 4 * JamiTheme.preferredMarginSize height: 100
height: exportedPIN.implicitHeight + 2 * JamiTheme.preferredMarginSize Layout.minimumWidth: exportedPIN.width + 20
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.margins: JamiTheme.preferredMarginSize
MaterialLineEdit { MaterialLineEdit {
id: exportedPIN id: exportedPIN
padding: 0 padding: 10
anchors.centerIn: parent anchors.centerIn: parent
text: JamiStrings.pin text: JamiStrings.pin
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
backgroundColor: darkTheme ? JamiTheme.tintedBlue : JamiTheme.pinBackgroundColor backgroundColor: JamiTheme.backgroundRectangleColor
color: darkTheme ? JamiTheme.textColor : JamiTheme.tintedBlue color: darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
selectByMouse: true selectByMouse: true
readOnly: true readOnly: true
font.pointSize: JamiTheme.headerFontSize font.pointSize: JamiTheme.tinyCreditsTextSize
font.kerning: true font.kerning: true
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
} }
}
Rectangle {
radius: 5
color: JamiTheme.infoRectangleColor
Layout.fillWidth: true
Layout.preferredHeight: infoLabels.height + 38
RowLayout { RowLayout {
id: infoLayout
Layout.alignment: Qt.AlignCenter anchors.centerIn: parent
Layout.bottomMargin: JamiTheme.preferredMarginSize anchors.fill: parent
spacing: 0 anchors.margins: 14
spacing: 10
Label { ResponsiveImage{
id: validityLabel Layout.fillWidth: true
Layout.alignment: Qt.AlignRight source: JamiResources.outline_info_24dp_svg
fillMode: Image.PreserveAspectFit
color: JamiTheme.textColor color: darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
text: JamiStrings.pinValidity Layout.fillHeight: true
font.pointSize: JamiTheme.textFontSize
font.kerning: true
} }
Label { ColumnLayout{
id: countdownLabel id: infoLabels
color: JamiTheme.textColor Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft Layout.fillWidth: true
font.pointSize: JamiTheme.textFontSize
font.kerning: true
text: "10:00"
}
Timer {
id: countdownTimer
interval: 1000
repeat: true
property int remainingTime: 600
onTriggered: {
remainingTime--
var minutes = Math.floor(remainingTime / 60)
var seconds = remainingTime % 60
countdownLabel.text = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds
if (remainingTime <= 0) {
validityLabel.visible = false
countdownLabel.text = JamiStrings.pinExpired
countdownLabel.color = JamiTheme.redColor
countdownTimer.stop()
}
}
}
}
Label { Label {
id: otherDeviceLabel id: otherDeviceLabel
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignLeft
color: JamiTheme.textColor color: JamiTheme.textColor
text: JamiStrings.onAnotherDevice text: JamiStrings.onAnotherDevice
font.pointSize: JamiTheme.smallFontSize font.pointSize: JamiTheme.smallFontSize
font.kerning: true font.kerning: true
font.bold: true font.bold: true
@ -384,18 +366,19 @@ BaseModalDialog {
Label { Label {
id: otherInstructionLabel id: otherInstructionLabel
Layout.maximumWidth: JamiTheme.preferredDialogWidth Layout.fillWidth: true
Layout.bottomMargin: JamiTheme.preferredMarginSize Layout.alignment: Qt.AlignLeft
Layout.alignment: Qt.AlignCenter
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
color: JamiTheme.textColor color: JamiTheme.textColor
text: JamiStrings.onAnotherDeviceInstruction text: JamiStrings.onAnotherDeviceInstruction
font.pointSize: JamiTheme.smallFontSize font.pointSize: JamiTheme.smallFontSize
font.kerning: true font.kerning: true
} }
}
}
}
// Displays error messages // Displays error messages
Label { Label {