diff --git a/BasicPanel.qml b/BasicPanel.qml new file mode 100644 index 00000000..e2d542c7 --- /dev/null +++ b/BasicPanel.qml @@ -0,0 +1,148 @@ +import QtQuick 2.0 +import "components" + +Rectangle { + width: 470 + height: 334 + color: "#F0EEEE" + border.width: 1 + border.color: "#DBDBDB" + + Rectangle { + id: header + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.leftMargin: 1 + anchors.rightMargin: 1 + anchors.topMargin: 30 + height: 64 + color: "#FFFFFF" + + Image { + id: logo + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -5 + anchors.left: parent.left + anchors.leftMargin: 20 + source: "images/moneroLogo2.png" + } + + Grid { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + columns: 3 + + Text { + width: 116 + height: 20 + font.family: "Arial" + font.pixelSize: 12 + font.letterSpacing: -1 + elide: Text.ElideRight + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignBottom + color: "#535353" + text: qsTr("Locked Balance:") + } + + Text { + id: balanceText + width: 100 + height: 20 + font.family: "Arial" + font.pixelSize: 18 + font.letterSpacing: -1 + elide: Text.ElideRight + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignBottom + color: "#000000" + text: qsTr("78.9239845") + } + + Item { + height: 20 + width: 20 + + Image { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + source: "images/lockIcon.png" + } + } + + Text { + width: 116 + height: 20 + font.family: "Arial" + font.pixelSize: 12 + font.letterSpacing: -1 + elide: Text.ElideRight + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignBottom + color: "#535353" + text: qsTr("Availible Balance:") + } + + Text { + id: availableBalanceText + width: 100 + height: 20 + font.family: "Arial" + font.pixelSize: 14 + font.letterSpacing: -1 + elide: Text.ElideRight + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignBottom + color: "#000000" + text: qsTr("2324.9239845") + } + } + + Rectangle { + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + height: 1 + color: "#DBDBDB" + } + } + + Row { + id: row + anchors.left: parent.left + anchors.right: parent.right + anchors.top: header.bottom + anchors.margins: 12 + spacing: 12 + + LineEdit { + height: 32 + fontSize: 15 + width: parent.width - sendButton.width - row.spacing + placeholderText: qsTr("amount...") + } + + StandardButton { + id: sendButton + width: 60 + height: 32 + fontSize: 11 + text: qsTr("SEND") + shadowReleasedColor: "#FF4304" + shadowPressedColor: "#B32D00" + releasedColor: "#FF6C3C" + pressedColor: "#FF4304" + } + } + + LineEdit { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: row.bottom + anchors.margins: 12 + fontSize: 15 + height: 32 + placeholderText: qsTr("destination...") + } +} diff --git a/bitmonero.pro.user b/bitmonero.pro.user index ac4e0e99..41380f31 100644 --- a/bitmonero.pro.user +++ b/bitmonero.pro.user @@ -1,6 +1,6 @@ - + ProjectExplorer.Project.ActiveTarget diff --git a/components/Input.qml b/components/Input.qml index 98acf532..f71007f6 100644 --- a/components/Input.qml +++ b/components/Input.qml @@ -4,7 +4,6 @@ import QtQuick 2.2 TextField { font.family: "Arial" - font.pixelSize: 18 style: TextFieldStyle { textColor: "#3F3F3F" diff --git a/components/LineEdit.qml b/components/LineEdit.qml index d0bec01b..a342ab8d 100644 --- a/components/LineEdit.qml +++ b/components/LineEdit.qml @@ -3,6 +3,7 @@ import QtQuick 2.0 Item { property alias placeholderText: input.placeholderText property alias text: input.text + property int fontSize: 18 height: 37 Rectangle { @@ -24,5 +25,6 @@ Item { anchors.fill: parent anchors.leftMargin: 4 anchors.rightMargin: 4 + font.pixelSize: parent.fontSize } } diff --git a/components/StandardButton.qml b/components/StandardButton.qml index b7e452f5..9a164b8b 100644 --- a/components/StandardButton.qml +++ b/components/StandardButton.qml @@ -1,6 +1,7 @@ import QtQuick 2.0 Item { + id: button height: 37 property string shadowPressedColor property string shadowReleasedColor @@ -8,6 +9,7 @@ Item { property string releasedColor property string icon: "" property string textColor: "#FFFFFF" + property int fontSize: 12 property alias text: label.text signal clicked() @@ -39,7 +41,7 @@ Item { font.family: "Arial" font.bold: true font.letterSpacing: -1 - font.pixelSize: 12 + font.pixelSize: button.fontSize color: parent.textColor visible: parent.icon === "" } diff --git a/components/TitleBar.qml b/components/TitleBar.qml index 82d9610e..e18d1a86 100644 --- a/components/TitleBar.qml +++ b/components/TitleBar.qml @@ -8,6 +8,8 @@ Rectangle { y: -height property int mouseX: 0 property int mouseY: 0 + property alias maximizeButtonVisible: maximizeButton.visible + signal goToBasicVersion(bool yes) Text { anchors.centerIn: parent @@ -21,6 +23,32 @@ Rectangle { Behavior on y { NumberAnimation { duration: 100; easing.type: Easing.InQuad } } + + Rectangle { + id: goToBasicVersionButton + property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width + property bool checked: false + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + width: height + color: containsMouse || checked ? "#FFE00A" : "#000000" + + Image { + anchors.centerIn: parent + rotation: parent.checked ? 180 : 0 + source: parent.containsMouse || parent.checked ? "../images/goToBasicVersionHovered.png" : + "../images/gotoBasicVersion.png" + } + + MouseArea { + anchors.fill: parent + onClicked: { + parent.checked = !parent.checked + titleBar.goToBasicVersion(parent.checked) + } + } + } Row { id: row @@ -69,17 +97,17 @@ Rectangle { } Rectangle { + id: maximizeButton property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width anchors.top: parent.top anchors.bottom: parent.bottom width: height color: containsMouse ? "#FF6C3C" : "#000000" - property bool checked: false Image { anchors.centerIn: parent - source: parent.checked ? "../images/backToWindowIcon.png" : - "../images/maximizeIcon.png" + source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" : + "../images/maximizeIcon.png" } @@ -87,9 +115,8 @@ Rectangle { id: maximizeArea anchors.fill: parent onClicked: { - parent.checked = !parent.checked - appWindow.visibility = parent.checked ? Window.FullScreen : - Window.Windowed + appWindow.visibility = appWindow.visibility !== Window.FullScreen ? Window.FullScreen : + Window.Windowed } } } diff --git a/images/goToBasicVersionHovered.png b/images/goToBasicVersionHovered.png new file mode 100644 index 00000000..a504677e Binary files /dev/null and b/images/goToBasicVersionHovered.png differ diff --git a/images/gotoBasicVersion.png b/images/gotoBasicVersion.png new file mode 100644 index 00000000..945a6e1b Binary files /dev/null and b/images/gotoBasicVersion.png differ diff --git a/images/moneroLogo2.png b/images/moneroLogo2.png new file mode 100644 index 00000000..7e4f2ba8 Binary files /dev/null and b/images/moneroLogo2.png differ diff --git a/main.qml b/main.qml index 8bb2c1f2..4ac4b3ae 100644 --- a/main.qml +++ b/main.qml @@ -85,14 +85,18 @@ ApplicationWindow { width: rightPanelExpanded ? 1269 : 1269 - 300 height: 800 color: "#FFFFFF" - x: (Screen.width - width) / 2 - y: (Screen.height - height) / 2 flags: Qt.FramelessWindowHint | Qt.WindowSystemMenuHint | Qt.Window | Qt.WindowMinimizeButtonHint - onWidthChanged: if(width < 1269) x -= 0 + onWidthChanged: x -= 0 + + Component.onCompleted: { + x = (Screen.width - width) / 2 + y = (Screen.height - height) / 2 + } Item { id: rootItem anchors.fill: parent + clip: true MouseArea { property var previousPosition @@ -112,8 +116,8 @@ ApplicationWindow { LeftPanel { id: leftPanel anchors.left: parent.left - anchors.top: parent.top anchors.bottom: parent.bottom + height: parent.height onDashboardClicked: middlePanel.state = "Dashboard" onHistoryClicked: middlePanel.state = "History" onTransferClicked: middlePanel.state = "Transfer" @@ -125,18 +129,18 @@ ApplicationWindow { RightPanel { id: rightPanel anchors.right: parent.right - anchors.top: parent.top anchors.bottom: parent.bottom + height: parent.height width: appWindow.rightPanelExpanded ? 300 : 0 visible: appWindow.rightPanelExpanded } MiddlePanel { id: middlePanel - anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: leftPanel.right anchors.right: rightPanel.left + height: parent.height state: "Dashboard" } @@ -147,16 +151,24 @@ ApplicationWindow { z: 100 } + BasicPanel { + id: basicPanel + x: 0 + anchors.bottom: parent.bottom + visible: false + } + MouseArea { id: frameArea + property bool blocked: false anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right height: 30 z: 1 hoverEnabled: true - onEntered: titleBar.y = 0 - onExited: titleBar.y = -titleBar.height + onEntered: if(!blocked) titleBar.y = 0 + onExited: if(!blocked) titleBar.y = -titleBar.height propagateComposedEvents: true onPressed: mouse.accepted = false onReleased: mouse.accepted = false @@ -166,10 +178,115 @@ ApplicationWindow { } } + SequentialAnimation { + id: goToBasicAnimation + PropertyAction { + target: appWindow + properties: "visibility" + value: Window.Windowed + } + PropertyAction { + target: titleBar + properties: "maximizeButtonVisible" + value: false + } + PropertyAction { + target: frameArea + properties: "blocked" + value: true + } + NumberAnimation { + target: appWindow + properties: "height" + to: 30 + easing.type: Easing.InCubic + duration: 200 + } + NumberAnimation { + target: appWindow + properties: "width" + to: 470 + easing.type: Easing.InCubic + duration: 200 + } + PropertyAction { + targets: [leftPanel, middlePanel, rightPanel] + properties: "visible" + value: false + } + PropertyAction { + target: basicPanel + properties: "visible" + value: true + } + NumberAnimation { + target: appWindow + properties: "height" + to: 334 + easing.type: Easing.InCubic + duration: 200 + } + + onStopped: { + middlePanel.visible = false + rightPanel.visible = false + leftPanel.visible = false + } + } + + SequentialAnimation { + id: goToProAnimation + NumberAnimation { + target: appWindow + properties: "height" + to: 30 + easing.type: Easing.InCubic + duration: 200 + } + PropertyAction { + target: basicPanel + properties: "visible" + value: false + } + PropertyAction { + targets: [leftPanel, middlePanel, rightPanel] + properties: "visible" + value: true + } + NumberAnimation { + target: appWindow + properties: "width" + to: rightPanelExpanded ? 1269 : 1269 - 300 + easing.type: Easing.InCubic + duration: 200 + } + NumberAnimation { + target: appWindow + properties: "height" + to: 800 + easing.type: Easing.InCubic + duration: 200 + } + PropertyAction { + target: frameArea + properties: "blocked" + value: false + } + PropertyAction { + target: titleBar + properties: "maximizeButtonVisible" + value: true + } + } + TitleBar { id: titleBar anchors.left: parent.left anchors.right: parent.right + onGoToBasicVersion: { + if(yes) goToBasicAnimation.start() + else goToProAnimation.start() + } } } } diff --git a/qml.qrc b/qml.qrc index 1d21c1f0..06d891e3 100644 --- a/qml.qrc +++ b/qml.qrc @@ -72,5 +72,9 @@ images/expandTable.png images/dropdownDel.png components/HistoryTable.qml + images/gotoBasicVersion.png + images/goToBasicVersionHovered.png + BasicPanel.qml + images/moneroLogo2.png