From 5085aa3a64bae93de50f98a53f28d95c27496a1a Mon Sep 17 00:00:00 2001 From: marcin Date: Fri, 11 Jul 2014 16:19:13 +0200 Subject: [PATCH] transfer v2 + checkbox --- bitmonero.pro.user | 6 +- components/CheckBox.qml | 54 ++++++++++++++++ components/Label.qml | 3 + components/PrivacyLevel.qml | 123 ++++++++++++++++++++++++++++++++++++ images/checkedIcon.png | Bin 0 -> 317 bytes images/privacyTick.png | Bin 0 -> 437 bytes images/uncheckedIcon.png | Bin 0 -> 315 bytes pages/Transfer.qml | 101 ++++++++++++++++++++++++++++- qml.qrc | 5 ++ 9 files changed, 286 insertions(+), 6 deletions(-) create mode 100644 components/CheckBox.qml create mode 100644 components/PrivacyLevel.qml create mode 100644 images/checkedIcon.png create mode 100644 images/privacyTick.png create mode 100644 images/uncheckedIcon.png diff --git a/bitmonero.pro.user b/bitmonero.pro.user index 2edad78d..46969c8e 100644 --- a/bitmonero.pro.user +++ b/bitmonero.pro.user @@ -1,6 +1,6 @@ - + ProjectExplorer.Project.ActiveTarget @@ -54,8 +54,8 @@ ProjectExplorer.Project.Target.0 - Desktop Qt 5.3.0 MinGW 32bit - Desktop Qt 5.3.0 MinGW 32bit + Desktop Qt 5.3 MinGW 32bit + Desktop Qt 5.3 MinGW 32bit qt.53.win32_mingw482_kit 0 0 diff --git a/components/CheckBox.qml b/components/CheckBox.qml new file mode 100644 index 00000000..f075e83c --- /dev/null +++ b/components/CheckBox.qml @@ -0,0 +1,54 @@ +import QtQuick 2.0 + +Item { + id: checkBox + property alias text: label.text + property bool checked: false + signal clicked() + height: 25 + width: label.x + label.width + clip: true + + Rectangle { + anchors.left: parent.left + height: parent.height - 1 + width: 25 + radius: 4 + y: 0 + color: "#DBDBDB" + } + + Rectangle { + anchors.left: parent.left + height: parent.height - 1 + width: 25 + radius: 4 + y: 1 + color: "#FFFFFF" + + Image { + anchors.centerIn: parent + source: checkBox.checked ? "../images/checkedIcon.png" : + "../images/uncheckedIcon.png" + } + } + + Text { + id: label + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 25 + 12 + font.family: "Arial" + font.pixelSize: 14 + font.letterSpacing: -1 + color: "#525252" + } + + MouseArea { + anchors.fill: parent + onClicked: { + checkBox.checked = !checkBox.checked + checkBox.clicked() + } + } +} diff --git a/components/Label.qml b/components/Label.qml index 46197718..81b2c6c2 100644 --- a/components/Label.qml +++ b/components/Label.qml @@ -4,8 +4,10 @@ Item { id: item property alias text: label.text property alias color: label.color + property alias textFormat: label.textFormat property string tipText: "" property int fontSize: 12 + signal linkActivated() width: icon.x + icon.width height: icon.height @@ -17,6 +19,7 @@ Item { font.family: "Arial" font.pixelSize: parent.fontSize color: "#555555" + onLinkActivated: item.linkActivated() } Image { diff --git a/components/PrivacyLevel.qml b/components/PrivacyLevel.qml new file mode 100644 index 00000000..f5ada015 --- /dev/null +++ b/components/PrivacyLevel.qml @@ -0,0 +1,123 @@ +import QtQuick 2.0 + +Item { + id: item + property int fillLevel: 0 + height: 70 + clip: true + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + height: 24 + radius: 4 + color: "#DBDBDB" + } + + Rectangle { + id: bar + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.topMargin: 1 + height: 24 + radius: 4 + color: "#FFFFFF" + + Rectangle { + id: fillRect + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.margins: 4 + radius: 2 + color: { + if(item.fillLevel < 3) return "#FF6C3C" + if(item.fillLevel < repeater.count - 1) return "#FFE00A" + return "#36B25C" + } + width: row.x + } + + MouseArea { + anchors.fill: parent + function positionBar() { + var xDiff = 999999 + var index = -1 + for(var i = 0; i < repeater.count; ++i) { + var tmp = Math.abs(repeater.modelItems[i].x + row.x - mouseX) + if(tmp < xDiff) { + xDiff = tmp + index = i + } + } + + if(index !== -1) { + fillRect.width = Qt.binding(function(){ return repeater.modelItems[index].x + row.x; }) + item.fillLevel = index + } + } + + onClicked: positionBar() + onMouseXChanged: positionBar() + } + } + + Row { + id: row + anchors.right: bar.right + anchors.rightMargin: 8 + anchors.top: bar.bottom + anchors.topMargin: -1 + spacing: ((bar.width - 8) / 2) / 10 + + Repeater { + id: repeater + model: 14 + property var modelItems: new Array() + + delegate: Item { + id: delegate + width: 1 + height: 48 + property bool mainTick: index === 0 || index === 3 || index === repeater.count - 1 + + Component.onCompleted: repeater.modelItems[index] = delegate + + Image { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + visible: parent.mainTick + source: "../images/privacyTick.png" + + Text { + anchors.right: parent.right + anchors.rightMargin: 12 + anchors.bottom: parent.bottom + anchors.bottomMargin: 2 + font.family: "Arial" + font.bold: true + font.pixelSize: 12 + color: "#4A4949" + text: { + if(index === 0) return qsTr("LOW") + if(index === 3) return qsTr("MEDIUM") + if(index === repeater.count - 1) return qsTr("HIGH") + return "" + } + } + } + + Rectangle { + anchors.top: parent.top + anchors.topMargin: 14 + width: 1 + color: "#DBDBDB" + height: index === 8 ? 16 : 8 + visible: !parent.mainTick + } + } + } + } +} diff --git a/images/checkedIcon.png b/images/checkedIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..690412b07aa9950fa9b75bf4b4734e0c72e4aac3 GIT binary patch literal 317 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~e!3HF=pW8M9DVAa<&kznEsNqQI0P;BtJR*x3 z7`TN%nDNrxx<5ccnG)BClHmNblJdl&R0hYC{G?O`x6Go{^8BLgVg=`5vln|d^#Ik0 zfz&w{r6!hS=I1GdWag$a7?|rD8tNOGI9y0d2CA6q>EaloF>&ccN8VNg0hjn}29*a5 z`V5n}m`o*<4l-CcFlj{a#WFS4MIDl{{;W26t)O7s%C*G{*trhO3}$1)@ES8=YG9xcy&8(ShRjiW|7?gcY*_h+{4H~X~DB+sQ<(9bL;mQ3g zo0~rDV=!Ikz39Wngz#wb10D8RBKyRDOnRQbH-kA<)?cBMOH(?~ z1F3T^N=+=u%+FH@$;?e*?Yc;?eo`;=$ZQ1|r8k+6VIA zYjn0|T3o{7c7o$2o8-cr101Q%_dYV_9SIYPo|Ysq?XLI4peYPNp)1?>+^(*(-|PR$ z$7|<|^Uv2iamcORwXV`j^X;0g-ik*)D{CC<*jhG~@t9?J#e4a^X~{j6-|p_$UTXF| zfP*nRmvIL7lN!6{=XTEiP+;+MsE7_ef*t<&yGo0v#efq zi$T6wz`*zN6vY<#!^<)`6m@=Y&gKZvSo&?R$d=sSY;WE-dY-T6SI{Ip=K+iQ b5B&$?QL}nh%&-av1u=uCtDnm{r-UW|O+u`~ literal 0 HcmV?d00001 diff --git a/images/uncheckedIcon.png b/images/uncheckedIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..60d7cf46128a7f05402feaaa9d2ebb08f3e0d167 GIT binary patch literal 315 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~e!3HF=pW8M9DVAa<&kznEsNqQI0P;BtJR*x3 z7`TN%nDNrxx<5ccnG)BClHmNblJdl&R0hYC{G?O`x6Go{^8BLgVg=`5vln|d^#Ik0 zfz&w{r6!hS=I1GdWag$a7?|rD8tNOGI9y0d2CA6s>EaloF>&d{(}IT;cwFRt-nH=E zaSUQwx|?M=b9jOy>nTO0!z%wCe4Hl{mcMl3oK;0`u21-S4lt;ct1W1h|9U#Uf$`b8 z2Hqd6OQHoUXIV099+^@7P$2nR8k@ER?~5kJn7C<~YY*JpUBG+e)geKi2O*`|SHe~s zG_V^eo6g<+;5|#IYYKy!owsevea {text-decoration: none; color: #FF6C3C; font-size: 14px;}\ + Address ( Type in or select from Address book )") + + onLinkActivated: console.log("link activated") + } + + LineEdit { + id: addressLine + anchors.left: parent.left + anchors.right: parent.right + anchors.top: addressLabel.bottom + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 5 + } + + Label { + id: paymentLabel + anchors.left: parent.left + anchors.right: parent.right + anchors.top: addressLine.bottom + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 17 + fontSize: 14 + text: qsTr("Payment ID ( Optional )") + } + + Row { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: paymentLabel.bottom + anchors.leftMargin: 17 + anchors.rightMargin: 17 + anchors.topMargin: 5 + spacing: 17 + + LineEdit { + width: 156 + } + + StandardButton { + id: sendButton + width: 60 + text: qsTr("SEND") + shadowReleasedColor: "#FF4304" + shadowPressedColor: "#B32D00" + releasedColor: "#FF6C3C" + pressedColor: "#FF4304" + } + + CheckBox { + text: qsTr("Add to Address book") + anchors.bottom: sendButton.bottom + } + } } diff --git a/qml.qrc b/qml.qrc index 33a68b66..8514067f 100644 --- a/qml.qrc +++ b/qml.qrc @@ -60,5 +60,10 @@ images/moneroIcon.png components/StandardDropdown.qml images/whiteDropIndicator.png + components/PrivacyLevel.qml + images/privacyTick.png + components/CheckBox.qml + images/checkedIcon.png + images/uncheckedIcon.png