diff --git a/mix/qml/LogsPane.qml b/mix/qml/LogsPane.qml index 1d832c21a..739ebc674 100644 --- a/mix/qml/LogsPane.qml +++ b/mix/qml/LogsPane.qml @@ -15,10 +15,11 @@ Rectangle anchors.fill: parent radius: 5 - color: LogsPaneStyle.generic.layout.backgroundColor - ColumnLayout { + color: "transparent" + 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 { - id: logsTable - clip: true - Layout.fillWidth: true - Layout.preferredHeight: parent.height - rowAction.height - headerVisible : false - onDoubleClicked: + ScrollView + { + id: scrollView + height: parent.height + width: parent.width + horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff + ColumnLayout { - var log = logsModel.get(logsTable.currentRow); - if (log) - clipboard.text = (log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content); - } + id: logsRect + spacing: 0 + Repeater { + clip: true + model: SortFilterProxyModel { + id: proxyModel + source: logsModel + property var roles: ["-", "javascript", "run", "state"] - model: SortFilterProxyModel { - id: proxyModel - source: logsModel - property var roles: ["-", "javascript", "run", "state"] + Component.onCompleted: { + filterType = regEx(proxyModel.roles); + } - Component.onCompleted: { - filterType = regEx(proxyModel.roles); - } + function search(_value) + { + filterContent = _value; + } - function search(_value) - { - filterContent = _value; - } + function toogleFilter(_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) - { - var count = roles.length; - for (var i in roles) - { - if (roles[i] === _value) + filterType = regEx(proxyModel.roles); + } + + function regEx(_value) { - roles.splice(i, 1); - break; + return "(?:" + roles.join('|') + ")"; } + + 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)" - filterContent: "" - filterSyntax: SortFilterProxyModel.RegExp - filterCaseSensitivity: Qt.CaseInsensitive - } - TableViewColumn - { - 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 - } + DefaultLabel { + text: date; + font.family: LogsPaneStyle.generic.layout.logLabelFont + width: LogsPaneStyle.generic.layout.dateWidth + font.pointSize: Style.absoluteSize(-1) + anchors.left: parent.left + anchors.leftMargin: 15 + anchors.verticalCenter: parent.verticalCenter + color: { + parent.getColor(level); + } + } - rowDelegate: Item { - Rectangle { - width: logsTable.width - 4 - height: 17 - color: styleData.alternate ? "transparent" : LogsPaneStyle.generic.layout.logAlternateColor + DefaultLabel { + text: type; + font.family: LogsPaneStyle.generic.layout.logLabelFont + width: LogsPaneStyle.generic.layout.typeWidth + 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: 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: parent.height + Rectangle { - height: LogsPaneStyle.generic.layout.headerButtonHeight + color: "transparent" + height: 20 + width: 50 anchors.verticalCenter: parent.verticalCenter - action: copytoClipBoardAction - iconSource: "qrc:/qml/img/copy.png" - } - - 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; + DefaultLabel + { + color: "#808080" + font.family: LogsPaneStyle.generic.layout.logLabelFont + text: qsTr("Show:") } } 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 + } + } } } } diff --git a/mix/qml/LogsPaneStyle.qml b/mix/qml/LogsPaneStyle.qml index 1c5e2f4f5..17d30ff6c 100644 --- a/mix/qml/LogsPaneStyle.qml +++ b/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 headerButtonSpacing: 5 + property int headerHeight: 30 + 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" } } } diff --git a/mix/qml/StatusPane.qml b/mix/qml/StatusPane.qml index e097c866b..b42b13fef 100644 --- a/mix/qml/StatusPane.qml +++ b/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(/(?:)/); - if (formatted) + if (!formatted) formatted = _message.match(/(?:)/); if (formatted && formatted.length > 1) formatted = formatted[1]; @@ -207,11 +207,9 @@ Rectangle { } id: logsContainer - width: 650 - //height: 0 - anchors.topMargin: 10 + width: 750 + anchors.topMargin: -30 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 diff --git a/mix/qml/img/broom.png b/mix/qml/img/broom.png deleted file mode 100644 index 76a9a0e0c..000000000 Binary files a/mix/qml/img/broom.png and /dev/null differ diff --git a/mix/qml/img/clearicon.png b/mix/qml/img/clearicon.png new file mode 100644 index 000000000..9760ff27b Binary files /dev/null and b/mix/qml/img/clearicon.png differ diff --git a/mix/qml/img/cleariconactive.png b/mix/qml/img/cleariconactive.png new file mode 100644 index 000000000..dfd829d5d Binary files /dev/null and b/mix/qml/img/cleariconactive.png differ diff --git a/mix/qml/img/copyicon.png b/mix/qml/img/copyicon.png new file mode 100644 index 000000000..836f08b0b Binary files /dev/null and b/mix/qml/img/copyicon.png differ diff --git a/mix/qml/img/copyiconactive.png b/mix/qml/img/copyiconactive.png new file mode 100644 index 000000000..387d7f1fa Binary files /dev/null and b/mix/qml/img/copyiconactive.png differ diff --git a/mix/res.qrc b/mix/res.qrc index e509bdcc2..3a4254791 100644 --- a/mix/res.qrc +++ b/mix/res.qrc @@ -17,7 +17,6 @@ qml/fonts/SourceSerifPro-Semibold.ttf qml/img/available_updates.png qml/img/b64.png - qml/img/broom.png qml/img/bugiconactive.png qml/img/bugiconinactive.png qml/img/closedtriangleindicator.png @@ -53,5 +52,9 @@ stdc/config.sol stdc/namereg.sol stdc/std.sol + qml/img/clearicon.png + qml/img/cleariconactive.png + qml/img/copyicon.png + qml/img/copyiconactive.png