From 97c42a311b0857add28be9a16c51e398441f0ae1 Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Mon, 2 Feb 2015 17:18:43 -0200 Subject: [PATCH 1/6] Started design branch --- cmd/mist/assets/qml/main.qml | 1836 ++++++++++++++++++---------------- 1 file changed, 958 insertions(+), 878 deletions(-) diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml index 439f7888cc4f..5771250613b2 100644 --- a/cmd/mist/assets/qml/main.qml +++ b/cmd/mist/assets/qml/main.qml @@ -10,882 +10,962 @@ import "../ext/filter.js" as Eth import "../ext/http.js" as Http ApplicationWindow { - id: root - - property var ethx : Eth.ethx - - width: 1200 - height: 820 - minimumHeight: 800 - minimumWidth: 600 - - title: "Mist" - - TextField { - id: copyElementHax - visible: false - } - - function copyToClipboard(text) { - copyElementHax.text = text - copyElementHax.selectAll() - copyElementHax.copy() - } - - // Takes care of loading all default plugins - Component.onCompleted: { - var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true}); - addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true}); - - addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"}); - addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"}); - addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"}); - addPlugin("./views/pending_tx.qml", {noAdd: true, close: false, section: "legacy"}); - addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"}); - - mainSplit.setView(wallet.view, wallet.menuItem); - - newBrowserTab("http://etherian.io"); - - // Command setup - gui.sendCommand(0) - } - - function activeView(view, menuItem) { - mainSplit.setView(view, menuItem) - if (view.hideUrl) { - urlPane.visible = false; - mainView.anchors.top = rootView.top - } else { - urlPane.visible = true; - mainView.anchors.top = divider.bottom - } - } - - function addViews(view, path, options) { - var views = mainSplit.addComponent(view, options) - views.menuItem.path = path - - mainSplit.views.push(views); - - if(!options.noAdd) { - gui.addPlugin(path) - } - - return views - } - - function addPlugin(path, options) { - try { - if(typeof(path) === "string" && /^https?/.test(path)) { - console.log('load http') - Http.request(path, function(o) { - if(o.status === 200) { - var view = Qt.createQmlObject(o.responseText, mainView, path) - addViews(view, path, options) - } - }) - - return - } - - var component = Qt.createComponent(path); - if(component.status != Component.Ready) { - if(component.status == Component.Error) { - ethx.note("error: ", component.errorString()); - } - - return - } - - var view = mainView.createView(component, options) - var views = addViews(view, path, options) - - return views - } catch(e) { - console.log(e) - } - } - - function newBrowserTab(url) { - var window = addPlugin("./views/browser.qml", {noAdd: true, close: true, section: "apps", active: true}); - window.view.url = url; - window.menuItem.title = "Mist"; - activeView(window.view, window.menuItem); - } - - menuBar: MenuBar { - Menu { - title: "File" - MenuItem { - text: "Import App" - shortcut: "Ctrl+o" - onTriggered: { - generalFileDialog.show(true, importApp) - } - } - - MenuItem { - text: "Add plugin" - onTriggered: { - generalFileDialog.show(true, function(path) { - addPlugin(path, {close: true, section: "apps"}) - }) - } - } - - MenuItem { - text: "New tab" - shortcut: "Ctrl+t" - onTriggered: { - newBrowserTab("http://etherian.io"); - } - } - - MenuSeparator {} - - MenuItem { - text: "Import key" - shortcut: "Ctrl+i" - onTriggered: { - generalFileDialog.show(true, function(path) { - gui.importKey(path) - }) - } - } - - MenuItem { - text: "Export keys" - shortcut: "Ctrl+e" - onTriggered: { - generalFileDialog.show(false, function(path) { - }) - } - } - - } - - Menu { - title: "Developer" - MenuItem { - iconSource: "../icecream.png" - text: "Debugger" - shortcut: "Ctrl+d" - onTriggered: eth.startDebugger() - } - - MenuItem { - text: "Import Tx" - onTriggered: { - txImportDialog.visible = true - } - } - - MenuItem { - text: "Run JS file" - onTriggered: { - generalFileDialog.show(true, function(path) { - eth.evalJavascriptFile(path) - }) - } - } - - MenuItem { - text: "Dump state" - onTriggered: { - generalFileDialog.show(false, function(path) { - // Empty hash for latest - gui.dumpState("", path) - }) - } - } - - MenuSeparator {} - } - - Menu { - title: "Network" - MenuItem { - text: "Add Peer" - shortcut: "Ctrl+p" - onTriggered: { - addPeerWin.visible = true - } - } - MenuItem { - text: "Show Peers" - shortcut: "Ctrl+e" - onTriggered: { - peerWindow.visible = true - } - } - } - - Menu { - title: "Help" - MenuItem { - text: "About" - onTriggered: { - aboutWin.visible = true - } - } - } - - Menu { - title: "GLOBAL SHORTCUTS" - visible: false - MenuItem { - visible: false - shortcut: "Ctrl+l" - onTriggered: { - url.focus = true - } - } - } - } - - statusBar: StatusBar { - //height: 32 - id: statusBar - Label { - //y: 6 - id: walletValueLabel - - font.pixelSize: 10 - styleColor: "#797979" - } - - Label { - //y: 6 - objectName: "miningLabel" - visible: true - font.pixelSize: 10 - anchors.right: lastBlockLabel.left - anchors.rightMargin: 5 - } - - Label { - //y: 6 - id: lastBlockLabel - objectName: "lastBlockLabel" - visible: true - text: "" - font.pixelSize: 10 - anchors.right: peerGroup.left - anchors.rightMargin: 5 - } - - ProgressBar { - visible: false - id: downloadIndicator - value: 0 - objectName: "downloadIndicator" - y: -4 - x: statusBar.width / 2 - this.width / 2 - width: 160 - } - - Label { - visible: false - objectName: "downloadLabel" - //y: 7 - anchors.left: downloadIndicator.right - anchors.leftMargin: 5 - font.pixelSize: 10 - text: "0 / 0" - } - - - RowLayout { - id: peerGroup - //y: 7 - anchors.right: parent.right - MouseArea { - onDoubleClicked: peerWindow.visible = true - anchors.fill: parent - } - - Label { - id: peerLabel - font.pixelSize: 10 - text: "0 / 0" - } - } - } - - - property var blockModel: ListModel { - id: blockModel - } - - SplitView { - property var views: []; - - id: mainSplit - anchors.fill: parent - resizing: false - - function setView(view, menu) { - for(var i = 0; i < views.length; i++) { - views[i].view.visible = false - views[i].menuItem.setSelection(false) - } - view.visible = true - menu.setSelection(true) - } - - function addComponent(view, options) { - view.visible = false - view.anchors.fill = mainView - - var menuItem = menu.createMenuItem(view, options); - if( view.hasOwnProperty("menuItem") ) { - view.menuItem = menuItem; - } - - if( view.hasOwnProperty("onReady") ) { - view.onReady.call(view) - } - - if( options.active ) { - setView(view, menuItem) - } - - - return {view: view, menuItem: menuItem} - } - - /********************* - * Main menu. - ********************/ - Rectangle { - id: menu - Layout.minimumWidth: 210 - Layout.maximumWidth: 210 - anchors.top: parent.top - color: "#ececec" - - Component { - id: menuItemTemplate - Rectangle { - id: menuItem - property var view; - property var path; - property var closable; - - property alias title: label.text - property alias icon: icon.source - property alias secondaryTitle: secondary.text - function setSelection(on) { - sel.visible = on - } - - width: 206 - height: 28 - color: "#00000000" - - anchors { - left: parent.left - leftMargin: 4 - } - - Rectangle { - id: sel - visible: false - anchors.fill: parent - color: "#00000000" - Rectangle { - id: r - anchors.fill: parent - border.color: "#CCCCCC" - border.width: 1 - radius: 5 - color: "#FFFFFFFF" - } - Rectangle { - anchors { - top: r.top - bottom: r.bottom - right: r.right - } - width: 10 - color: "#FFFFFFFF" - - Rectangle { - anchors { - left: parent.left - right: parent.right - top: parent.top - } - height: 1 - color: "#CCCCCC" - } - - Rectangle { - anchors { - left: parent.left - right: parent.right - bottom: parent.bottom - } - height: 1 - color: "#CCCCCC" - } - } - } - - MouseArea { - anchors.fill: parent - onClicked: { - activeView(view, menuItem); - } - } - - Image { - id: icon - height: 20 - width: 20 - anchors { - left: parent.left - verticalCenter: parent.verticalCenter - leftMargin: 3 - } - MouseArea { - anchors.fill: parent - onClicked: { - menuItem.closeApp() - } - } - } - - Text { - id: label - anchors { - left: icon.right - verticalCenter: parent.verticalCenter - leftMargin: 3 - } - - color: "#0D0A01" - font.pixelSize: 12 - } - - Text { - id: secondary - anchors { - right: parent.right - rightMargin: 8 - verticalCenter: parent.verticalCenter - } - color: "#AEADBE" - font.pixelSize: 12 - } - - - function closeApp() { - if(!this.closable) { return; } - - if(this.view.hasOwnProperty("onDestroy")) { - this.view.onDestroy.call(this.view) - } - - this.view.destroy() - this.destroy() - for (var i = 0; i < mainSplit.views.length; i++) { - var view = mainSplit.views[i]; - if (view.menuItem === this) { - mainSplit.views.splice(i, 1); - break; - } - } - gui.removePlugin(this.path) - activeView(mainSplit.views[0].view, mainSplit.views[0].menuItem); - } - } - } - - function createMenuItem(view, options) { - if(options === undefined) { - options = {}; - } - - var section; - switch(options.section) { - case "ethereum": - section = menuDefault; - break; - case "legacy": - section = menuLegacy; - break; - default: - section = menuApps; - break; - } - - var comp = menuItemTemplate.createObject(section) - comp.view = view - comp.title = view.title - - if(view.hasOwnProperty("iconSource")) { - comp.icon = view.iconSource; - } - comp.closable = options.close; - - return comp - } - - ColumnLayout { - id: menuColumn - y: 10 - width: parent.width - anchors.left: parent.left - anchors.right: parent.right - 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: "NET" - font.bold: true - anchors { - left: parent.left - leftMargin: 5 - } - color: "#888888" - } - - ColumnLayout { - id: menuApps - spacing: 3 - anchors { - left: parent.left - right: parent.right - } - } - - Text { - text: "DEBUG" - font.bold: true - anchors { - left: parent.left - leftMargin: 5 - } - color: "#888888" - } - - ColumnLayout { - id: menuLegacy - spacing: 3 - anchors { - left: parent.left - right: parent.right - } - } - } - } - - /********************* - * Main view - ********************/ - Rectangle { - id: rootView - anchors.right: parent.right - anchors.left: menu.right - anchors.bottom: parent.bottom - anchors.top: parent.top - color: "#00000000" - - Rectangle { - id: urlPane - height: 40 - color: "#00000000" - anchors { - left: parent.left - right: parent.right - leftMargin: 5 - rightMargin: 5 - top: parent.top - topMargin: 5 - } - TextField { - id: url - objectName: "url" - placeholderText: "DApp URL" - anchors { - left: parent.left - right: parent.right - top: parent.top - topMargin: 5 - rightMargin: 5 - leftMargin: 5 - } - - Keys.onReturnPressed: { - if(/^https?/.test(this.text)) { - newBrowserTab(this.text); - } else { - addPlugin(this.text, {close: true, section: "apps"}) - } - } - } - - } - - // Border - Rectangle { - id: divider - anchors { - left: parent.left - right: parent.right - top: urlPane.bottom - } - z: -1 - height: 1 - color: "#CCCCCC" - } - - Rectangle { - id: mainView - color: "#00000000" - anchors.right: parent.right - anchors.left: parent.left - anchors.bottom: parent.bottom - anchors.top: divider.bottom - - function createView(component) { - var view = component.createObject(mainView) - - return view; - } - } - } - } - - - /****************** - * Dialogs - *****************/ - FileDialog { - id: generalFileDialog - property var callback; - onAccepted: { - var path = this.fileUrl.toString(); - callback.call(this, path); - } - - function show(selectExisting, callback) { - generalFileDialog.callback = callback; - generalFileDialog.selectExisting = selectExisting; - - this.open(); - } - } - - - /****************** - * Wallet functions - *****************/ - function importApp(path) { - var ext = path.split('.').pop() - if(ext == "html" || ext == "htm") { - eth.openHtml(path) - }else if(ext == "qml"){ - addPlugin(path, {close: true, section: "apps"}) - } - } - - - function setWalletValue(value) { - walletValueLabel.text = value - } - - function loadPlugin(name) { - console.log("Loading plugin" + name) - var view = mainView.addPlugin(name) - } - - function setPeers(text) { - peerLabel.text = text - } - - function addPeer(peer) { - // We could just append the whole peer object but it cries if you try to alter them - peerModel.append({ip: peer.ip, port: peer.port, lastResponse:timeAgo(peer.lastSend), latency: peer.latency, version: peer.version, caps: peer.caps}) - } - - function resetPeers(){ - peerModel.clear() - } - - function timeAgo(unixTs){ - var lapsed = (Date.now() - new Date(unixTs*1000)) / 1000 - return (lapsed + " seconds ago") - } - - function convertToPretty(unixTs){ - var a = new Date(unixTs*1000); - var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; - var year = a.getFullYear(); - var month = months[a.getMonth()]; - var date = a.getDate(); - var hour = a.getHours(); - var min = a.getMinutes(); - var sec = a.getSeconds(); - var time = date+' '+month+' '+year+' '+hour+':'+min+':'+sec ; - return time; - } - - /********************** - * Windows - *********************/ - Window { - id: peerWindow - //flags: Qt.CustomizeWindowHint | Qt.Tool | Qt.WindowCloseButtonHint - height: 200 - width: 700 - Rectangle { - anchors.fill: parent - property var peerModel: ListModel { - id: peerModel - } - TableView { - anchors.fill: parent - id: peerTable - model: peerModel - TableViewColumn{width: 200; role: "ip" ; title: "IP" } - TableViewColumn{width: 260; role: "version" ; title: "Version" } - TableViewColumn{width: 180; role: "caps" ; title: "Capabilities" } - } - } - } - - Window { - id: aboutWin - visible: false - title: "About" - minimumWidth: 350 - maximumWidth: 350 - maximumHeight: 280 - minimumHeight: 280 - - Image { - id: aboutIcon - height: 150 - width: 150 - fillMode: Image.PreserveAspectFit - smooth: true - source: "../facet.png" - x: 10 - y: 30 - } - - Text { - anchors.left: aboutIcon.right - anchors.leftMargin: 10 - anchors.top: parent.top - anchors.topMargin: 30 - font.pointSize: 12 - text: "

Mist (0.7.10)


Development

Jeffrey Wilcke
Viktor Trón
Felix Lange
Taylor Gerring
Daniel Nagy

UX

Alex van de Sande
" - } - } - - Window { - id: txImportDialog - minimumWidth: 270 - maximumWidth: 270 - maximumHeight: 50 - minimumHeight: 50 - TextField { - id: txImportField - width: 170 - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: 10 - onAccepted: { - } - } - Button { - anchors.left: txImportField.right - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: 5 - text: "Import" - onClicked: { - eth.importTx(txImportField.text) - txImportField.visible = false - } - } - Component.onCompleted: { - addrField.focus = true - } - } - - Window { - id: addPeerWin - visible: false - minimumWidth: 300 - maximumWidth: 300 - maximumHeight: 50 - minimumHeight: 50 - title: "Connect to peer" - - ComboBox { - id: addrField - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.right: addPeerButton.left - anchors.leftMargin: 10 - anchors.rightMargin: 10 - onAccepted: { - eth.connectToPeer(addrField.currentText) - addPeerWin.visible = false - } - - editable: true - model: ListModel { id: pastPeers } - - Component.onCompleted: { - pastPeers.insert(0, {text: "poc-8.ethdev.com:30303"}) - /* - var ips = eth.pastPeers() - for(var i = 0; i < ips.length; i++) { - pastPeers.append({text: ips.get(i)}) - } - - pastPeers.insert(0, {text: "poc-7.ethdev.com:30303"}) - */ - } - } - - Button { - id: addPeerButton - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 10 - text: "Add" - onClicked: { - eth.connectToPeer(addrField.currentText) - addPeerWin.visible = false - } - } - Component.onCompleted: { - addrField.focus = true - } - } + id: root + + property var ethx : Eth.ethx + + width: 1200 + height: 820 + minimumHeight: 800 + minimumWidth: 600 + + title: "Mist" + + TextField { + id: copyElementHax + visible: false + } + + function copyToClipboard(text) { + copyElementHax.text = text + copyElementHax.selectAll() + copyElementHax.copy() + } + + // Takes care of loading all default plugins + Component.onCompleted: { + var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true}); + addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true}); + + addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"}); + addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"}); + addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"}); + addPlugin("./views/pending_tx.qml", {noAdd: true, close: false, section: "legacy"}); + addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"}); + + mainSplit.setView(wallet.view, wallet.menuItem); +s + newBrowserTab("http://etherian.io"); + + // Command setup + gui.sendCommand(0) + } + + function activeView(view, menuItem) { + mainSplit.setView(view, menuItem) + if (view.hideUrl) { + urlPane.visible = false; + mainView.anchors.top = rootView.top + } else { + urlPane.visible = true; + mainView.anchors.top = divider.bottom + } + } + + function addViews(view, path, options) { + var views = mainSplit.addComponent(view, options) + views.menuItem.path = path + + mainSplit.views.push(views); + + if(!options.noAdd) { + gui.addPlugin(path) + } + + return views + } + + function addPlugin(path, options) { + try { + if(typeof(path) === "string" && /^https?/.test(path)) { + console.log('load http') + Http.request(path, function(o) { + if(o.status === 200) { + var view = Qt.createQmlObject(o.responseText, mainView, path) + addViews(view, path, options) + } + }) + + return + } + + var component = Qt.createComponent(path); + if(component.status != Component.Ready) { + if(component.status == Component.Error) { + ethx.note("error: ", component.errorString()); + } + + return + } + + var view = mainView.createView(component, options) + var views = addViews(view, path, options) + + return views + } catch(e) { + console.log(e) + } + } + + function newBrowserTab(url) { + var window = addPlugin("./views/browser.qml", {noAdd: true, close: true, section: "apps", active: true}); + window.view.url = url; + window.menuItem.title = "Mist"; + activeView(window.view, window.menuItem); + } + + menuBar: MenuBar { + Menu { + title: "File" + MenuItem { + text: "Import App" + shortcut: "Ctrl+o" + onTriggered: { + generalFileDialog.show(true, importApp) + } + } + + MenuItem { + text: "Add plugin" + onTriggered: { + generalFileDialog.show(true, function(path) { + addPlugin(path, {close: true, section: "apps"}) + }) + } + } + + MenuItem { + text: "New tab" + shortcut: "Ctrl+t" + onTriggered: { + newBrowserTab("http://etherian.io"); + } + } + + MenuSeparator {} + + MenuItem { + text: "Import key" + shortcut: "Ctrl+i" + onTriggered: { + generalFileDialog.show(true, function(path) { + gui.importKey(path) + }) + } + } + + MenuItem { + text: "Export keys" + shortcut: "Ctrl+e" + onTriggered: { + generalFileDialog.show(false, function(path) { + }) + } + } + + } + + Menu { + title: "Developer" + MenuItem { + iconSource: "../icecream.png" + text: "Debugger" + shortcut: "Ctrl+d" + onTriggered: eth.startDebugger() + } + + MenuItem { + text: "Import Tx" + onTriggered: { + txImportDialog.visible = true + } + } + + MenuItem { + text: "Run JS file" + onTriggered: { + generalFileDialog.show(true, function(path) { + eth.evalJavascriptFile(path) + }) + } + } + + MenuItem { + text: "Dump state" + onTriggered: { + generalFileDialog.show(false, function(path) { + // Empty hash for latest + gui.dumpState("", path) + }) + } + } + + MenuSeparator {} + } + + Menu { + title: "Network" + MenuItem { + text: "Add Peer" + shortcut: "Ctrl+p" + onTriggered: { + addPeerWin.visible = true + } + } + MenuItem { + text: "Show Peers" + shortcut: "Ctrl+e" + onTriggered: { + peerWindow.visible = true + } + } + } + + Menu { + title: "Help" + MenuItem { + text: "About" + onTriggered: { + aboutWin.visible = true + } + } + } + + Menu { + title: "GLOBAL SHORTCUTS" + visible: false + MenuItem { + visible: false + shortcut: "Ctrl+l" + onTriggered: { + url.focus = true + } + } + } + } + + statusBar: StatusBar { + //height: 32 + id: statusBar + Label { + //y: 6 + id: walletValueLabel + + font.pixelSize: 10 + styleColor: "#797979" + } + + Label { + //y: 6 + objectName: "miningLabel" + visible: true + font.pixelSize: 10 + anchors.right: lastBlockLabel.left + anchors.rightMargin: 5 + } + + Label { + //y: 6 + id: lastBlockLabel + objectName: "lastBlockLabel" + visible: true + text: "" + font.pixelSize: 10 + anchors.right: peerGroup.left + anchors.rightMargin: 5 + } + + ProgressBar { + visible: false + id: downloadIndicator + value: 0 + objectName: "downloadIndicator" + y: -4 + x: statusBar.width / 2 - this.width / 2 + width: 160 + } + + Label { + visible: false + objectName: "downloadLabel" + //y: 7 + anchors.left: downloadIndicator.right + anchors.leftMargin: 5 + font.pixelSize: 10 + text: "0 / 0" + } + + + RowLayout { + id: peerGroup + //y: 7 + anchors.right: parent.right + MouseArea { + onDoubleClicked: peerWindow.visible = true + anchors.fill: parent + } + + Label { + id: peerLabel + font.pixelSize: 10 + text: "0 / 0" + } + } + } + + + property var blockModel: ListModel { + id: blockModel + } + + SplitView { + property var views: []; + + id: mainSplit + anchors.fill: parent + resizing: false + + function setView(view, menu) { + for(var i = 0; i < views.length; i++) { + views[i].view.visible = false + views[i].menuItem.setSelection(false) + } + view.visible = true + menu.setSelection(true) + } + + function addComponent(view, options) { + view.visible = false + view.anchors.fill = mainView + + var menuItem = menu.createMenuItem(view, options); + if( view.hasOwnProperty("menuItem") ) { + view.menuItem = menuItem; + } + + if( view.hasOwnProperty("onReady") ) { + view.onReady.call(view) + } + + if( options.active ) { + setView(view, menuItem) + } + + + return {view: view, menuItem: menuItem} + } + + /********************* + * Main menu. + ********************/ + Rectangle { + id: menu + Layout.minimumWidth: 192 + Layout.maximumWidth: 192 + anchors.top: parent.top + //color: "#FAF5F5" + + Rectangle { + width: parent.height + height: parent.width + anchors.centerIn: parent + rotation: 90 + + gradient: Gradient { + GradientStop { position: 0.0; color: "#F1ECEC" } + GradientStop { position: 0.2; color: "#FAF5F5" } + GradientStop { position: 1.0; color: "#FAF5F5" } + } + } + + + Component { + id: menuItemTemplate + Rectangle { + id: menuItem + property var view; + property var path; + property var closable; + + property alias title: label.text + property alias icon: icon.source + property alias secondaryTitle: secondary.text + function setSelection(on) { + sel.visible = on + } + + width: 192 + height: 55 + color: "#00000000" + + anchors { + left: parent.left + leftMargin: 4 + } + + Rectangle { + // This is the selection rectangle + id: sel + visible: false + anchors.fill: parent + color: "#00000000" + Rectangle { + id: r + anchors.fill: parent + border.width: 0 + radius: 5 + color: "#FFFFFFFF" + // Background of selected tab + } + Rectangle { + anchors { + top: r.top + bottom: r.bottom + right: r.right + } + width: 10 + color: "#FFFFFFFF" + border.width:0 + //Little tiny rectangle to the right of selection. Not sure what's for + + Rectangle { + // Small line on top of selection. What's this for? + anchors { + left: parent.left + right: parent.right + top: parent.top + } + height: 1 + color: "#FFFFFFFF" + } + + Rectangle { + // Small line on bottom of selection. What's this for again? + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: 1 + color: "#FFFFFFFF" + } + } + } + + MouseArea { + anchors.fill: parent + onClicked: { + activeView(view, menuItem); + } + } + + Image { + // Icon + id: icon + height: 24 + width: 24 + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: 6 + } + MouseArea { + anchors.fill: parent + onClicked: { + menuItem.closeApp() + } + } + } + + Text { + // Main Text + id: label + anchors { + left: icon.right + verticalCenter: parent.verticalCenter + leftMargin: 6 + } + + color: "#665F5F" + font.pixelSize: 14 + } + + Text { + // Auxiliary Text + id: secondary + anchors { + right: parent.right + rightMargin: 8 + verticalCenter: parent.verticalCenter + } + color: "#6691C2" + font.pixelSize: 12 + } + + + function closeApp() { + if(!this.closable) { return; } + + if(this.view.hasOwnProperty("onDestroy")) { + this.view.onDestroy.call(this.view) + } + + this.view.destroy() + this.destroy() + for (var i = 0; i < mainSplit.views.length; i++) { + var view = mainSplit.views[i]; + if (view.menuItem === this) { + mainSplit.views.splice(i, 1); + break; + } + } + gui.removePlugin(this.path) + activeView(mainSplit.views[0].view, mainSplit.views[0].menuItem); + } + } + } + + function createMenuItem(view, options) { + if(options === undefined) { + options = {}; + } + + var section; + switch(options.section) { + case "ethereum": + section = menuDefault; + break; + case "legacy": + section = menuLegacy; + break; + default: + section = menuApps; + break; + } + + var comp = menuItemTemplate.createObject(section) + comp.view = view + comp.title = view.title + + if(view.hasOwnProperty("iconSource")) { + comp.icon = view.iconSource; + } + comp.closable = options.close; + + return comp + } + + ColumnLayout { + id: menuColumn + y: 10 + width: parent.width + anchors.left: parent.left + anchors.right: parent.right + spacing: 3 + + + Rectangle { + // New App Button + id: newAppButton + anchors { + left: parent.left + leftMargin: 6 + } + border.width: 0 + radius: 5 + height: 56 + width: 180 + color: "#F6EEEE" + + Text { + text: "GO TO NEW APP" + font.bold: true + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + color: "#AAA0A0" + } + } + + Rectangle { + // Ethereum Title + anchors { + left: parent.left + leftMargin: 6 + } + border.width: 0 + height: 56 + width: 180 + color: "#00000000" + Text { + text: "ETHEREUM" + font.bold: true + anchors.verticalCenter: parent.verticalCenter + color: "#AAA0A0" + } + } + + ColumnLayout { + id: menuDefault + spacing: 3 + anchors { + left: parent.left + right: parent.right + } + } + + + + Rectangle { + // Apps + anchors { + left: parent.left + leftMargin: 6 + } + border.width: 0 + height: 56 + width: 180 + color: "#00000000" + Text { + text: "APPS" + font.bold: true + anchors.verticalCenter: parent.verticalCenter + color: "#AAA0A0" + } + } + + ColumnLayout { + id: menuApps + spacing: 3 + anchors { + left: parent.left + right: parent.right + bottomMargin: 18 + } + } + + + Rectangle { + // Debug + anchors { + left: parent.left + leftMargin: 6 + } + border.width: 0 + height: 56 + width: 180 + color: "#00000000" + + Text { + text: "DEBUG" + font.bold: true + anchors.verticalCenter: parent.verticalCenter + color: "#AAA0A0" + } + } + + ColumnLayout { + id: menuLegacy + spacing: 3 + anchors { + left: parent.left + right: parent.right + } + } + + } + } + + /********************* + * Main view + ********************/ + Rectangle { + id: rootView + anchors.right: parent.right + anchors.left: menu.right + anchors.bottom: parent.bottom + anchors.top: parent.top + anchors.topMargin: 50 + anchors.bottomMargin: 50 + color: "#FF00FF" //magenta + // This is the background of the URL bar + + Rectangle { + id: urlPane + + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.top: parent.top + anchors.topMargin: 50 + anchors.bottomMargin: 50 + height: 10 + color: "#00FFFF" //cyan + + TextField { + id: url + objectName: "url" + placeholderText: "DApp URL" + + anchors { + left: parent.left + right: parent.right + top: parent.top + topMargin: 5 + rightMargin: 5 + leftMargin: 5 + } + + Keys.onReturnPressed: { + if(/^https?/.test(this.text)) { + newBrowserTab(this.text); + } else { + addPlugin(this.text, {close: true, section: "apps"}) + } + } + } + + } + + // Invisible divider between url bar and main view + Rectangle { + id: divider + anchors { + left: parent.left + right: parent.right + top: urlPane.bottom + } + height: 10 + color: "#FFFF00" //yellow + } + + Rectangle { + id: mainView + color: "#0000FF" //dark blue + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.top: divider.top + anchors.topMargin: 100 + anchors.bottomMargin: 100 + + function createView(component) { + var view = component.createObject(mainView) + + return view; + } + } + + } + } + + + /****************** + * Dialogs + *****************/ + FileDialog { + id: generalFileDialog + property var callback; + onAccepted: { + var path = this.fileUrl.toString(); + callback.call(this, path); + } + + function show(selectExisting, callback) { + generalFileDialog.callback = callback; + generalFileDialog.selectExisting = selectExisting; + + this.open(); + } + } + + + /****************** + * Wallet functions + *****************/ + function importApp(path) { + var ext = path.split('.').pop() + if(ext == "html" || ext == "htm") { + eth.openHtml(path) + }else if(ext == "qml"){ + addPlugin(path, {close: true, section: "apps"}) + } + } + + + function setWalletValue(value) { + walletValueLabel.text = value + } + + function loadPlugin(name) { + console.log("Loading plugin" + name) + var view = mainView.addPlugin(name) + } + + function setPeers(text) { + peerLabel.text = text + } + + function addPeer(peer) { + // We could just append the whole peer object but it cries if you try to alter them + peerModel.append({ip: peer.ip, port: peer.port, lastResponse:timeAgo(peer.lastSend), latency: peer.latency, version: peer.version, caps: peer.caps}) + } + + function resetPeers(){ + peerModel.clear() + } + + function timeAgo(unixTs){ + var lapsed = (Date.now() - new Date(unixTs*1000)) / 1000 + return (lapsed + " seconds ago") + } + + function convertToPretty(unixTs){ + var a = new Date(unixTs*1000); + var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; + var year = a.getFullYear(); + var month = months[a.getMonth()]; + var date = a.getDate(); + var hour = a.getHours(); + var min = a.getMinutes(); + var sec = a.getSeconds(); + var time = date+' '+month+' '+year+' '+hour+':'+min+':'+sec ; + return time; + } + + /********************** + * Windows + *********************/ + Window { + id: peerWindow + //flags: Qt.CustomizeWindowHint | Qt.Tool | Qt.WindowCloseButtonHint + height: 200 + width: 700 + Rectangle { + anchors.fill: parent + property var peerModel: ListModel { + id: peerModel + } + TableView { + anchors.fill: parent + id: peerTable + model: peerModel + TableViewColumn{width: 200; role: "ip" ; title: "IP" } + TableViewColumn{width: 260; role: "version" ; title: "Version" } + TableViewColumn{width: 180; role: "caps" ; title: "Capabilities" } + } + } + } + + Window { + id: aboutWin + visible: false + title: "About" + minimumWidth: 350 + maximumWidth: 350 + maximumHeight: 280 + minimumHeight: 280 + + Image { + id: aboutIcon + height: 150 + width: 150 + fillMode: Image.PreserveAspectFit + smooth: true + source: "../facet.png" + x: 10 + y: 30 + } + + Text { + anchors.left: aboutIcon.right + anchors.leftMargin: 10 + anchors.top: parent.top + anchors.topMargin: 30 + font.pointSize: 12 + text: "

