Merge pull request #1013 from yann300/ui_improvement2

Transaction/State Dialog redesign

mix/QEther.cpp

@@ -35,7 +35,7 @@ QBigInt* QEther::toWei() const
 	const char* key = units.valueToKey(m_currentUnit);
 	for (std::pair<dev::u256, std::string> rawUnit: dev::eth::units())
 	{
-		if (rawUnit.second == QString(key).toLower().toStdString())
+		if (QString::fromStdString(rawUnit.second).toLower() == QString(key).toLower())
 			return multiply(new QBigInt(rawUnit.first));
 	}
 	return new QBigInt(dev::u256(0));
@@ -46,7 +46,7 @@ void QEther::setUnit(QString const& _unit)
 	QMetaEnum units = staticMetaObject.enumerator(staticMetaObject.indexOfEnumerator("EtherUnit"));
 	for (int k = 0; k < units.keyCount(); k++)
 	{
-		if (QString(units.key(k)).toLower() == _unit)
+		if (QString(units.key(k)).toLower() == _unit.toLower())
 		{
 			m_currentUnit = static_cast<EtherUnit>(units.keysToValue(units.key(k)));
 			return;

mix/qml/Ether.qml

@@ -32,6 +32,11 @@ RowLayout {
 		units.currentIndex = unit;
 	}
 
+	SourceSansProRegular
+	{
+		id: regularFont
+	}
+
 	TextField
 	{
 		implicitWidth: 200
@@ -46,6 +51,7 @@ RowLayout {
 		readOnly: !edit
 		visible: edit
 		id: etherValueEdit;
+		font.family: regularFont.name
 	}
 
 	ComboBox
@@ -59,6 +65,7 @@ RowLayout {
 				formattedValue.text = value.format();
 			}
 		}
+
 		model: ListModel {
 			id: unitsModel
 			ListElement { text: "Uether"; }
@@ -81,10 +88,15 @@ RowLayout {
 			ListElement { text: "Kwei"; }
 			ListElement { text: "wei"; }
 		}
+		style: ComboBoxStyle {
+			font: regularFont.name
+		}
 	}
+
 	Text
 	{
 		visible: displayFormattedValue
 		id: formattedValue
+		font.family: regularFont.name
 	}
 }

mix/qml/FilesSection.qml

@@ -48,16 +48,14 @@ ColumnLayout {
 			model.remove(i);
 	}
 
-	FontLoader
+	SourceSansProRegular
 	{
 		id: fileNameFont
-		source: "qrc:/qml/fonts/SourceSansPro-Regular.ttf"
 	}
 
-	FontLoader
+	SourceSansProBold
 	{
 		id: boldFont
-		source: "qrc:/qml/fonts/SourceSansPro-Bold.ttf"
 	}
 
 	RowLayout

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/ProjectList.qml

@@ -12,10 +12,10 @@ Item {
 		anchors.fill: parent
 		id: filesCol
 		spacing: 0
-		FontLoader
+
+		SourceSansProLight
 		{
 			id: srcSansProLight
-			source: "qrc:/qml/fonts/SourceSansPro-Light.ttf"
 		}
 
 		Rectangle

mix/qml/QHashTypeView.qml

@@ -4,13 +4,22 @@ Item
 {
 	property alias text: textinput.text
 	id: editRoot
+
+	SourceSansProBold
+	{
+		id: boldFont
+	}
+
 	Rectangle {
 		anchors.fill: parent
+		radius: 4
+		color: "#f7f7f7"
 		TextInput {
 			id: textinput
 			text: text
 			anchors.fill: parent
 			wrapMode: Text.WrapAnywhere
+			font.family: boldFont.name
 			MouseArea {
 				id: mouseArea
 				anchors.fill: parent

mix/qml/QIntTypeView.qml

@@ -4,12 +4,21 @@ Item
 {
 	property alias text: textinput.text
 	id: editRoot
+
+	SourceSansProBold
+	{
+		id: boldFont
+	}
+
 	Rectangle {
 		anchors.fill: parent
+		radius: 4
+		color: "#f7f7f7"
 		TextInput {
 			id: textinput
 			text: text
 			anchors.fill: parent
+			font.family: boldFont.name
 			MouseArea {
 				id: mouseArea
 				anchors.fill: parent

mix/qml/QStringTypeView.qml

@@ -4,13 +4,22 @@ Item
 {
 	property alias text: textinput.text
 	id: editRoot
+
+	SourceSansProBold
+	{
+		id: boldFont
+	}
+
 	Rectangle {
 		anchors.fill: parent
+		radius: 4
+		color: "#f7f7f7"
 		TextInput {
 			id: textinput
 			text: text
 			anchors.fill: parent
 			wrapMode: Text.WrapAnywhere
+			font.family: boldFont.name
 			MouseArea {
 				id: mouseArea
 				anchors.fill: parent

mix/qml/SourceSansProBold.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.0
+
+FontLoader
+{
+	source: "qrc:/qml/fonts/SourceSansPro-Bold.ttf"
+}

mix/qml/SourceSansProLight.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.0
+
+FontLoader
+{
+	source: "qrc:/qml/fonts/SourceSansPro-Light.ttf"
+}
+

mix/qml/SourceSansProRegular.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.0
+
+FontLoader
+{
+	source: "qrc:/qml/fonts/SourceSansPro-Regular.ttf"
+}
+
+

mix/qml/StateDialog.qml

@@ -2,6 +2,7 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.0
+import QtQuick.Controls.Styles 1.3
 import org.ethereum.qml.QEther 1.0
 import "js/QEtherHelper.js" as QEtherHelper
 import "js/TransactionHelper.js" as TransactionHelper
@@ -11,10 +12,11 @@ Window {
 	id: modalStateDialog
 	modality: Qt.WindowModal
 
-	width: 640
+	width: 450
 	height: 480
-
+	title: qsTr("State Edition")
 	visible: false
+	color: StateDialogStyle.generic.backgroundColor
 
 	property alias stateTitle: titleField.text
 	property alias stateBalance: balanceField.value
@@ -34,6 +36,10 @@ 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;
@@ -54,25 +60,38 @@ Window {
 		return item;
 	}
 
+	SourceSansProRegular
+	{
+		id: regularFont
+	}
+
+	Rectangle {
+		anchors.fill: parent
+		anchors.margins: 10
+		color: StateDialogStyle.generic.backgroundColor
 		GridLayout {
 			id: dialogContent
 			columns: 2
-		anchors.fill: parent
+			anchors.top: parent.top
-		anchors.margins: 10
 			rowSpacing: 10
 			columnSpacing: 10
 
 			Label {
 				text: qsTr("Title")
+				font.family: regularFont.name
+				color: "#808080"
 			}
 			TextField {
 				id: titleField
 				focus: true
 				Layout.fillWidth: true
+				font.family: regularFont.name
 			}
 
 			Label {
 				text: qsTr("Balance")
+				font.family: regularFont.name
+				color: "#808080"
 			}
 			Ether {
 				id: balanceField
@@ -83,32 +102,67 @@ Window {
 
 			Label {
 				text: qsTr("Default")
+				font.family: regularFont.name
+				color: "#808080"
 			}
 			CheckBox {
 				id: defaultCheckBox
 				Layout.fillWidth: true
 			}
+		}
 
+		ColumnLayout {
+			anchors.top: dialogContent.bottom
+			anchors.topMargin: 5
+			spacing: 5
+			RowLayout
+			{
 				Label {
 					text: qsTr("Transactions")
+					font.family: regularFont.name
+					color: "#808080"
 				}
+
+				Button {
+					tooltip: qsTr("Create a new transaction")
+					onClicked: transactionsModel.addTransaction()
+					height: 5
+					width: 5
+					style: ButtonStyle {
+						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
+						}
+					}
+
+				}
+			}
+
 			ListView {
-			Layout.fillWidth: true
+				id: trList
+				Layout.preferredWidth: 200
 				Layout.fillHeight: true
+				Layout.minimumHeight: 20 * transactionsModel.count
 				model: transactionsModel
 				delegate: transactionRenderDelegate
-		}
+				visible: transactionsModel.count > 0
-
-		Label {
-
-		}
-		Button {
-			text: qsTr("Add")
-			onClicked: transactionsModel.addTransaction()
 			}
 		}
 
-	RowLayout {
+
+		RowLayout
+		{
 			anchors.bottom: parent.bottom
 			anchors.right: parent.right;
 
@@ -124,6 +178,7 @@ Window {
 				onClicked: close();
 			}
 		}
+	}
 
 	ListModel {
 		id: transactionsModel
@@ -161,26 +216,51 @@ Window {
 					text: functionId
 					font.pointSize: StateStyle.general.basicFontSize //12
 					verticalAlignment: Text.AlignBottom
+					font.family: regularFont.name
 				}
 				ToolButton {
 					text: qsTr("Edit");
 					visible: !stdContract
 					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");
 					Layout.fillHeight: true
 					onClicked: transactionsModel.deleteTransaction(index)
+					style: ButtonStyle {
+						label: Text {
+							font.family: regularFont.name
+							text: qsTr("Delete")
+							font.italic: true
+							font.pointSize: 9
+						}
+						background: Rectangle {
+							color: "transparent"
+						}
+					}
 				}
 			}
 		}
 	}
 
-	TransactionDialog {
+	TransactionDialog
+	{
 		id: transactionDialog
-		onAccepted: {
+		onAccepted:
+		{
 			var item = transactionDialog.getItem();
 
 			if (transactionDialog.transactionIndex < transactionsModel.count) {
@@ -192,5 +272,4 @@ Window {
 			}
 		}
 	}
-
 }

mix/qml/StateDialogStyle.qml

@@ -0,0 +1,17 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+	property QtObject generic: QtObject
+	{
+		property string backgroundColor: "#ededed"
+	}
+
+	property QtObject stateDialog: QtObject
+	{
+	}
+
+	property QtObject transactionDialog: QtObject
+	{
+	}
+}

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

@@ -2,16 +2,19 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.0
+import QtQuick.Controls.Styles 1.3
 import org.ethereum.qml.QEther 1.0
 import "js/TransactionHelper.js" as TransactionHelper
+import "."
 
 Window {
 	id: modalTransactionDialog
 	modality: Qt.WindowModal
-	width:640
+	width: 450
-	height:640
+	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;
@@ -63,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;
 	}
@@ -105,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;
@@ -155,12 +170,21 @@ Window {
 		return item;
 	}
 
-	ColumnLayout {
+	SourceSansProRegular
-		id: dialogContent
+	{
-		width: parent.width
+		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
+
+		ColumnLayout {
+			id: dialogContent
 			spacing: 30
 			RowLayout
 			{
@@ -170,10 +194,12 @@ Window {
 				Label {
 					Layout.preferredWidth: 75
 					text: qsTr("Function")
+					font.family: regularFont.name
+					color: "#808080"
 				}
 				ComboBox {
 					id: functionComboBox
-				Layout.fillWidth: true
+					Layout.preferredWidth: 350
 					currentIndex: -1
 					textRole: "text"
 					editable: false
@@ -183,6 +209,9 @@ Window {
 					onCurrentIndexChanged: {
 						loadParameters();
 					}
+					style: ComboBoxStyle {
+						font: regularFont.name
+					}
 				}
 			}
 
@@ -191,162 +220,135 @@ Window {
 			{
 				id: rowValue
 				Layout.fillWidth: true
+				height: 150
 				Label {
 					Layout.preferredWidth: 75
 					text: qsTr("Value")
+					font.family: regularFont.name
+					color: "#808080"
 				}
-			Rectangle
-			{
-				Layout.fillWidth: true
 				Ether {
 					id: valueField
 					edit: true
 					displayFormattedValue: true
 				}
 			}
-		}
 
 
 			RowLayout
 			{
 				id: rowGas
 				Layout.fillWidth: true
+				height: 150
 				Label {
 					Layout.preferredWidth: 75
 					text: qsTr("Gas")
+					font.family: regularFont.name
+					color: "#808080"
 				}
-			Rectangle
-			{
-				Layout.fillWidth: true
 				Ether {
 					id: gasField
 					edit: true
 					displayFormattedValue: true
 				}
 			}
-		}
 
 			RowLayout
 			{
 				id: rowGasPrice
 				Layout.fillWidth: true
+				height: 150
 				Label {
 					Layout.preferredWidth: 75
 					text: qsTr("Gas Price")
+					font.family: regularFont.name
+					color: "#808080"
 				}
-			Rectangle
-			{
-				Layout.fillWidth: true
 				Ether {
 					id: gasPriceField
 					edit: true
 					displayFormattedValue: true
 				}
 			}
-		}
 
-		RowLayout
-		{
-			Layout.fillWidth: true
 			Label {
 				text: qsTr("Parameters")
 				Layout.preferredWidth: 75
-			}
+				font.family: regularFont.name
-			TableView {
+				color: "#808080"
-				model: paramsModel
+				visible: paramsModel.count > 0
-				Layout.preferredWidth: 120 * 2 + 240
-				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
-			}
-		}
 			}
 
+			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
 						RowLayout
 						{
-		anchors.bottom: parent.bottom
+							id: row
-		anchors.right: parent.right;
+							Layout.fillWidth: true
+							height: 150
 
-		Button {
+							Label {
-			text: qsTr("OK");
+								id: typeLabel
-			onClicked: {
+								text: type
-				close();
+								font.family: regularFont.name
-				accepted();
+								Layout.preferredWidth: 50
-			}
-		}
-		Button {
-			text: qsTr("Cancel");
-			onClicked: close();
-		}
 							}
 
-
+							Label {
-	ListModel {
+								id: nameLabel
-		id: paramsModel
+								text: name
+								font.family: regularFont.name
+								Layout.preferredWidth: 50
 							}
 
-	Component {
+							Label {
-		id: rowDelegate
+								id: equalLabel
-		Item {
+								text: "="
-			height: 100
+								font.family: regularFont.name
+								Layout.preferredWidth: 15
 							}
+
+							Loader
+							{
+								id: typeLoader
+								Layout.preferredHeight: 50
+								Layout.preferredWidth: 150
+								function getCurrent()
+								{
+									return modalTransactionDialog.param(name);
 								}
 
-	Component {
-		id: editableDelegate
-		Item {
-			Loader {
-				id: loaderEditor
-				anchors.fill: parent
-				anchors.margins: 4
 								Connections {
-					target: loaderEditor.item
+									target: typeLoader.item
 									onTextChanged: {
-						if (styleData.role === "value" && styleData.row < paramsModel.count)
+										typeLoader.getCurrent().value = typeLoader.item.text;
-							loaderEditor.updateValue(styleData.row, styleData.role, loaderEditor.item.text);
 									}
 								}
 
-				function updateValue(row, role, value)
-				{
-					paramsModel.setProperty(styleData.row, styleData.role, value);
-				}
-
 								sourceComponent:
 								{
-					if (styleData.role === "value")
+									if (type.indexOf("int") !== -1)
-					{
-						if (paramsModel.get(styleData.row) === undefined)
-							return null;
-						if (paramsModel.get(styleData.row).type.indexOf("int") !== -1)
 										return intViewComp;
-						else if (paramsModel.get(styleData.row).type.indexOf("bool") !== -1)
+									else if (type.indexOf("bool") !== -1)
 										return boolViewComp;
-						else if (paramsModel.get(styleData.row).type.indexOf("string") !== -1)
+									else if (type.indexOf("string") !== -1)
 										return stringViewComp;
-						else if (paramsModel.get(styleData.row).type.indexOf("hash") !== -1)
+									else if (type.indexOf("hash") !== -1)
 										return hashViewComp;
-					}
 									else
-						return editor;
+										return null;
 								}
 
 								Component
@@ -354,8 +356,10 @@ Window {
 									id: intViewComp
 									QIntTypeView
 									{
+										height: 50
+										width: 150
 										id: intView
-						text: styleData.value
+										text: typeLoader.getCurrent().value
 									}
 								}
 
@@ -364,14 +368,14 @@ Window {
 									id: boolViewComp
 									QBoolTypeView
 									{
+										height: 50
+										width: 150
 										id: boolView
 										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);
 										}
 									}
 								}
@@ -381,38 +385,54 @@ Window {
 									id: stringViewComp
 									QStringTypeView
 									{
+										height: 50
+										width: 150
 										id: stringView
-						text: styleData.value
+										text:
+										{
+											return typeLoader.getCurrent().value
+										}
 									}
 								}
-
 
 								Component
 								{
 									id: hashViewComp
 									QHashTypeView
 									{
+										height: 50
+										width: 150
 										id: hashView
-						text: styleData.value
+										text: typeLoader.getCurrent().value
+									}
+								}
+							}
+						}
+					}
+				}
 			}
 		}
 
-				Component {
+		RowLayout
-					id: editor
+		{
-					TextInput {
+			anchors.bottom: parent.bottom
-						id: textinput
+			anchors.right: parent.right;
-						readOnly: true
+
-						color: styleData.textColor
+			Button {
-						text: styleData.value
+				text: qsTr("OK");
-						MouseArea {
+				onClicked: {
-							id: mouseArea
+					close();
-							anchors.fill: parent
+					accepted();
-							hoverEnabled: true
-							onClicked: textinput.forceActiveFocus()
 				}
 			}
+			Button {
+				text: qsTr("Cancel");
+				onClicked: close();
 			}
 		}
 	}
+
+	ListModel {
+		id: paramsModel
 	}
 }

mix/qml/qmldir

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

mix/res.qrc

@@ -81,6 +81,10 @@
         <file>qml/img/closedtriangleindicator_filesproject.png</file>
         <file>qml/img/opentriangleindicator_filesproject.png</file>
         <file>qml/img/projecticon.png</file>
+        <file>qml/SourceSansProRegular.qml</file>
+        <file>qml/SourceSansProBold.qml</file>
+        <file>qml/SourceSansProLight.qml</file>
+        <file>qml/StateDialogStyle.qml</file>
         <file>qml/ProjectFilesStyle.qml</file>
         <file>qml/DebuggerPaneStyle.qml</file>
         <file>qml/CodeEditorStyle.qml</file>