diff --git a/components/StandardButton.qml b/components/StandardButton.qml index 1d3f8192..f1253cd9 100644 --- a/components/StandardButton.qml +++ b/components/StandardButton.qml @@ -85,11 +85,10 @@ Item { horizontalAlignment: Text.AlignHCenter font.family: "Arial" font.bold: true - font.letterSpacing: -1 font.pixelSize: button.fontSize color: parent.textColor visible: parent.icon === "" - font.capitalization : Font.AllUppercase + font.capitalization : Font.Capitalize } Image { diff --git a/main.qml b/main.qml index 759b5503..fe1a8036 100644 --- a/main.qml +++ b/main.qml @@ -67,6 +67,7 @@ ApplicationWindow { property int timeToUnlock: 0 property bool qrScannerEnabled: builtWithScanner && (QtMultimedia.availableCameras.length > 0) property int blocksToSync: 1 + property var isMobile: (appWindow.width > 700) ? false : true // true if wallet ever synchronized property bool walletInitialized : false @@ -191,7 +192,6 @@ ApplicationWindow { } walletManager.setDaemonAddress(persistentSettings.daemon_address) - // wallet already opened with wizard, we just need to initialize it if (typeof wizard.settings['wallet'] !== 'undefined') { console.log("using wizard wallet") @@ -237,6 +237,7 @@ ApplicationWindow { function connectWallet(wallet) { currentWallet = wallet + walletName = usefulName(wallet.path) updateSyncing(false) viewOnly = currentWallet.viewOnly; @@ -1143,7 +1144,7 @@ ApplicationWindow { } } - property int maxWidth: leftPanel.width + 655 + rightPanel.width + property int minWidth: 326 property int minHeight: 720 MouseArea { id: resizeArea @@ -1177,9 +1178,9 @@ ApplicationWindow { var dx = previousPosition.x - pos.x var dy = previousPosition.y - pos.y - if(appWindow.width - dx > parent.maxWidth) + if(appWindow.width - dx > parent.minWidth) appWindow.width -= dx - else appWindow.width = parent.maxWidth + else appWindow.width = parent.minWidth if(appWindow.height - dy > parent.minHeight) appWindow.height -= dy diff --git a/wizard/WizardCreateViewOnlyWallet.qml b/wizard/WizardCreateViewOnlyWallet.qml index c95ced8e..0ee3f815 100644 --- a/wizard/WizardCreateViewOnlyWallet.qml +++ b/wizard/WizardCreateViewOnlyWallet.qml @@ -28,10 +28,11 @@ import moneroComponents.WalletManager 1.0 import QtQuick 2.2 +import QtQuick.Layouts 1.1 import "../components" import "utils.js" as Utils -Item { +ColumnLayout { id: passwordPage opacity: 0 @@ -46,6 +47,7 @@ Item { function onPageOpened(settingsObject) { wizard.nextButton.enabled = true + wizard.nextButton.visible = true } function onPageClosed(settingsObject) { @@ -55,29 +57,6 @@ Item { return wizard.walletPathValid(walletFullPath); } - Row { - id: dotsRow - anchors.top: parent.top - anchors.right: parent.right - anchors.topMargin: 85 - spacing: 6 - - ListModel { - id: dotsModel - ListElement { dotColor: "#FFE00A" } - ListElement { dotColor: "#DBDBDB" } - } - - Repeater { - model: dotsModel - delegate: Rectangle { - width: 12; height: 12 - radius: 6 - color: dotColor - } - } - } - WizardManageWalletUI { id: uiItem titleText: qsTr("Create view only wallet") + translationManager.emptyString @@ -88,7 +67,6 @@ Item { recoverMode: false } - Component.onCompleted: { //parent.wizardRestarted.connect(onWizardRestarted) } diff --git a/wizard/WizardCreateWallet.qml b/wizard/WizardCreateWallet.qml index 084bc635..3f43fe94 100644 --- a/wizard/WizardCreateWallet.qml +++ b/wizard/WizardCreateWallet.qml @@ -29,11 +29,11 @@ import QtQuick 2.2 import moneroComponents.WalletManager 1.0 import moneroComponents.Wallet 1.0 - +import QtQuick.Layouts 1.1 import QtQuick.Dialogs 1.2 import 'utils.js' as Utils -Item { +ColumnLayout { opacity: 0 visible: false @@ -97,7 +97,6 @@ Item { WizardManageWalletUI { id: uiItem titleText: qsTr("Create a new wallet") + translationManager.emptyString - wordsTextTitle: qsTr("Here is your wallet's 25 word mnemonic seed") + translationManager.emptyString wordsTextItem.clipboardButtonVisible: true wordsTextItem.tipTextVisible: true wordsTextItem.memoTextReadOnly: true diff --git a/wizard/WizardFinish.qml b/wizard/WizardFinish.qml index 7e79a4d8..fd9bafcd 100644 --- a/wizard/WizardFinish.qml +++ b/wizard/WizardFinish.qml @@ -27,8 +27,12 @@ // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. import QtQuick 2.2 +import QtQuick.Layouts 1.1 -Item { + +ColumnLayout { + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin opacity: 0 visible: false Behavior on opacity { @@ -70,9 +74,15 @@ Item { } function updateSettingsSummary() { - settingsText.text = qsTr("New wallet details:") + translationManager.emptyString - + "
" - + buildSettingsString(); + if (!isMobile){ + settingsText.text = qsTr("New wallet details:") + translationManager.emptyString + + "
" + + buildSettingsString(); + } else { + settingsText.text = qsTr("Don't forget to write down your seed. You can view your seed and change your settings on settings page.") + } + + } function onPageOpened(settings) { @@ -81,12 +91,9 @@ Item { } - Row { + RowLayout { id: dotsRow - anchors.top: parent.top - anchors.right: parent.right - anchors.topMargin: 85 - spacing: 6 + Layout.alignment: Qt.AlignRight ListModel { id: dotsModel @@ -106,19 +113,12 @@ Item { } } - Column { + ColumnLayout { id: headerColumn - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 16 - anchors.rightMargin: 16 - anchors.top: parent.top - anchors.topMargin: 74 - spacing: 24 + Layout.fillWidth: true Text { - anchors.left: parent.left - width: headerColumn.width - dotsRow.width - 16 + Layout.fillWidth: true font.family: "Arial" font.pixelSize: 28 wrapMode: Text.Wrap @@ -129,9 +129,8 @@ Item { } Text { + Layout.fillWidth: true id: settingsText - anchors.left: parent.left - anchors.right: parent.right font.family: "Arial" font.pixelSize: 16 wrapMode: Text.Wrap diff --git a/wizard/WizardMain.qml b/wizard/WizardMain.qml index 99558b36..8a7c4b0b 100644 --- a/wizard/WizardMain.qml +++ b/wizard/WizardMain.qml @@ -29,16 +29,21 @@ import QtQuick 2.2 import Qt.labs.settings 1.0 import QtQuick.Dialogs 1.2 -import QtQuick.Layouts 1.2 +import QtQuick.Layouts 1.1 import "../components" -GridLayout { +ColumnLayout { anchors.fill: parent + Layout.fillHeight: true id: wizard property alias nextButton : nextButton property var settings : ({}) property int currentPage: 0 + property int wizardLeftMargin: (!isMobile) ? 150 : 25 + property int wizardRightMargin: (!isMobile) ? 150 : 25 + property int wizardBottomMargin: (isMobile) ? 150 : 25 + property int wizardTopMargin: (isMobile) ? 15 : 50 property var paths: { // "create_wallet" : [welcomePage, optionsPage, createWalletPage, passwordPage, donationPage, finishPage ], @@ -86,14 +91,20 @@ GridLayout { } console.log("switchpage: currentPage: ", currentPage); + // Update prev/next button positions for mobile/desktop + prevButton.anchors.verticalCenter = (!isMobile) ? wizard.verticalCenter : undefined + prevButton.anchors.bottom = (isMobile) ? wizard.bottom : undefined + nextButton.anchors.verticalCenter = (!isMobile) ? wizard.verticalCenter : undefined + nextButton.anchors.bottom = (isMobile) ? wizard.bottom : undefined + if (currentPage > 0 || currentPage < pages.length - 1) { pages[currentPage].opacity = 0 var step_value = next ? 1 : -1 currentPage += step_value pages[currentPage].opacity = 1; - var nextButtonVisible = pages[currentPage] !== optionsPage && currentPage < pages.length - 1; - nextButton.visible = nextButtonVisible; + var nextButtonVisible = currentPage > 1 && currentPage < pages.length - 1 + nextButton.visible = nextButtonVisible if (typeof pages[currentPage].onPageOpened !== 'undefined') { pages[currentPage].onPageOpened(settings,next) @@ -227,50 +238,17 @@ GridLayout { } } - Rectangle { - id: nextButton - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: 50 - visible: wizard.currentPage !== 1 && wizard.currentPage !== 6 - width: 50; height: 50 - radius: 25 - color: enabled ? nextArea.containsMouse ? "#FF4304" : "#FF6C3C" : "#DBDBDB" - - - Image { - anchors.centerIn: parent - anchors.horizontalCenterOffset: 3 - source: "qrc:///images/nextPage.png" - } - - MouseArea { - id: nextArea - anchors.fill: parent - hoverEnabled: true - onClicked: wizard.switchPage(true) - } - } - - WizardWelcome { id: welcomePage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 +// Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin + } WizardOptions { id: optionsPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin onCreateWalletClicked: wizard.openCreateWalletPage() onRecoveryWalletClicked: wizard.openRecoveryWalletPage() onOpenWalletClicked: wizard.openOpenWalletPage(); @@ -278,69 +256,46 @@ GridLayout { WizardCreateWallet { id: createWalletPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin } WizardCreateViewOnlyWallet { id: createViewOnlyWalletPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin } WizardRecoveryWallet { id: recoveryWalletPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin } WizardPassword { id: passwordPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin } WizardDonation { id: donationPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin } WizardFinish { id: finishPage - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: nextButton.left - anchors.left: prevButton.right - anchors.leftMargin: 50 - anchors.rightMargin: 50 + Layout.bottomMargin: wizardBottomMargin + Layout.topMargin: wizardTopMargin } Rectangle { id: prevButton - anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenter: wizard.verticalCenter anchors.left: parent.left - anchors.leftMargin: 50 + anchors.leftMargin: isMobile ? 20 : 50 + anchors.bottomMargin: isMobile ? 20 : 50 visible: parent.currentPage > 0 width: 50; height: 50 @@ -361,12 +316,37 @@ GridLayout { } } + Rectangle { + id: nextButton + anchors.verticalCenter: wizard.verticalCenter + anchors.right: parent.right + anchors.rightMargin: isMobile ? 20 : 50 + anchors.bottomMargin: isMobile ? 20 : 50 + visible: currentPage > 1 && currentPage < pages.length - 1 + width: 50; height: 50 + radius: 25 + color: enabled ? nextArea.containsMouse ? "#FF4304" : "#FF6C3C" : "#DBDBDB" + + + Image { + anchors.centerIn: parent + anchors.horizontalCenterOffset: 3 + source: "qrc:///images/nextPage.png" + } + + MouseArea { + id: nextArea + anchors.fill: parent + hoverEnabled: true + onClicked: wizard.switchPage(true) + } + } + StandardButton { id: sendButton anchors.right: parent.right anchors.bottom: parent.bottom - anchors.margins: 50 - width: 110 + anchors.margins: (isMobile) ? 20 : 50 text: qsTr("USE MONERO") + translationManager.emptyString shadowReleasedColor: "#FF4304" shadowPressedColor: "#B32D00" @@ -383,8 +363,7 @@ GridLayout { id: createViewOnlyWalletButton anchors.right: parent.right anchors.bottom: parent.bottom - anchors.margins: 50 - width: 110 + anchors.margins: (isMobile) ? 20 : 50 text: qsTr("Create wallet") + translationManager.emptyString shadowReleasedColor: "#FF4304" shadowPressedColor: "#B32D00" @@ -416,8 +395,7 @@ GridLayout { id: abortViewOnlyButton anchors.right: createViewOnlyWalletButton.left anchors.bottom: parent.bottom - anchors.margins: 50 - width: 110 + anchors.margins: (isMobile) ? 20 : 50 text: qsTr("Abort") + translationManager.emptyString shadowReleasedColor: "#FF4304" shadowPressedColor: "#B32D00" diff --git a/wizard/WizardManageWalletUI.qml b/wizard/WizardManageWalletUI.qml index ae997173..7b97b687 100644 --- a/wizard/WizardManageWalletUI.qml +++ b/wizard/WizardManageWalletUI.qml @@ -33,16 +33,13 @@ import QtQuick.Layouts 1.2 import "../components" import 'utils.js' as Utils -// Reusable component for managing wallet (account name, path, private key) - +// Reusable component for mnaging wallet (account name, path, private key) ColumnLayout { - anchors.left: parent.left - anchors.right: parent.right - spacing: 5 - + id: page + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin property alias titleText: titleText.text property alias accountNameText: accountName.text - property alias wordsTextTitle: frameHeader.text property alias walletPath: fileUrlInput.text property alias wordsTextItem : memoTextItem property alias restoreHeight : restoreHeightItem.text @@ -90,7 +87,6 @@ ColumnLayout { RowLayout { id: dotsRow - Layout.topMargin: 85 Layout.alignment: Qt.AlignRight spacing: 6 @@ -115,6 +111,7 @@ ColumnLayout { RowLayout { id: headerColumn + Layout.fillWidth: true Text { Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter @@ -127,18 +124,20 @@ ColumnLayout { } ColumnLayout { + Layout.bottomMargin: rowSpacing Label { - Layout.fillWidth: true Layout.topMargin: 20 fontSize: 14 - text: qsTr("Wallet name") - + translationManager.emptyString + text: qsTr("Wallet name") + + translationManager.emptyString } LineEdit { id: accountName Layout.fillWidth: true + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 text: defaultAccountName onTextUpdated: checkNextButton() } @@ -146,6 +145,7 @@ ColumnLayout { RowLayout{ visible: recoverMode + spacing: 0 StandardButton { id: recoverFromSeedButton text: qsTr("Restore from seed") + translationManager.emptyString @@ -182,31 +182,39 @@ ColumnLayout { WizardMemoTextInput { id : memoTextItem Layout.fillWidth: true - Layout.preferredWidth: 600 - Layout.minimumWidth: 300 + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 } } // Recover from keys GridLayout { + Layout.bottomMargin: page.rowSpacing + rowSpacing: page.rowSpacing id: recoverFromKeys visible: recoverMode && !recoverFromSeedMode columns: 1 LineEdit { Layout.fillWidth: true id: addressLine + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 placeholderText: qsTr("Account address (public)") onTextUpdated: checkNextButton() } LineEdit { Layout.fillWidth: true id: viewKeyLine + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 placeholderText: qsTr("View key (private)") onTextUpdated: checkNextButton() } LineEdit { Layout.fillWidth: true + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 id: spendKeyLine placeholderText: qsTr("Spend key (private)") onTextUpdated: checkNextButton() @@ -225,12 +233,14 @@ ColumnLayout { color: "#4A4646" } } - + + // Restore Height RowLayout { - // Restore Height + visible: restoreHeightItem.visible // Prevents empty RowLayout bug LineEdit { id: restoreHeightItem - Layout.preferredWidth: 250 + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 placeholderText: qsTr("Restore height (optional)") validator: IntValidator { bottom:0 @@ -238,8 +248,8 @@ ColumnLayout { } } + // Wallet store location ColumnLayout { - Label { Layout.fillWidth: true Layout.topMargin: 20 @@ -250,8 +260,11 @@ ColumnLayout { LineEdit { Layout.fillWidth: true + Layout.maximumWidth: 600 + Layout.minimumWidth: 200 id: fileUrlInput text: moneroAccountsDir + "/" + // workaround for the bug "filechooser only opens once" MouseArea { anchors.fill: parent diff --git a/wizard/WizardOptions.qml b/wizard/WizardOptions.qml index aced4213..b173add5 100644 --- a/wizard/WizardOptions.qml +++ b/wizard/WizardOptions.qml @@ -31,14 +31,15 @@ import QtQml 2.2 import QtQuick.Layouts 1.1 import "../components" -Item { +ColumnLayout { id: page signal createWalletClicked() signal recoveryWalletClicked() signal openWalletClicked() opacity: 0 visible: false - property var buttonSize: 190 + property int buttonSize: (isMobile) ? 80 : 190 + property int buttonImageSize: (isMobile) ? buttonSize - 10 : buttonSize - 30 function onPageClosed() { // Save settings used in open from file. @@ -68,19 +69,15 @@ Item { onOpacityChanged: visible = opacity !== 0 - Column { + ColumnLayout { id: headerColumn - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.topMargin: 74 - anchors.leftMargin: 16 - anchors.rightMargin: 16 - spacing: 24 + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin + Layout.bottomMargin: (!isMobile) ? 40 : 20 + spacing: 30 Text { - anchors.left: parent.left - anchors.right: parent.right + Layout.fillWidth: true font.family: "Arial" font.pixelSize: 28 //renderType: Text.NativeRendering @@ -91,8 +88,7 @@ Item { } Text { - anchors.left: parent.left - anchors.right: parent.right + Layout.fillWidth: true font.family: "Arial" font.pixelSize: 18 //renderType: Text.NativeRendering @@ -103,26 +99,34 @@ Item { } } - Row { - id: selectPath - anchors.verticalCenterOffset: 35 - anchors.centerIn: parent - spacing: 40 + GridLayout { + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin + Layout.alignment: Qt.AlignCenter + id: actionButtons + columnSpacing: 40 + rowSpacing: 10 + Layout.fillWidth: true + Layout.fillHeight: true + flow: isMobile ? GridLayout.TopToBottom : GridLayout.LeftToRight - - Column { - anchors.verticalCenter: parent.verticalCenter - spacing: 30 + GridLayout { + Layout.fillHeight: true + Layout.fillWidth: true + flow: !isMobile ? GridLayout.TopToBottom : GridLayout.LeftToRight + rowSpacing: 20 + columnSpacing: 10 Rectangle { - width: page.buttonSize; height: page.buttonSize + Layout.preferredHeight: page.buttonSize + Layout.preferredWidth: page.buttonSize radius: page.buttonSize color: createWalletArea.containsMouse ? "#DBDBDB" : "#FFFFFF" Image { - width:page.buttonSize -30 - height:page.buttonSize -30 + width: page.buttonImageSize + height: page.buttonImageSize fillMode: Image.PreserveAspectFit horizontalAlignment: Image.AlignRight verticalAlignment: Image.AlignTop @@ -142,28 +146,32 @@ Item { } Text { + Layout.preferredWidth: 190 font.family: "Arial" font.pixelSize: 16 color: "#4A4949" horizontalAlignment: Text.AlignHCenter - width:page.buttonSize wrapMode: Text.WordWrap text: qsTr("Create a new wallet") + translationManager.emptyString } } - Column { - anchors.verticalCenter: parent.verticalCenter - spacing: 30 + GridLayout { + Layout.fillWidth: true + Layout.fillHeight: true + flow: !isMobile ? GridLayout.TopToBottom : GridLayout.LeftToRight + rowSpacing: 20 + columnSpacing: 10 Rectangle { - width: page.buttonSize; height: page.buttonSize + Layout.preferredHeight: page.buttonSize + Layout.preferredWidth: page.buttonSize radius: page.buttonSize color: recoverWalletArea.containsMouse ? "#DBDBDB" : "#FFFFFF" Image { - width:page.buttonSize -30 - height:page.buttonSize -30 + width: page.buttomImageSize + height: page.buttonImageSize fillMode: Image.PreserveAspectFit anchors.centerIn: parent source: "qrc:///images/recoverWallet.png" @@ -181,6 +189,7 @@ Item { } Text { + Layout.preferredWidth: 190 font.family: "Arial" font.pixelSize: 16 color: "#4A4949" @@ -191,18 +200,22 @@ Item { } } - Column { - anchors.verticalCenter: parent.verticalCenter - spacing: 30 + GridLayout { + Layout.fillHeight: true + Layout.fillWidth: true + flow: !isMobile ? GridLayout.TopToBottom : GridLayout.LeftToRight + rowSpacing: 20 + columnSpacing: 10 Rectangle { - width: page.buttonSize; height: page.buttonSize + Layout.preferredHeight: page.buttonSize + Layout.preferredWidth: page.buttonSize radius: page.buttonSize color: openWalletArea.containsMouse ? "#DBDBDB" : "#FFFFFF" Image { - width:page.buttonSize -30 - height:page.buttonSize -30 + width: page.buttonImageSize + height: page.buttonImageSize fillMode: Image.PreserveAspectFit anchors.centerIn: parent source: "qrc:///images/openAccount.png" @@ -220,12 +233,12 @@ Item { } Text { + Layout.preferredWidth: 190 font.family: "Arial" font.pixelSize: 16 color: "#4A4949" horizontalAlignment: Text.AlignHCenter text: qsTr("Open a wallet from file") + translationManager.emptyString - width:page.buttonSize wrapMode: Text.WordWrap } } @@ -234,34 +247,29 @@ Item { } + // daemon select + // TODO: Move to separate page + + ColumnLayout { + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin + Layout.alignment: Qt.AlignCenter - ColumnLayout { - anchors.top: selectPath.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.topMargin: 35 + Label { + Layout.topMargin: 20 + fontSize: 14 + text: qsTr("Custom daemon address (optional)") + translationManager.emptyString + + translationManager.emptyString + } - spacing: 5 + GridLayout { Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter - Rectangle { - Layout.alignment: Qt.AlignCenter - width: 200 - height: 1 - color: "gray" - } - - Text { - Layout.alignment: Qt.AlignCenter - font.family: "Arial" - font.pixelSize: 16 - - color: "#4A4646" - wrapMode: Text.Wrap - text: qsTr("Custom daemon address (optional)") - + translationManager.emptyString - } + columnSpacing: 20 + rowSpacing: 20 + flow: isMobile ? GridLayout.TopToBottom : GridLayout.LeftToRight RowLayout { spacing: 20 @@ -294,6 +302,7 @@ Item { } } } + } } diff --git a/wizard/WizardPassword.qml b/wizard/WizardPassword.qml index 3c37c14b..2564ce4f 100644 --- a/wizard/WizardPassword.qml +++ b/wizard/WizardPassword.qml @@ -28,10 +28,13 @@ import moneroComponents.WalletManager 1.0 import QtQuick 2.2 +import QtQuick.Layouts 1.1 import "../components" import "utils.js" as Utils -Item { +ColumnLayout { + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin id: passwordPage opacity: 0 @@ -72,12 +75,9 @@ Item { passwordUI.confirmPassword = ""; } - Row { + RowLayout { id: dotsRow - anchors.top: parent.top - anchors.right: parent.right - anchors.topMargin: 85 - spacing: 6 + Layout.alignment: Qt.AlignRight ListModel { id: dotsModel @@ -100,20 +100,12 @@ Item { } } - Column { + ColumnLayout { id: headerColumn - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 16 - anchors.rightMargin: 16 - anchors.top: parent.top - anchors.topMargin: 74 - spacing: 24 Text { + Layout.fillWidth: true id: titleText - anchors.left: parent.left - width: headerColumn.width - dotsRow.width - 16 font.family: "Arial" font.pixelSize: 28 wrapMode: Text.Wrap @@ -124,8 +116,8 @@ Item { } Text { - anchors.left: parent.left - anchors.right: parent.right + Layout.fillWidth: true + Layout.bottomMargin: 30 font.family: "Arial" font.pixelSize: 18 wrapMode: Text.Wrap @@ -138,15 +130,14 @@ Item { } } - - WizardPasswordUI { - id: passwordUI - anchors.right: parent.right - anchors.left: parent.left - anchors.top: headerColumn.bottom - anchors.topMargin: 30 + ColumnLayout { + Layout.fillWidth: true; + WizardPasswordUI { + id: passwordUI + } } + Component.onCompleted: { parent.wizardRestarted.connect(onWizardRestarted) } diff --git a/wizard/WizardPasswordInput.qml b/wizard/WizardPasswordInput.qml index 62f27a3f..3013c226 100644 --- a/wizard/WizardPasswordInput.qml +++ b/wizard/WizardPasswordInput.qml @@ -29,21 +29,20 @@ import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 +import QtQuick.Layouts 1.1 -FocusScope { +ColumnLayout { property alias password: password.text property alias placeholderText: password.placeholderText signal changed(string password) TextField { + Layout.fillWidth: true id : password focus:true - anchors.fill: parent - horizontalAlignment: TextInput.AlignLeft - verticalAlignment: TextInput.AlignVCenter font.family: "Arial" - font.pixelSize: 32 + font.pixelSize: (isMobile) ? 25 : 32 echoMode: TextInput.Password style: TextFieldStyle { renderType: Text.NativeRendering @@ -62,9 +61,7 @@ FocusScope { } Rectangle { - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom + Layout.fillWidth:true height: 1 color: "#DBDBDB" } diff --git a/wizard/WizardPasswordUI.qml b/wizard/WizardPasswordUI.qml index 42df453c..c8e98905 100644 --- a/wizard/WizardPasswordUI.qml +++ b/wizard/WizardPasswordUI.qml @@ -28,10 +28,11 @@ import moneroComponents.WalletManager 1.0 import QtQuick 2.2 +import QtQuick.Layouts 1.1 import "../components" import "utils.js" as Utils -FocusScope { +ColumnLayout { property alias password: passwordItem.password property alias confirmPassword: retypePasswordItem.password property bool passwordsMatch: passwordItem.password === retypePasswordItem.password @@ -62,10 +63,10 @@ FocusScope { WizardPasswordInput { id: passwordItem - anchors.horizontalCenter: parent.horizontalCenter - anchors.topMargin: 24 - width: 300 - height: 62 + Layout.fillWidth: true + Layout.maximumWidth: 300 + Layout.minimumWidth: 200 + Layout.alignment: Qt.AlignHCenter placeholderText : qsTr("Password") + translationManager.emptyString; KeyNavigation.tab: retypePasswordItem onChanged: handlePassword() @@ -74,22 +75,19 @@ FocusScope { WizardPasswordInput { id: retypePasswordItem - anchors.top: passwordItem.bottom - anchors.horizontalCenter: parent.horizontalCenter - anchors.topMargin: 24 - width: 300 - height: 62 + Layout.fillWidth: true + Layout.maximumWidth: 300 + Layout.minimumWidth: 200 + Layout.alignment: Qt.AlignHCenter placeholderText : qsTr("Confirm password") + translationManager.emptyString; KeyNavigation.tab: passwordItem onChanged: handlePassword() } PrivacyLevelSmall { + Layout.topMargin: isMobile ? 20 : 40 + Layout.fillWidth: true id: privacyLevel - anchors.left: parent.left - anchors.right: parent.right - anchors.top: retypePasswordItem.bottom - anchors.topMargin: 60 background: "#F0EEEE" interactive: false } diff --git a/wizard/WizardRecoveryWallet.qml b/wizard/WizardRecoveryWallet.qml index 34fd580e..f0ec0e6d 100644 --- a/wizard/WizardRecoveryWallet.qml +++ b/wizard/WizardRecoveryWallet.qml @@ -29,9 +29,10 @@ import QtQuick 2.2 import QtQuick.Dialogs 1.2 import moneroComponents.Wallet 1.0 +import QtQuick.Layouts 1.1 import 'utils.js' as Utils -Item { +ColumnLayout { opacity: 0 visible: false @@ -109,7 +110,6 @@ Item { id: uiItem accountNameText: defaultAccountName titleText: qsTr("Restore wallet") + translationManager.emptyString - wordsTextTitle: qsTr("Enter your 25 word mnemonic seed:") + translationManager.emptyString wordsTextItem.clipboardButtonVisible: false wordsTextItem.tipTextVisible: false wordsTextItem.memoTextReadOnly: false diff --git a/wizard/WizardWelcome.qml b/wizard/WizardWelcome.qml index a2d69b34..715a7024 100644 --- a/wizard/WizardWelcome.qml +++ b/wizard/WizardWelcome.qml @@ -32,7 +32,9 @@ import QtQuick.Layouts 1.1 import QtQml 2.2 -Item { + +ColumnLayout { +// anchors.fill:parent Behavior on opacity { NumberAnimation { duration: 100; easing.type: Easing.InQuad } } @@ -60,45 +62,35 @@ Item { return true } - // Welcome text - Column { + ColumnLayout { id: headerColumn - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.topMargin: 74 - anchors.leftMargin: 16 - anchors.rightMargin: 16 - spacing: 24 + Layout.leftMargin: wizardLeftMargin + Layout.rightMargin: wizardRightMargin + Layout.bottomMargin: 40 + spacing: 20 Text { - id: welcomeText - anchors.left: parent.left - anchors.right: parent.right + Layout.fillWidth: true font.family: "Arial" font.pixelSize: 28 - //renderType: Text.NativeRendering color: "#3F3F3F" wrapMode: Text.Wrap - // hack to implement dynamic translation - // https://wiki.qt.io/How_to_do_dynamic_translation_in_QML - text: qsTr("Welcome") + - translationManager.emptyString - + horizontalAlignment: Text.AlignHCenter + text: qsTr("Welcome to Monero!") + translationManager.emptyString } Text { - id: selectLanguageText - anchors.left: parent.left - anchors.right: parent.right + Layout.fillWidth: true font.family: "Arial" font.pixelSize: 18 - //renderType: Text.NativeRendering color: "#4A4646" wrapMode: Text.Wrap + horizontalAlignment: Text.AlignHCenter text: qsTr("Please choose a language and regional format.") + translationManager.emptyString } } + + // Flags model XmlListModel { id: languagesModel @@ -124,63 +116,72 @@ Item { } } - // Flags view - GridView { - id: gridView - cellWidth: 140 - cellHeight: 120 - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.top: headerColumn.bottom - anchors.topMargin: 24 - anchors.leftMargin: 16 - anchors.rightMargin: 16 - clip: true - model: languagesModel + ColumnLayout{ + // Flags view + GridView { + property int margin: (isMobile) ? 0 : Math.floor(appWindow.width/12); - delegate: Item { - id: flagDelegate - width: gridView.cellWidth - height: gridView.cellHeight + id: gridView + cellWidth: 140 + cellHeight: 120 + model: languagesModel + // Hack to center the flag grid + property int columns: Math.floor(appWindow.width/140) + Layout.leftMargin: margin + (appWindow.width - cellWidth*columns) /2 + Layout.rightMargin: margin + Layout.fillWidth: true + Layout.fillHeight: true - Rectangle { - id: flagRect - width: 60; height: 60 - anchors.centerIn: parent - radius: 30 - color: gridView.currentIndex === index ? "#DBDBDB" : "#FFFFFF" - Image { - anchors.fill: parent - source: flag - } - } - Text { - font.family: "Arial" - font.pixelSize: 18 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: flagRect.bottom - anchors.topMargin: 10 - font.bold: gridView.currentIndex === index - elide: Text.ElideRight - color: "#3F3F3F" - text: display_name - } - MouseArea { - id: delegateArea - anchors.fill: parent - onClicked: { - gridView.currentIndex = index - var data = languagesModel.get(gridView.currentIndex); - if (data !== null || data !== undefined) { - var locale = data.locale - translationManager.setLanguage(locale.split("_")[0]); - wizard.switchPage(true) + clip: true + + delegate: ColumnLayout { + id: flagDelegate + width: gridView.cellWidth +// height: gridView.cellHeight +// Layout.alignment: Qt.AlignHCenter + Rectangle { + id: flagRect + width: 60; height: 60 +// anchors.centerIn: parent + radius: 30 + Layout.alignment: Qt.AlignHCenter + color: gridView.currentIndex === index ? "#DBDBDB" : "#FFFFFF" + Image { + anchors.fill: parent + source: flag } } - } - } // delegate + + Text { + font.family: "Arial" + font.pixelSize: 18 +// anchors.horizontalCenter: parent.horizontalCenter + font.bold: gridView.currentIndex === index +// elide: Text.ElideRight + color: "#3F3F3F" + text: display_name +// horizontalAlignment: Text.AlignHCenter + Layout.alignment: Qt.AlignHCenter + } + MouseArea { + id: delegateArea + anchors.fill: parent + onClicked: { + gridView.currentIndex = index + var data = languagesModel.get(gridView.currentIndex); + if (data !== null || data !== undefined) { + var locale = data.locale + translationManager.setLanguage(locale.split("_")[0]); + wizard.switchPage(true) + } + } + } + } // delegate + + } + + }