From 8ac4e62fe50b3f4d9abc8136a98babe4d306f686 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Thu, 13 Dec 2012 21:18:19 +0100 Subject: [PATCH] Improved cosmetics for StockQt This will not get us any design awards but it looks a bit more professional than the original. Change-Id: Ib01a20ebad5888af44c174cbd493ce8d99dcf7b6 Reviewed-by: Alan Alpert (Personal) <416365416c@gmail.com> --- examples/quick/demos/stocqt/content/Button.qml | 5 ++- examples/quick/demos/stocqt/content/CheckBox.qml | 50 ++++++++++++++------- examples/quick/demos/stocqt/content/DatePicker.qml | 19 +++++--- examples/quick/demos/stocqt/content/StockChart.qml | 11 +++-- .../quick/demos/stocqt/content/StockListView.qml | 7 ++- .../quick/demos/stocqt/content/StockSettings.qml | 28 +++++++----- .../demos/stocqt/content/images/stock-selected.png | Bin 6480 -> 0 bytes examples/quick/demos/stocqt/stocqt.qrc | 1 - 8 files changed, 76 insertions(+), 45 deletions(-) delete mode 100644 examples/quick/demos/stocqt/content/images/stock-selected.png diff --git a/examples/quick/demos/stocqt/content/Button.qml b/examples/quick/demos/stocqt/content/Button.qml index 0051d81..436adf3 100644 --- a/examples/quick/demos/stocqt/content/Button.qml +++ b/examples/quick/demos/stocqt/content/Button.qml @@ -45,10 +45,11 @@ Rectangle { signal clicked property alias text: txt.text property bool buttonEnabled: false - radius: 5 width: Math.max(64, txt.width + 16) height: 32 - color: buttonEnabled ? "steelblue" : "gray" + color: buttonEnabled ? "#76644A" : "transparent" + border.color: "#76644A" + border.width: 1 MouseArea { anchors.fill: parent onClicked: button.clicked() diff --git a/examples/quick/demos/stocqt/content/CheckBox.qml b/examples/quick/demos/stocqt/content/CheckBox.qml index 1f21cc2..9c429d6 100644 --- a/examples/quick/demos/stocqt/content/CheckBox.qml +++ b/examples/quick/demos/stocqt/content/CheckBox.qml @@ -44,29 +44,45 @@ Row { id: button property alias text: txt.text property bool buttonEnabled: true - width: txt.width + 30 + width: 140 height: 25 spacing: 5 x: 5 - Text { - id: txt - text: "Close " - color: "#76644A" - font.pixelSize: 18 + MouseArea { + id: mouse + anchors.fill: parent + onClicked: { + if (buttonEnabled) + buttonEnabled = false; + else + buttonEnabled = true; + } } Rectangle { - width: 25 - height: 25 - radius: 5 - color: buttonEnabled ? "steelblue" : "gray" - MouseArea { + id: checkbox + width: 23 + height: 23 + anchors.left: parent.left + border.color: "#76644A" + border.width: 1 + antialiasing: true + radius: 2 + color: "transparent" + Rectangle { anchors.fill: parent - onClicked: { - if (buttonEnabled) - buttonEnabled = false; - else - buttonEnabled = true; - } + anchors.margins: 4 + antialiasing: true + radius: 1 + color: mouse.pressed || buttonEnabled ? "#76644A" : "transparent" + } + Text { + id: txt + anchors.left: checkbox.right + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + text: "Close " + color: "#ecc089" + font.pixelSize: 18 } } } diff --git a/examples/quick/demos/stocqt/content/DatePicker.qml b/examples/quick/demos/stocqt/content/DatePicker.qml index d045d12..490132f 100644 --- a/examples/quick/demos/stocqt/content/DatePicker.qml +++ b/examples/quick/demos/stocqt/content/DatePicker.qml @@ -44,7 +44,7 @@ Rectangle { id: root color: "transparent" width: 300 - height: 45 + height: 40 property var _monthNames: [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN","JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ]; property var date: new Date() @@ -54,14 +54,17 @@ Rectangle { year.text = date.getFullYear(); } Row { - spacing: 20 + spacing: 4 anchors.fill: parent Rectangle { height: root.height width: root.width/3 - 20 color: "#272822" - radius: 5 + border.color: "#76644A" + border.width: 1 + radius: 2 + antialiasing: true TextInput { id: month @@ -87,7 +90,10 @@ Rectangle { height: root.height width: root.width/3 - 20 color: "#272822" - radius: 5 + border.color: "#76644A" + border.width: 1 + radius: 2 + antialiasing: true TextInput { id: day @@ -105,7 +111,10 @@ Rectangle { height: root.height width: root.width/3 - 20 color: "#272822" - radius: 5 + border.color: "#76644A" + border.width: 1 + radius: 2 + antialiasing: true TextInput { id: year diff --git a/examples/quick/demos/stocqt/content/StockChart.qml b/examples/quick/demos/stocqt/content/StockChart.qml index 97f6b47..ea2d54d 100644 --- a/examples/quick/demos/stocqt/content/StockChart.qml +++ b/examples/quick/demos/stocqt/content/StockChart.qml @@ -95,6 +95,7 @@ Rectangle { anchors.top: toDate.bottom anchors.bottom: parent.bottom renderTarget: Canvas.FramebufferObject + antialiasing: true property int frames: first property int mouseX: 0 property int mouseY: 0 @@ -106,6 +107,8 @@ Rectangle { property int first: 0 property int last: 0 + property int pixelSkip: 1 + function drawBackground(ctx) { ctx.save(); ctx.fillStyle = "#272822"; @@ -142,7 +145,7 @@ Rectangle { var w = canvas.width/points.length; var end = points.length; - for (var i = 0; i < end; i++) { + for (var i = 0; i < end; i+=pixelSkip) { var x = points[i].x; var y = points[i][price]; y = canvas.height * y/highest; @@ -162,7 +165,7 @@ Rectangle { ctx.globalAlpha = 0.4; ctx.lineWidth = 2; var end = points.length; - for (var i = 0; i < end; i++) { + for (var i = 0; i < end; i+=pixelSkip) { var x = points[i].x; var open = canvas.height * points[i].open/highest - canvas.movedY; var close = canvas.height * points[i].close/highest - canvas.movedY; @@ -204,7 +207,7 @@ Rectangle { ctx.lineWidth = 1; var end = points.length; - for (var i = 0; i < end; i++) { + for (var i = 0; i < end; i+=pixelSkip) { var x = points[i].x; var y = points[i][price]; y = canvas.height * (1 - y/highest); @@ -231,7 +234,7 @@ Rectangle { var highestVolume = stockModel.highestVolume; console.log("highest price:" + highestPrice + ", highest volume:" + highestVolume) var points = []; - for (var i = 0; i <= last - first; i++) { + for (var i = 0; i <= last - first; i+=pixelSkip) { var price = stockModel.get(i + first); points.push({ x: i*canvas.width/(last-first+1), diff --git a/examples/quick/demos/stocqt/content/StockListView.qml b/examples/quick/demos/stocqt/content/StockListView.qml index f4ac6cb..2a2df10 100644 --- a/examples/quick/demos/stocqt/content/StockListView.qml +++ b/examples/quick/demos/stocqt/content/StockListView.qml @@ -82,10 +82,9 @@ Rectangle { } } - highlight: Image { - height:30 - width:parent.width - source:"images/stock-selected.png" + highlight: Rectangle { + width: parent.width + color: "#662" } } } diff --git a/examples/quick/demos/stocqt/content/StockSettings.qml b/examples/quick/demos/stocqt/content/StockSettings.qml index ec7c20e..60e6bef 100644 --- a/examples/quick/demos/stocqt/content/StockSettings.qml +++ b/examples/quick/demos/stocqt/content/StockSettings.qml @@ -87,7 +87,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 30 anchors.top: startDateText.bottom - anchors.topMargin: 15 + anchors.topMargin: 8 date: new Date(1995, 3, 25) } @@ -107,7 +107,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 30 anchors.top: endDateText.bottom - anchors.topMargin: 15 + anchors.topMargin: 8 } Text { @@ -123,7 +123,7 @@ Rectangle { Column { id: drawOptions anchors.top: drawOptionsText.bottom - anchors.topMargin: 20 + anchors.topMargin: 8 anchors.left: parent.left anchors.leftMargin: 30 spacing: 2 @@ -133,27 +133,31 @@ Rectangle { CheckBox { id: highButton - text: "High " + text: "High" buttonEnabled: false } CheckBox { id: lowButton - text: "Low " + text: "Low" buttonEnabled: false } + } + Row { + spacing: 10 CheckBox { id: openButton - text: "Open " + text: "Open" buttonEnabled: false } - } - Row { - spacing: 10 CheckBox { - text: "Close " + text: "Close" id: closeButton buttonEnabled: true } + + } + Row { + spacing: 10 CheckBox { id: volumeButton text: "Volume" @@ -181,8 +185,8 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 20 anchors.top: chartTypeText.bottom - anchors.topMargin: 20 - spacing: 10 + anchors.topMargin: 8 + spacing: -1 Button { id: yearView text: "YEAR" diff --git a/examples/quick/demos/stocqt/content/images/stock-selected.png b/examples/quick/demos/stocqt/content/images/stock-selected.png deleted file mode 100644 index 5629796b9cfe55b6e3b2cbcffb63ff3187be4685..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6480 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/images/icon-items.png content/images/icon-settings.png content/images/logo.png - content/images/stock-selected.png content/images/wheel-touch.png content/images/wheel.png -- 2.7.4