From: Jens Bache-Wiig Date: Thu, 13 Dec 2012 20:18:19 +0000 (+0100) Subject: Improved cosmetics for StockQt X-Git-Url: http://git.silmor.de/gitweb/?a=commitdiff_plain;h=8ac4e62fe50b3f4d9abc8136a98babe4d306f686;p=konrad%2Fqtdeclarative.git 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> --- 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 5629796..0000000 Binary files a/examples/quick/demos/stocqt/content/images/stock-selected.png and /dev/null differ diff --git a/examples/quick/demos/stocqt/stocqt.qrc b/examples/quick/demos/stocqt/stocqt.qrc index 2290264..8885aaa 100644 --- a/examples/quick/demos/stocqt/stocqt.qrc +++ b/examples/quick/demos/stocqt/stocqt.qrc @@ -15,7 +15,6 @@ content/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