QML Styling

mix/qml/LogsPane.qml

@@ -15,9 +15,9 @@ Rectangle
 
 	anchors.fill: parent
 	radius: 5
-	color: "#f7f7f7"
-	border.color: "#808080"
-	border.width: 1
+	color: LogsPaneStyle.generic.layout.backgroundColor
+	border.color: LogsPaneStyle.generic.layout.borderColor
+	border.width: LogsPaneStyle.generic.layout.borderWidth
 	ColumnLayout {
 		z: 2
 		height: parent.height
@@ -26,14 +26,14 @@ Rectangle
 		Row
 		{
 			id: rowAction
-			Layout.preferredHeight: 35
-			height: 35
-			anchors.leftMargin: 10
+			Layout.preferredHeight: LogsPaneStyle.generic.layout.headerHeight
+			height: LogsPaneStyle.generic.layout.headerHeight
+			anchors.leftMargin: LogsPaneStyle.generic.layout.leftMargin
 			anchors.left: parent.left
-			spacing: 5
+			spacing: LogsPaneStyle.generic.layout.headerButtonSpacing
 			Button
 			{
-				height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
 				action: clearAction
 				iconSource: "qrc:/qml/img/broom.png"
@@ -50,7 +50,7 @@ Rectangle
 
 			Button
 			{
-				height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
 				action: copytoClipBoardAction
 				iconSource: "qrc:/qml/img/copy.png"
@@ -81,7 +81,7 @@ Rectangle
 			ToolButton {
 				id: javascriptButton
 				checkable: true
-				height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
 				checked: true
 				onCheckedChanged: {
@@ -93,9 +93,9 @@ Rectangle
 					label:
 						Item {
 						DefaultLabel {
-							font.family: "sans serif"
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
 							font.pointSize: Style.absoluteSize(-3)
-							color: "#5391d8"
+							color: LogsPaneStyle.generic.layout.logLabelColor
 							anchors.centerIn: parent
 							text: qsTr("JavaScript")
 						}
@@ -106,7 +106,7 @@ Rectangle
 			ToolButton {
 				id: runButton
 				checkable: true
-			height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
 				checked: true
 				onCheckedChanged: {
@@ -118,9 +118,9 @@ Rectangle
 					label:
 						Item {
 						DefaultLabel {
-						font.family: "sans serif"
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
 							font.pointSize: Style.absoluteSize(-3)
-						color: "#5391d8"
+							color: LogsPaneStyle.generic.layout.logLabelColor
 							anchors.centerIn: parent
 							text: qsTr("Run")
 						}
@@ -131,7 +131,7 @@ Rectangle
 			ToolButton {
 				id: stateButton
 				checkable: true
-			height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
 				checked: true
 				onCheckedChanged: {
@@ -143,7 +143,7 @@ Rectangle
 					label:
 						Item {
 						DefaultLabel {
-						font.family: "sans serif"
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
 							font.pointSize: Style.absoluteSize(-3)
 							color: "#5391d8"
 							anchors.centerIn: parent
@@ -156,7 +156,7 @@ Rectangle
 			ToolButton {
 				id: compilationButton
 				checkable: true
-			height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
 				checked: false
 				onCheckedChanged: {
@@ -168,7 +168,7 @@ Rectangle
 					label:
 						Item {
 						DefaultLabel {
-						font.family: "sans serif"
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
 							font.pointSize: Style.absoluteSize(-3)
 							color: "#5391d8"
 							anchors.centerIn: parent
@@ -181,10 +181,10 @@ Rectangle
 			DefaultTextField
 			{
 				id: searchBox
-			height: 30
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
 				anchors.verticalCenter: parent.verticalCenter
-			width: 200
-			font.family: "sans serif"
+				width: LogsPaneStyle.generic.layout.headerInputWidth
+				font.family: LogsPaneStyle.generic.layout.logLabelFont
 				font.pointSize: Style.absoluteSize(-3)
 				font.italic: true
 				onTextChanged: {
@@ -255,21 +255,21 @@ Rectangle
 			{
 				role: "date"
 				title: qsTr("date")
-			width: 150
+				width: LogsPaneStyle.generic.layout.dateWidth
 				delegate: itemDelegate
 			}
 			TableViewColumn
 			{
 				role: "type"
 				title: qsTr("type")
-			width: 80
+				width: LogsPaneStyle.generic.layout.typeWidth
 				delegate: itemDelegate
 			}
 			TableViewColumn
 			{
 				role: "content"
 				title: qsTr("content")
-			width: 700
+				width: LogsPaneStyle.generic.layout.contentWidth
 				delegate: itemDelegate
 			}
 
@@ -286,7 +286,7 @@ Rectangle
 			id: itemDelegate
 			DefaultLabel {
 				text: styleData.value;
-			font.family: "sans serif"
+				font.family: LogsPaneStyle.generic.layout.logLabelFont
 				font.pointSize: Style.absoluteSize(-1)
 				color: {
 					if (proxyModel.get(styleData.row).level === "error")
@@ -296,5 +296,5 @@ Rectangle
 				}
 			}
 		}
-}
+	}
 }

mix/qml/LogsPaneStyle.qml

@@ -0,0 +1,28 @@
+pragma Singleton
+import QtQuick 2.0
+
+QtObject {
+
+	function absoluteSize(rel)
+	{
+		return systemPointSize + rel;
+	}
+
+	property QtObject generic: QtObject {
+		property QtObject layout: QtObject {
+			property string backgroundColor: "#f7f7f7"
+			property string borderColor: "#5391d8"
+			property int borderWidth: 1
+			property int headerHeight: 35
+			property int headerButtonSpacing: 5
+			property int leftMargin: 10
+			property int headerButtonHeight: 30
+			property string logLabelColor: "#5391d8"
+			property string logLabelFont: "sans serif"
+			property int headerInputWidth: 200
+			property int dateWidth: 150
+			property int typeWidth: 80
+			property int contentWidth: 700
+		}
+	}
+}

mix/qml/StatusPane.qml

@@ -116,7 +116,7 @@ Rectangle {
 				name: "logsOpened"
 				PropertyChanges {
 					target: statusContainer
-					border.color: "#808080"
+					border.color: "#5391d8"
 					border.width: 1
 				}
 			},
@@ -124,7 +124,7 @@ Rectangle {
 				name: "logsClosed"
 				PropertyChanges {
 					target: statusContainer
-					border.color: "#808080"
+					border.color: "#5391d8"
 					border.width: 0
 				}
 			}
@@ -206,7 +206,7 @@ Rectangle {
 				}
 				else
 				{
-					statusContainer.state = "'logsOpened";
+					statusContainer.state = "logsOpened";
 					logsContainer.state = "opened";
 					logsContainer.focus = true;
 					forceActiveFocus();

mix/qml/qmldir

@@ -5,3 +5,4 @@ singleton DebuggerPaneStyle 1.0 DebuggerPaneStyle.qml
 singleton StateStyle 1.0 StateStyle.qml
 singleton StatusPaneStyle 1.0 StatusPaneStyle.qml
 singleton WebPreviewStyle 1.0 WebPreviewStyle.qml
+singleton LogsPaneStyle 1.0 LogsPaneStyle.qml

mix/res.qrc

@@ -114,5 +114,6 @@
         <file>qml/LogsPane.qml</file>
         <file>qml/img/copy.png</file>
         <file>qml/img/broom.png</file>
+        <file>qml/LogsPaneStyle.qml</file>
     </qresource>
 </RCC>