logs window redesign

mix/qml/LogsPane.qml

@@ -15,10 +15,11 @@ Rectangle
 
 	anchors.fill: parent
 	radius: 5
-	color: LogsPaneStyle.generic.layout.backgroundColor
+	color: "transparent"
-	ColumnLayout {
+	id: logsPane
+	Column {
 		z: 2
-		height: parent.height
+		height: parent.height - rowAction.height
 		width: parent.width
 		spacing: 0
 
@@ -26,91 +27,129 @@ Rectangle
 			id: logsModel
 		}
 
-		TableView {
+		ScrollView
-			id: logsTable
+		{
-			clip: true
+			id: scrollView
-			Layout.fillWidth: true
+			height: parent.height
-			Layout.preferredHeight: parent.height - rowAction.height
+			width: parent.width
-			headerVisible : false
+			horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
-			onDoubleClicked:
+			ColumnLayout
 			{
-				var log = logsModel.get(logsTable.currentRow);
+				id: logsRect
-				if (log)
+				spacing: 0
-					clipboard.text = (log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content);
+				Repeater {
-			}
+					clip: true
+					model: SortFilterProxyModel {
+						id: proxyModel
+						source: logsModel
+						property var roles: ["-", "javascript", "run", "state"]
 
-			model: SortFilterProxyModel {
+						Component.onCompleted: {
-				id: proxyModel
+							filterType = regEx(proxyModel.roles);
-				source: logsModel
+						}
-				property var roles: ["-", "javascript", "run", "state"]
 
-				Component.onCompleted: {
+						function search(_value)
-					filterType = regEx(proxyModel.roles);
+						{
-				}
+							filterContent = _value;
+						}
 
-				function search(_value)
+						function toogleFilter(_value)
-				{
+						{
-					filterContent = _value;
+							var count = roles.length;
-				}
+							for (var i in roles)
+							{
+								if (roles[i] === _value)
+								{
+									roles.splice(i, 1);
+									break;
+								}
+							}
+							if (count === roles.length)
+								roles.push(_value);
 
-				function toogleFilter(_value)
+							filterType = regEx(proxyModel.roles);
-				{
+						}
-					var count = roles.length;
+
-					for (var i in roles)
+						function regEx(_value)
-					{
-						if (roles[i] === _value)
 						{
-							roles.splice(i, 1);
+							return "(?:" + roles.join('|') + ")";
-							break;
 						}
+
+						filterType: "(?:javascript|run|state)"
+						filterContent: ""
+						filterSyntax: SortFilterProxyModel.RegExp
+						filterCaseSensitivity: Qt.CaseInsensitive
 					}
-					if (count === roles.length)
-						roles.push(_value);
 
-					filterType = regEx(proxyModel.roles);
+					Rectangle
-				}
+					{
+						width: 750
+						height: 30
+						color:
+						{
+							if (level === "warning" || level === "error")
+								return "#fffcd5";
+							else
+								return index % 2 === 0 ? "transparent" : LogsPaneStyle.generic.layout.logAlternateColor;
+						}
 
-				function regEx(_value)
-				{
-					return "(?:" + roles.join('|') + ")";
-				}
 
-				filterType: "(?:javascript|run|state)"
+						DefaultLabel {
-				filterContent: ""
+							text: date;
-				filterSyntax: SortFilterProxyModel.RegExp
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
-				filterCaseSensitivity: Qt.CaseInsensitive
+							width: LogsPaneStyle.generic.layout.dateWidth
-			}
+							font.pointSize: Style.absoluteSize(-1)
-			TableViewColumn
+							anchors.left: parent.left
-			{
+							anchors.leftMargin: 15
-				role: "date"
+							anchors.verticalCenter: parent.verticalCenter
-				title: qsTr("date")
+							color: {
-				width: LogsPaneStyle.generic.layout.dateWidth
+								parent.getColor(level);
-				delegate: itemDelegate
+							}
-			}
+						}
-			TableViewColumn
-			{
-				role: "type"
-				title: qsTr("type")
-				width: LogsPaneStyle.generic.layout.typeWidth
-				delegate: itemDelegate
-			}
-			TableViewColumn
-			{
-				role: "content"
-				title: qsTr("content")
-				width: LogsPaneStyle.generic.layout.contentWidth
-				delegate: itemDelegate
-			}
 
-			rowDelegate: Item {
+						DefaultLabel {
-				Rectangle {
+							text: type;
-					width: logsTable.width - 4
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
-					height: 17
+							width: LogsPaneStyle.generic.layout.typeWidth
-					color: styleData.alternate ? "transparent" : LogsPaneStyle.generic.layout.logAlternateColor
+							font.pointSize: Style.absoluteSize(-1)
+							anchors.left: parent.left
+							anchors.leftMargin: 100
+							anchors.verticalCenter: parent.verticalCenter
+							color: {
+								parent.getColor(level);
+							}
+						}
+
+						DefaultLabel {
+							text: content;
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
+							width: LogsPaneStyle.generic.layout.contentWidth
+							font.pointSize: Style.absoluteSize(-1)
+							anchors.verticalCenter: parent.verticalCenter
+							anchors.left: parent.left
+							anchors.leftMargin: 190
+							color: {
+								parent.getColor(level);
+							}
+						}
+
+						function getColor()
+						{
+							if (level === "error")
+								return "red";
+							else if (level === "warning")
+								return "orange";
+							else
+								return "#808080";
+						}
+					}
 				}
 			}
+
+
 		}
 
+
 		Component {
 			id: itemDelegate
 			DefaultLabel {
@@ -128,58 +167,43 @@ Rectangle
 			}
 		}
 
+	}
+
+	Rectangle
+	{
+		gradient: Gradient {
+			GradientStop { position: 0.0; color: "#f1f1f1" }
+			GradientStop { position: 1.0; color: "#d9d7da" }
+		}
+		Layout.preferredHeight: LogsPaneStyle.generic.layout.headerHeight
+		height: LogsPaneStyle.generic.layout.headerHeight
+		width: logsPane.width
+		anchors.bottom: parent.bottom
 		Row
 		{
 			id: rowAction
-			Layout.preferredHeight: LogsPaneStyle.generic.layout.headerHeight
-			height: LogsPaneStyle.generic.layout.headerHeight
 			anchors.leftMargin: LogsPaneStyle.generic.layout.leftMargin
 			anchors.left: parent.left
 			spacing: LogsPaneStyle.generic.layout.headerButtonSpacing
-			Button
+			height: parent.height
-			{
+			Rectangle
-				height: LogsPaneStyle.generic.layout.headerButtonHeight
-				anchors.verticalCenter: parent.verticalCenter
-				action: clearAction
-				iconSource: "qrc:/qml/img/broom.png"
-			}
-
-			Action {
-				id: clearAction
-				enabled: logsModel.count > 0
-				tooltip: qsTr("Clear")
-				onTriggered: {
-					logsModel.clear()
-				}
-			}
-
-			Button
 			{
-				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				color: "transparent"
+				height: 20
+				width: 50
 				anchors.verticalCenter: parent.verticalCenter
-				action: copytoClipBoardAction
+				DefaultLabel
-				iconSource: "qrc:/qml/img/copy.png"
+				{
-			}
+					color: "#808080"
-
+					font.family: LogsPaneStyle.generic.layout.logLabelFont
-			Action {
+					text: qsTr("Show:")
-				id: copytoClipBoardAction
-				enabled: logsModel.count > 0
-				tooltip: qsTr("Copy to Clipboard")
-				onTriggered: {
-					var content = "";
-					for (var k = 0; k < logsModel.count; k++)
-					{
-						var log = logsModel.get(k);
-						content += log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content + "\n";
-					}
-					clipboard.text = content;
 				}
 			}
 
 			Rectangle {
 				anchors.verticalCenter: parent.verticalCenter
 				width: 1;
-				height: parent.height - 10
+				height: parent.height
 				color : "#808080"
 			}
 
@@ -187,6 +211,7 @@ Rectangle
 				id: javascriptButton
 				checkable: true
 				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				width: 20
 				anchors.verticalCenter: parent.verticalCenter
 				checked: true
 				onCheckedChanged: {
@@ -202,16 +227,28 @@ Rectangle
 							font.pointSize: Style.absoluteSize(-3)
 							color: LogsPaneStyle.generic.layout.logLabelColor
 							anchors.centerIn: parent
-							text: qsTr("JavaScript")
+							text: qsTr("JS")
 						}
 					}
+					background:
+						Rectangle {
+						color: javascriptButton.checked ? "#cfcfcf" : "transparent"
+					}
 				}
 			}
 
+			Rectangle {
+				anchors.verticalCenter: parent.verticalCenter
+				width: 1;
+				height: parent.height
+				color : "#808080"
+			}
+
 			ToolButton {
 				id: runButton
 				checkable: true
 				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				width: 30
 				anchors.verticalCenter: parent.verticalCenter
 				checked: true
 				onCheckedChanged: {
@@ -230,14 +267,26 @@ Rectangle
 							text: qsTr("Run")
 						}
 					}
+					background:
+						Rectangle {
+						color: runButton.checked ? "#cfcfcf" : "transparent"
+					}
 				}
 			}
 
+			Rectangle {
+				anchors.verticalCenter: parent.verticalCenter
+				width: 1;
+				height: parent.height
+				color : "#808080"
+			}
+
 			ToolButton {
 				id: stateButton
 				checkable: true
 				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
+				width: 35
 				checked: true
 				onCheckedChanged: {
 					proxyModel.toogleFilter("state")
@@ -250,26 +299,144 @@ Rectangle
 						DefaultLabel {
 							font.family: LogsPaneStyle.generic.layout.logLabelFont
 							font.pointSize: Style.absoluteSize(-3)
-							color: "#5391d8"
+							color: LogsPaneStyle.generic.layout.logLabelColor
 							anchors.centerIn: parent
 							text: qsTr("State")
 						}
 					}
+					background:
+						Rectangle {
+						color: stateButton.checked ? "#cfcfcf" : "transparent"
+					}
+				}
+			}
+
+			Rectangle {
+				anchors.verticalCenter: parent.verticalCenter
+				width: 1;
+				height: parent.height
+				color : "#808080"
+			}
+		}
+
+		Row
+		{
+			height: parent.height
+			anchors.right: parent.right
+			anchors.rightMargin: 4
+			spacing: 4
+			Button
+			{
+				id: clearButton
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				action: hideAction
+				iconSource: "qrc:/qml/img/cleariconactive.png"
+				style:
+					ButtonStyle {
+					background:
+						Rectangle {
+						height: LogsPaneStyle.generic.layout.headerButtonHeight
+						implicitHeight: LogsPaneStyle.generic.layout.headerButtonHeight
+						color: "transparent"
+					}
+				}
+			}
+
+			Image {
+				id: clearImage
+				source: "qrc:/qml/img/cleariconactive.png"
+				anchors.centerIn: parent
+				fillMode: Image.PreserveAspectFit
+				width: 30
+				height: 30
+			}
+
+			Button
+			{
+				id: exitButton
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				action: exitAction
+				iconSource: "qrc:/qml/img/exit.png"
+				style:
+					ButtonStyle {
+					background:
+						Rectangle {
+						height: LogsPaneStyle.generic.layout.headerButtonHeight
+						color: "transparent"
+					}
+				}
+			}
+
+			Button
+			{
+				id: copyButton
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				action: copytoClipBoardAction
+				iconSource: "qrc:/qml/img/copyiconactive.png"
+				style:
+					ButtonStyle {
+					background:
+						Rectangle {
+						height: LogsPaneStyle.generic.layout.headerButtonHeight
+						color: "transparent"
+					}
+				}
+			}
+
+			Action {
+				id: clearAction
+				tooltip: qsTr("Hide")
+				onTriggered: {
+					logsPane.parent.toggle();
+				}
+			}
+
+			Action {
+				id: hideAction
+				enabled: logsModel.count > 0
+				tooltip: qsTr("Clear")
+				onTriggered: {
+					logsModel.clear()
+				}
+			}
+
+			Action {
+				id: copytoClipBoardAction
+				enabled: logsModel.count > 0
+				tooltip: qsTr("Copy to Clipboard")
+				onTriggered: {
+					var content = "";
+					for (var k = 0; k < logsModel.count; k++)
+					{
+						var log = logsModel.get(k);
+						content += log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content + "\n";
+					}
+					clipboard.text = content;
 				}
 			}
 
 			DefaultTextField
 			{
 				id: searchBox
-				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				height: LogsPaneStyle.generic.layout.headerButtonHeight - 5
 				anchors.verticalCenter: parent.verticalCenter
-				width: LogsPaneStyle.generic.layout.headerInputWidth
+				width: LogsPaneStyle.generic.layout.headerInputWidth - 40
 				font.family: LogsPaneStyle.generic.layout.logLabelFont
 				font.pointSize: Style.absoluteSize(-3)
 				font.italic: true
+				text: qsTr("Search")
 				onTextChanged: {
 					proxyModel.search(text);
 				}
+				style:
+					TextFieldStyle {
+					background: Rectangle {
+						radius: 10
+					}
+				}
 			}
 		}
 	}

