QML Styling

10 years ago · 68cd82a561
5 changed files with 206 additions and 176 deletions
--- a/mix/qml/LogsPane.qml
+++ b/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: {
@ -89,212 +89,212 @@ Rectangle
 				}
 				tooltip: qsTr("JavaScript")
 				style:
-				ButtonStyle {
+					ButtonStyle {
 					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")
 						}
 					}
+				}
 			}
-		}

-		ToolButton {
-			id: runButton
-			checkable: true
-			height: 30
-			anchors.verticalCenter: parent.verticalCenter
-			checked: true
-			onCheckedChanged: {
-				proxyModel.toogleFilter("run")
-			}
-			tooltip: qsTr("Run")
-			style:
-			ButtonStyle {
-				label:
-					Item {
-					DefaultLabel {
-						font.family: "sans serif"
-						font.pointSize: Style.absoluteSize(-3)
-						color: "#5391d8"
-						anchors.centerIn: parent
-						text: qsTr("Run")
+			ToolButton {
+				id: runButton
+				checkable: true
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				checked: true
+				onCheckedChanged: {
+					proxyModel.toogleFilter("run")
+				}
+				tooltip: qsTr("Run")
+				style:
+					ButtonStyle {
+					label:
+						Item {
+						DefaultLabel {
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
+							font.pointSize: Style.absoluteSize(-3)
+							color: LogsPaneStyle.generic.layout.logLabelColor
+							anchors.centerIn: parent
+							text: qsTr("Run")
+						}
 					}
 				}
 			}
-		}

-		ToolButton {
-			id: stateButton
-			checkable: true
-			height: 30
-			anchors.verticalCenter: parent.verticalCenter
-			checked: true
-			onCheckedChanged: {
-				proxyModel.toogleFilter("state")
-			}
-			tooltip: qsTr("State")
-			style:
-			ButtonStyle {
-				label:
-					Item {
-					DefaultLabel {
-						font.family: "sans serif"
-						font.pointSize: Style.absoluteSize(-3)
-						color: "#5391d8"
-						anchors.centerIn: parent
-						text: qsTr("State")
+			ToolButton {
+				id: stateButton
+				checkable: true
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				checked: true
+				onCheckedChanged: {
+					proxyModel.toogleFilter("state")
+				}
+				tooltip: qsTr("State")
+				style:
+					ButtonStyle {
+					label:
+						Item {
+						DefaultLabel {
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
+							font.pointSize: Style.absoluteSize(-3)
+							color: "#5391d8"
+							anchors.centerIn: parent
+							text: qsTr("State")
+						}
 					}
 				}
 			}
-		}

-		ToolButton {
-			id: compilationButton
-			checkable: true
-			height: 30
-			anchors.verticalCenter: parent.verticalCenter
-			checked: false
-			onCheckedChanged: {
-				proxyModel.toogleFilter("compilation")
-			}
-			tooltip: qsTr("Compilation")
-			style:
-			ButtonStyle {
-				label:
-					Item {
-					DefaultLabel {
-						font.family: "sans serif"
-						font.pointSize: Style.absoluteSize(-3)
-						color: "#5391d8"
-						anchors.centerIn: parent
-						text: qsTr("Compilation")
+			ToolButton {
+				id: compilationButton
+				checkable: true
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				checked: false
+				onCheckedChanged: {
+					proxyModel.toogleFilter("compilation")
+				}
+				tooltip: qsTr("Compilation")
+				style:
+					ButtonStyle {
+					label:
+						Item {
+						DefaultLabel {
+							font.family: LogsPaneStyle.generic.layout.logLabelFont
+							font.pointSize: Style.absoluteSize(-3)
+							color: "#5391d8"
+							anchors.centerIn: parent
+							text: qsTr("Compilation")
+						}
 					}
 				}
 			}
-		}

-		DefaultTextField
-		{
-			id: searchBox
-			height: 30
-			anchors.verticalCenter: parent.verticalCenter
-			width: 200
-			font.family: "sans serif"
-			font.pointSize: Style.absoluteSize(-3)
-			font.italic: true
-			onTextChanged: {
-				proxyModel.search(text);
+			DefaultTextField
+			{
+				id: searchBox
+				height: LogsPaneStyle.generic.layout.headerButtonHeight
+				anchors.verticalCenter: parent.verticalCenter
+				width: LogsPaneStyle.generic.layout.headerInputWidth
+				font.family: LogsPaneStyle.generic.layout.logLabelFont
+				font.pointSize: Style.absoluteSize(-3)
+				font.italic: true
+				onTextChanged: {
+					proxyModel.search(text);
+				}
 			}
 		}
-	}

-	ListModel {
-		id: logsModel
-	}
-
-	TableView {
-		id: logsTable
-		clip: true
-		Layout.fillWidth: true
-		Layout.preferredHeight: parent.height - rowAction.height
-		headerVisible : false
-		onDoubleClicked:
-		{
-			var log = logsModel.get((logsTable.currentRow));
-			if (log)
-				appContext.toClipboard(log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content);
+		ListModel {
+			id: logsModel
 		}

-		model: SortFilterProxyModel {
-			id: proxyModel
-			source: logsModel
-			property var roles: ["-", "javascript", "run", "state"]
-
-			Component.onCompleted: {
-				filterType = regEx(proxyModel.roles);
-			}
-
-			function search(_value)
+		TableView {
+			id: logsTable
+			clip: true
+			Layout.fillWidth: true
+			Layout.preferredHeight: parent.height - rowAction.height
+			headerVisible : false
+			onDoubleClicked:
 			{
-				filterContent = _value;
+				var log = logsModel.get((logsTable.currentRow));
+				if (log)
+					appContext.toClipboard(log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content);
 			}

-			function toogleFilter(_value)
-			{
-				var count = roles.length;
-				for (var i in roles)
+			model: SortFilterProxyModel {
+				id: proxyModel
+				source: logsModel
+				property var roles: ["-", "javascript", "run", "state"]
+
+				Component.onCompleted: {
+					filterType = regEx(proxyModel.roles);
+				}
+
+				function search(_value)
 				{
-					if (roles[i] === _value)
+					filterContent = _value;
+				}
+
+				function toogleFilter(_value)
+				{
+					var count = roles.length;
+					for (var i in roles)
 					{
-						roles.splice(i, 1);
-						break;
+						if (roles[i] === _value)
+						{
+							roles.splice(i, 1);
+							break;
+						}
 					}
+					if (count === roles.length)
+						roles.push(_value);
+
+					filterType = regEx(proxyModel.roles);
 				}
-				if (count === roles.length)
-					roles.push(_value);

-				filterType = regEx(proxyModel.roles);
-			}
+				function regEx(_value)
+				{
+					return "(?:" + roles.join('|') + ")";
+				}

-			function regEx(_value)
+				filterType: "(?:javascript|run|state)"
+				filterContent: ""
+				filterSyntax: SortFilterProxyModel.RegExp
+				filterCaseSensitivity: Qt.CaseInsensitive
+			}
+			TableViewColumn
 			{
-				return "(?:" + roles.join('|') + ")";
+				role: "date"
+				title: qsTr("date")
+				width: LogsPaneStyle.generic.layout.dateWidth
+				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
 			}

-			filterType: "(?:javascript|run|state)"
-			filterContent: ""
-			filterSyntax: SortFilterProxyModel.RegExp
-			filterCaseSensitivity: Qt.CaseInsensitive
-		}
-		TableViewColumn
-		{
-			role: "date"
-			title: qsTr("date")
-			width: 150
-			delegate: itemDelegate
-		}
-		TableViewColumn
-		{
-			role: "type"
-			title: qsTr("type")
-			width: 80
-			delegate: itemDelegate
-		}
-		TableViewColumn
-		{
-			role: "content"
-			title: qsTr("content")
-			width: 700
-			delegate: itemDelegate
-		}
-
-		rowDelegate: Item {
-			Rectangle {
-				width: logsTable.width - 4
-				height: 17
-				color: styleData.alternate ? "transparent" : "#f0f0f0"
+			rowDelegate: Item {
+				Rectangle {
+					width: logsTable.width - 4
+					height: 17
+					color: styleData.alternate ? "transparent" : "#f0f0f0"
+				}
 			}
 		}
-	}

-	Component {
-		id: itemDelegate
-		DefaultLabel {
-			text: styleData.value;
-			font.family: "sans serif"
-			font.pointSize: Style.absoluteSize(-1)
-			color: {
-				if (proxyModel.get(styleData.row).level === "error")
-					return "red"
-				else
-					return "#808080"
+		Component {
+			id: itemDelegate
+			DefaultLabel {
+				text: styleData.value;
+				font.family: LogsPaneStyle.generic.layout.logLabelFont
+				font.pointSize: Style.absoluteSize(-1)
+				color: {
+					if (proxyModel.get(styleData.row).level === "error")
+						return "red"
+					else
+						return "#808080"
+				}
 			}
 		}
 	}
 }
-}
--- a/mix/qml/LogsPaneStyle.qml
+++ b/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
+		}
+	}
+}
--- a/mix/qml/StatusPane.qml
+++ b/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();
--- a/mix/qml/qmldir
+++ b/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
--- a/mix/res.qrc
+++ b/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>