ui changes

mix/qml/LogsPane.qml

@@ -7,19 +7,29 @@ import "."
 
 Rectangle
 {
+	property variant currentStatus;
 	function push(_level, _type, _content)
 	{
 		_content = _content.replace(/\n/g, " ")
 		logsModel.insert(0, { "type": _type, "date": Qt.formatDateTime(new Date(), "hh:mm:ss"), "content": _content, "level": _level });
 	}
 
-	Keys.onEscapePressed:
+	onVisibleChanged:
 	{
-		parent.toggle();
+		if (visible && (logsModel.count === 0 || (logsModel.get(0).date !== currentStatus.date && logsModel.get(0).content !== currentStatus.content)))
+			logsModel.insert(0, { "type": currentStatus.type, "date": currentStatus.date, "content": currentStatus.content, "level": currentStatus.level });
+		else if (!visible)
+		{
+			for (var k = 0; k < logsModel.count; k++)
+			{
+				if (logsModel.get(k).type === "Comp") //do not keep compilation logs.
+					logsModel.remove(k);
+			}
+		}
 	}
 
 	anchors.fill: parent
-	radius: 5
+	radius: 10
 	color: "transparent"
 	id: logsPane
 	Column {
@@ -43,11 +53,13 @@ Rectangle
 				id: logsRect
 				spacing: 0
 				Repeater {
+					id: logsRepeater
 					clip: true
+					property string frontColor: "transparent"
 					model: SortFilterProxyModel {
 						id: proxyModel
 						source: logsModel
-						property var roles: ["-", "javascript", "run", "state"]
+						property var roles: ["-", "javascript", "run", "state", "comp"]
 
 						Component.onCompleted: {
 							filterType = regEx(proxyModel.roles);
@@ -80,7 +92,7 @@ Rectangle
 							return "(?:" + roles.join('|') + ")";
 						}
 
-						filterType: "(?:javascript|run|state)"
+						filterType: "(?:javascript|run|state|comp)"
 						filterContent: ""
 						filterSyntax: SortFilterProxyModel.RegExp
 						filterCaseSensitivity: Qt.CaseInsensitive
@@ -92,12 +104,17 @@ Rectangle
 						height: 30
 						color:
 						{
+							var cl;
 							if (level === "warning" || level === "error")
-								return "#fffcd5";
+								cl = "#fffcd5";
 							else
-								return index % 2 === 0 ? "transparent" : LogsPaneStyle.generic.layout.logAlternateColor;
+								cl = index % 2 === 0 ? "transparent" : LogsPaneStyle.generic.layout.logAlternateColor;
+							if (index === 0)
+								logsRepeater.frontColor = cl;
+							return cl;
 						}
 
+
 						MouseArea
 						{
 							anchors.fill: parent
@@ -148,13 +165,11 @@ Rectangle
 						Text {
 							id: logContent
 							text: content;
-							font.family: LogsPaneStyle.generic.layout.logLabelFont
+							font.family: "sans serif"
 							width: LogsPaneStyle.generic.layout.contentWidth
 							font.pointSize: Style.absoluteSize(-1)
 							anchors.verticalCenter: parent.verticalCenter
 							elide: Text.ElideRight
-
-							maximumLineCount: 10
 							anchors.left: parent.left
 							anchors.leftMargin: 190
 							color: {
@@ -230,7 +245,14 @@ Rectangle
 				anchors.verticalCenter: parent.verticalCenter
 				width: 1;
 				height: parent.height
-				color : "transparent"
+				color : "#d3d0d0"
+			}
+
+			Rectangle {
+				anchors.verticalCenter: parent.verticalCenter
+				width: 2;
+				height: parent.height
+				color : "#f2f1f2"
 			}
 
 			ToolButton {
@@ -272,7 +294,7 @@ Rectangle
 
 			Rectangle {
 				anchors.verticalCenter: parent.verticalCenter
-				width: 1;
+				width: 2;
 				height: parent.height
 				color : "#f2f1f2"
 			}
@@ -311,14 +333,14 @@ Rectangle
 				anchors.verticalCenter: parent.verticalCenter
 				width: 1;
 				height: parent.height
-				color : "#d3d0d0"
+				color: "#d3d0d0"
 			}
 
 			Rectangle {
 				anchors.verticalCenter: parent.verticalCenter
-				width: 1;
+				width: 2;
 				height: parent.height
-				color : "#f2f1f2"
+				color: "#f2f1f2"
 			}
 
 			ToolButton {
@@ -360,7 +382,7 @@ Rectangle
 
 			Rectangle {
 				anchors.verticalCenter: parent.verticalCenter
-				width: 1;
+				width: 2;
 				height: parent.height
 				color : "#f2f1f2"
 			}
@@ -541,4 +563,5 @@ Rectangle
 			}
 		}
 	}
+
 }

mix/qml/LogsPaneStyle.qml

@@ -15,7 +15,7 @@ QtObject {
 			property int headerButtonSpacing: 0
 			property int leftMargin: 10
 			property int headerButtonHeight: 30
-			property string logLabelColor: "#808080"
+			property string logLabelColor: "#4a4a4a"
 			property string logLabelFont: "sans serif"
 			property int headerInputWidth: 200
 			property int dateWidth: 70

mix/qml/StatusPane.qml

@@ -9,7 +9,7 @@ Rectangle {
 	id: statusHeader
 	objectName: "statusPane"
 	property variant webPreview
-
+	property alias currentStatus: logPane.currentStatus
 	function updateStatus(message)
 	{
 		if (!message)
@@ -17,6 +17,7 @@ Rectangle {
 			status.state = "";
 			status.text = qsTr("Compile successfully.");
 			debugImg.state = "active";
+			currentStatus = { "type": "Comp", "date": Qt.formatDateTime(new Date(), "hh:mm:ss"), "content": status.text, "level": "info" }
 		}
 		else
 		{
@@ -24,6 +25,7 @@ Rectangle {
 			var errorInfo = ErrorLocationFormater.extractErrorInfo(message, true);
 			status.text = errorInfo.errorLocation + " " + errorInfo.errorDetail;
 			debugImg.state = "";
+			currentStatus = { "type": "Comp", "date": Qt.formatDateTime(new Date(), "hh:mm:ss"), "content": status.text, "level": "error" }
 		}
 		debugRunActionIcon.enabled = codeModel.hasContract;
 	}
@@ -33,6 +35,7 @@ Rectangle {
 		status.state = "";
 		status.text = text
 		logPane.push("info", type, text);
+		currentStatus = { "type": type, "date": Qt.formatDateTime(new Date(), "hh:mm:ss"), "content": text, "level": "info" }
 	}
 
 	function warningMessage(text, type)
@@ -40,6 +43,7 @@ Rectangle {
 		status.state = "warning";
 		status.text = text
 		logPane.push("warning", type, text);
+		currentStatus = { "type": type, "date": Qt.formatDateTime(new Date(), "hh:mm:ss"), "content": text, "level": "warning" }
 	}
 
 	function errorMessage(text, type)
@@ -47,6 +51,7 @@ Rectangle {
 		status.state = "error";
 		status.text = text;
 		logPane.push("error", type, text);
+		currentStatus = { "type": type, "date": Qt.formatDateTime(new Date(), "hh:mm:ss"), "content": text, "level": "error" }
 	}
 
 	Connections {
@@ -118,7 +123,7 @@ Rectangle {
 		Text {
 			anchors.verticalCenter: parent.verticalCenter
 			anchors.horizontalCenter: parent.horizontalCenter
-			font.pointSize: StatusPaneStyle.general.statusFontSize
+			font.pointSize: Style.absoluteSize(-1)
 			height: 15
 			font.family: "sans serif"
 			objectName: "status"
@@ -196,7 +201,9 @@ Rectangle {
 			function toggle()
 			{
 				if (logsContainer.state === "opened")
+				{
 					logsContainer.state = "closed"
+				}
 				else
 				{
 					logsContainer.state = "opened";
@@ -208,11 +215,10 @@ Rectangle {
 
 			id: logsContainer
 			width: 750
-			anchors.topMargin: -30
 			anchors.top: statusContainer.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.topMargin: 4
 			visible: false
-			radius: 5
+			radius: 10
 
 			function calCoord()
 			{
@@ -221,28 +227,31 @@ Rectangle {
 					top = top.parent
 				var coordinates = logsContainer.mapToItem(top, 0, 0);
 				logsContainer.parent = top;
-				logsContainer.x = coordinates.x;
+				logsContainer.x = status.x + statusContainer.x - LogsPaneStyle.generic.layout.dateWidth - LogsPaneStyle.generic.layout.typeWidth - 30
-				logsContainer.y = coordinates.y;
 			}
 
 			LogsPane
 			{
 				id: logPane;
 			}
+
 			states: [
 				State {
 					name: "opened";
 					PropertyChanges { target: logsContainer; height: 500; visible: true }
+					PropertyChanges { target: statusContainer; width: 100; height: 25 }
 				},
 				State {
 					name: "closed";
 					PropertyChanges { target: logsContainer; height: 0; visible: false }
+					PropertyChanges { target: statusContainer; width: 600; height: 30 }
 				}
 			]
 			transitions: Transition {
 					 NumberAnimation { properties: "height"; easing.type: Easing.InOutQuad; duration: 200 }
-					 NumberAnimation { properties: "visible"; easing.type: Easing.InOutQuad; duration: 200 }
+					 NumberAnimation { target: logsContainer;  properties: "visible"; easing.type: Easing.InOutQuad; duration: 200 }
-				 }
+					 NumberAnimation { target: statusContainer;  properties: "width"; easing.type: Easing.InOutQuad; duration: 500 }
+			}
 		}
 	}