New menu

ethereal/assets/qml/views/chain.qml

@@ -7,8 +7,11 @@ import QtQuick.Controls.Styles 1.1
 import Ethereum 1.0
 
 Rectangle {
+	id: root
 	property var title: "Network"
 	property var iconFile: "../net.png"
+	property var secondary: "Hi"
+	property var menuItem
 
 	objectName: "chainView"
 	visible: false
@@ -93,6 +96,8 @@ Rectangle {
 		}
 	}
 
+
+
 	function addBlock(block, initial) {
 		var txs = JSON.parse(block.transactions);
 		var amount = 0
@@ -109,6 +114,8 @@ Rectangle {
 		} else {
 			blockModel.insert(0, {number: block.number, name: block.name, gasLimit: block.gasLimit, gasUsed: block.gasUsed, coinbase: block.coinbase, hash: block.hash, txs: txs, txAmount: amount, time: block.time, prettyTime: convertToPretty(block.time)})
 		}
+
+		//root.secondary.text = "#" + block.number;
 	}
 
 	Window {

ethereal/assets/qml/views/history.qml

@@ -9,6 +9,7 @@ import Ethereum 1.0
 Rectangle {
 	property var iconFile: "../tx.png"
 	property var title: "Transactions"
+	property var menuItem
 
 	property var txModel: ListModel {
 		id: txModel

ethereal/assets/qml/views/info.qml

@@ -9,6 +9,7 @@ import Ethereum 1.0
 Rectangle {
 	property var title: "Information"
 	property var iconFile: "../heart.png"
+	property var menuItem
 
 	objectName: "infoView"
 	visible: false

ethereal/assets/qml/views/javascript.qml

@@ -9,6 +9,7 @@ import Ethereum 1.0
 Rectangle {
 	property var title: "JavaScript"
 	property var iconFile: "../tx.png"
+	property var menuItem
 
 	objectName: "javascriptView"
 	visible: false
@@ -33,7 +34,6 @@ Rectangle {
 
 	TextArea {
 		id: output
-		verticalAlignment: TextEdit.AlignBottom
 		text: "> JSRE Ready..."
 		anchors {
 			top: parent.top

ethereal/assets/qml/views/pending_tx.qml

@@ -9,6 +9,7 @@ import Ethereum 1.0
 Rectangle {
 	property var title: "Pending Transactions"
 	property var iconFile: "../tx.png"
+	property var menuItem
 
 	objectName: "pendingTxView"
 	anchors.fill: parent

ethereal/assets/qml/views/transaction.qml

@@ -9,6 +9,7 @@ import Ethereum 1.0
 Rectangle {
 	property var iconFile: "../new.png"
 	property var title: "New transaction"
+	property var menuItem
 
 	objectName: "newTxView"
 	visible: false

ethereal/assets/qml/wallet.qml

@@ -30,12 +30,12 @@ ApplicationWindow {
 
 	// Takes care of loading all default plugins
 	Component.onCompleted: {
-		var historyView = addPlugin("./views/history.qml", {title: "History"})
+		var historyView = addPlugin("./views/history.qml", {default: true})
-		var newTxView = addPlugin("./views/transaction.qml", {title: "New Transaction"})
+		var newTxView = addPlugin("./views/transaction.qml", {default: true})
-		var chainView = addPlugin("./views/chain.qml", {title: "Block chain"})
+		var chainView = addPlugin("./views/chain.qml", {default: true})
-		var infoView = addPlugin("./views/info.qml", {title: "Info"})
+		var infoView = addPlugin("./views/info.qml", {default: true})
-		var pendingTxView = addPlugin("./views/pending_tx.qml", {title: "Pending", canClose: true})
+		var pendingTxView = addPlugin("./views/pending_tx.qml", {default: true})
-		var pendingTxView = addPlugin("./views/javascript.qml", {title: "JavaScript", canClose: true})
+		var pendingTxView = addPlugin("./views/javascript.qml", {default: true})
 
 		// Call the ready handler
 		gui.done()
@@ -250,12 +250,17 @@ ApplicationWindow {
 		anchors.fill: parent
 		resizing: false
 
-		function setView(view) {
+		function setView(view, menu) {
 			for(var i = 0; i < views.length; i++) {
-				views[i].visible = false
+				views[i][0].visible = false
-			}
 
+				views[i][1].border.color = "#00000000"
+				views[i][1].color = "#00000000"
+			}
 			view.visible = true
+
+			menu.border.color = "#CCCCCC"
+			menu.color = "#FFFFFFFF"
 		}
 
 		function addComponent(component, options) {
@@ -265,8 +270,9 @@ ApplicationWindow {
 				return;
 			}
 
-			menu.createMenuItem(view.iconFile, view, options);
+			var menuItem = menu.createMenuItem(view.iconFile, view, options);
-			mainSplit.views.push(view);
+
+			mainSplit.views.push([view, menuItem]);
 
 			return view
 		}
@@ -276,96 +282,91 @@ ApplicationWindow {
 		 ********************/
 		Rectangle {
 			id: menu
-			Layout.minimumWidth: 80
+			Layout.minimumWidth: 180
-			Layout.maximumWidth: 80
+			Layout.maximumWidth: 180
 			anchors.top: parent.top
-			color: "#252525"
+			color: "#ececec"
 
 			Component {
 				id: menuItemTemplate
-				Image {
+				Rectangle {
+					id: menuItem
 					property var view;
-					anchors.horizontalCenter: parent.horizontalCenter
-					MouseArea {
-						anchors.fill: parent
-						onClicked: {
-							mainSplit.setView(view)
-						}
-					}
-				}
-			}
 
-		       /*
+					property alias title: label.text
-			Component {
+					property alias secondary: secondary.text
-				id: menuItemTemplate
 
-				RowLayout {
+					width: 180
-					property var view;
+					height: 28
-					property alias source: icon.source;
+					border.color: "#00000000"
-					property alias title: title.text
+					border.width: 1
-					height: 25
+					radius: 5
-
+					color: "#00000000"
-					id: tab
 
 					anchors {
 						left: parent.left
-						right: parent.right
+						leftMargin: 4
 					}
 
 					Image {
 						id: icon
-						//anchors.horizontalCenter: parent.horizontalCenter
+						anchors {
+							left: parent.left
+							verticalCenter: parent.verticalCenter
+						}
+						source: "../pick.png"
+					}
+
+					Text {
+						id: label
+						anchors {
+							left: icon.right
+							verticalCenter: parent.verticalCenter
+						}
+
+						text: "Chain"
+						font.bold: true
+						color: "#0D0A01"
+						font.pixelSize: 12
+					}
+
+					Text {
+						id: secondary
+						anchors {
+							right: parent.right
+							rightMargin: 8
+							verticalCenter: parent.verticalCenter
+						}
+						color: "#AEADBE"
+						font.pixelSize: 12
 					}
 
 					MouseArea {
 						anchors.fill: parent
 						onClicked: {
-							mainSplit.setView(view)
+							mainSplit.setView(view, menuItem)
-						}
-					}
-
-					Rectangle {
-						color: "#bbbbbb"
-						Label {
-							id: title
-							y: parent.height / 2 - this.height / 2
-							//x: 5
-							font.pixelSize: 10
-						}
-
-
-						Image {
-							id: closeButton
-							y: parent.height / 2 - this.height / 2
-							visible: false
-
-							source: "../close.png"
-							anchors {
-								right: parent.right
-								rightMargin: 5
-							}
-
-							MouseArea {
-								anchors.fill: parent
-								onClicked: {
-									console.log("should close")
-								}
-							}
 						}
 					}
 				}
 			}
-			*/
 
 			function createMenuItem(icon, view, options) {
 				if(options === undefined) {
 					options = {};
 				}
 
-				var comp = menuItemTemplate.createObject(menuColumn)
+				if(options.default) {
+					var comp = menuItemTemplate.createObject(menuDefault)
+				}
+
 				comp.view = view
-				comp.source = icon
+				comp.title = view.title
-				//comp.title = options.title
+				if(view.secondary !== undefined) {
+					comp.secondary = view.secondary
+				}
+
+				return comp
+
 				/*
 				if(options.canClose) {
 					//comp.closeButton.visible = options.canClose
@@ -375,10 +376,87 @@ ApplicationWindow {
 
 			ColumnLayout {
 				id: menuColumn
-				y: 50
+				y: 30
+				width: parent.width
 				anchors.left: parent.left
 				anchors.right: parent.right
-				spacing: 10
+				spacing: 3
+
+				Text {
+					text: "ETHEREUM"
+					font.bold: true
+					anchors {
+						left: parent.left
+						leftMargin: 5
+					}
+					color: "#888888"
+				}
+
+				ColumnLayout {
+					id: menuDefault
+					spacing: 3
+					anchors {
+						left: parent.left
+						right: parent.right
+					}
+				}
+
+				Text {
+					text: "APPS"
+					font.bold: true
+					anchors {
+						left: parent.left
+						leftMargin: 5
+					}
+					color: "#888888"
+				}
+
+				/*
+				Rectangle {
+					width: 180
+					height: 28
+					border.color: "#CCCCCC"
+					border.width: 1
+					radius: 5
+					color: "#FFFFFF"
+
+					anchors {
+						left: parent.left
+						leftMargin: 4
+					}
+
+					Image {
+						id: icon
+						anchors {
+							left: parent.left
+							verticalCenter: parent.verticalCenter
+						}
+						source: "../pick.png"
+					}
+
+					Text {
+						anchors {
+							left: icon.right
+							verticalCenter: parent.verticalCenter
+						}
+
+						text: "Wallet"
+						font.bold: true
+						color: "#0D0A01"
+					}
+
+					Text {
+						anchors {
+							right: parent.right
+							rightMargin: 8
+							verticalCenter: parent.verticalCenter
+						}
+						color: "#AEADBE"
+						text: "12e15 Ξ"
+						font.pixelSize: 12
+					}
+				}
+				*/
 			}
 		}