From 4f4d969416d2b56d0efc3b9a3c5b6d979e3b631e Mon Sep 17 00:00:00 2001 From: Sander Ferdinand Date: Wed, 18 Jul 2018 15:00:53 +0200 Subject: [PATCH] Extra properties for components LineEditMulti and RemoteNodeEdit --- components/InputMulti.qml | 20 +++---- components/LineEdit.qml | 8 ++- components/LineEditMulti.qml | 108 ++++++++++++++++++++++------------ components/RemoteNodeEdit.qml | 15 +++-- pages/Keys.qml | 3 +- pages/Transfer.qml | 8 ++- 6 files changed, 103 insertions(+), 59 deletions(-) diff --git a/components/InputMulti.qml b/components/InputMulti.qml index b8005354..f7706d75 100644 --- a/components/InputMulti.qml +++ b/components/InputMulti.qml @@ -32,31 +32,25 @@ import QtQuick 2.7 import "../js/TxUtils.js" as TxUtils import "../components" as MoneroComponents - TextArea { - property bool error: false - property bool addressValidation: false - property bool wrapAnywhere: true property int fontSize: 18 * scaleRatio property bool fontBold: false + property string fontColor: MoneroComponents.Style.defaultFontColor + + property bool mouseSelection: true + property bool error: false + property bool addressValidation: false id: textArea font.family: MoneroComponents.Style.fontRegular.name + color: fontColor font.pixelSize: fontSize font.bold: fontBold horizontalAlignment: TextInput.AlignLeft - selectByMouse: true - color: MoneroComponents.Style.defaultFontColor + selectByMouse: mouseSelection selectionColor: MoneroComponents.Style.dimmedFontColor selectedTextColor: MoneroComponents.Style.defaultFontColor - wrapMode: { - if(wrapAnywhere){ - return Text.WrapAnywhere; - } else { - return Text.WordWrap; - } - } onTextChanged: { if(addressValidation){ // js replacement for `RegExpValidator { regExp: /[0-9A-Fa-f]{95}/g }` diff --git a/components/LineEdit.qml b/components/LineEdit.qml index 8a194c12..9eb50b04 100644 --- a/components/LineEdit.qml +++ b/components/LineEdit.qml @@ -50,6 +50,8 @@ Item { property alias inlineButtonText: inlineButtonId.text property alias inlineIcon: inlineIcon.visible property bool copyButton: false + + property bool borderDisabled: false property string borderColor: { if(input.activeFocus){ return MoneroComponents.Style.inputBorderColorActive; @@ -57,9 +59,8 @@ Item { return MoneroComponents.Style.inputBorderColorInActive; } } - property bool borderDisabled: false + property int fontSize: 18 * scaleRatio - property bool showBorder: true property bool fontBold: false property alias fontColor: input.color property bool error: false @@ -140,6 +141,7 @@ Item { anchors.top: showingHeader ? inputLabel.bottom : parent.top anchors.topMargin: showingHeader ? 12 * scaleRatio : 2 * scaleRatio width: parent.width + clip: true Text { id: placeholderLabel @@ -200,6 +202,8 @@ Item { onEditingFinished: item.editingFinished() onAccepted: item.accepted(); onTextChanged: item.textUpdated() + topPadding: 10 * scaleRatio + bottomPadding: 10 * scaleRatio } MoneroComponents.InlineButton { diff --git a/components/LineEditMulti.qml b/components/LineEditMulti.qml index 8243a7ee..87cee6d4 100644 --- a/components/LineEditMulti.qml +++ b/components/LineEditMulti.qml @@ -32,25 +32,56 @@ import QtQuick.Layouts 1.1 import "../components" as MoneroComponents ColumnLayout { - id: lineditmulti - property alias text: multiLine.text - property alias placeholderText: placeholderLabel.text + id: item + + Layout.fillWidth: true + Layout.preferredHeight: childrenRect.height + + property alias text: input.text property alias labelText: inputLabel.text - property alias error: multiLine.error - property alias readOnly: multiLine.readOnly - property alias addressValidation: multiLine.addressValidation property alias labelButtonText: labelButton.text + property alias placeholderText: placeholderLabel.text + + property bool placeholderCenter: false + property string placeholderFontFamily: MoneroComponents.Style.fontRegular.name + property bool placeholderFontBold: false + property int placeholderFontSize: 18 * scaleRatio + property string placeholderColor: MoneroComponents.Style.defaultFontColor + property real placeholderOpacity: 0.35 + + property bool borderDisabled: false + property string borderColor: { + if(input.error && input.text !== ""){ + return MoneroComponents.Style.inputBorderColorInvalid; + } else if(input.activeFocus){ + return MoneroComponents.Style.inputBorderColorActive; + } else { + return MoneroComponents.Style.inputBorderColorInActive; + } + } + + property bool error: false + + property string labelFontColor: MoneroComponents.Style.defaultFontColor property bool labelFontBold: false + property int labelFontSize: 16 * scaleRatio property bool labelButtonVisible: false - property bool copyButton: false - property bool wrapAnywhere: true - property bool showingHeader: true - property bool showBorder: true + + property string fontColor: "white" property bool fontBold: false property int fontSize: 16 * scaleRatio + property bool mouseSelection: true + property alias readOnly: input.readOnly + property bool copyButton: false + property bool showingHeader: true + property var wrapMode: Text.NoWrap + property alias addressValidation: input.addressValidation + property string backgroundColor: "" // mock + signal labelButtonClicked(); signal inputLabelLinkActivated(); + signal editingFinished(); spacing: 0 Rectangle { @@ -65,11 +96,17 @@ ColumnLayout { anchors.top: parent.top anchors.left: parent.left font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 16 * scaleRatio + font.pixelSize: item.labelFontSize font.bold: labelFontBold textFormat: Text.RichText - color: MoneroComponents.Style.defaultFontColor + color: item.labelFontColor onLinkActivated: inputLabelLinkActivated() + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.NoButton + cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor + } } MoneroComponents.LabelButton { @@ -80,14 +117,14 @@ ColumnLayout { MoneroComponents.LabelButton { id: copyButtonId - visible: copyButton && multiLine.text !== "" + visible: copyButton && input.text !== "" text: qsTr("Copy") anchors.right: labelButton.visible ? inputLabel.right : parent.right anchors.rightMargin: labelButton.visible? 4 : 0 onClicked: { - if (multiLine.text.length > 0) { + if (input.text.length > 0) { console.log("Copied to clipboard"); - clipboard.setText(multiLine.text); + clipboard.setText(input.text); appWindow.showStatusMessage(qsTr("Copied to clipboard"), 3); } } @@ -95,27 +132,32 @@ ColumnLayout { } MoneroComponents.InputMulti { - id: multiLine + id: input readOnly: false - addressValidation: true - anchors.top: parent.showingHeader ? inputLabelRect.bottom : parent.top + addressValidation: false + anchors.top: item.showingHeader ? inputLabelRect.bottom : item.top Layout.fillWidth: true - topPadding: parent.showingHeader ? 10 * scaleRatio : 0 + topPadding: item.showingHeader ? 10 * scaleRatio : 0 bottomPadding: 10 * scaleRatio - wrapAnywhere: parent.wrapAnywhere - fontSize: parent.fontSize - fontBold: parent.fontBold + wrapMode: item.wrapMode + fontSize: item.fontSize + fontBold: item.fontBold + fontColor: item.fontColor + mouseSelection: item.mouseSelection + onEditingFinished: item.editingFinished() + error: item.error Text { id: placeholderLabel - visible: multiLine.text ? false : true + visible: input.text ? false : true anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 10 * scaleRatio - opacity: 0.35 - color: MoneroComponents.Style.defaultFontColor - font.family: MoneroComponents.Style.fontRegular.name - font.pixelSize: 18 * scaleRatio + opacity: item.placeholderOpacity + color: item.placeholderColor + font.family: item.placeholderFontFamily + font.bold: item.placeholderFontBold + font.pixelSize: item.placeholderFontSize text: "" z: 3 } @@ -123,18 +165,10 @@ ColumnLayout { Rectangle { color: "transparent" border.width: 1 - border.color: { - if(multiLine.error && multiLine.text !== ""){ - return MoneroComponents.Style.inputBorderColorInvalid; - } else if(multiLine.activeFocus){ - return MoneroComponents.Style.inputBorderColorActive; - } else { - return MoneroComponents.Style.inputBorderColorInActive; - } - } + border.color: item.borderColor radius: 4 anchors.fill: parent - visible: lineditmulti.showBorder + visible: !item.borderDisabled } } } diff --git a/components/RemoteNodeEdit.qml b/components/RemoteNodeEdit.qml index ecc8b496..36d2ee94 100644 --- a/components/RemoteNodeEdit.qml +++ b/components/RemoteNodeEdit.qml @@ -53,6 +53,8 @@ GridLayout { property string lineEditBorderColor: Qt.rgba(0, 0, 0, 0.15) property string lineEditBackgroundColor: "white" property string lineEditFontColor: "black" + property int lineEditFontSize: 18 * scaleRatio + property int labelFontSize: 16 * scaleRatio property bool lineEditFontBold: true signal editingFinished() @@ -61,7 +63,7 @@ GridLayout { return daemonAddr.text.trim() + ":" + daemonPort.text.trim() } - LineEdit { + LineEditMulti { id: daemonAddr Layout.fillWidth: true placeholderText: qsTr("Remote Node Hostname / IP") + translationManager.emptyString @@ -70,14 +72,16 @@ GridLayout { placeholderFontSize: root.placeholderFontSize placeholderColor: root.placeholderColor placeholderOpacity: root.placeholderOpacity - onEditingFinished: root.editingFinished() + labelFontSize: root.labelFontSize borderColor: lineEditBorderColor backgroundColor: lineEditBackgroundColor fontColor: lineEditFontColor fontBold: lineEditFontBold + fontSize: lineEditFontSize + onEditingFinished: root.editingFinished() } - LineEdit { + LineEditMulti { id: daemonPort Layout.fillWidth: true placeholderText: qsTr("Port") + translationManager.emptyString @@ -86,10 +90,13 @@ GridLayout { placeholderFontSize: root.placeholderFontSize placeholderColor: root.placeholderColor placeholderOpacity: root.placeholderOpacity - onEditingFinished: root.editingFinished() + labelFontSize: root.labelFontSize borderColor: lineEditBorderColor backgroundColor: lineEditBackgroundColor fontColor: lineEditFontColor fontBold: lineEditFontBold + fontSize: lineEditFontSize + + onEditingFinished: root.editingFinished() } } diff --git a/pages/Keys.qml b/pages/Keys.qml index 1148a148..03786310 100644 --- a/pages/Keys.qml +++ b/pages/Keys.qml @@ -128,7 +128,8 @@ Rectangle { copyButton: true addressValidation: false readOnly: true - wrapAnywhere: false + wrapMode: Text.WordWrap + fontColor: "white" } } diff --git a/pages/Transfer.qml b/pages/Transfer.qml index fe3c6c21..d7f009d8 100644 --- a/pages/Transfer.qml +++ b/pages/Transfer.qml @@ -255,6 +255,8 @@ Rectangle { + translationManager.emptyString labelButtonText: qsTr("Resolve") + translationManager.emptyString placeholderText: "4.. / 8.." + wrapMode: Text.WrapAnywhere + addressValidation: true onInputLabelLinkActivated: { appWindow.showPageRequest("AddressBook") } } @@ -319,17 +321,19 @@ Rectangle { RowLayout { // payment id input - LineEdit { + LineEditMulti { id: paymentIdLine fontBold: true labelText: qsTr("Payment ID ( Optional )") + translationManager.emptyString placeholderText: qsTr("16 or 64 hexadecimal characters") + translationManager.emptyString Layout.fillWidth: true + wrapMode: Text.WrapAnywhere + addressValidation: false } } RowLayout { - LineEdit { + LineEditMulti { id: descriptionLine labelText: qsTr("Description ( Optional )") + translationManager.emptyString placeholderText: qsTr("Saved to local wallet history") + translationManager.emptyString