From 58fb6d055bda4c2f444459fe1970ec5361bd1756 Mon Sep 17 00:00:00 2001 From: marcin Date: Sat, 19 Jul 2014 16:52:05 +0200 Subject: [PATCH] simplified window v2 --- BasicPanel.qml | 36 ++++++- components/PrivacyLevelSmall.qml | 162 +++++++++++++++++++++++++++++++ components/SearchInput.qml | 1 + main.qml | 2 +- qml.qrc | 1 + 5 files changed, 200 insertions(+), 2 deletions(-) create mode 100644 components/PrivacyLevelSmall.qml diff --git a/BasicPanel.qml b/BasicPanel.qml index e2d542c7..cc3ccba0 100644 --- a/BasicPanel.qml +++ b/BasicPanel.qml @@ -3,7 +3,7 @@ import "components" Rectangle { width: 470 - height: 334 + height: paymentId.y + paymentId.height + 12 color: "#F0EEEE" border.width: 1 border.color: "#DBDBDB" @@ -137,6 +137,7 @@ Rectangle { } LineEdit { + id: destinationLine anchors.left: parent.left anchors.right: parent.right anchors.top: row.bottom @@ -145,4 +146,37 @@ Rectangle { height: 32 placeholderText: qsTr("destination...") } + + Text { + id: privacyLevelText + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: destinationLine.bottom + anchors.topMargin: 12 + + font.family: "Arial" + font.pixelSize: 12 + color: "#535353" + text: qsTr("Privacy level") + } + + PrivacyLevelSmall { + id: privacyLevel + anchors.left: parent.left + anchors.right: parent.right + anchors.top: privacyLevelText.bottom + anchors.leftMargin: 12 + anchors.rightMargin: 12 + anchors.topMargin: 12 + } + + LineEdit { + id: paymentId + anchors.left: parent.left + anchors.right: parent.right + anchors.top: privacyLevel.bottom + anchors.margins: 12 + fontSize: 15 + height: 32 + placeholderText: qsTr("payment ID (optional)...") + } } diff --git a/components/PrivacyLevelSmall.qml b/components/PrivacyLevelSmall.qml new file mode 100644 index 00000000..2b4d296e --- /dev/null +++ b/components/PrivacyLevelSmall.qml @@ -0,0 +1,162 @@ +import QtQuick 2.0 + +Item { + id: item + property int fillLevel: 0 + height: 40 + 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 + width: row.x + + color: { + if(item.fillLevel < 3) return "#FF6C3C" + if(item.fillLevel < 13) return "#FFE00A" + return "#36B25C" + } + + Timer { + interval: 500 + running: true + repeat: false + onTriggered: fillRect.loaded = true + } + + property bool loaded: false + Behavior on width { + enabled: fillRect.loaded + NumberAnimation { duration: 100; easing.type: Easing.InQuad } + } + } + + Text { + anchors.verticalCenter: parent.verticalCenter + font.family: "Arial" + font.pixelSize: 11 + font.letterSpacing: -1 + font.bold: true + color: "#000000" + x: row.x + (row.positions[0] !== undefined ? row.positions[0].currentX - 5 : 0) - width + text: qsTr("LOW") + } + + Text { + anchors.verticalCenter: parent.verticalCenter + font.family: "Arial" + font.pixelSize: 11 + font.letterSpacing: -1 + font.bold: true + color: "#000000" + x: row.x + (row.positions[4] !== undefined ? row.positions[4].currentX - 5 : 0) - width + text: qsTr("MEDIUM") + } + + Text { + anchors.verticalCenter: parent.verticalCenter + font.family: "Arial" + font.pixelSize: 11 + font.letterSpacing: -1 + font.bold: true + color: "#000000" + x: row.x + (row.positions[13] !== undefined ? row.positions[13].currentX - 5 : 0) - width + text: qsTr("HIGH") + } + + MouseArea { + anchors.fill: parent + function positionBar() { + var xDiff = 999999 + var index = -1 + for(var i = 0; i < 14; ++i) { + var tmp = Math.abs(row.positions[i].currentX + row.x - mouseX) + if(tmp < xDiff) { + xDiff = tmp + index = i + } + } + + if(index !== -1) { + fillRect.width = Qt.binding(function(){ return row.positions[index].currentX + 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: 5 + property var positions: new Array() + + Row { + id: row2 + spacing: ((bar.width - 8) / 2) / 4 + + Repeater { + model: 4 + + delegate: Rectangle { + id: delegateItem2 + property int currentX: x + row2.x + height: 8 + width: 1 + color: "#DBDBDB" + Component.onCompleted: { + row.positions[index] = delegateItem2 + } + } + } + } + + Row { + id: row1 + spacing: ((bar.width - 8) / 2) / 10 + + Repeater { + model: 10 + + delegate: Rectangle { + id: delegateItem1 + property int currentX: x + row1.x + height: index === 4 ? 8 : 4 + width: 1 + color: "#DBDBDB" + Component.onCompleted: { + row.positions[index + 4] = delegateItem1 + } + } + } + } + } +} diff --git a/components/SearchInput.qml b/components/SearchInput.qml index f856ded5..cf7de2fa 100644 --- a/components/SearchInput.qml +++ b/components/SearchInput.qml @@ -36,6 +36,7 @@ Item { anchors.bottom: parent.bottom anchors.right: dropdown.left anchors.leftMargin: 45 + font.pixelSize: 18 verticalAlignment: TextInput.AlignVCenter placeholderText: qsTr("Search by...") } diff --git a/main.qml b/main.qml index 4ac4b3ae..d72aec30 100644 --- a/main.qml +++ b/main.qml @@ -222,7 +222,7 @@ ApplicationWindow { NumberAnimation { target: appWindow properties: "height" - to: 334 + to: basicPanel.height easing.type: Easing.InCubic duration: 200 } diff --git a/qml.qrc b/qml.qrc index 06d891e3..a90c2434 100644 --- a/qml.qrc +++ b/qml.qrc @@ -76,5 +76,6 @@ images/goToBasicVersionHovered.png BasicPanel.qml images/moneroLogo2.png + components/PrivacyLevelSmall.qml