- Add Reusable common controls (Text, Label, ...).

- Add Generic Style.qml.
 - TransactionDialog/StateDialog ui improvement.
 - Other Small changes.

mix/ClientModel.cpp

@@ -156,7 +156,8 @@ void ClientModel::setupState(QVariantMap _state)
 	{
 		QVariantMap transaction = t.toMap();
 		QString functionId = transaction.value("functionId").toString();
-		u256 gas = (qvariant_cast<QEther*>(transaction.value("gas")))->toU256Wei();
+
+		u256 gas = boost::get<u256>(qvariant_cast<QBigInt*>(transaction.value("gas"))->internalValue());
 		u256 value = (qvariant_cast<QEther*>(transaction.value("value")))->toU256Wei();
 		u256 gasPrice = (qvariant_cast<QEther*>(transaction.value("gasPrice")))->toU256Wei();
 

mix/qml/CommonSeparator.qml

@@ -0,0 +1,9 @@
+import QtQuick 2.0
+import "."
+
+Rectangle
+{
+	height: 3
+	color: Style.generic.layout.separatorColor
+}
+

mix/qml/DefaultLabel.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.1
+
+Label {
+	text: text
+	font.family: regularFont.name
+
+	SourceSansProRegular
+	{
+		id: regularFont
+	}
+}
+
+
+
+

mix/qml/DefaultTextField.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.1
+
+TextField {
+	id: titleField
+	focus: true
+	font.family: regularFont.name
+
+	SourceSansProRegular
+	{
+		id: regularFont;
+	}
+}

mix/qml/Ether.qml

@@ -32,12 +32,8 @@ RowLayout {
 		units.currentIndex = unit;
 	}
 
-	SourceSansProRegular
-	{
-		id: regularFont
-	}
 
-	TextField
+	DefaultTextField
 	{
 		implicitWidth: 200
 		onTextChanged:
@@ -51,7 +47,10 @@ RowLayout {
 		readOnly: !edit
 		visible: edit
 		id: etherValueEdit;
-		font.family: regularFont.name
+	}
+
+	SourceSansProBold {
+		id: regularFont;
 	}
 
 	ComboBox

mix/qml/MainContent.qml

@@ -85,7 +85,7 @@ Rectangle {
 		property alias webWidth: webPreview.width
 		property alias webHeight: webPreview.height
 		property alias showProjectView: projectList.visible
-		property bool runOnProjectLoad: false
+		property bool runOnProjectLoad: true
 	}
 
 	ColumnLayout

mix/qml/NewProjectDialog.qml

@@ -6,7 +6,7 @@ import QtQuick.Dialogs 1.1
 
 Window {
 	id: newProjectWin
-	modality: Qt.WindowModal
+	modality: Qt.ApplicationModal
 
 	width: 640
 	height: 120

mix/qml/QHashTypeView.qml

@@ -19,6 +19,7 @@ Item
 			text: text
 			anchors.fill: parent
 			wrapMode: Text.WrapAnywhere
+			clip: true
 			font.family: boldFont.name
 			MouseArea {
 				id: mouseArea

mix/qml/QIntTypeView.qml

@@ -19,6 +19,7 @@ Item
 			text: text
 			anchors.fill: parent
 			font.family: boldFont.name
+			clip: true
 			MouseArea {
 				id: mouseArea
 				anchors.fill: parent

mix/qml/QStringTypeView.qml

@@ -17,6 +17,7 @@ Item
 		TextInput {
 			id: textinput
 			text: text
+			clip: true
 			anchors.fill: parent
 			wrapMode: Text.WrapAnywhere
 			font.family: boldFont.name

mix/qml/StateDialog.qml

@@ -10,11 +10,11 @@ import "."
 
 Window {
 	id: modalStateDialog
-	modality: Qt.WindowModal
+	modality: Qt.ApplicationModal
 
 	width: 450
 	height: 480
-	title: qsTr("State Edition")
+	title: qsTr("Edit State")
 	visible: false
 	color: StateDialogStyle.generic.backgroundColor
 
@@ -44,6 +44,7 @@ Window {
 		isDefault = setDefault;
 		titleField.focus = true;
 		defaultCheckBox.enabled = !isDefault;
+		forceActiveFocus();
 	}
 
 	function close() {
@@ -60,53 +61,67 @@ Window {
 		return item;
 	}
 
-	SourceSansProRegular
+	ColumnLayout {
-	{
-		id: regularFont
-	}
-
-	Rectangle {
 		anchors.fill: parent
 		anchors.margins: 10
-		color: StateDialogStyle.generic.backgroundColor
+		ColumnLayout {
-		GridLayout {
 			id: dialogContent
-			columns: 2
 			anchors.top: parent.top
-			rowSpacing: 10
-			columnSpacing: 10
 
-			Label {
+			RowLayout
-				text: qsTr("Title")
+			{
-				font.family: regularFont.name
+				Layout.fillWidth: true
-				color: "#808080"
+				DefaultLabel {
+					Layout.preferredWidth: 75
+					text: qsTr("Title")
+				}
+				DefaultTextField
+				{
+					id: titleField
+					Layout.fillWidth: true
+				}
 			}
-			TextField {
+
-				id: titleField
+			CommonSeparator
-				focus: true
+			{
 				Layout.fillWidth: true
-				font.family: regularFont.name
 			}
 
-			Label {
+			RowLayout
-				text: qsTr("Balance")
+			{
-				font.family: regularFont.name
+				Layout.fillWidth: true
-				color: "#808080"
+				DefaultLabel {
+					Layout.preferredWidth: 75
+					text: qsTr("Balance")
+				}
+				Ether {
+					id: balanceField
+					edit: true
+					displayFormattedValue: true
+					Layout.fillWidth: true
+				}
 			}
-			Ether {
+
-				id: balanceField
+			CommonSeparator
-				edit: true
+			{
-				displayFormattedValue: true
 				Layout.fillWidth: true
 			}
 
-			Label {
+			RowLayout
-				text: qsTr("Default")
+			{
-				font.family: regularFont.name
+				Layout.fillWidth: true
-				color: "#808080"
+				DefaultLabel {
+					Layout.preferredWidth: 75
+					text: qsTr("Default")
+				}
+				CheckBox {
+					id: defaultCheckBox
+					Layout.fillWidth: true
+				}
 			}
-			CheckBox {
+
-				id: defaultCheckBox
+			CommonSeparator
+			{
 				Layout.fillWidth: true
 			}
 		}
@@ -114,52 +129,51 @@ Window {
 		ColumnLayout {
 			anchors.top: dialogContent.bottom
 			anchors.topMargin: 5
-			spacing: 5
+			spacing: 0
 			RowLayout
 			{
-				Label {
+				DefaultLabel {
-					text: qsTr("Transactions")
+					text: qsTr("Transactions: ")
-					font.family: regularFont.name
-					color: "#808080"
 				}
 
-				Button {
+				Button
-					tooltip: qsTr("Create a new transaction")
+				{
-					onClicked: transactionsModel.addTransaction()
+					iconSource: "qrc:/qml/img/plus.png"
-					height: 5
+					action: newTrAction
-					width: 5
+					width: 10
-					style: ButtonStyle {
+					height: 10
-						label: Text {
+				}
-							font.family: regularFont.name
-							text: qsTr("+")
-							font.pointSize: 15
-							color: "#808080"
-							height: 5
-							width: 5
-						}
-						background: Rectangle {
-							radius: 4
-							border.width: 1
-							color: "#f7f7f7"
-							height: 5
-							implicitHeight: 5
-						}
-					}
 
+				Action {
+					id: newTrAction
+					tooltip: qsTr("Create a new transaction")
+					onTriggered: transactionsModel.addTransaction()
 				}
 			}
 
-			ListView {
+			ScrollView
-				id: trList
+			{
-				Layout.preferredWidth: 200
 				Layout.fillHeight: true
-				Layout.minimumHeight: 20 * transactionsModel.count
+				Layout.preferredWidth: 300
-				model: transactionsModel
+				Column
-				delegate: transactionRenderDelegate
+				{
-				visible: transactionsModel.count > 0
+					Layout.fillHeight: true
+					Repeater
+					{
+						id: trRepeater
+						model: transactionsModel
+						delegate: transactionRenderDelegate
+						visible: transactionsModel.count > 0
+						height: 20 * transactionsModel.count
+					}
+				}
 			}
-		}
 
+			CommonSeparator
+			{
+				Layout.fillWidth: true
+			}
+		}
 
 		RowLayout
 		{
@@ -204,53 +218,37 @@ Window {
 
 	Component {
 		id: transactionRenderDelegate
-		Item {
+		RowLayout {
-			id: wrapperItem
+			DefaultLabel {
-			height: 20
+				Layout.preferredWidth: 150
-			width: parent.width
+				text: functionId
-			RowLayout {
+			}
-				anchors.fill: parent
+
-				Text {
+			Button
-					Layout.fillWidth: true
+			{
-					Layout.fillHeight: true
+				id: deleteBtn
-					text: functionId
+				iconSource: "qrc:/qml/img/delete_sign.png"
-					font.pointSize: StateStyle.general.basicFontSize //12
+				action: deleteAction
-					verticalAlignment: Text.AlignBottom
+				width: 10
-					font.family: regularFont.name
+				height: 10
-				}
+				Action {
-				ToolButton {
+					id: deleteAction
-					text: qsTr("Edit");
+					tooltip: qsTr("Delete")
-					visible: !stdContract
+					onTriggered: transactionsModel.deleteTransaction(index)
-					Layout.fillHeight: true
-					onClicked: transactionsModel.editTransaction(index)
-					style: ButtonStyle {
-						label: Text {
-							font.family: regularFont.name
-							text: qsTr("Edit")
-							font.italic: true
-							font.pointSize: 9
-						}
-						background: Rectangle {
-							color: "transparent"
-						}
-					}
 				}
-				ToolButton {
+			}
-					visible: index >= 0 ? !transactionsModel.get(index).executeConstructor : false
+
-					text: qsTr("Delete");
+			Button
-					Layout.fillHeight: true
+			{
-					onClicked: transactionsModel.deleteTransaction(index)
+				iconSource: "qrc:/qml/img/edit.png"
-					style: ButtonStyle {
+				action: editAction
-						label: Text {
+				visible: !stdContract
-							font.family: regularFont.name
+				width: 10
-							text: qsTr("Delete")
+				height: 10
-							font.italic: true
+				Action {
-							font.pointSize: 9
+					id: editAction
-						}
+					tooltip: qsTr("Edit")
-						background: Rectangle {
+					onTriggered: transactionsModel.editTransaction(index)
-							color: "transparent"
-						}
-					}
 				}
 			}
 		}

mix/qml/StateListModel.qml

@@ -25,7 +25,7 @@ Item {
 			functionId: t.functionId,
 			url: t.url,
 			value: QEtherHelper.createEther(t.value.value, t.value.unit),
-			gas: QEtherHelper.createEther(t.gas.value, t.gas.unit),
+			gas: QEtherHelper.createBigInt(t.gas.value), //t.gas,//QEtherHelper.createEther(t.gas.value, t.gas.unit),
 			gasPrice: QEtherHelper.createEther(t.gasPrice.value, t.gasPrice.unit),
 			executeConstructor: t.executeConstructor,
 			stdContract: t.stdContract,
@@ -81,7 +81,7 @@ Item {
 			functionId: t.functionId,
 			url: t.url,
 			value: { value: t.value.value, unit: t.value.unit },
-			gas:  { value: t.gas.value, unit: t.gas.unit },
+			gas: { value: t.gas.value() },
 			gasPrice: { value: t.gasPrice.value, unit: t.gasPrice.unit },
 			executeConstructor: t.executeConstructor,
 			stdContract: t.stdContract,
@@ -157,7 +157,7 @@ Item {
 		function defaultTransactionItem() {
 			return {
 				value: QEtherHelper.createEther("100", QEther.Wei),
-				gas: QEtherHelper.createEther("125000", QEther.Wei),
+				gas: QEtherHelper.createBigInt("125000"),
 				gasPrice: QEtherHelper.createEther("10000000000000", QEther.Wei),
 				executeConstructor: false,
 				stdContract: false
@@ -165,7 +165,8 @@ Item {
 		}
 
 		function createDefaultState() {
-			var ether = QEtherHelper.createEther("100000000000000000000000000", QEther.Wei);
+			//var ether = QEtherHelper.createEther("100000000000000000000000000", QEther.Wei);
+			var ether = QEtherHelper.createEther("1000000", QEther.Ether);
 			var item = {
 				title: "",
 				balance: ether,

mix/qml/Style.qml

@@ -0,0 +1,16 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject generic: QtObject {
+		property QtObject layout : QtObject {
+			property string separatorColor: "#f7f7f7"
+		}
+	}
+}

mix/qml/TransactionDialog.qml

@@ -9,15 +9,15 @@ import "."
 
 Window {
 	id: modalTransactionDialog
-	modality: Qt.WindowModal
+	modality: Qt.ApplicationModal
 	width: 450
-	height: (paramsModel.count > 0 ? 550 : 300)
+	height: (paramsModel.count > 0 ? 500 : 300)
 	visible: false
 	color: StateDialogStyle.generic.backgroundColor
-	title: qsTr("Transaction Edition")
+	title: qsTr("Edit Transaction")
 	property int transactionIndex
 	property alias transactionParams: paramsModel;
-	property alias gas: gasField.value;
+	property alias gas: gasValueEdit.gasValue;
 	property alias gasPrice: gasPriceField.value;
 	property alias transactionValue: valueField.value;
 	property alias functionId: functionComboBox.currentText;
@@ -36,7 +36,7 @@ Window {
 		rowGasPrice.visible = !useTransactionDefaultValue;
 
 		transactionIndex = index;
-		gasField.value = item.gas;
+		gasValueEdit.gasValue = item.gas;
 		gasPriceField.value = item.gasPrice;
 		valueField.value = item.value;
 		var functionId = item.functionId;
@@ -170,32 +170,27 @@ Window {
 		return item;
 	}
 
-	SourceSansProRegular
+	ColumnLayout {
-	{
-		id: regularFont
-	}
-
-	Rectangle {
 		anchors.fill: parent
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.top: parent.top
 		anchors.margins: 10
-		color: StateDialogStyle.generic.backgroundColor
+
+		SourceSansProLight
+		{
+			id: lightFont
+		}
 
 		ColumnLayout {
 			id: dialogContent
-			spacing: 30
+			anchors.top: parent.top
+			spacing: 10
 			RowLayout
 			{
 				id: rowFunction
 				Layout.fillWidth: true
 				height: 150
-				Label {
+				DefaultLabel {
 					Layout.preferredWidth: 75
 					text: qsTr("Function")
-					font.family: regularFont.name
-					color: "#808080"
 				}
 				ComboBox {
 					id: functionComboBox
@@ -210,22 +205,24 @@ Window {
 						loadParameters();
 					}
 					style: ComboBoxStyle {
-						font: regularFont.name
+						font: lightFont.name
 					}
 				}
 			}
 
+			CommonSeparator
+			{
+				Layout.fillWidth: true
+			}
 
 			RowLayout
 			{
 				id: rowValue
 				Layout.fillWidth: true
 				height: 150
-				Label {
+				DefaultLabel {
 					Layout.preferredWidth: 75
 					text: qsTr("Value")
-					font.family: regularFont.name
-					color: "#808080"
 				}
 				Ether {
 					id: valueField
@@ -234,35 +231,44 @@ Window {
 				}
 			}
 
+			CommonSeparator
+			{
+				Layout.fillWidth: true
+			}
 
 			RowLayout
 			{
 				id: rowGas
 				Layout.fillWidth: true
 				height: 150
-				Label {
+				DefaultLabel {
 					Layout.preferredWidth: 75
 					text: qsTr("Gas")
-					font.family: regularFont.name
-					color: "#808080"
 				}
-				Ether {
+
-					id: gasField
+				DefaultTextField
-					edit: true
+				{
-					displayFormattedValue: true
+					property variant gasValue
+					onGasValueChanged: text = gasValue.value();
+					onTextChanged: gasValue.setValue(text);
+					implicitWidth: 200
+					id: gasValueEdit;
 				}
 			}
 
+			CommonSeparator
+			{
+				Layout.fillWidth: true
+			}
+
 			RowLayout
 			{
 				id: rowGasPrice
 				Layout.fillWidth: true
 				height: 150
-				Label {
+				DefaultLabel {
 					Layout.preferredWidth: 75
 					text: qsTr("Gas Price")
-					font.family: regularFont.name
-					color: "#808080"
 				}
 				Ether {
 					id: gasPriceField
@@ -271,59 +277,62 @@ Window {
 				}
 			}
 
-			Label {
+			CommonSeparator
-				text: qsTr("Parameters")
+			{
+				Layout.fillWidth: true
+			}
+
+			DefaultLabel {
+				id: paramLabel
+				text: qsTr("Parameters:")
 				Layout.preferredWidth: 75
-				font.family: regularFont.name
-				color: "#808080"
 				visible: paramsModel.count > 0
 			}
 
 			ScrollView
 			{
-				Layout.fillWidth: true
+				anchors.top: paramLabel.bottom
+				anchors.topMargin: 10
+				Layout.preferredWidth: 350
+				Layout.fillHeight: true
 				visible: paramsModel.count > 0
-				ColumnLayout
+				Column
 				{
 					id: paramRepeater
 					Layout.fillWidth: true
-					spacing: 10
+					Layout.fillHeight: true
+					spacing: 3
 					Repeater
 					{
-						anchors.fill: parent
+						height: 20 * paramsModel.count
 						model: paramsModel
 						visible: paramsModel.count > 0
 						RowLayout
 						{
 							id: row
 							Layout.fillWidth: true
-							height: 150
+							height: 20
-
+							DefaultLabel {
-							Label {
 								id: typeLabel
 								text: type
-								font.family: regularFont.name
 								Layout.preferredWidth: 50
 							}
 
-							Label {
+							DefaultLabel {
 								id: nameLabel
 								text: name
-								font.family: regularFont.name
+								Layout.preferredWidth: 80
-								Layout.preferredWidth: 50
 							}
 
-							Label {
+							DefaultLabel {
 								id: equalLabel
 								text: "="
-								font.family: regularFont.name
 								Layout.preferredWidth: 15
 							}
 
 							Loader
 							{
 								id: typeLoader
-								Layout.preferredHeight: 50
 								Layout.preferredWidth: 150
 								function getCurrent()
 								{
@@ -356,7 +365,7 @@ Window {
 									id: intViewComp
 									QIntTypeView
 									{
-										height: 50
+										height: 20
 										width: 150
 										id: intView
 										text: typeLoader.getCurrent().value
@@ -368,7 +377,7 @@ Window {
 									id: boolViewComp
 									QBoolTypeView
 									{
-										height: 50
+										height: 20
 										width: 150
 										id: boolView
 										defaultValue: "1"
@@ -385,7 +394,7 @@ Window {
 									id: stringViewComp
 									QStringTypeView
 									{
-										height: 50
+										height: 20
 										width: 150
 										id: stringView
 										text:
@@ -400,7 +409,7 @@ Window {
 									id: hashViewComp
 									QHashTypeView
 									{
-										height: 50
+										height: 20
 										width: 150
 										id: hashView
 										text: typeLoader.getCurrent().value
@@ -411,6 +420,11 @@ Window {
 					}
 				}
 			}
+
+			CommonSeparator
+			{
+				Layout.fillWidth: true
+			}
 		}
 
 		RowLayout

mix/qml/TransactionLog.qml

@@ -32,6 +32,16 @@ Item {
 		anchors.fill: parent
 		RowLayout {
 
+			Connections
+			{
+				target: projectModel
+				onProjectSaved:
+				{
+					if (codeModel.hasContract && !clientModel.running)
+						projectModel.stateListModel.debugDefaultState();
+				}
+			}
+
 			ComboBox {
 				id: statesCombo
 				model: projectModel.stateListModel

mix/qml/WebPreview.qml

@@ -72,8 +72,8 @@ Item {
 
 	Connections {
 		target: projectModel
-		onProjectSaved : reloadOnSave();
+		//onProjectSaved : reloadOnSave();
-		onDocumentSaved: reloadOnSave();
+		//onDocumentSaved: reloadOnSave();
 		onDocumentAdded: {
 			var document = projectModel.getDocument(documentId)
 			if (document.isHtml)

mix/qml/js/QEtherHelper.js

@@ -6,3 +6,12 @@ function createEther(_value, _unit, _parent)
 	ether.setUnit(_unit);
 	return ether;
 }
+
+function createBigInt(_value)
+{
+	var bigintComponent = Qt.createComponent("qrc:/qml/BigIntValue.qml");
+	var bigint = bigintComponent.createObject();
+	bigint.setValue(_value);
+	return bigint;
+}
+

mix/qml/js/TransactionHelper.js

@@ -5,7 +5,7 @@ function defaultTransaction()
 	return {
 		value: createEther("0", QEther.Wei),
 		functionId: "",
-		gas: createEther("125000", QEther.Wei),
+		gas: createBigInt("125000"),
 		gasPrice: createEther("100000", QEther.Wei),
 		executeConstructor: false,
 		parameters: {}

mix/qml/qmldir

@@ -1,3 +1,4 @@
+singleton Style 1.0 Style.qml
 singleton StateDialogStyle 1.0 StateDialogStyle.qml
 singleton ProjectFilesStyle 1.0 ProjectFilesStyle.qml
 singleton DebuggerPaneStyle 1.0 DebuggerPaneStyle.qml

mix/res.qrc

@@ -90,5 +90,12 @@
         <file>qml/CodeEditorStyle.qml</file>
         <file>qml/StatusPaneStyle.qml</file>
         <file>qml/StateStyle.qml</file>
+        <file>qml/img/plus.png</file>
+        <file>qml/img/delete_sign.png</file>
+        <file>qml/img/edit.png</file>
+        <file>qml/DefaultLabel.qml</file>
+        <file>qml/DefaultTextField.qml</file>
+        <file>qml/CommonSeparator.qml</file>
+        <file>qml/Style.qml</file>
     </qresource>
 </RCC>