StateDialog.qml / TransactionDialog.qml redesign

TODO: refactor using Style.qml

mix/qml/NewProjectDialog.qml

@@ -5,7 +5,7 @@ import QtQuick.Window 2.0
 import QtQuick.Dialogs 1.1
 
 Window {
-
+	id: newProjectWin
 	modality: Qt.WindowModal
 
 	width: 640
@@ -18,6 +18,8 @@ Window {
 	signal accepted
 
 	function open() {
+		newProjectWin.setX((Screen.width - width) / 2);
+		newProjectWin.setY((Screen.height - height) / 2);
 		visible = true;
 		titleField.focus = true;
 	}

mix/qml/QHashTypeView.qml

@@ -12,6 +12,8 @@ Item
 
 	Rectangle {
 		anchors.fill: parent
+		radius: 4
+		color: "#f7f7f7"
 		TextInput {
 			id: textinput
 			text: text

mix/qml/QIntTypeView.qml

@@ -12,6 +12,8 @@ Item
 
 	Rectangle {
 		anchors.fill: parent
+		radius: 4
+		color: "#f7f7f7"
 		TextInput {
 			id: textinput
 			text: text

mix/qml/QStringTypeView.qml

@@ -12,6 +12,8 @@ Item
 
 	Rectangle {
 		anchors.fill: parent
+		radius: 4
+		color: "#f7f7f7"
 		TextInput {
 			id: textinput
 			text: text

mix/qml/StateDialog.qml

@@ -12,9 +12,9 @@ Window {
 	id: modalStateDialog
 	modality: Qt.WindowModal
 
-	width: 640
+	width: 450
 	height: 480
-
+	title: qsTr("State Edition")
 	visible: false
 	color: StateDialogStyle.generic.backgroundColor
 
@@ -36,10 +36,16 @@ Window {
 			transactionsModel.append(item.transactions[t]);
 			stateTransactions.push(item.transactions[t]);
 		}
+
+		modalStateDialog.setX((Screen.width - width) / 2);
+		modalStateDialog.setY((Screen.height - height) / 2);
+
 		visible = true;
 		isDefault = setDefault;
 		titleField.focus = true;
 		defaultCheckBox.enabled = !isDefault;
+
+
 	}
 
 	function close() {
@@ -110,40 +116,52 @@ Window {
 
 		ColumnLayout
 		{
-			width: parent.width
 			anchors.top: dialogContent.bottom
 			anchors.topMargin: 5
 			spacing: 5
+			RowLayout
+			{
 				Label {
 					text: qsTr("Transactions")
 					font.family: regularFont.name
 					color: "#808080"
 				}
 
-			ListView {
+				Button {
-				id: trList
+					tooltip: qsTr("Create a new transaction")
-				Layout.preferredWidth: 200
-				Layout.fillHeight: true
-				Layout.minimumHeight: 20 * transactionsModel.count
-				model: transactionsModel
-				delegate: transactionRenderDelegate
-				visible: transactionsModel.count > 0
-			}
-
-			ToolButton {
 					onClicked: transactionsModel.addTransaction()
+					height: 5
+					width: 5
 					style: ButtonStyle
 					{
 					label: Text {
 						font.family: regularFont.name
 						text: qsTr("+")
-					 font.pointSize: 20
+						font.pointSize: 15
 						color: "#808080"
+						height: 5
+						width: 5
 					}
 					background: Rectangle {
-					 color: "transparent"
+						radius: 4
+						border.width: 1
+						color: "#f7f7f7"
+						height: 5
+						implicitHeight: 5
+					}
+				}
+
 			}
 		}
+
+			ListView {
+				id: trList
+				Layout.preferredWidth: 200
+				Layout.fillHeight: true
+				Layout.minimumHeight: 20 * transactionsModel.count
+				model: transactionsModel
+				delegate: transactionRenderDelegate
+				visible: transactionsModel.count > 0
 			}
 		}
 
@@ -260,5 +278,4 @@ Window {
 			}
 		}
 	}
-
 }

mix/qml/StateListModel.qml

@@ -2,6 +2,7 @@ import QtQuick 2.2
 import QtQuick.Controls.Styles 1.1
 import QtQuick.Controls 1.1
 import QtQuick.Dialogs 1.1
+import QtQuick.Window 2.2
 import QtQuick.Layouts 1.1
 import org.ethereum.qml.QEther 1.0
 import "js/QEtherHelper.js" as QEtherHelper

mix/qml/TransactionDialog.qml

@@ -10,11 +10,11 @@ import "."
 Window {
 	id: modalTransactionDialog
 	modality: Qt.WindowModal
-	width: 640
+	width: 450
-	height: 700
+	height: (paramsModel.count > 0 ? 550 : 300)
 	visible: false
 	color: StateDialogStyle.generic.backgroundColor
-
+	title: qsTr("Transaction Edition")
 	property int transactionIndex
 	property alias transactionParams: paramsModel;
 	property alias gas: gasField.value;
@@ -66,6 +66,9 @@ Window {
 			for (var p = 0; p < parameters.length; p++)
 				loadParameter(parameters[p]);
 		}
+		modalTransactionDialog.setX((Screen.width - width) / 2);
+		modalTransactionDialog.setY((Screen.height - height) / 2);
+
 		visible = true;
 		valueField.focus = true;
 	}
@@ -108,6 +111,15 @@ Window {
 		}
 	}
 
+	function param(name)
+	{
+		for (var k = 0; k < paramsModel.count; k++)
+		{
+			if (paramsModel.get(k).name === name)
+				return paramsModel.get(k);
+		}
+	}
+
 	function close()
 	{
 		visible = false;
@@ -163,13 +175,16 @@ Window {
 		id: regularFont
 	}
 
-	ColumnLayout {
+	Rectangle {
-		id: dialogContent
+		anchors.fill: parent
-		width: parent.width
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
 		anchors.margins: 10
+		color: StateDialogStyle.generic.backgroundColor
+
+	ColumnLayout {
+		id: dialogContent
 		spacing: 30
 		RowLayout
 		{
@@ -257,12 +272,6 @@ Window {
 			}
 		}
 
-			//ColumnLayout
-			//{
-				//Layout.fillHeight: true;
-				//Layout.fillWidth: true;
-				//visible: paramsModel.count > 0
-
 		Label {
 			text: qsTr("Parameters")
 			Layout.preferredWidth: 75
@@ -271,50 +280,66 @@ Window {
 			visible: paramsModel.count > 0
 		}
 
+		ScrollView
+		{
+			Layout.fillWidth: true
+			visible: paramsModel.count > 0
+			ColumnLayout
+			{
+				id: paramRepeater
+				Layout.fillWidth: true
+				spacing: 10
 				Repeater
 				{
+					anchors.fill: parent
 					model: paramsModel
 					visible: paramsModel.count > 0
-					Rectangle
+					RowLayout
 					{
-						color: "transparent"
+						id: row
 						Layout.fillWidth: true
 						height: 150
+
 						Label {
 							id: typeLabel
 							text: type
+							font.family: regularFont.name
+							Layout.preferredWidth: 50
 						}
 
 						Label {
-							anchors.left: typeLabel.right
 							id: nameLabel
 							text: name
+							font.family: regularFont.name
+							Layout.preferredWidth: 50
 						}
 
 						Label {
-							anchors.left: nameLabel.right
 							id: equalLabel
 							text: "="
+							font.family: regularFont.name
+							Layout.preferredWidth: 15
 						}
 
 						Loader
 						{
-							anchors.left: equalLabel.right
 							id: typeLoader
-							height: 50
+							Layout.preferredHeight: 50
-							width: 150
+							Layout.preferredWidth: 150
+							function getCurrent()
+							{
+								return modalTransactionDialog.param(name);
+							}
+
 							Connections {
 								target: typeLoader.item
 								onTextChanged: {
-									console.log("text changed 0 " + value);
+									typeLoader.getCurrent().value = typeLoader.item.text;
-									value = typeLoader.item.text;
-									console.log("text changed 1 " + value);
 								}
 							}
 
 							sourceComponent:
 							{
-								console.log(type);
 								if (type.indexOf("int") !== -1)
 									return intViewComp;
 								else if (type.indexOf("bool") !== -1)
@@ -335,7 +360,7 @@ Window {
 									height: 50
 									width: 150
 									id: intView
-									text: value
+									text: typeLoader.getCurrent().value
 								}
 							}
 
@@ -350,10 +375,8 @@ Window {
 									defaultValue: "1"
 									Component.onCompleted:
 									{
-										/*loaderEditor.updateValue(styleData.row, styleData.role,
+										var current = typeLoader.getCurrent().value;
-															 (paramsModel.get(styleData.row).value === "" ? defaultValue :
+										(current === "" ? text = defaultValue : text = current);
-																											paramsModel.get(styleData.row).value));
-									text = (paramsModel.get(styleData.row).value === "" ? defaultValue : paramsModel.get(styleData.row).value);*/
 									}
 								}
 							}
@@ -366,7 +389,10 @@ Window {
 									height: 50
 									width: 150
 									id: stringView
-									text: value
+									text:
+									{
+										return typeLoader.getCurrent().value
+									}
 								}
 							}
 
@@ -378,40 +404,14 @@ Window {
 									height: 50
 									width: 150
 									id: hashView
-									text: value
+									text: typeLoader.getCurrent().value
-								}
 								}
 							}
-
 						}
 					}
-			//}
-
-			/*TableView {
-				model: paramsModel
-				Layout.fillWidth: true
-				Layout.minimumHeight: 150
-				Layout.preferredHeight: 400
-				Layout.maximumHeight: 600
-				TableViewColumn {
-					role: "name"
-					title: qsTr("Name")
-					width: 120
 				}
-				TableViewColumn {
-					role: "type"
-					title: qsTr("Type")
-					width: 120
 			}
-				TableViewColumn {
-					role: "value"
-					title: qsTr("Value")
-					width: 240
 		}
-
-				rowDelegate: rowDelegate
-				itemDelegate: editableDelegate
-			}*/
 	}
 
 	RowLayout
@@ -431,8 +431,7 @@ Window {
 			onClicked: close();
 		}
 	}
-
+}
-
 	ListModel {
 		id: paramsModel
 	}
@@ -466,7 +465,6 @@ Window {
 
 				sourceComponent:
 				{
-					console.log("role " + styleData.role);
 					if (styleData.role === "value")
 					{
 						if (paramsModel.get(styleData.row) === undefined)