mirror of
https://git.jami.net/savoirfairelinux/jami-client-qt.git
synced 2025-07-15 13:05:23 +02:00
LinkDeviceDialog: new design
GitLab: #1417 Change-Id: I8039355efcac28bf6ccc39dea1c785ef7f86b9f4
This commit is contained in:
cberthet
Sébastien Blin
parent
2656769a59
commit
6cbda2cea1
1 changed files with 114 additions and 131 deletions
|
|
@ -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,158 +244,140 @@ 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
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
anchors.fill: parent
|
|
||||||
anchors.margins: 10
|
|
||||||
|
|
||||||
mipmap: false
|
|
||||||
smooth: false
|
|
||||||
|
|
||||||
source: "image://qrImage/raw_" + exportedPIN.text
|
|
||||||
sourceSize.width: 150
|
|
||||||
sourceSize.height: 150
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: pinRectangle
|
|
||||||
|
|
||||||
radius: 15
|
|
||||||
color: darkTheme ? JamiTheme.tintedBlue : JamiTheme.pinBackgroundColor
|
|
||||||
|
|
||||||
width: exportedPIN.implicitWidth + 4 * JamiTheme.preferredMarginSize
|
|
||||||
height: exportedPIN.implicitHeight + 2 * JamiTheme.preferredMarginSize
|
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignCenter
|
|
||||||
Layout.margins: JamiTheme.preferredMarginSize
|
|
||||||
|
|
||||||
MaterialLineEdit {
|
|
||||||
id: exportedPIN
|
|
||||||
|
|
||||||
padding: 0
|
|
||||||
anchors.centerIn: parent
|
|
||||||
|
|
||||||
text: JamiStrings.pin
|
|
||||||
wrapMode: Text.NoWrap
|
|
||||||
|
|
||||||
backgroundColor: darkTheme ? JamiTheme.tintedBlue : JamiTheme.pinBackgroundColor
|
|
||||||
|
|
||||||
color: darkTheme ? JamiTheme.textColor : JamiTheme.tintedBlue
|
|
||||||
selectByMouse: true
|
|
||||||
readOnly: true
|
|
||||||
font.pointSize: JamiTheme.headerFontSize
|
|
||||||
font.kerning: true
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
|
spacing: 10
|
||||||
|
Layout.maximumWidth: Math.min(root.maximumPopupWidth, root.width) - 2 * root.popupMargins
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignCenter
|
Rectangle {
|
||||||
Layout.bottomMargin: JamiTheme.preferredMarginSize
|
Layout.alignment: Qt.AlignCenter
|
||||||
spacing: 0
|
|
||||||
|
|
||||||
Label {
|
radius: 5
|
||||||
id: validityLabel
|
color: JamiTheme.backgroundRectangleColor
|
||||||
|
width: 100
|
||||||
|
height: 100
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignRight
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
color: JamiTheme.textColor
|
|
||||||
text: JamiStrings.pinValidity
|
|
||||||
font.pointSize: JamiTheme.textFontSize
|
|
||||||
font.kerning: true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
Rectangle {
|
||||||
id: countdownLabel
|
id: pinRectangle
|
||||||
|
|
||||||
color: JamiTheme.textColor
|
radius: 5
|
||||||
Layout.alignment: Qt.AlignLeft
|
color: JamiTheme.backgroundRectangleColor
|
||||||
font.pointSize: JamiTheme.textFontSize
|
Layout.fillWidth: true
|
||||||
font.kerning: true
|
height: 100
|
||||||
|
Layout.minimumWidth: exportedPIN.width + 20
|
||||||
|
|
||||||
text: "10:00"
|
Layout.alignment: Qt.AlignCenter
|
||||||
|
|
||||||
|
MaterialLineEdit {
|
||||||
|
id: exportedPIN
|
||||||
|
|
||||||
|
padding: 10
|
||||||
|
anchors.centerIn: parent
|
||||||
|
|
||||||
|
text: JamiStrings.pin
|
||||||
|
wrapMode: Text.NoWrap
|
||||||
|
|
||||||
|
backgroundColor: JamiTheme.backgroundRectangleColor
|
||||||
|
|
||||||
|
color: darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
|
||||||
|
selectByMouse: true
|
||||||
|
readOnly: true
|
||||||
|
font.pointSize: JamiTheme.tinyCreditsTextSize
|
||||||
|
font.kerning: true
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 {
|
Rectangle {
|
||||||
id: otherDeviceLabel
|
radius: 5
|
||||||
|
color: JamiTheme.infoRectangleColor
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: infoLabels.height + 38
|
||||||
|
|
||||||
Layout.alignment: Qt.AlignCenter
|
RowLayout {
|
||||||
|
id: infoLayout
|
||||||
|
|
||||||
color: JamiTheme.textColor
|
anchors.centerIn: parent
|
||||||
text: JamiStrings.onAnotherDevice
|
anchors.fill: parent
|
||||||
font.pointSize: JamiTheme.smallFontSize
|
anchors.margins: 14
|
||||||
font.kerning: true
|
spacing: 10
|
||||||
font.bold: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
ResponsiveImage{
|
||||||
id: otherInstructionLabel
|
Layout.fillWidth: true
|
||||||
|
|
||||||
Layout.maximumWidth: JamiTheme.preferredDialogWidth
|
source: JamiResources.outline_info_24dp_svg
|
||||||
Layout.bottomMargin: JamiTheme.preferredMarginSize
|
fillMode: Image.PreserveAspectFit
|
||||||
Layout.alignment: Qt.AlignCenter
|
|
||||||
wrapMode: Text.Wrap
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
|
|
||||||
color: JamiTheme.textColor
|
color: darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
|
||||||
text: JamiStrings.onAnotherDeviceInstruction
|
Layout.fillHeight: true
|
||||||
font.pointSize: JamiTheme.smallFontSize
|
}
|
||||||
font.kerning: true
|
|
||||||
|
ColumnLayout{
|
||||||
|
id: infoLabels
|
||||||
|
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
Label {
|
||||||
|
id: otherDeviceLabel
|
||||||
|
|
||||||
|
Layout.alignment: Qt.AlignLeft
|
||||||
|
color: JamiTheme.textColor
|
||||||
|
text: JamiStrings.onAnotherDevice
|
||||||
|
|
||||||
|
font.pointSize: JamiTheme.smallFontSize
|
||||||
|
font.kerning: true
|
||||||
|
font.bold: true
|
||||||
|
}
|
||||||
|
|
||||||
|
Label {
|
||||||
|
id: otherInstructionLabel
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.alignment: Qt.AlignLeft
|
||||||
|
|
||||||
|
wrapMode: Text.Wrap
|
||||||
|
color: JamiTheme.textColor
|
||||||
|
text: JamiStrings.onAnotherDeviceInstruction
|
||||||
|
|
||||||
|
font.pointSize: JamiTheme.smallFontSize
|
||||||
|
font.kerning: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Displays error messages
|
// Displays error messages
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue