Scenario Panel: UI changes

10 years ago · 8ec447166f
5 changed files with 279 additions and 154 deletions
--- a/mix/qml/Block.qml
+++ b/mix/qml/Block.qml
@ -21,6 +21,7 @@ ColumnLayout
 	property int openedTr: 0
 	property int blockIndex
 	property variant scenario
+	property string labelColor: "#414141"

 	function calculateHeight()
 	{
@ -41,18 +42,17 @@ ColumnLayout
 		height = calculateHeight()
 	}

-
-
 	RowLayout
 	{
 		Layout.preferredHeight: trHeight
 		Layout.preferredWidth: blockWidth
 		id: rowHeader
+
 		Rectangle
 		{
-			color: "#DEDCDC"
 			Layout.preferredWidth: blockWidth
 			Layout.preferredHeight: trHeight
+			color: "#DEDCDC"
 			radius: 4
 			anchors.left: parent.left
 			anchors.leftMargin: statusWidth + 5
@ -60,12 +60,32 @@ ColumnLayout
 				anchors.verticalCenter: parent.verticalCenter
 				anchors.left: parent.left
 				anchors.leftMargin: horizontalMargin
+				color: "#adadad"
 				text:
 				{
-					if (status === "mined")
+					if (number === -2)
+						return qsTr("STARTING PARAMETERS")
+					else if (status === "mined")
 						return qsTr("BLOCK") + " " + number
 					else
-						return qsTr("BLOCK") + " pending"
+						return qsTr("PENDING TRANSACTIONS")
+				}
+			}
+
+			Label
+			{
+				text: qsTr("EDIT")
+				color:  "#1397da"
+				anchors.verticalCenter: parent.verticalCenter
+				anchors.right: parent.right
+				anchors.rightMargin: 14
+				MouseArea
+				{
+					anchors.fill: parent
+					onClicked:
+					{
+						// load edit block panel
+					}
 				}
 			}
 		}
@ -75,7 +95,6 @@ ColumnLayout
 	{
 		id: transactionRepeater
 		model: transactions
-
 		RowLayout
 		{
 			id: rowTransaction
@ -99,7 +118,7 @@ ColumnLayout
 								var p = log.param.get(i)
 								logsText.text += p.name + " = " + p.value + " - indexed:" + p.indexed + "\n"
 							}
-						else{
+						else {
 							logsText.text += "From : " + log.address + "\n"
 						}
 					}
@ -112,18 +131,18 @@ ColumnLayout
 			{
 				id: trSaveStatus
 				Layout.preferredWidth: statusWidth
-				Layout.preferredHeight: trHeight
+				Layout.preferredHeight: parent.height
 				color: "transparent"
 				anchors.top: parent.top
 				property bool saveStatus

 				Image {
+					anchors.top: parent.top
+					anchors.topMargin: -7
 					id: saveStatusImage
 					source: "qrc:/qml/img/recyclediscard@2x.png"
 					width: statusWidth
 					fillMode: Image.PreserveAspectFit
-					anchors.verticalCenter: parent.verticalCenter
-					anchors.horizontalCenter: parent.horizontalCenter
 				}

 				Component.onCompleted:
@ -177,6 +196,7 @@ ColumnLayout
 							Layout.preferredWidth: fromWidth
 							elide: Text.ElideRight
 							maximumLineCount: 1
+							color: labelColor
 							text: {
 								if (index >= 0)
 									return transactions.get(index).sender
@ -195,6 +215,7 @@ ColumnLayout
 									return ""
 							}
 							elide: Text.ElideRight
+							color: labelColor
 							maximumLineCount: 1
 							Layout.preferredWidth: toWidth
 						}
@ -217,6 +238,7 @@ ColumnLayout
 							id: returnValue
 							elide: Text.ElideRight
 							maximumLineCount: 1
+							color: labelColor
 							Layout.preferredWidth: valueWidth
 							text: {
 								if (index >= 0 && transactions.get(index).returned)
@ -237,6 +259,7 @@ ColumnLayout
 								id: logs
 								anchors.left: parent.left
 								anchors.leftMargin: 10
+								color: labelColor
 								text: {
 									if (index >= 0 && transactions.get(index).logs && transactions.get(index).logs.count)
 										return transactions.get(index).logs.count
--- a/mix/qml/BlockChain.qml
+++ b/mix/qml/BlockChain.qml
@ -20,7 +20,7 @@ ColumnLayout {
 	signal chainChanged

 	onChainChanged: {
-		reBuildNeeded.start()
+		rebuild.startBlinking()
 	}

 	onWidthChanged:
@ -55,12 +55,12 @@ ColumnLayout {
 		previousWidth = width
 	}

-	property int statusWidth: 30
+	property int statusWidth: 40
 	property int fromWidth: 100
 	property int toWidth: 100
 	property int valueWidth: 200
-	property int logsWidth: 50
-	property int debugActionWidth: 50
+	property int logsWidth: 40
+	property int debugActionWidth: 40
 	property int horizontalMargin: 10
 	property int cellSpacing: 10

@ -68,12 +68,12 @@ ColumnLayout {
 	{
 		id: header
 		spacing: 0
-		Layout.preferredHeight: 25
+		Layout.preferredHeight: 30
 		Image {
 			id: debugImage
 			source: "qrc:/qml/img/recycleicon@2x.png"
 			Layout.preferredWidth: statusWidth
-			Layout.preferredHeight: 25
+			Layout.preferredHeight: parent.height
 			fillMode: Image.PreserveAspectFit
 		}
 		Rectangle
@ -126,6 +126,19 @@ ColumnLayout {
 				id: blockChainLayout
 				width: parent.width
 				spacing: 10
+
+				Block
+				{
+					scenario: blockChainPanel.model
+					Layout.preferredWidth: blockChainScrollView.width
+					Layout.preferredHeight: 60
+					blockIndex: -1
+					transactions: []
+					status: ""
+					number: -2
+					trHeight: 60
+				}
+
 				Repeater // List of blocks
 				{
 					id: blockChainRepeater
@ -229,7 +242,7 @@ ColumnLayout {
 				{
 					if (ensureNotFuturetime.running)
 						return;
-					reBuildNeeded.stop()
+					stopBlinking()
 					var retBlocks = [];
 					var bAdded = 0;
 					for (var j = 0; j < model.blocks.length; j++)
@ -282,23 +295,8 @@ ColumnLayout {
 				Layout.preferredHeight: 30
 				buttonShortcut: ""
 				sourceImg: "qrc:/qml/img/recycleicon@2x.png"
-				Timer
-				{
-					id: reBuildNeeded
-					repeat: true
-					interval: 1000
-					running: false
-					onTriggered: {
-						if (!parent.fillColor || parent.fillColor === "white")
-							parent.fillColor = "orange"
-						else
-							parent.fillColor = "white"
-					}
-					onRunningChanged: {
-						if (!running)
-							parent.fillColor = "white"
-					}
-				}
+
+
 			}

 			ScenarioButton {
--- a/mix/qml/ScenarioButton.qml
+++ b/mix/qml/ScenarioButton.qml
@ -11,13 +11,52 @@ Rectangle {
 	property string fillColor
 	signal clicked

+	function startBlinking()
+	{
+		 blinkTimer.start()
+	}
+
+	function stopBlinking()
+	{
+		blinkTimer.stop()
+	}
+
 	Rectangle {
 		id: contentRectangle
 		anchors.fill: parent
 		border.color: "#cccccc"
 		border.width: 1
 		radius: 4
-		color: parent.fillColor ? parent.fillColor : "white"
+		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"]
+
+		Timer
+		{
+			id: blinkTimer
+			repeat: true
+			interval: 40
+			running: false
+			property int index: 0
+			property int direction: 1
+			onTriggered: {
+				index = index + direction
+				parent.color = parent.colorGradient[index]
+				if (index >= parent.colorGradient.length - 1)
+					direction = -1
+				else if (index <= 0)
+					direction = 1
+			}
+			onRunningChanged: {
+				if (!running)
+				{
+					parent.color = "white"
+					index = 0
+					direction = 1
+				}
+			}
+		}
+
+
 		Image {
 			id: debugImage
 			anchors {
--- a/mix/qml/ScenarioExecution.qml
+++ b/mix/qml/ScenarioExecution.qml
@ -28,14 +28,23 @@ Rectangle {
 		spacing: 10
 		ScenarioLoader
 		{
-			height: 70
+			height: 100
 			width: parent.width
 			id: loader
 		}

+		Connections
+		{
+			target: blockChain
+			onChainChanged:
+			{
+				loader.needSaveOrReload()
+			}
+		}
+
 		Rectangle
 		{
-			width: parent.width
+			width: parent.parent.width
 			height: 1
 			color: "#cccccc"
 		}
--- a/mix/qml/ScenarioLoader.qml
+++ b/mix/qml/ScenarioLoader.qml
@ -10,8 +10,9 @@ import "js/Debugger.js" as Debugger
 import "js/ErrorLocationFormater.js" as ErrorLocationFormater
 import "."

-RowLayout
+ColumnLayout
 {
+	id: blockChainSelector
 	signal restored(variant scenario)
 	signal saved(variant scenario)
 	signal duplicated(variant scenario)
@ -22,154 +23,209 @@ RowLayout
 		scenarioList.load()
 	}

-	id: blockChainSelector
-
-	Dialog {
-		id: newStateWin
-		modality: Qt.ApplicationModal
-		title: qsTr("New Project");
-
-		width: 320
-		height: 120
+	function needSaveOrReload()
+	{
+		editStatus.visible = true
+	}

-		visible: false
+	//anchors.margins: 10
+	//width: parent.width
+	Rectangle
+	{
+		Layout.fillWidth: true
+		Layout.preferredHeight: 30
+		color: "transparent"
+		Rectangle
+		{
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.horizontalCenter: parent.horizontalCenter
+			color: "transparent"
+			Text
+			{
+				anchors.verticalCenter: parent.verticalCenter
+				anchors.horizontalCenter: parent.horizontalCenter
+				id: scenarioName
+			}

-		contentItem: Rectangle {
-			anchors.fill: parent
-			anchors.margins: 10
-			RowLayout {
+			TextInput
+			{
+				id: scenarioNameEdit
+				visible: false
 				anchors.verticalCenter: parent.verticalCenter
-				Text {
-					text: qsTr("Name:")
+				anchors.horizontalCenter: parent.horizontalCenter
+				Keys.onEnterPressed:
+				{
+					save()
 				}

-				Rectangle
+				function edit()
 				{
-					Layout.preferredWidth: 250
-					Layout.preferredHeight: parent.height
-					border.width: 1
-					border.color: "#cccccc"
-					TextInput
-					{
-						anchors.fill: parent
-						id: stateName
-					}
+					editIconRect.anchors.left = scenarioNameEdit.right
+					editStatus.parent.anchors.left = scenarioNameEdit.right
+					scenarioNameEdit.forceActiveFocus()
+				}
+
+				function save()
+				{
+					editIconRect.anchors.left = scenarioName.right
+					editStatus.parent.anchors.left = scenarioName.right
+					scenarioName.text = scenarioNameEdit.text
+					scenarioName.visible = true
+					scenarioNameEdit.visible = false
+					projectModel.stateListModel.getState(scenarioList.currentIndex).title = scenarioName.text
+					projectModel.saveProjectFile()
+					saved(state)
 				}
 			}
-			RowLayout
+
+			Connections
 			{
-				anchors.bottom: parent.bottom
-				anchors.right: parent.right;
-				function acceptAndClose()
+				target: blockChainSelector
+				onLoaded:
 				{
-					var item = projectModel.stateListModel.createDefaultState();
-					item.title = stateName.text
-					projectModel.stateListModel.appendState(item)
-					projectModel.stateListModel.save()
-					close()
-					scenarioList.currentIndex = projectModel.stateListModel.count - 1
+					scenarioName.text = scenario.title
+					scenarioNameEdit.text = scenario.title
 				}
+			}

-				function close()
-				{
-					newStateWin.close()
-					stateName.text = ""
+			Rectangle
+			{
+				anchors.left: scenarioName.right
+				anchors.top: scenarioName.top
+				anchors.leftMargin: 2
+				Layout.preferredWidth: 20
+				Text {
+					id: editStatus
+					text: "*"
+					visible: false
 				}
+			}

-				Button {
-					id: okButton;
-					enabled: stateName.text !== ""
-					text: qsTr("OK");
-					onClicked: {
-						parent.acceptAndClose();
+			Rectangle
+			{
+				id: editIconRect
+				anchors.left: scenarioName.right
+				anchors.leftMargin: 15
+				Image {
+					source: "qrc:/qml/img/edit.png"
+					width: 10
+					fillMode: Image.PreserveAspectFit
+					anchors.verticalCenter: parent.verticalCenter
+					anchors.horizontalCenter: parent.horizontalCenter
+					MouseArea
+					{
+						anchors.fill: parent
+						onClicked:
+						{
+							scenarioName.visible = !scenarioName.visible
+							scenarioNameEdit.visible = !scenarioNameEdit.visible
+							if (!scenarioNameEdit.visible)
+								scenarioNameEdit.save()
+							else
+								scenarioNameEdit.edit()
+
+						}
 					}
 				}
-				Button {
-					text: qsTr("Cancel");
-					onClicked: parent.close();
-				}
 			}
 		}
 	}

-	ComboBox
+	RowLayout
 	{
-		id: scenarioList
-		model: projectModel.stateListModel
-		textRole: "title"
-		onCurrentIndexChanged:
-		{
-			restoreScenario.restore()
-		}
+		Layout.fillWidth: true
+		Layout.preferredHeight: 50
+		spacing: 0

-		function load()
+		Row
 		{
-			var state = projectModel.stateListModel.getState(currentIndex)
-			loaded(state)
-		}
-	}
+			Layout.preferredWidth: 100 * 5
+			Layout.preferredHeight: 50
+			spacing: 0

-	Row
-	{
-		Layout.preferredWidth: 100 * 4
-		Layout.preferredHeight: 30
-		spacing: 0
-		ScenarioButton {
-			id: restoreScenario
-			width: 100
-			height: 30
-			buttonShortcut: ""
-			sourceImg: "qrc:/qml/img/restoreicon@2x.png"
-			onClicked: {
-				restore()
-			}
-			text: qsTr("Restore")
-			function restore()
+			ComboBox
 			{
-				var state = projectModel.stateListModel.reloadStateFromFromProject(scenarioList.currentIndex)
-				restored(state)
-				loaded(state)
+				id: scenarioList
+				model: projectModel.stateListModel
+				textRole: "title"
+				height: 30
+				onCurrentIndexChanged:
+				{
+					restoreScenario.restore()
+				}
+
+				function load()
+				{
+					var state = projectModel.stateListModel.getState(currentIndex)
+					loaded(state)
+				}
+			}
+
+			ScenarioButton {
+				id: restoreScenario
+				width: 100
+				height: 30
+				buttonShortcut: ""
+				sourceImg: "qrc:/qml/img/restoreicon@2x.png"
+				onClicked: {
+					restore()
+				}
+				text: qsTr("Restore")
+				function restore()
+				{
+					var state = projectModel.stateListModel.reloadStateFromFromProject(scenarioList.currentIndex)
+					if (state)
+					{
+						editStatus.visible = false
+						restored(state)
+						loaded(state)
+					}
+				}
 			}
-		}

-		ScenarioButton {
-			id: saveScenario
-			text: qsTr("Save")
-			onClicked: {
-				projectModel.saveProjectFile()
-				saved(state)
+			ScenarioButton {
+				id: saveScenario
+				text: qsTr("Save")
+				onClicked: {
+					projectModel.saveProjectFile()
+					saved(state)
+				}
+				width: 100
+				height: 30
+				buttonShortcut: ""
+				sourceImg: "qrc:/qml/img/saveicon@2x.png"
 			}
-			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: duplicateScenario
+				text: qsTr("Duplicate")
+				onClicked: {
+					projectModel.stateListModel.duplicateState(scenarioList.currentIndex)
+					duplicated(state)
+				}
+				width: 100
+				height: 30
+				buttonShortcut: ""
+				sourceImg: "qrc:/qml/img/duplicateicon@2x.png"
 			}
-			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: {
-				newStateWin.open()
+			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()
+				}
+				text: qsTr("New")
 			}
-			text: qsTr("New")
 		}
 	}
-
 }