simplified window v1

This commit is contained in:
marcin
2014-07-19 16:07:40 +02:00
parent ce7e7fd38a
commit 1eb08fe26a
11 changed files with 316 additions and 17 deletions

148
BasicPanel.qml Normal file
View File

@@ -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...")
}
}

View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE QtCreatorProject> <!DOCTYPE QtCreatorProject>
<!-- Written by QtCreator 3.1.2, 2014-07-16T19:37:13. --> <!-- Written by QtCreator 3.1.2, 2014-07-18T18:25:55. -->
<qtcreator> <qtcreator>
<data> <data>
<variable>ProjectExplorer.Project.ActiveTarget</variable> <variable>ProjectExplorer.Project.ActiveTarget</variable>

View File

@@ -4,7 +4,6 @@ import QtQuick 2.2
TextField { TextField {
font.family: "Arial" font.family: "Arial"
font.pixelSize: 18
style: TextFieldStyle { style: TextFieldStyle {
textColor: "#3F3F3F" textColor: "#3F3F3F"

View File

@@ -3,6 +3,7 @@ import QtQuick 2.0
Item { Item {
property alias placeholderText: input.placeholderText property alias placeholderText: input.placeholderText
property alias text: input.text property alias text: input.text
property int fontSize: 18
height: 37 height: 37
Rectangle { Rectangle {
@@ -24,5 +25,6 @@ Item {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 4 anchors.leftMargin: 4
anchors.rightMargin: 4 anchors.rightMargin: 4
font.pixelSize: parent.fontSize
} }
} }

View File

@@ -1,6 +1,7 @@
import QtQuick 2.0 import QtQuick 2.0
Item { Item {
id: button
height: 37 height: 37
property string shadowPressedColor property string shadowPressedColor
property string shadowReleasedColor property string shadowReleasedColor
@@ -8,6 +9,7 @@ Item {
property string releasedColor property string releasedColor
property string icon: "" property string icon: ""
property string textColor: "#FFFFFF" property string textColor: "#FFFFFF"
property int fontSize: 12
property alias text: label.text property alias text: label.text
signal clicked() signal clicked()
@@ -39,7 +41,7 @@ Item {
font.family: "Arial" font.family: "Arial"
font.bold: true font.bold: true
font.letterSpacing: -1 font.letterSpacing: -1
font.pixelSize: 12 font.pixelSize: button.fontSize
color: parent.textColor color: parent.textColor
visible: parent.icon === "" visible: parent.icon === ""
} }

View File

@@ -8,6 +8,8 @@ Rectangle {
y: -height y: -height
property int mouseX: 0 property int mouseX: 0
property int mouseY: 0 property int mouseY: 0
property alias maximizeButtonVisible: maximizeButton.visible
signal goToBasicVersion(bool yes)
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
@@ -22,6 +24,32 @@ Rectangle {
NumberAnimation { duration: 100; easing.type: Easing.InQuad } 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 { Row {
id: row id: row
anchors.right: parent.right anchors.right: parent.right
@@ -69,17 +97,17 @@ Rectangle {
} }
Rectangle { Rectangle {
id: maximizeButton
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: height width: height
color: containsMouse ? "#FF6C3C" : "#000000" color: containsMouse ? "#FF6C3C" : "#000000"
property bool checked: false
Image { Image {
anchors.centerIn: parent anchors.centerIn: parent
source: parent.checked ? "../images/backToWindowIcon.png" : source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" :
"../images/maximizeIcon.png" "../images/maximizeIcon.png"
} }
@@ -87,9 +115,8 @@ Rectangle {
id: maximizeArea id: maximizeArea
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
parent.checked = !parent.checked appWindow.visibility = appWindow.visibility !== Window.FullScreen ? Window.FullScreen :
appWindow.visibility = parent.checked ? Window.FullScreen : Window.Windowed
Window.Windowed
} }
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 B

BIN
images/gotoBasicVersion.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 B

BIN
images/moneroLogo2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

133
main.qml
View File

@@ -85,14 +85,18 @@ ApplicationWindow {
width: rightPanelExpanded ? 1269 : 1269 - 300 width: rightPanelExpanded ? 1269 : 1269 - 300
height: 800 height: 800
color: "#FFFFFF" color: "#FFFFFF"
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
flags: Qt.FramelessWindowHint | Qt.WindowSystemMenuHint | Qt.Window | Qt.WindowMinimizeButtonHint 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 { Item {
id: rootItem id: rootItem
anchors.fill: parent anchors.fill: parent
clip: true
MouseArea { MouseArea {
property var previousPosition property var previousPosition
@@ -112,8 +116,8 @@ ApplicationWindow {
LeftPanel { LeftPanel {
id: leftPanel id: leftPanel
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
height: parent.height
onDashboardClicked: middlePanel.state = "Dashboard" onDashboardClicked: middlePanel.state = "Dashboard"
onHistoryClicked: middlePanel.state = "History" onHistoryClicked: middlePanel.state = "History"
onTransferClicked: middlePanel.state = "Transfer" onTransferClicked: middlePanel.state = "Transfer"
@@ -125,18 +129,18 @@ ApplicationWindow {
RightPanel { RightPanel {
id: rightPanel id: rightPanel
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
height: parent.height
width: appWindow.rightPanelExpanded ? 300 : 0 width: appWindow.rightPanelExpanded ? 300 : 0
visible: appWindow.rightPanelExpanded visible: appWindow.rightPanelExpanded
} }
MiddlePanel { MiddlePanel {
id: middlePanel id: middlePanel
anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.left: leftPanel.right anchors.left: leftPanel.right
anchors.right: rightPanel.left anchors.right: rightPanel.left
height: parent.height
state: "Dashboard" state: "Dashboard"
} }
@@ -147,16 +151,24 @@ ApplicationWindow {
z: 100 z: 100
} }
BasicPanel {
id: basicPanel
x: 0
anchors.bottom: parent.bottom
visible: false
}
MouseArea { MouseArea {
id: frameArea id: frameArea
property bool blocked: false
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 30 height: 30
z: 1 z: 1
hoverEnabled: true hoverEnabled: true
onEntered: titleBar.y = 0 onEntered: if(!blocked) titleBar.y = 0
onExited: titleBar.y = -titleBar.height onExited: if(!blocked) titleBar.y = -titleBar.height
propagateComposedEvents: true propagateComposedEvents: true
onPressed: mouse.accepted = false onPressed: mouse.accepted = false
onReleased: 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 { TitleBar {
id: titleBar id: titleBar
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
onGoToBasicVersion: {
if(yes) goToBasicAnimation.start()
else goToProAnimation.start()
}
} }
} }
} }

View File

@@ -72,5 +72,9 @@
<file>images/expandTable.png</file> <file>images/expandTable.png</file>
<file>images/dropdownDel.png</file> <file>images/dropdownDel.png</file>
<file>components/HistoryTable.qml</file> <file>components/HistoryTable.qml</file>
<file>images/gotoBasicVersion.png</file>
<file>images/goToBasicVersionHovered.png</file>
<file>BasicPanel.qml</file>
<file>images/moneroLogo2.png</file>
</qresource> </qresource>
</RCC> </RCC>