ui changes

mix/qml/Block.qml

@@ -57,7 +57,6 @@ ColumnLayout
 			Layout.preferredWidth: blockWidth
 			Layout.preferredHeight: trHeight
 			color: "#DEDCDC"
-			radius: 4
 			anchors.left: parent.left
 			anchors.leftMargin: statusWidth
 			Label {
@@ -141,13 +140,14 @@ ColumnLayout
 				color: "transparent"
 				anchors.top: parent.top
 				property bool saveStatus
-
 				Image {
 					anchors.top: parent.top
-					anchors.topMargin: -10
+					anchors.left: parent.left
+					anchors.leftMargin: -9
+					anchors.topMargin: -9
 					id: saveStatusImage
 					source: "qrc:/qml/img/recyclediscard@2x.png"
-					width: statusWidth
+					width: statusWidth + 20
 					fillMode: Image.PreserveAspectFit
 				}
 
@@ -206,7 +206,7 @@ ColumnLayout
 					{
 						anchors.top: parent.top
 						Layout.fillWidth: true
-						spacing: cellSpacing
+						//spacing: cellSpacing
 						Rectangle
 						{
 							Layout.preferredWidth: fromWidth

mix/qml/BlockChain.qml

@@ -67,7 +67,7 @@ ColumnLayout {
 		previousWidth = width
 	}
 
-	property int statusWidth: 50
+	property int statusWidth: 30
 	property int fromWidth: 150
 	property int toWidth: 100
 	property int valueWidth: 200
@@ -80,13 +80,20 @@ ColumnLayout {
 	{
 		id: header
 		spacing: 0
-		Layout.preferredHeight: 40
-		Image {
-			id: debugImage
-			source: "qrc:/qml/img/recycleicon@2x.png"
+		Layout.preferredHeight: 30
+		Rectangle
+		{
 			Layout.preferredWidth: statusWidth
 			Layout.preferredHeight: parent.height
-			fillMode: Image.PreserveAspectFit
+			color: "transparent"
+			Image {
+				id: debugImage
+				anchors.verticalCenter: parent.verticalCenter
+				anchors.horizontalCenter: parent.horizontalCenter
+				source: "qrc:/qml/img/recycleicon@2x.png"
+				width: statusWidth + 20
+				fillMode: Image.PreserveAspectFit
+			}
 		}
 		Rectangle
 		{
@@ -96,7 +103,7 @@ ColumnLayout {
 				anchors.verticalCenter: parent.verticalCenter
 				text: "From"
 				anchors.left: parent.left
-				anchors.leftMargin: horizontalMargin + 5
+				anchors.leftMargin: horizontalMargin
 			}
 		}
 		Label
@@ -243,143 +250,171 @@ ColumnLayout {
 		Layout.preferredWidth: parent.width
 		RowLayout
 		{
-			width: 4 * 100
+			anchors.horizontalCenter: parent.horizontalCenter
 			anchors.top: parent.top
 			anchors.topMargin: 10
-			spacing: 0
-			ScenarioButton {
-				id: rebuild
-				text: qsTr("Rebuild")
-				onClicked:
-				{
-					if (ensureNotFuturetime.running)
-						return;
-					stopBlinking()
-					var retBlocks = [];
-					var bAdded = 0;
-					for (var j = 0; j < model.blocks.length; j++)
+			spacing: 20
+
+			Rectangle {
+				Layout.preferredWidth: 100
+				Layout.preferredHeight: 30
+
+				ScenarioButton {
+					id: rebuild
+					text: qsTr("Rebuild")
+					width: 100
+					height: 30
+					roundLeft: true
+					roundRight: true
+					onClicked:
 					{
-						var b = model.blocks[j];
-						var block = {
-							hash: b.hash,
-							number: b.number,
-							transactions: [],
-							status: b.status
-						}
-						for (var k = 0; k < model.blocks[j].transactions.length; k++)
+						if (ensureNotFuturetime.running)
+							return;
+						stopBlinking()
+						var retBlocks = [];
+						var bAdded = 0;
+						for (var j = 0; j < model.blocks.length; j++)
 						{
-							if (blockModel.get(j).transactions.get(k).saveStatus)
+							var b = model.blocks[j];
+							var block = {
+								hash: b.hash,
+								number: b.number,
+								transactions: [],
+								status: b.status
+							}
+							for (var k = 0; k < model.blocks[j].transactions.length; k++)
+							{
+								if (blockModel.get(j).transactions.get(k).saveStatus)
+								{
+									var tr = model.blocks[j].transactions[k]
+									tr.saveStatus = true
+									block.transactions.push(tr);
+								}
+
+							}
+							if (block.transactions.length > 0)
 							{
-								var tr = model.blocks[j].transactions[k]
-								tr.saveStatus = true
-								block.transactions.push(tr);
+								bAdded++
+								block.number = bAdded
+								block.status = "mined"
+								retBlocks.push(block)
 							}
 
 						}
-						if (block.transactions.length > 0)
+						if (retBlocks.length === 0)
+							retBlocks.push(projectModel.stateListModel.createEmptyBlock())
+						else
 						{
-							bAdded++
-							block.number = bAdded
-							block.status = "mined"
-							retBlocks.push(block)
+							var last = retBlocks[retBlocks.length - 1]
+							last.number = -1
+							last.status = "pending"
 						}
 
-					}
-					if (retBlocks.length === 0)
-						retBlocks.push(projectModel.stateListModel.createEmptyBlock())
-					else
-					{
-						var last = retBlocks[retBlocks.length - 1]
-						last.number = -1
-						last.status = "pending"
-					}
-
-					model.blocks = retBlocks
-					blockModel.clear()
-					for (var j = 0; j < model.blocks.length; j++)
-						blockModel.append(model.blocks[j])
+						model.blocks = retBlocks
+						blockModel.clear()
+						for (var j = 0; j < model.blocks.length; j++)
+							blockModel.append(model.blocks[j])
 
-					ensureNotFuturetime.start()
-					clientModel.setupScenario(model);
+						ensureNotFuturetime.start()
+						clientModel.setupScenario(model);
+					}
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/recycleicon@2x.png"
 				}
-
-				Layout.preferredWidth: 100
-				Layout.preferredHeight: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/recycleicon@2x.png"
+			}
 
 
-			}
+			Rectangle
+			{
+				Layout.preferredWidth: 200
+				Layout.preferredHeight: 30
+				color: "transparent"
 
-			ScenarioButton {
-				id: addTransaction
-				text: qsTr("Add Transaction")
-				onClicked:
-				{
-					var lastBlock = model.blocks[model.blocks.length - 1];
-					if (lastBlock.status === "mined")
+				ScenarioButton {
+					id: addTransaction
+					text: qsTr("Add Tx")
+					onClicked:
 					{
-						var newblock = projectModel.stateListModel.createEmptyBlock()
-						blockModel.appendBlock(newblock)
-						model.blocks.push(newblock);
-					}
+						var lastBlock = model.blocks[model.blocks.length - 1];
+						if (lastBlock.status === "mined")
+						{
+							var newblock = projectModel.stateListModel.createEmptyBlock()
+							blockModel.appendBlock(newblock)
+							model.blocks.push(newblock);
+						}
 
-					var item = TransactionHelper.defaultTransaction()
-					transactionDialog.stateAccounts = model.accounts
-					transactionDialog.execute = true
-					transactionDialog.open(model.blocks[model.blocks.length - 1].transactions.length, model.blocks.length - 1, item)
+						var item = TransactionHelper.defaultTransaction()
+						transactionDialog.stateAccounts = model.accounts
+						transactionDialog.execute = true
+						transactionDialog.open(model.blocks[model.blocks.length - 1].transactions.length, model.blocks.length - 1, item)
+					}
+					width: 100
+					height: 30
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/sendtransactionicon@2x.png"
+					roundLeft: true
+					roundRight: false
 				}
-				Layout.preferredWidth: 100
-				Layout.preferredHeight: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/sendtransactionicon@2x.png"
-			}
 
-			Timer
-			{
-				id: ensureNotFuturetime
-				interval: 1000
-				repeat: false
-				running: false
-			}
+				Timer
+				{
+					id: ensureNotFuturetime
+					interval: 1000
+					repeat: false
+					running: false
+				}
 
-			ScenarioButton {
-				id: addBlockBtn
-				text: qsTr("Add Block")
-				onClicked:
+				Rectangle
 				{
-					if (ensureNotFuturetime.running)
-						return
-					if (clientModel.mining || clientModel.running)
-						return
-					if (model.blocks.length > 0)
+					width: 1
+					height: parent.height
+					anchors.right: addBlockBtn.left
+					color: "#ededed"
+				}
+
+				ScenarioButton {
+					id: addBlockBtn
+					text: qsTr("Add Block..")
+					anchors.left: addTransaction.right
+					roundLeft: false
+					roundRight: true
+					onClicked:
 					{
-						var lastBlock = model.blocks[model.blocks.length - 1]
-						if (lastBlock.status === "pending")
+						if (ensureNotFuturetime.running)
+							return
+						if (clientModel.mining || clientModel.running)
+							return
+						if (model.blocks.length > 0)
 						{
-							ensureNotFuturetime.start()
-							clientModel.mine()
+							var lastBlock = model.blocks[model.blocks.length - 1]
+							if (lastBlock.status === "pending")
+							{
+								ensureNotFuturetime.start()
+								clientModel.mine()
+							}
+							else
+								addNewBlock()
 						}
 						else
 							addNewBlock()
+
 					}
-					else
-						addNewBlock()
 
-				}
+					function addNewBlock()
+					{
+						var block = projectModel.stateListModel.createEmptyBlock()
+						model.blocks.push(block)
+						blockModel.appendBlock(block)
+					}
+					width: 100
+					height: 30
 
-				function addNewBlock()
-				{
-					var block = projectModel.stateListModel.createEmptyBlock()
-					model.blocks.push(block)
-					blockModel.appendBlock(block)
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/addblock@2x.png"
 				}
-				Layout.preferredWidth: 100
-				Layout.preferredHeight: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/addblock@2x.png"
 			}
 
+
 			Connections
 			{
 				target: clientModel
@@ -447,7 +482,7 @@ ColumnLayout {
 
 			ScenarioButton {
 				id: newAccount
-				text: qsTr("New Account")
+				text: qsTr("New Account..")
 				onClicked: {
 					model.accounts.push(projectModel.stateListModel.newAccount("1000000", QEther.Ether))
 				}
@@ -455,6 +490,8 @@ ColumnLayout {
 				Layout.preferredHeight: 30
 				buttonShortcut: ""
 				sourceImg: "qrc:/qml/img/newaccounticon@2x.png"
+				roundLeft: true
+				roundRight: true
 			}
 		}
 	}

mix/qml/ScenarioButton.qml

@@ -2,6 +2,7 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.0
 import QtQuick.Controls.Styles 1.1
+import QtGraphicalEffects 1.0
 
 Rectangle {
 	id: buttonActionContainer
@@ -9,6 +10,8 @@ Rectangle {
 	property string buttonShortcut
 	property string sourceImg
 	property string fillColor
+	property alias roundLeft: left.visible
+	property alias roundRight: right.visible
 	signal clicked
 
 	function startBlinking()
@@ -22,12 +25,19 @@ Rectangle {
 		blinkTimer.stop()
 	}
 
+	Rectangle
+	{
+		id: left
+		width: 10
+		height: parent.height
+		anchors.left: parent.left
+		anchors.leftMargin: -8
+		radius: 15
+	}
+
 	Rectangle {
 		id: contentRectangle
 		anchors.fill: parent
-		border.color: "#cccccc"
-		border.width: 1
-		radius: 4
 		color: "white"
 		property variant colorGradient: ["#FFFFFF", "#FFFEFC", "#FFFDF9", "#FFFCF7", "#FFFBF4", "#FFFAF2", "#FFF9EF", "#FFF8EC", "#FFF7EA", "#FFF6E7", "#FFF5E5", "#FFF5E2", "#FFF4E0", "#FFF3DD", "#FFF2DA", "#FFF1D8", "#FFF0D5", "#FFEFD3", "#FFEED0", "#FFEDCE", "#FFECCB", "#FFEBC8", "#FFEBC6", "#FFEAC3", "#FFE9C1", "#FFE8BE", "#FFE7BC", "#FFE6B9", "#FFE5B6", "#FFE4B4", "#FFE3B1", "#FFE2AF", "#FFE1AC", "#FFE1AA", "#FFE0A7", "#FFDFA4", "#FFDEA2", "#FFDD9F", "#FFDC9D", "#FFDB9A", "#FFDA97", "#FFD995", "#FFD892", "#FFD790", "#FFD78D", "#FFD68B", "#FFD588", "#FFD485", "#FFD383", "#FFD280", "#FFD17E", "#FFD07B", "#FFCF79", "#FFCE76", "#FFCD73", "#FFCD71", "#FFCC6E", "#FFCB6C", "#FFCA69", "#FFC967", "#FFC864", "#FFC761", "#FFC65F", "#FFC55C", "#FFC45A", "#FFC357", "#FFC355", "#FFC252", "#FFC14F", "#FFC04D", "#FFBF4A", "#FFBE48", "#FFBD45", "#FFBC42", "#FFBB40", "#FFBA3D", "#FFB93B", "#FFB938", "#FFB836", "#FFB733", "#FFB630", "#FFB52E", "#FFB42B", "#FFB329", "#FFB226", "#FFB124", "#FFB021", "#FFAF1E", "#FFAF1C", "#FFAE19", "#FFAD17", "#FFAC14", "#FFAB12", "#FFAA0F", "#FFA90C", "#FFA80A", "#FFA707", "#FFA605", "#FFA502", "#FFA500"]
 
@@ -41,6 +51,9 @@ Rectangle {
 			property int direction: 1
 			onTriggered: {
 				index = index + direction
+				var color = parent.colorGradient[index]
+				left.color = color
+				right.color = color
 				parent.color = parent.colorGradient[index]
 				if (index >= parent.colorGradient.length - 1)
 					direction = -1
@@ -50,6 +63,8 @@ Rectangle {
 			onRunningChanged: {
 				if (!running)
 				{
+					left.color = "white"
+					right.color = "white"
 					parent.color = "white"
 					index = 0
 					direction = 1
@@ -57,7 +72,6 @@ Rectangle {
 			}
 		}
 
-
 		Image {
 			id: debugImage
 			anchors {
@@ -65,12 +79,11 @@ Rectangle {
 				right: parent.right
 				top: parent.top
 				bottom: parent.bottom
-				bottomMargin: debugImg.pressed ? 0 : 2;
+				bottomMargin: debugImg.pressed ? -2 : 0;
 				topMargin: debugImg.pressed ? 2 : 0;
 			}
 			source: sourceImg
 			fillMode: Image.PreserveAspectFit
-			height: 30
 		}
 
 		Button {
@@ -93,12 +106,22 @@ Rectangle {
 		}
 	}
 
+	Rectangle
+	{
+		id: right
+		width: 10
+		height: parent.height
+		anchors.left: contentRectangle.right
+		anchors.leftMargin: -8
+		radius: 15
+	}
+
 	Rectangle
 	{
 		anchors.top: contentRectangle.bottom
 		anchors.topMargin: 15
 		width: parent.width
-		Text
+		Label
 		{
 			text: buttonActionContainer.text
 			anchors.centerIn: parent

mix/qml/ScenarioLoader.qml

@@ -39,11 +39,12 @@ ColumnLayout
 			anchors.verticalCenter: parent.verticalCenter
 			anchors.horizontalCenter: parent.horizontalCenter
 			color: "transparent"
-			Text
+			Label
 			{
 				anchors.verticalCenter: parent.verticalCenter
 				anchors.horizontalCenter: parent.horizontalCenter
 				id: scenarioName
+				font.bold: true
 			}
 
 			TextInput
@@ -135,7 +136,8 @@ ColumnLayout
 
 	RowLayout
 	{
-		Layout.fillWidth: true
+		Layout.preferredWidth: 560
+		anchors.horizontalCenter: parent.horizontalCenter
 		Layout.preferredHeight: 50
 		spacing: 0
 
@@ -143,128 +145,193 @@ ColumnLayout
 		{
 			Layout.preferredWidth: 100 * 5
 			Layout.preferredHeight: 50
-			spacing: 0
+			spacing: 15
 
-			ComboBox
+			Rectangle
 			{
-				id: scenarioList
-				model: projectModel.stateListModel
-				textRole: "title"
+				color: "transparent"
+				width: 251
 				height: 30
-				width: 150
-				onCurrentIndexChanged:
+				Rectangle
 				{
-					restoreScenario.restore()
+					width: 10
+					height: parent.height
+					anchors.right: scenarioList.left
+					anchors.rightMargin: -8
+					radius: 15
 				}
 
-				function load()
+				ComboBox
 				{
-					var state = projectModel.stateListModel.getState(currentIndex)
-					loaded(state)
-				}
+					id: scenarioList
+					model: projectModel.stateListModel
+					textRole: "title"
+					height: parent.height
+					width: 150
+					onCurrentIndexChanged:
+					{
+						restoreScenario.restore()
+					}
 
-				style: ComboBoxStyle {
-					background: Rectangle {
-						color: "white"
-						border.color: "#cccccc"
-						border.width: 1
-						radius: 4
-						anchors.fill: parent
+					function load()
+					{
+						var state = projectModel.stateListModel.getState(currentIndex)
+						loaded(state)
 					}
-					label: Rectangle {
-						anchors.fill: parent
-						color: "white"
-						Text {
-							id: comboLabel
-							maximumLineCount: 1
-							elide: Text.ElideRight
-							width: parent.width
-							anchors.verticalCenter: parent.verticalCenter
-							anchors.horizontalCenter: parent.horizontalCenter
-							text: {
-								if (projectModel.stateListModel.getState(scenarioList.currentIndex))
-									return projectModel.stateListModel.getState(scenarioList.currentIndex).title
-								else
-									return ""
-							}
-							Connections {
-								target: blockChainSelector
-								onLoaded: {
-									comboLabel.text = projectModel.stateListModel.getState(scenarioList.currentIndex).title
+
+					style: ComboBoxStyle {
+						background: Rectangle {
+							color: "white"
+							anchors.fill: parent
+						}
+						label: Rectangle {
+							anchors.fill: parent
+							color: "white"
+							Label {
+								id: comboLabel
+								maximumLineCount: 1
+								elide: Text.ElideRight
+								width: parent.width
+								anchors.verticalCenter: parent.verticalCenter
+								anchors.horizontalCenter: parent.horizontalCenter
+								text: {
+									if (projectModel.stateListModel.getState(scenarioList.currentIndex))
+										return projectModel.stateListModel.getState(scenarioList.currentIndex).title
+									else
+										return ""
 								}
-								onRenamed: {
-									comboLabel.text = scenario.title
+								Connections {
+									target: blockChainSelector
+									onLoaded: {
+										comboLabel.text = projectModel.stateListModel.getState(scenarioList.currentIndex).title
+									}
+									onRenamed: {
+										comboLabel.text = scenario.title
+									}
 								}
 							}
 						}
 					}
 				}
+
+				Rectangle
+				{
+					width: 1
+					height: parent.height
+					anchors.right: addScenario.left
+					color: "#ededed"
+				}
+
+				ScenarioButton {
+					id: addScenario
+					anchors.left: scenarioList.right
+					width: 100
+					height: parent.height
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/restoreicon@2x.png"
+					onClicked: {
+						var item = projectModel.stateListModel.createDefaultState();
+						item.title = qsTr("New Scenario")
+						projectModel.stateListModel.appendState(item)
+						projectModel.stateListModel.save()
+						scenarioList.currentIndex = projectModel.stateListModel.count - 1
+						scenarioNameEdit.edit()
+					}
+					text: qsTr("New..")
+					roundRight: true
+					roundLeft: false
+				}
 			}
 
-			ScenarioButton {
-				id: restoreScenario
-				width: 100
+
+			Rectangle
+			{
+				width: 100 * 3
 				height: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/restoreicon@2x.png"
-				onClicked: {
-					restore()
-				}
-				text: qsTr("Restore")
-				function restore()
+				color: "transparent"
+
+				Rectangle
 				{
-					var state = projectModel.stateListModel.reloadStateFromFromProject(scenarioList.currentIndex)
-					if (state)
+					width: 10
+					height: parent.height
+					anchors.right: restoreScenario.left
+					anchors.rightMargin: -4
+					radius: 15
+				}
+
+				ScenarioButton {
+					id: restoreScenario
+					width: 100
+					height: parent.height
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/restoreicon@2x.png"
+					onClicked: {
+						restore()
+					}
+					text: qsTr("Restore")
+					function restore()
 					{
-						editStatus.visible = false
-						restored(state)
-						loaded(state)
+						var state = projectModel.stateListModel.reloadStateFromFromProject(scenarioList.currentIndex)
+						if (state)
+						{
+							editStatus.visible = false
+							restored(state)
+							loaded(state)
+						}
 					}
+					roundRight: false
+					roundLeft: true
 				}
-			}
 
-			ScenarioButton {
-				id: saveScenario
-				text: qsTr("Save")
-				onClicked: {
-					projectModel.saveProjectFile()
-					saved(state)
+
+				Rectangle
+				{
+					width: 1
+					height: parent.height
+					anchors.right: saveScenario.left
+					color: "#ededed"
 				}
-				width: 100
-				height: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/saveicon@2x.png"
-			}
 
-			ScenarioButton
-			{
-				id: duplicateScenario
-				text: qsTr("Duplicate")
-				onClicked: {
-					projectModel.stateListModel.duplicateState(scenarioList.currentIndex)
-					duplicated(state)
+				ScenarioButton {
+					id: saveScenario
+					anchors.left: restoreScenario.right
+					text: qsTr("Save")
+					onClicked: {
+						projectModel.saveProjectFile()
+						saved(state)
+					}
+					width: 100
+					height: parent.height
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/saveicon@2x.png"
+					roundRight: false
+					roundLeft: false
 				}
-				width: 100
-				height: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/duplicateicon@2x.png"
-			}
 
-			ScenarioButton {
-				id: addScenario
-				width: 100
-				height: 30
-				buttonShortcut: ""
-				sourceImg: "qrc:/qml/img/plus.png"
-				onClicked: {
-					var item = projectModel.stateListModel.createDefaultState();
-					item.title = qsTr("New Scenario")
-					projectModel.stateListModel.appendState(item)
-					projectModel.stateListModel.save()
-					scenarioList.currentIndex = projectModel.stateListModel.count - 1
-					scenarioNameEdit.edit()
+				Rectangle
+				{
+					width: 1
+					height: parent.height
+					anchors.right: duplicateScenario.left
+					color: "#ededed"
+				}
+
+				ScenarioButton
+				{
+					id: duplicateScenario
+					anchors.left: saveScenario.right
+					text: qsTr("Duplicate")
+					onClicked: {
+						projectModel.stateListModel.duplicateState(scenarioList.currentIndex)
+						duplicated(state)
+					}
+					width: 100
+					height: parent.height
+					buttonShortcut: ""
+					sourceImg: "qrc:/qml/img/duplicateicon@2x.png"
+					roundRight: true
+					roundLeft: false
 				}
-				text: qsTr("New")
 			}
 		}
 	}