Mist (0.7.10)


Development

Jeffrey Wilcke
Viktor Trón
Felix Lange
Taylor Gerring
Daniel Nagy

UX

Alex van de Sande
" + } + } + + Window { + id: txImportDialog + minimumWidth: 270 + maximumWidth: 270 + maximumHeight: 50 + minimumHeight: 50 + TextField { + id: txImportField + width: 170 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 10 + onAccepted: { + } + } + Button { + anchors.left: txImportField.right + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: 5 + text: "Import" + onClicked: { + eth.importTx(txImportField.text) + txImportField.visible = false + } + } + Component.onCompleted: { + addrField.focus = true + } + } + + Window { + id: addPeerWin + visible: false + minimumWidth: 300 + maximumWidth: 300 + maximumHeight: 50 + minimumHeight: 50 + title: "Connect to peer" + + ComboBox { + id: addrField + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: addPeerButton.left + anchors.leftMargin: 10 + anchors.rightMargin: 10 + onAccepted: { + eth.connectToPeer(addrField.currentText) + addPeerWin.visible = false + } + + editable: true + model: ListModel { id: pastPeers } + + Component.onCompleted: { + pastPeers.insert(0, {text: "poc-8.ethdev.com:30303"}) + /* + var ips = eth.pastPeers() + for(var i = 0; i < ips.length; i++) { + pastPeers.append({text: ips.get(i)}) + } + + pastPeers.insert(0, {text: "poc-7.ethdev.com:30303"}) + */ + } + } + + Button { + id: addPeerButton + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.rightMargin: 10 + text: "Add" + onClicked: { + eth.connectToPeer(addrField.currentText) + addPeerWin.visible = false + } + } + Component.onCompleted: { + addrField.focus = true + } + } } From 6cd6a44f08c06f13797381c1a7042d01766d103f Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Mon, 2 Feb 2015 18:17:44 -0200 Subject: [PATCH 2/6] not opening new tabs? --- cmd/mist/assets/qml/main.qml | 188 ++++++++------------------ cmd/mist/assets/qml/views/browser.qml | 7 +- 2 files changed, 60 insertions(+), 135 deletions(-) diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml index 5771250613b2..6574ba727af2 100644 --- a/cmd/mist/assets/qml/main.qml +++ b/cmd/mist/assets/qml/main.qml @@ -44,7 +44,7 @@ ApplicationWindow { addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"}); mainSplit.setView(wallet.view, wallet.menuItem); -s + newBrowserTab("http://etherian.io"); // Command setup @@ -360,24 +360,10 @@ s ********************/ Rectangle { id: menu - Layout.minimumWidth: 192 - Layout.maximumWidth: 192 + Layout.minimumWidth: 210 + Layout.maximumWidth: 210 anchors.top: parent.top - //color: "#FAF5F5" - - Rectangle { - width: parent.height - height: parent.width - anchors.centerIn: parent - rotation: 90 - - gradient: Gradient { - GradientStop { position: 0.0; color: "#F1ECEC" } - GradientStop { position: 0.2; color: "#FAF5F5" } - GradientStop { position: 1.0; color: "#FAF5F5" } - } - } - + color: "#ececec" Component { id: menuItemTemplate @@ -394,8 +380,8 @@ s sel.visible = on } - width: 192 - height: 55 + width: 206 + height: 28 color: "#00000000" anchors { @@ -404,7 +390,6 @@ s } Rectangle { - // This is the selection rectangle id: sel visible: false anchors.fill: parent @@ -412,10 +397,10 @@ s Rectangle { id: r anchors.fill: parent - border.width: 0 + border.color: "#CCCCCC" + border.width: 1 radius: 5 color: "#FFFFFFFF" - // Background of selected tab } Rectangle { anchors { @@ -425,29 +410,25 @@ s } width: 10 color: "#FFFFFFFF" - border.width:0 - //Little tiny rectangle to the right of selection. Not sure what's for Rectangle { - // Small line on top of selection. What's this for? anchors { left: parent.left right: parent.right top: parent.top } height: 1 - color: "#FFFFFFFF" + color: "#CCCCCC" } Rectangle { - // Small line on bottom of selection. What's this for again? anchors { left: parent.left right: parent.right bottom: parent.bottom } height: 1 - color: "#FFFFFFFF" + color: "#CCCCCC" } } } @@ -460,14 +441,13 @@ s } Image { - // Icon id: icon - height: 24 - width: 24 + height: 20 + width: 20 anchors { left: parent.left verticalCenter: parent.verticalCenter - leftMargin: 6 + leftMargin: 3 } MouseArea { anchors.fill: parent @@ -478,27 +458,25 @@ s } Text { - // Main Text id: label anchors { left: icon.right verticalCenter: parent.verticalCenter - leftMargin: 6 + leftMargin: 3 } - color: "#665F5F" - font.pixelSize: 14 + color: "#0D0A01" + font.pixelSize: 12 } Text { - // Auxiliary Text id: secondary anchors { right: parent.right rightMargin: 8 verticalCenter: parent.verticalCenter } - color: "#6691C2" + color: "#AEADBE" font.pixelSize: 12 } @@ -563,45 +541,14 @@ s anchors.right: parent.right spacing: 3 - - Rectangle { - // New App Button - id: newAppButton - anchors { - left: parent.left - leftMargin: 6 - } - border.width: 0 - radius: 5 - height: 56 - width: 180 - color: "#F6EEEE" - - Text { - text: "GO TO NEW APP" - font.bold: true - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - color: "#AAA0A0" - } - } - - Rectangle { - // Ethereum Title + Text { + text: "ETHEREUM" + font.bold: true anchors { left: parent.left - leftMargin: 6 - } - border.width: 0 - height: 56 - width: 180 - color: "#00000000" - Text { - text: "ETHEREUM" - font.bold: true - anchors.verticalCenter: parent.verticalCenter - color: "#AAA0A0" + leftMargin: 5 } + color: "#888888" } ColumnLayout { @@ -614,23 +561,14 @@ s } - - Rectangle { - // Apps + Text { + text: "NET" + font.bold: true anchors { left: parent.left - leftMargin: 6 - } - border.width: 0 - height: 56 - width: 180 - color: "#00000000" - Text { - text: "APPS" - font.bold: true - anchors.verticalCenter: parent.verticalCenter - color: "#AAA0A0" + leftMargin: 5 } + color: "#888888" } ColumnLayout { @@ -639,28 +577,17 @@ s anchors { left: parent.left right: parent.right - bottomMargin: 18 } } - - Rectangle { - // Debug + Text { + text: "DEBUG" + font.bold: true anchors { left: parent.left - leftMargin: 6 - } - border.width: 0 - height: 56 - width: 180 - color: "#00000000" - - Text { - text: "DEBUG" - font.bold: true - anchors.verticalCenter: parent.verticalCenter - color: "#AAA0A0" + leftMargin: 5 } + color: "#888888" } ColumnLayout { @@ -671,7 +598,6 @@ s right: parent.right } } - } } @@ -684,35 +610,31 @@ s anchors.left: menu.right anchors.bottom: parent.bottom anchors.top: parent.top - anchors.topMargin: 50 - anchors.bottomMargin: 50 - color: "#FF00FF" //magenta - // This is the background of the URL bar + color: "#00000000" Rectangle { id: urlPane - - anchors.right: parent.right - anchors.left: parent.left - anchors.bottom: parent.bottom - anchors.top: parent.top - anchors.topMargin: 50 - anchors.bottomMargin: 50 - height: 10 - color: "#00FFFF" //cyan - + height: 40 + color: "#00000000" + anchors { + left: parent.left + right: parent.right + leftMargin: 5 + rightMargin: 5 + top: parent.top + topMargin: 5 + } TextField { id: url objectName: "url" placeholderText: "DApp URL" - anchors { - left: parent.left + left: parent.left right: parent.right - top: parent.top - topMargin: 5 + top: parent.top + topMargin: 5 rightMargin: 5 - leftMargin: 5 + leftMargin: 5 } Keys.onReturnPressed: { @@ -726,7 +648,7 @@ s } - // Invisible divider between url bar and main view + // Border Rectangle { id: divider anchors { @@ -734,19 +656,18 @@ s right: parent.right top: urlPane.bottom } - height: 10 - color: "#FFFF00" //yellow + z: -1 + height: 1 + color: "#CCCCCC" } Rectangle { id: mainView - color: "#0000FF" //dark blue + color: "#00000000" anchors.right: parent.right anchors.left: parent.left anchors.bottom: parent.bottom - anchors.top: divider.top - anchors.topMargin: 100 - anchors.bottomMargin: 100 + anchors.top: divider.bottom function createView(component) { var view = component.createObject(mainView) @@ -754,7 +675,6 @@ s return view; } } - } } @@ -968,4 +888,4 @@ s addrField.focus = true } } - } + } \ No newline at end of file diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml index 277a5b7ebf96..44025327f0ce 100644 --- a/cmd/mist/assets/qml/views/browser.qml +++ b/cmd/mist/assets/qml/views/browser.qml @@ -73,12 +73,17 @@ Rectangle { RowLayout { id: navBar - height: 40 + height: 74 anchors { left: parent.left right: parent.right leftMargin: 7 } + gradient: Gradient { + GradientStop { position: 0.0; color: "#F1ECEC" } + GradientStop { position: 0.2; color: "#FAF5F5" } + GradientStop { position: 1.0; color: "#FAF5F5" } + } Button { id: back From 89eff45bc8d2d4d207c3e03dee5fa4a97a56c727 Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Mon, 2 Feb 2015 18:40:17 -0200 Subject: [PATCH 3/6] restarted design to squash some unkonw bug --- cmd/mist/assets/qml/main.qml | 73 ++++++++++++++++++++------- cmd/mist/assets/qml/views/browser.qml | 6 --- 2 files changed, 54 insertions(+), 25 deletions(-) diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml index 6574ba727af2..7ba1e5eb5264 100644 --- a/cmd/mist/assets/qml/main.qml +++ b/cmd/mist/assets/qml/main.qml @@ -360,10 +360,21 @@ ApplicationWindow { ********************/ Rectangle { id: menu - Layout.minimumWidth: 210 - Layout.maximumWidth: 210 + Layout.minimumWidth: 192 + Layout.maximumWidth: 192 anchors.top: parent.top - color: "#ececec" + Rectangle { + width: parent.height + height: parent.width + anchors.centerIn: parent + rotation: 90 + + gradient: Gradient { + GradientStop { position: 0.0; color: "#F1ECEC" } + GradientStop { position: 0.2; color: "#FAF5F5" } + GradientStop { position: 1.0; color: "#FAF5F5" } + } + } Component { id: menuItemTemplate @@ -380,8 +391,8 @@ ApplicationWindow { sel.visible = on } - width: 206 - height: 28 + width: 192 + height: 55 color: "#00000000" anchors { @@ -397,8 +408,7 @@ ApplicationWindow { Rectangle { id: r anchors.fill: parent - border.color: "#CCCCCC" - border.width: 1 + border.width: 0 radius: 5 color: "#FFFFFFFF" } @@ -410,25 +420,28 @@ ApplicationWindow { } width: 10 color: "#FFFFFFFF" + border.width:0 Rectangle { + // Small line on top of selection. What's this for? anchors { left: parent.left right: parent.right top: parent.top } height: 1 - color: "#CCCCCC" + color: "#FFFFFF" } Rectangle { + // Small line on bottom of selection. What's this for again? anchors { left: parent.left right: parent.right bottom: parent.bottom } height: 1 - color: "#CCCCCC" + color: "#FFFFFF" } } } @@ -442,12 +455,12 @@ ApplicationWindow { Image { id: icon - height: 20 - width: 20 + height: 24 + width: 24 anchors { left: parent.left verticalCenter: parent.verticalCenter - leftMargin: 3 + leftMargin: 6 } MouseArea { anchors.fill: parent @@ -462,11 +475,11 @@ ApplicationWindow { anchors { left: icon.right verticalCenter: parent.verticalCenter - leftMargin: 3 + leftMargin: 6 } - color: "#0D0A01" - font.pixelSize: 12 + color: "#665F5F" + font.pixelSize: 14 } Text { @@ -476,7 +489,7 @@ ApplicationWindow { rightMargin: 8 verticalCenter: parent.verticalCenter } - color: "#AEADBE" + color: "#6691C2" font.pixelSize: 12 } @@ -540,6 +553,28 @@ ApplicationWindow { anchors.left: parent.left anchors.right: parent.right spacing: 3 + + Rectangle { + // New App Button + id: newAppButton + anchors { + left: parent.left + leftMargin: 6 + } + border.width: 0 + radius: 5 + height: 56 + width: 180 + color: "#F6EEEE" + + Text { + text: "GO TO NEW APP" + font.bold: true + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + color: "#AAA0A0" + } + } Text { text: "ETHEREUM" @@ -548,7 +583,7 @@ ApplicationWindow { left: parent.left leftMargin: 5 } - color: "#888888" + color: "#AAA0A0" } ColumnLayout { @@ -568,7 +603,7 @@ ApplicationWindow { left: parent.left leftMargin: 5 } - color: "#888888" + color: "#AAA0A0" } ColumnLayout { @@ -587,7 +622,7 @@ ApplicationWindow { left: parent.left leftMargin: 5 } - color: "#888888" + color: "#AAA0A0" } ColumnLayout { diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml index 44025327f0ce..7d1f78f3df37 100644 --- a/cmd/mist/assets/qml/views/browser.qml +++ b/cmd/mist/assets/qml/views/browser.qml @@ -79,11 +79,6 @@ Rectangle { right: parent.right leftMargin: 7 } - gradient: Gradient { - GradientStop { position: 0.0; color: "#F1ECEC" } - GradientStop { position: 0.2; color: "#FAF5F5" } - GradientStop { position: 1.0; color: "#FAF5F5" } - } Button { id: back @@ -213,4 +208,3 @@ Rectangle { ] } } - From 1fa98129c038ccdef894d41ce82d3028f52e803d Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Tue, 3 Feb 2015 18:08:54 -0200 Subject: [PATCH 4/6] new app button --- cmd/mist/assets/qml/main.qml | 80 +++++++++++++++++++-------- cmd/mist/assets/qml/views/browser.qml | 4 +- 2 files changed, 60 insertions(+), 24 deletions(-) diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml index 7ba1e5eb5264..3b2c7ba7317b 100644 --- a/cmd/mist/assets/qml/main.qml +++ b/cmd/mist/assets/qml/main.qml @@ -11,6 +11,9 @@ import "../ext/http.js" as Http ApplicationWindow { id: root + + //flags: Qt.FramelessWindowHint + // Use this to make the window frameless. But then you'll need to do move and resize by hand property var ethx : Eth.ethx @@ -34,9 +37,11 @@ ApplicationWindow { // Takes care of loading all default plugins Component.onCompleted: { + + addPlugin("./views/catalog.qml", {noAdd: true, close: false, section: "begin"}); var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true}); - addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true}); + addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true}); addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"}); addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"}); addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"}); @@ -370,9 +375,9 @@ ApplicationWindow { rotation: 90 gradient: Gradient { - GradientStop { position: 0.0; color: "#F1ECEC" } - GradientStop { position: 0.2; color: "#FAF5F5" } - GradientStop { position: 1.0; color: "#FAF5F5" } + GradientStop { position: 0.0; color: "#D5D4D5" } + GradientStop { position: 0.1; color: "#E7E5E7" } + GradientStop { position: 1.0; color: "#E7E5E7" } } } @@ -391,6 +396,12 @@ ApplicationWindow { sel.visible = on } + function setAsBigButton(on) { + newAppButton.visible = on + label.visible = !on + buttonLabel.visible = on + } + width: 192 height: 55 color: "#00000000" @@ -400,6 +411,23 @@ ApplicationWindow { leftMargin: 4 } + Rectangle { + // New App Button + id: newAppButton + visible: false + anchors { + top: parent.top + left: parent.left + leftMargin: 6 + topMargin: 9 + } + border.width: 0 + radius: 5 + height: 37 + width: 180 + color: "#F3F1F3" + } + Rectangle { id: sel visible: false @@ -481,6 +509,16 @@ ApplicationWindow { color: "#665F5F" font.pixelSize: 14 } + + Text { + id: buttonLabel + visible: false + text: "GO TO NEW APP" + font.bold: true + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + color: "#AAA0A0" + } Text { id: secondary @@ -523,6 +561,9 @@ ApplicationWindow { var section; switch(options.section) { + case "begin": + section = menuBegin + break; case "ethereum": section = menuDefault; break; @@ -536,13 +577,17 @@ ApplicationWindow { var comp = menuItemTemplate.createObject(section) comp.view = view - comp.title = view.title + comp.title = options.section // view.title if(view.hasOwnProperty("iconSource")) { comp.icon = view.iconSource; } comp.closable = options.close; + if (options.section === "begin") { + comp.setAsBigButton(true) + } + return comp } @@ -554,25 +599,14 @@ ApplicationWindow { anchors.right: parent.right spacing: 3 - Rectangle { - // New App Button - id: newAppButton + + + ColumnLayout { + id: menuBegin + spacing: 3 anchors { left: parent.left - leftMargin: 6 - } - border.width: 0 - radius: 5 - height: 56 - width: 180 - color: "#F6EEEE" - - Text { - text: "GO TO NEW APP" - font.bold: true - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - color: "#AAA0A0" + right: parent.right } } @@ -597,7 +631,7 @@ ApplicationWindow { Text { - text: "NET" + text: "APPS" font.bold: true anchors { left: parent.left diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml index 7d1f78f3df37..6f23c4de20dc 100644 --- a/cmd/mist/assets/qml/views/browser.qml +++ b/cmd/mist/assets/qml/views/browser.qml @@ -74,12 +74,14 @@ Rectangle { RowLayout { id: navBar height: 74 + + anchors { left: parent.left right: parent.right leftMargin: 7 } - + Button { id: back onClicked: { From 5f051551aaca2382d8899ad2073ca5754fbcf12d Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Wed, 4 Feb 2015 20:30:54 -0200 Subject: [PATCH 5/6] browser url bar --- cmd/mist/assets/qml/main.qml | 8 +- cmd/mist/assets/qml/views/browser.qml | 164 +++++++++++++++++++++++--- 2 files changed, 157 insertions(+), 15 deletions(-) diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml index 3b2c7ba7317b..575c15932a55 100644 --- a/cmd/mist/assets/qml/main.qml +++ b/cmd/mist/assets/qml/main.qml @@ -50,7 +50,7 @@ ApplicationWindow { mainSplit.setView(wallet.view, wallet.menuItem); - newBrowserTab("http://etherian.io"); + newBrowserTab("http://ethereum-dapp-whisper-client.meteor.com/chat/ethereum"); // Command setup gui.sendCommand(0) @@ -330,6 +330,7 @@ ApplicationWindow { anchors.fill: parent resizing: false + function setView(view, menu) { for(var i = 0; i < views.length; i++) { views[i].view.visible = false @@ -367,6 +368,8 @@ ApplicationWindow { id: menu Layout.minimumWidth: 192 Layout.maximumWidth: 192 + border.width: 10 + anchors.top: parent.top Rectangle { width: parent.height @@ -680,6 +683,9 @@ ApplicationWindow { anchors.bottom: parent.bottom anchors.top: parent.top color: "#00000000" + border.width: 10 + border.color: "#00FF0F" + Rectangle { id: urlPane diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml index 6f23c4de20dc..5e9892e4c531 100644 --- a/cmd/mist/assets/qml/views/browser.qml +++ b/cmd/mist/assets/qml/views/browser.qml @@ -56,6 +56,8 @@ Rectangle { //uriNav.text = uri.text.replace(/(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.\w{2,3})(.*)/, "$1$2$3"); uriNav.text = uri; + appDomain.text = "some.thing" + } else { // Prevent inf loop. window.cleanPath = false; @@ -79,39 +81,163 @@ Rectangle { anchors { left: parent.left right: parent.right - leftMargin: 7 } - + Button { id: back + onClicked: { webview.goBack() } + + anchors{ + left: parent.left + leftMargin: 6 + } + style: ButtonStyle { background: Image { - source: "../../back.png" - width: 30 + source: "../../backButton.png" + width: 20 height: 30 } } } - TextField { - anchors { + + + Rectangle { + id: appInfoPane + height: 28 + color: "#FFFFFF" + radius: 6 + + MouseArea { + anchors.fill: parent + z: 10 + hoverEnabled: true + onEntered: { + uriNav.visible = true + appTitle.visible = false + appDomain.visible = false + + } + /*onExited: { + uriNav.visible = false + appTitle.visible = true + appDomain.visible = true + + }*/ + + } + + anchors { left: back.right - right: toggleInspector.left + right: parent.right leftMargin: 10 rightMargin: 10 } - text: webview.url; - id: uriNav - y: parent.height / 2 - this.height / 2 - Keys.onReturnPressed: { - webview.url = this.text; - } + Text { + id: appTitle + text: webview.title + font.bold: true + font.capitalization: Font.AllUppercase + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + + anchors { + left: parent.left + right: parent.horizontalCenter + top: parent.top + bottom: parent.bottom + rightMargin: 10 + } + color: "#928484" + } + + Text { + id: appDomain + text: webview.url + font.bold: false + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + + anchors { + left: parent.horizontalCenter + right: parent.right + top: parent.top + bottom: parent.bottom + leftMargin: 10 + } + color: "#928484" + } + + + TextField { + id: uriNav + visible: false + anchors { + left: parent.left + right: parent.right + leftMargin: 16 + } + + horizontalAlignment: Text.AlignHCenter + + style: TextFieldStyle { + textColor: "#928484" + background: Rectangle { + border.width: 0 + color: "transparent" + } + } + text: webview.url; + y: parent.height / 2 - this.height / 2 + z: 20 + Keys.onReturnPressed: { + webview.url = this.text; + uriNav.visible = false + appTitle.visible = true + appDomain.visible = true + } + + } + + + + + + /*text { + id: appTitle + anchors.left: parent.left + anchors.right: parent.horizontalCenter + text: "APP TITLE" + font.bold: true + color: "#928484" + }*/ + z:2 } + + Rectangle { + id: appInfoPaneShadow + width: 10 + height: 30 + color: "#BDB6B6" + radius: 6 + anchors { + left: back.right + right: parent.right + leftMargin:10 + rightMargin:10 + top: parent.top + topMargin: 23 + } + + z:1 + } + /* Button { id: toggleInspector anchors { @@ -128,7 +254,17 @@ Rectangle { inspector.url = webview.experimental.remoteInspectorUrl } } - } + }*/ + + Rectangle { + anchors.fill: parent + gradient: Gradient { + GradientStop { position: 0.0; color: "#F6F1F2" } + GradientStop { position: 1.0; color: "#DED5D5" } + } + z:-1 + } + } // Border From 1032d133fbe4dd5ffddc27152e046da4916b5382 Mon Sep 17 00:00:00 2001 From: Alexandre Van de Sande Date: Thu, 5 Feb 2015 17:21:37 -0200 Subject: [PATCH 6/6] browser bar with two states --- cmd/mist/assets/qml/views/browser.qml | 32 +++++++++++++-------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml index 5e9892e4c531..2c5888478051 100644 --- a/cmd/mist/assets/qml/views/browser.qml +++ b/cmd/mist/assets/qml/views/browser.qml @@ -56,7 +56,6 @@ Rectangle { //uriNav.text = uri.text.replace(/(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.\w{2,3})(.*)/, "$1$2$3"); uriNav.text = uri; - appDomain.text = "some.thing" } else { // Prevent inf loop. @@ -104,8 +103,6 @@ Rectangle { } } - - Rectangle { id: appInfoPane height: 28 @@ -120,15 +117,7 @@ Rectangle { uriNav.visible = true appTitle.visible = false appDomain.visible = false - } - /*onExited: { - uriNav.visible = false - appTitle.visible = true - appDomain.visible = true - - }*/ - } anchors { @@ -140,7 +129,7 @@ Rectangle { Text { id: appTitle - text: webview.title + text: "LOADING" font.bold: true font.capitalization: Font.AllUppercase horizontalAlignment: Text.AlignRight @@ -158,7 +147,7 @@ Rectangle { Text { id: appDomain - text: webview.url + text: "loading domain" font.bold: false horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter @@ -170,7 +159,7 @@ Rectangle { bottom: parent.bottom leftMargin: 10 } - color: "#928484" + color: "#C0AFAF" } @@ -195,11 +184,9 @@ Rectangle { text: webview.url; y: parent.height / 2 - this.height / 2 z: 20 + activeFocusOnPress: true Keys.onReturnPressed: { webview.url = this.text; - uriNav.visible = false - appTitle.visible = true - appDomain.visible = true } } @@ -297,6 +284,17 @@ Rectangle { }); webview.runJavaScript(eth.readFile("bignumber.min.js")); webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js")); + + var cleanTitle = webview.url.toString() + var matches = cleanTitle.match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i); + var domain = matches && matches[1]; + + uriNav.visible = false + appDomain.visible = true + appDomain.text = domain //webview.url.replace("a", "z") + + appTitle.visible = true + appTitle.text = webview.title } } onJavaScriptConsoleMessage: {