From 59014b31d3a715ae8975d4f07e78ca1e34104767 Mon Sep 17 00:00:00 2001 From: Caroline Chao Date: Tue, 29 Apr 2014 14:02:34 +0200 Subject: Refactor the zoom page Make the design more flexible to sliderHandleWidth, sliderHandleHeight and sliderGapWidth changes. Change-Id: Idd5dd07c1951fe70320f8434e0cfe8f211518277 Reviewed-by: Andrew Knight --- qml/pages/OneDaySliderItem.qml | 127 ++++++++++++++++++++++------------------- qml/pages/OneDayZoomItem.qml | 2 + qml/touch/TouchSlider.qml | 2 +- 3 files changed, 72 insertions(+), 59 deletions(-) diff --git a/qml/pages/OneDaySliderItem.qml b/qml/pages/OneDaySliderItem.qml index ec4a2e3..8aae832 100644 --- a/qml/pages/OneDaySliderItem.qml +++ b/qml/pages/OneDaySliderItem.qml @@ -54,17 +54,15 @@ GridLayout { Layout.fillHeight: true Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false Layout.minimumHeight: 10 + Layout.minimumWidth: 0 } Canvas { id: canvasSlider - property int sliderItemWidth : (model.periodCount() + 1) * canvasSlider.drawingOffset + ApplicationInfo.sliderHandleWidth - Layout.alignment: Qt.AlignHCenter - - property int drawingOffset: ApplicationInfo.sliderGapWidth + property int sliderItemWidth : (model.periodCount() + 1) * ApplicationInfo.sliderGapWidth property var rangeTemp: Utils.getMaxMinTemp(model) implicitWidth: sliderItemWidth - implicitHeight: 3.8*drawingOffset + implicitHeight: rowTemp.implicitHeight + column.implicitHeight property int marginsTemperaturesDrawing: calibrate(rangeTemp[1]) + 10 * ApplicationInfo.ratio property real circleIconWidth: 20 * ApplicationInfo.ratio @@ -79,94 +77,107 @@ GridLayout { onPaint: { var ctx = getContext('2d') var count = model.periodCount() + if (count <= 0) + return ctx.save() ctx.beginPath(); ctx.fillStyle = ApplicationInfo.colors.doubleDarkGray ctx.lineWidth = 1 - ctx.translate(canvasSlider.drawingOffset + ApplicationInfo.sliderHandleWidth/2, marginsTemperaturesDrawing + weatherIconWidth + 15 * ApplicationInfo.ratio + circleIconWidth/2) - for (var i = 0; i < count; i++) { - var temperatureStart = canvasSlider.calibrate(Utils.getTemperature(i, model)) - var temperatureEnd = canvasSlider.calibrate(Utils.getTemperature(i + 1, model)) - ctx.moveTo(i * drawingOffset, -temperatureStart) - if ( (i+1) < count) - ctx.lineTo((i + 1) * drawingOffset, -temperatureEnd) + + var yOffset = canvasSlider.weatherIconWidth + var item = repeater.itemAt(0).children[3] + var pos = item.mapToItem(canvasSlider) + ctx.moveTo(item.width/2 + pos.x, item.height/2 + pos.y) + + for (var i = 1; i < count; i++) { + item = repeater.itemAt(i).children[3] + pos = item.mapToItem(canvasSlider) + ctx.lineTo(item.width/2 + pos.x, item.height/2 + pos.y) } ctx.stroke() ctx.closePath() ctx.restore(); } - Repeater { - id: repeater - model: root.model.periodCount() - Column { - width: canvasSlider.weatherIconWidth - x: (1 + index) * canvasSlider.drawingOffset - ApplicationInfo.sliderHandleWidth/2 + canvasSlider.weatherIconWidth/2 - canvasSlider.circleIconWidth/2 - y: -canvasSlider.calibrate(temperature) + canvasSlider.marginsTemperaturesDrawing - property int temperature: Utils.getTemperature(index, root.model) - height: parent.height - id: col - Image { - source: Utils.getWeatherUrl(index, root.model) - width: canvasSlider.weatherIconWidth - height: width - anchors.horizontalCenter: col.horizontalCenter - } - Item { - height: 15 * ApplicationInfo.ratio - width: height - } - Image { - id: circle - source: ApplicationInfo.getImagePath("Circle.png") - width: canvasSlider.circleIconWidth - height: width - anchors.horizontalCenter: col.horizontalCenter - } - Item { - height: 15 * ApplicationInfo.ratio - width: height - } - TouchLabel { - text: Utils.getTempFormat(temperature) - pixelSize: 24 - color: temperature > 0 ? ApplicationInfo.colors.doubleDarkGray : ApplicationInfo.colors.blue - anchors.horizontalCenter: col.horizontalCenter + + RowLayout { + id: rowTemp + spacing: 0 + anchors { left: parent.left; right: parent.right; top: parent.top; leftMargin: ApplicationInfo.sliderGapWidth/2; rightMargin: ApplicationInfo.sliderGapWidth/2} + Repeater { + id: repeater + model: root.model.periodCount() + Column { + property int temperature: Utils.getTemperature(index, root.model) + Layout.fillWidth: true + Item { + width: 1 + height: -canvasSlider.calibrate(temperature) + canvasSlider.marginsTemperaturesDrawing + } + Image { + source: Utils.getWeatherUrl(index, root.model) + width: canvasSlider.weatherIconWidth + height: width + anchors.horizontalCenter: parent.horizontalCenter + } + Item { + height: 15 * ApplicationInfo.ratio + width: height + } + Image { + id: circle + source: ApplicationInfo.getImagePath("Circle.png") + width: canvasSlider.circleIconWidth + height: width + anchors.horizontalCenter: parent.horizontalCenter + } + Item { + height: 15 * ApplicationInfo.ratio + width: height + } + TouchLabel { + text: Utils.getTempFormat(temperature) + pixelSize: 24 + color: temperature > 0 ? ApplicationInfo.colors.doubleDarkGray : ApplicationInfo.colors.blue + anchors.horizontalCenter: parent.horizontalCenter + } } } } + ColumnLayout { id: column - anchors.bottom: parent.bottom - anchors.horizontalCenter: parent.horizontalCenter - width : canvasSlider.sliderItemWidth + anchors { bottom: parent.bottom; left: parent.left; right: parent.right } TouchSlider { id: touchSlider - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.preferredWidth: canvasSlider.sliderItemWidth - 2 * canvasSlider.drawingOffset + Layout.preferredWidth: (model.periodCount() - 1) * ApplicationInfo.sliderGapWidth + ApplicationInfo.sliderHandleWidth + Layout.alignment: Qt.AlignHCenter minimumValue: 0 maximumValue: model.periodCount() - 1 } RowLayout { + id: rowTime Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter spacing: 0 - Layout.preferredWidth: canvasSlider.sliderItemWidth - ApplicationInfo.sliderHandleWidth - Repeater { + Layout.preferredWidth: canvasSlider.sliderItemWidth + Repeater { model: root.model.periodCount() + 1 TouchLabel { pixelSize: 22 - Layout.preferredWidth: canvasSlider.drawingOffset - horizontalAlignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.preferredWidth: ApplicationInfo.sliderGapWidth + horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignBaseline text: (!!root.model && index !== root.model.periodCount()) ? Utils.getFromTime(index, root.model) : Utils.getToTime(index-1, root.model) } } } } - } + Separator { Layout.fillHeight: true Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false Layout.minimumHeight: 10 + Layout.minimumWidth: 0 } } diff --git a/qml/pages/OneDayZoomItem.qml b/qml/pages/OneDayZoomItem.qml index 294bc75..53a0efc 100644 --- a/qml/pages/OneDayZoomItem.qml +++ b/qml/pages/OneDayZoomItem.qml @@ -60,6 +60,7 @@ GridLayout { Separator { Layout.fillHeight: true Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false + Layout.minimumWidth: 0 } GridLayout { id: grid @@ -183,5 +184,6 @@ GridLayout { Separator { Layout.fillHeight: true Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false + Layout.minimumWidth: 0 } } diff --git a/qml/touch/TouchSlider.qml b/qml/touch/TouchSlider.qml index 9acb947..61e2594 100644 --- a/qml/touch/TouchSlider.qml +++ b/qml/touch/TouchSlider.qml @@ -50,7 +50,7 @@ Slider { groove: Rectangle { Rectangle { id: beforeHandle - width: control.value * ApplicationInfo.sliderGapWidth + ApplicationInfo.sliderHandleWidth/2 + width: styleData.handlePosition height: 20 * ApplicationInfo.ratio color: ApplicationInfo.colors.blue radius: 90 -- cgit v1.2.3