Wizard redesign

This commit is contained in:
dsc
2019-01-14 01:02:44 +01:00
parent 333f4aaf83
commit f329a71029
79 changed files with 4670 additions and 3098 deletions

View File

@@ -33,14 +33,20 @@ import "../components" as MoneroComponents
Item {
id: inlineButton
height: rect.height * scaleRatio
height: parent.height
anchors.top: parent.top
anchors.bottom: parent.bottom
property bool small: false
property string shadowPressedColor: "#B32D00"
property string shadowReleasedColor: "#FF4304"
property string pressedColor: "#FF4304"
property string releasedColor: "#FF6C3C"
property string icon: ""
property string textColor: "#FFFFFF"
property int fontSize: 12 * scaleRatio
property int fontSize: small ? 14 * scaleRatio : 16 * scaleRatio
property int rectHeight: small ? 24 * scaleRatio : 28 * scaleRatio
property int rectHMargin: small ? 16 * scaleRatio : 22 * scaleRatio
property alias text: inlineText.text
property alias buttonColor: rect.color
signal clicked()
@@ -59,14 +65,14 @@ Item {
width: inlineText.text ? (inlineText.width + 22) * scaleRatio : inlineButton.icon ? (inlineImage.width + 16) * scaleRatio : rect.height
radius: 4
anchors.top: parent.top
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
Text {
id: inlineText
font.family: MoneroComponents.Style.fontBold.name
font.bold: true
font.pixelSize: 16 * scaleRatio
font.pixelSize: inlineButton.fontSize
color: "black"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter

View File

@@ -51,6 +51,9 @@ TextArea {
selectionColor: MoneroComponents.Style.dimmedFontColor
selectedTextColor: MoneroComponents.Style.defaultFontColor
property int minimumHeight: 100 * scaleRatio
height: contentHeight > minimumHeight ? contentHeight : minimumHeight
onTextChanged: {
if(addressValidation){
// js replacement for `RegExpValidator { regExp: /[0-9A-Fa-f]{95}/g }`

View File

@@ -0,0 +1,170 @@
// Copyright (c) 2014-2019, The Monero Project
//
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without modification, are
// permitted provided that the following conditions are met:
//
// 1. Redistributions of source code must retain the above copyright notice, this list of
// conditions and the following disclaimer.
//
// 2. Redistributions in binary form must reproduce the above copyright notice, this list
// of conditions and the following disclaimer in the documentation and/or other
// materials provided with the distribution.
//
// 3. Neither the name of the copyright holder nor the names of its contributors may be
// used to endorse or promote products derived from this software without specific
// prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
import "../components" as MoneroComponents
import QtQuick 2.7
import QtQuick.XmlListModel 2.0
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0
Drawer {
id: sideBar
// @TODO: Qt 5.10 introduces `opened` built-in for Drawer
property bool isOpened: false
onClosed: {
isOpened = false;
}
onOpened: {
isOpened = true;
}
width: 240 * scaleRatio
height: parent.height - (persistentSettings.customDecorations ? 50 : 0)
y: titleBar.height
background: Rectangle {
color: "#0d0d0d"
width: parent.width
}
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
color: "red"
ListView {
clip: true
Layout.fillHeight: true
Layout.fillWidth: true
boundsBehavior: Flickable.StopAtBounds
width: sideBar.width
height: sideBar.height
model: langModel
delegate: Rectangle {
id: item
color: "transparent"
width: sideBar.width
height: 32 * scaleRatio
Text {
anchors.left: parent.left
anchors.leftMargin: 16 * scaleRatio
font.bold: true
font.pixelSize: 14 * scaleRatio
color: MoneroComponents.Style.defaultFontColor
text: display_name
anchors.verticalCenter: parent.verticalCenter
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
color: MoneroComponents.Style.dividerColor
opacity: MoneroComponents.Style.dividerOpacity
height: 1
}
// button gradient while checked
Image {
anchors.fill: parent
source: "../images/menuButtonGradient.png"
opacity: 0.65
visible: true
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
var locale_spl = locale.split("_");
// reload active translations
console.log(locale_spl[0]);
translationManager.setLanguage(locale_spl[0]);
// set wizard language settings
wizard.language_locale = locale;
wizard.language_wallet = wallet_language;
wizard.language_language = display_name + " (" + locale_spl[1] + ") ";
sideBar.close()
}
hoverEnabled: true
onEntered: {
// item.color = "#26FFFFFF"
parent.opacity = 1
}
onExited: {
// item.color = "transparent"
parent.opacity = 0.65
}
}
}
}
ScrollIndicator.vertical: ScrollIndicator {
// @TODO: QT 5.9 introduces `policy: ScrollBar.AlwaysOn`
active: true
contentItem.opacity: 0.7
onActiveChanged: {
if (!active) {
active = true;
}
}
}
}
}
//Flags model
XmlListModel {
id: langModel
source: "/lang/languages.xml"
query: "/languages/language"
XmlRole { name: "display_name"; query: "@display_name/string()" }
XmlRole { name: "locale"; query: "@locale/string()" }
XmlRole { name: "wallet_language"; query: "@wallet_language/string()" }
XmlRole { name: "flag"; query: "@flag/string()" }
// TODO: XmlListModel is read only, we should store current language somewhere else
// and set current language accordingly
XmlRole { name: "isCurrent"; query: "@enabled/string()" }
onStatusChanged: {
if(status === XmlListModel.Ready){
console.log("languages available: ",count);
}
}
}
}

View File

@@ -54,7 +54,9 @@ Item {
property bool borderDisabled: false
property string borderColor: {
if(input.activeFocus){
if(error && input.text !== ""){
return MoneroComponents.Style.inputBorderColorInvalid;
} else if(input.activeFocus){
return MoneroComponents.Style.inputBorderColorActive;
} else {
return MoneroComponents.Style.inputBorderColorInActive;
@@ -211,8 +213,6 @@ Item {
visible: item.inlineButtonText ? true : false
anchors.right: parent.right
anchors.rightMargin: 8 * scaleRatio
anchors.top: parent.top
anchors.topMargin: 6 * scaleRatio
}
}
}

View File

@@ -42,6 +42,12 @@ ColumnLayout {
property alias labelButtonText: labelButton.text
property alias placeholderText: placeholderLabel.text
property int inputPaddingLeft: 10 * scaleRatio
property int inputPaddingRight: 10 * scaleRatio
property int inputPaddingTop: 10 * scaleRatio
property int inputPaddingBottom: 10 * scaleRatio
property int inputRadius: 4
property bool placeholderCenter: false
property string placeholderFontFamily: MoneroComponents.Style.fontRegular.name
property bool placeholderFontBold: false
@@ -153,8 +159,12 @@ ColumnLayout {
readOnly: false
addressValidation: false
Layout.fillWidth: true
topPadding: 10 * scaleRatio
bottomPadding: 10 * scaleRatio
leftPadding: item.inputPaddingLeft
rightPadding: item.inputPaddingRight
topPadding: item.inputPaddingTop
bottomPadding: item.inputPaddingBottom
wrapMode: item.wrapMode
fontSize: item.fontSize
fontBold: item.fontBold
@@ -182,7 +192,7 @@ ColumnLayout {
color: "transparent"
border.width: 1
border.color: item.borderColor
radius: 4
radius: item.inputRadius
anchors.fill: parent
visible: !item.borderDisabled
}

View File

@@ -47,8 +47,13 @@ Rectangle {
}
if (status == Wallet.ConnectionStatus_WrongVersion)
return qsTr("Wrong version")
if (status == Wallet.ConnectionStatus_Disconnected)
if (status == Wallet.ConnectionStatus_Disconnected){
if(appWindow.walletMode <= 1){
return qsTr("Searching node") + translationManager.emptyString;
}
return qsTr("Disconnected")
}
return qsTr("Invalid connection status")
}

View File

@@ -31,6 +31,7 @@ import QtQuick.Controls.Styles 1.2
import QtQuick 2.2
import QtQuick.Layouts 1.1
import "../js/Utils.js" as Utils
import "../components" as MoneroComponents
GridLayout {
@@ -65,7 +66,14 @@ GridLayout {
}
function getAddress() {
return daemonAddr.text.trim() + ":" + daemonPort.text.trim()
var addr = daemonAddr.text.trim();
var port = daemonPort.text.trim();
// validation
if(addr === "" || addr.length < 2) return "";
if(!Utils.isNumeric(port)) return "";
return addr + ":" + port;
}
LineEdit {

View File

@@ -16,6 +16,7 @@ QtObject {
property string defaultFontColor: "white"
property string dimmedFontColor: "#BBBBBB"
property string lightGreyFontColor: "#DFDFDF"
property string errorColor: "#FA6800"
property string inputBoxBackground: "black"
property string inputBoxBackgroundError: "#FFDDDD"

View File

@@ -126,37 +126,88 @@ Rectangle {
z: parent.z + 1
}
// collapse left panel
Rectangle {
id: goToBasicVersionButton
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
property bool checked: false
anchors.top: parent.top
RowLayout {
anchors.left: parent.left
color: "transparent"
height: titleBar.height
width: height
visible: !titleBar.orange && titleBar.basicButtonVisible
anchors.top: parent.top
width: 40
height: parent.height
spacing: 0
z: parent.z + 2
Image {
width: 14
height: 14
anchors.centerIn: parent
source: "../images/expand.png"
Rectangle {
Layout.preferredHeight: parent.height
Layout.preferredWidth: Layout.preferredHeight
id: goToBasicVersionButton
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
property bool checked: false
color: "transparent"
height: titleBar.height
width: height
visible: !titleBar.orange && titleBar.basicButtonVisible
Image {
width: 14
height: 14
anchors.centerIn: parent
source: "../images/expand.png"
}
MouseArea {
id: basicMouseArea
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
onExited: goToBasicVersionButton.color = "transparent";
onClicked: {
releaseFocus()
parent.checked = !parent.checked
titleBar.goToBasicVersion(leftPanel.visible)
}
}
}
MouseArea {
id: basicMouseArea
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
onExited: goToBasicVersionButton.color = "transparent";
onClicked: {
releaseFocus()
parent.checked = !parent.checked
titleBar.goToBasicVersion(leftPanel.visible)
// language selection
Rectangle {
Layout.preferredHeight: parent.height
Layout.preferredWidth: Layout.preferredHeight
visible: !titleBar.orange && persistentSettings.customDecorations
id: languageSelection
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
property bool checked: false
color: "transparent"
height: titleBar.height
width: height
z: parent.z + 2
Image {
width: 14
height: 14
anchors.centerIn: parent
source: "../images/langFlagGrey.png"
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onEntered: parent.color = "#262626";
onExited: parent.color = "transparent";
onClicked: {
releaseFocus();
// Show welcome screen if on home
if(wizard.wizardState === "wizardHome" || wizard.wizardState === "wizardModeSelection"){
wizard.skipModeSelection = true;
wizard.wizardState = 'wizardLanguage';
return;
}
languageSidebar.isOpened ? languageSidebar.close() : languageSidebar.open();
console.log('change language');
}
}
}
}

View File

@@ -28,12 +28,12 @@ Rectangle {
Image {
Layout.alignment: Qt.AlignVCenter
Layout.preferredHeight: 33
Layout.preferredWidth: 33
Layout.rightMargin: 14
Layout.leftMargin: 14
Layout.topMargin: 12
Layout.bottomMargin: 12
Layout.preferredHeight: 33 * scaleRatio
Layout.preferredWidth: 33 * scaleRatio
Layout.rightMargin: 12 * scaleRatio
Layout.leftMargin: 18 * scaleRatio
Layout.topMargin: 12 * scaleRatio
Layout.bottomMargin: 12 * scaleRatio
source: "../images/warning.png"
}
@@ -44,22 +44,19 @@ Rectangle {
font.family: MoneroComponents.Style.fontRegular.name
font.pixelSize: root.fontSize
horizontalAlignment: TextInput.AlignLeft
selectionColor: MoneroComponents.Style.dimmedFontColor
selectByMouse: true
textFormat: Text.RichText
wrapMode: Text.WordWrap
textMargin: 0
leftPadding: 0
topPadding: 6
leftPadding: 4 * scaleRatio
rightPadding: 18 * scaleRatio
topPadding: 10 * scaleRatio
bottomPadding: 10 * scaleRatio
readOnly: true
onLinkActivated: root.linkActivated();
// @TODO: Legacy. Remove after Qt 5.8.
// https://stackoverflow.com/questions/41990013
MouseArea {
anchors.fill: parent
enabled: false
}
selectionColor: MoneroComponents.Style.dimmedFontColor
selectedTextColor: MoneroComponents.Style.defaultFontColor
}
}
}