From 5ae3deea86a4916eee07b30195da280957e2fd2f Mon Sep 17 00:00:00 2001 From: obscuren Date: Sun, 17 Aug 2014 21:07:09 +0200 Subject: [PATCH] New menu --- ethereal/assets/qml/views/chain.qml | 7 + ethereal/assets/qml/views/history.qml | 1 + ethereal/assets/qml/views/info.qml | 1 + ethereal/assets/qml/views/javascript.qml | 2 +- ethereal/assets/qml/views/pending_tx.qml | 1 + ethereal/assets/qml/views/transaction.qml | 1 + ethereal/assets/qml/wallet.qml | 224 +++++++++++++++------- 7 files changed, 163 insertions(+), 74 deletions(-) diff --git a/ethereal/assets/qml/views/chain.qml b/ethereal/assets/qml/views/chain.qml index 9fbc02954..b94d9edca 100644 --- a/ethereal/assets/qml/views/chain.qml +++ b/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 { diff --git a/ethereal/assets/qml/views/history.qml b/ethereal/assets/qml/views/history.qml index a73b7367d..94ea29e61 100644 --- a/ethereal/assets/qml/views/history.qml +++ b/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 diff --git a/ethereal/assets/qml/views/info.qml b/ethereal/assets/qml/views/info.qml index 60b6a62ec..c12977cbe 100644 --- a/ethereal/assets/qml/views/info.qml +++ b/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 diff --git a/ethereal/assets/qml/views/javascript.qml b/ethereal/assets/qml/views/javascript.qml index 376397130..aa5f93547 100644 --- a/ethereal/assets/qml/views/javascript.qml +++ b/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 diff --git a/ethereal/assets/qml/views/pending_tx.qml b/ethereal/assets/qml/views/pending_tx.qml index 5c5c496d6..8e3690cb9 100644 --- a/ethereal/assets/qml/views/pending_tx.qml +++ b/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 diff --git a/ethereal/assets/qml/views/transaction.qml b/ethereal/assets/qml/views/transaction.qml index ac38ebe0c..640e02a4e 100644 --- a/ethereal/assets/qml/views/transaction.qml +++ b/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 diff --git a/ethereal/assets/qml/wallet.qml b/ethereal/assets/qml/wallet.qml index 45514f7c1..d1039518b 100644 --- a/ethereal/assets/qml/wallet.qml +++ b/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 newTxView = addPlugin("./views/transaction.qml", {title: "New Transaction"}) - var chainView = addPlugin("./views/chain.qml", {title: "Block chain"}) - var infoView = addPlugin("./views/info.qml", {title: "Info"}) - var pendingTxView = addPlugin("./views/pending_tx.qml", {title: "Pending", canClose: true}) - var pendingTxView = addPlugin("./views/javascript.qml", {title: "JavaScript", canClose: true}) + var historyView = addPlugin("./views/history.qml", {default: true}) + var newTxView = addPlugin("./views/transaction.qml", {default: true}) + var chainView = addPlugin("./views/chain.qml", {default: true}) + var infoView = addPlugin("./views/info.qml", {default: true}) + var pendingTxView = addPlugin("./views/pending_tx.qml", {default: 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); - mainSplit.views.push(view); + var menuItem = menu.createMenuItem(view.iconFile, view, options); + + mainSplit.views.push([view, menuItem]); return view } @@ -276,96 +282,91 @@ ApplicationWindow { ********************/ Rectangle { id: menu - Layout.minimumWidth: 80 - Layout.maximumWidth: 80 + Layout.minimumWidth: 180 + 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) - } - } - } - } - /* - Component { - id: menuItemTemplate + property alias title: label.text + property alias secondary: secondary.text - RowLayout { - property var view; - property alias source: icon.source; - property alias title: title.text - height: 25 - - id: tab + width: 180 + height: 28 + border.color: "#00000000" + border.width: 1 + radius: 5 + color: "#00000000" 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) - } - } - - 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") - } - } + mainSplit.setView(view, menuItem) } } } } - */ 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 = options.title + comp.title = view.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 + } + } + */ } }