mix/qml/LogsPaneStyle.qml

@@ -11,17 +11,17 @@ QtObject {
 	property QtObject generic: QtObject {
 		property QtObject layout: QtObject {
 			property string backgroundColor: "#f7f7f7"
-			property int headerHeight: 35
+			property int headerHeight: 30
-			property int headerButtonSpacing: 5
+			property int headerButtonSpacing: 1
 			property int leftMargin: 10
 			property int headerButtonHeight: 30
-			property string logLabelColor: "#5391d8"
+			property string logLabelColor: "#808080"
 			property string logLabelFont: "sans serif"
 			property int headerInputWidth: 200
 			property int dateWidth: 70
-			property int typeWidth: 70
+			property int typeWidth: 90
 			property int contentWidth: 250
-			property string logAlternateColor: "#f0f0f0"
+			property string logAlternateColor: "#f6f5f6"
 		}
 	}
 }

mix/qml/StatusPane.qml

@@ -45,7 +45,7 @@ Rectangle {
 	function errorMessage(text, type)
 	{
 		status.state = "error";
-		status.text = text
+		status.text = text;
 		logPane.push("error", type, text);
 	}
 
@@ -76,7 +76,7 @@ Rectangle {
 		function format(_message)
 		{
 			var formatted = _message.match(/(?:<dev::eth::)(.+)(?:>)/);
-			if (formatted)
+			if (!formatted)
 				formatted = _message.match(/(?:<dev::)(.+)(?:>)/);
 			if (formatted && formatted.length > 1)
 				formatted = formatted[1];
@@ -207,11 +207,9 @@ Rectangle {
 			}
 
 			id: logsContainer
-			width: 650
+			width: 750
-			//height: 0
+			anchors.topMargin: -30
-			anchors.topMargin: 10
 			anchors.top: statusContainer.bottom
-			//anchors.left: statusContainer.left
 			anchors.horizontalCenter: parent.horizontalCenter
 			visible: false
 			radius: 5
@@ -227,9 +225,8 @@ Rectangle {
 					top = top.parent
 				var coordinates = logsContainer.mapToItem(top, 0, 0);
 				logsContainer.parent = top;
-				//logsContainer.x = coordinates.x + 150;
+				logsContainer.x = coordinates.x + 150;
 				logsContainer.y = coordinates.y;
-				console.log(logsContainer.x);
 			}
 
 			LogsPane

mix/res.qrc

@@ -17,7 +17,6 @@
         <file>qml/fonts/SourceSerifPro-Semibold.ttf</file>
         <file>qml/img/available_updates.png</file>
         <file>qml/img/b64.png</file>
-        <file>qml/img/broom.png</file>
         <file>qml/img/bugiconactive.png</file>
         <file>qml/img/bugiconinactive.png</file>
         <file>qml/img/closedtriangleindicator.png</file>
@@ -53,5 +52,9 @@
         <file>stdc/config.sol</file>
         <file>stdc/namereg.sol</file>
         <file>stdc/std.sol</file>
+        <file>qml/img/clearicon.png</file>
+        <file>qml/img/cleariconactive.png</file>
+        <file>qml/img/copyicon.png</file>
+        <file>qml/img/copyiconactive.png</file>
     </qresource>
 </RCC>