diff --git a/mix/qml/LogsPane.qml b/mix/qml/LogsPane.qml index 67bdd44c1..bc192f1a7 100644 --- 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" + } } } } } -} diff --git a/mix/qml/LogsPaneStyle.qml b/mix/qml/LogsPaneStyle.qml new file mode 100644 index 000000000..c47ee6338 --- /dev/null +++ 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 + } + } +} diff --git a/mix/qml/StatusPane.qml b/mix/qml/StatusPane.qml index 1ce7917a9..e9ff312a9 100644 --- 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(); diff --git a/mix/qml/qmldir b/mix/qml/qmldir index 0f3fcd88c..73c117941 100644 --- 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 diff --git a/mix/res.qrc b/mix/res.qrc index 8bda8124c..e953b3e35 100644 --- a/mix/res.qrc +++ b/mix/res.qrc @@ -114,5 +114,6 @@ qml/LogsPane.qml qml/img/copy.png qml/img/broom.png + qml/LogsPaneStyle.qml