From 1eb08fe26aa99efbb92487f210bbcde6f7b2ce12 Mon Sep 17 00:00:00 2001 From: marcin Date: Sat, 19 Jul 2014 16:07:40 +0200 Subject: [PATCH] simplified window v1 --- BasicPanel.qml | 148 +++++++++++++++++++++++++++++ bitmonero.pro.user | 2 +- components/Input.qml | 1 - components/LineEdit.qml | 2 + components/StandardButton.qml | 4 +- components/TitleBar.qml | 39 ++++++-- images/goToBasicVersionHovered.png | Bin 0 -> 238 bytes images/gotoBasicVersion.png | Bin 0 -> 234 bytes images/moneroLogo2.png | Bin 0 -> 2559 bytes main.qml | 133 ++++++++++++++++++++++++-- qml.qrc | 4 + 11 files changed, 316 insertions(+), 17 deletions(-) create mode 100644 BasicPanel.qml create mode 100644 images/goToBasicVersionHovered.png create mode 100644 images/gotoBasicVersion.png create mode 100644 images/moneroLogo2.png 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 0000000000000000000000000000000000000000..a504677e7cc98d347edefb9d9a6080245e6a1d03 GIT binary patch literal 238 zcmeAS@N?(olHy`uVBq!ia0vp^AT}2V8<6ZZI=>f4u@pObhHwBu4M$1`kk47*5n0T@ zz%2yAjF;}#{Q(M!mAFQfI2WZRmSpDVDTHL^rZO0q>l<3?8=ADHc=Z5P$beJ?=ckpF zCl;kLIHu$$r7E~(7NwTw7iAYKI0u`(*s}?w&dt-sF+^hO)brk42Mjn|FJ_0&TDtS{ zZBK5`4VO6bmDueW%sfR!|1IFt^LYAbL0|au$=_z~3`|;eSo=($UBNNyZL2yw7)tNV XeAM=8$_#r8pot8gu6{1-oD!Mf4u@pObhHwBu4M$1`kk47*5n0T@ zz%2yAjF;}#{Q(M!mAFQfI2WZRmSpDVDTHL^rZO0q>l<3?8=ADHc=Z5P$beJ?=ckpF zCl;kLIHu$$r7E~(7NwTw7iAYKI0u`(*s}?w&dJloF+^hO-1ClH3jqn(Z&4-mqWvsCYd_|3zl8~WhuKlcgCLBq(Gavhr)LXN+uUSsbpH3Ca<6) S7_$aw8iS{+pUXO@geCxL(nj_G literal 0 HcmV?d00001 diff --git a/images/moneroLogo2.png b/images/moneroLogo2.png new file mode 100644 index 0000000000000000000000000000000000000000..7e4f2ba899c0244052ede0104ec8657fc7fa2739 GIT binary patch literal 2559 zcmV|wqP){<(}WY&pFR?p658AyStk@b^1+n<0MM$9S!gGJnH-((A+o|m;^BJy`4#& zBOa$rKL*AD)OV;leW$rmIAvN(sl5~G3RS1CG&fEH)+D8+sdzx$DX&vA&5g$a9l#i% zlT!P*w5q;C)#(d{Qzn2r{EGSxRi`$Z8{2?6NvVrc`*6RyzC+b1PIF@my~+ge8qJND z`%UUQRGs29H+BFMBQ-m4j(J-~p(K4C_@USEbzqd4y;bQslI8$yp6Fj@HnQkEC5^{v z{wIM6z%Za2*aiM@XuwP?APTS^;bWZpFQTVM+A>;8b7+@N?jKNf#BEi_e%u$&NIR z0mkFr>k7am9b2uFr0KvG;89>Ua5_$z0EXapmlmKy(ke+GsCj0k_T|Z`ZYt0j)GiGb z>g>o6S5_K7`JvMzRk5-Bev^T%z%@AKsm5u*ulk@MizH2|vCrW~Bd}Uh^gT%$An9IU z9dK5`F=qnLO1hv=Gb*(k;5+1Pl-k=ug_;oQdWEDx5qZj`z|j$Tu0kcs^cXNAr^y>Q zlNV!=q`NB2C&tq1O%8je;Y?YK`+%=i==k2@+1uh zVq4&FKsW`6aaE2yrko_E@L^zRP_-WTF7Skz?Ui&Ca4ygU+yETqwY^Q!W;0uv^X!l* zl3L8{U@6ueX4ZNT#@R!;n*q+`eFC@}=XRuA1^mKqDCv6Orl9|R-~r&Lz$P=>pM2kG zzyjbrukBD^t)z)&_RkvT-je+7#F;-Jn;ia7h0ZgGC{zV=2l+eHJ-C&Tasap`{Mcsp z4$dKeMp7H@Mf!eONzytq>#8tspH@k0%&fCu`$NHj3iH__X&>+dPnKDvl1AVbq0dg> z5;NQ63(agduu9TuTrl!>ulhvbJHXsRvvxVWi9i={1*P_$Z{VA}=#G+bWwK+0WzArcjw6Yw|){ z{uh!vE(x=M-=zgf$B_NO2Y{DxNBxwuae1GVPX*7o-^^->tS$j=qxUF$hNP3t?B$&H z8-d+`uS9K<#@1jeW2oS1v#pAW9W1FOA|HzLA7=#e4c@=c08a7BZvhV$m=geI_O_(O z!1q1zG=kh*gch7KwZ$rZg$hm7oxqR0@(fAyJO#LfthqB_7jUg7JBzGBh0l1R!oaI*syJjn5F=A}PWQ0;@Vyk_C9>g};du>j=m{;mRU_T)2xTX5!Xh$lBQ`-h}Zp+ZOhRp11#dDf}lUkG4p#ny^g2w2qQvWvaORqd0IMXZd1GP23z`BeYtG1i+|HRrVmd(EuJmrIi5Tj~AC?*qO-d8`S_t-;464X&2R4+!(L zMNf#iq$V$P#9yl7@S@*0OE(e3c4 z+gii(-&M@)1>h%v_|{}0g=_=U~j&m&c+Jd+15)9>?TBIeF3 zS2BCcaSngV`M6X-RU}O$8{Gw$TBwz#pjsy|Hb2Bm|i#=4ndnJtt+vc!< z{?l{*MYiN(*P}W8d(53jwUgf0DGwLi1#FOXZTjLQ9WCjjlI{nd21W;c=9}58 zIrFNWa&vSWwfMB5YEj01Y8Kbk~6PL%5*0YpQ2Wh5526v z}jsYMnwPs002ovPDHLkV1mZp=VJf> literal 0 HcmV?d00001 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