From 8f358742159ebf151ff8187f1a6d8a05ac5c0207 Mon Sep 17 00:00:00 2001 From: Titta Heikkala Date: Fri, 13 Dec 2013 12:36:23 +0200 Subject: Fix qml example button layouts The buttons in the qml examples are now set into layouts so that the text is visible on different platforms. Change-Id: Id25d01ea978905b5c744047b40d47e56e6ac14bd Reviewed-by: Miikka Heikkinen --- .../qmlcustominput/qml/qmlcustominput/data.qml | 1 - .../qmlcustominput/qml/qmlcustominput/main.qml | 77 ++++---- .../qml/qmlcustominput/newbutton.qml | 23 ++- examples/qmlscatter/qml/qmlscatter/main.qml | 157 ++++++++------- examples/qmlscatter/qml/qmlscatter/newbutton.qml | 23 ++- examples/qmlsurface/qml/qmlsurface/main.qml | 210 +++++++++++---------- examples/qmlsurface/qml/qmlsurface/newbutton.qml | 23 ++- 7 files changed, 289 insertions(+), 225 deletions(-) diff --git a/examples/qmlcustominput/qml/qmlcustominput/data.qml b/examples/qmlcustominput/qml/qmlcustominput/data.qml index 71c544a4..5a8df2c9 100644 --- a/examples/qmlcustominput/qml/qmlcustominput/data.qml +++ b/examples/qmlcustominput/qml/qmlcustominput/data.qml @@ -18,7 +18,6 @@ import QtQuick 2.1 import QtDataVisualization 1.0 -import QtQuick.XmlListModel 2.0 Item { property alias model: dataModel diff --git a/examples/qmlcustominput/qml/qmlcustominput/main.qml b/examples/qmlcustominput/qml/qmlcustominput/main.qml index a7e7f466..6ba6c19e 100644 --- a/examples/qmlcustominput/qml/qmlcustominput/main.qml +++ b/examples/qmlcustominput/qml/qmlcustominput/main.qml @@ -17,6 +17,7 @@ ****************************************************************************/ import QtQuick 2.1 +import QtQuick.Layouts 1.0 import QtDataVisualization 1.0 import "." @@ -34,7 +35,7 @@ Item { id: dataView anchors.bottom: parent.bottom width: parent.width - height: parent.height - shadowToggle.height + height: parent.height - buttonLayout.height //! [0] Scatter3D { @@ -153,45 +154,53 @@ Item { } //! [7] - NewButton { - id: shadowToggle - width: parent.width / 3 // We're adding 3 buttons and want to divide them equally - text: "Hide Shadows" + RowLayout { + id: buttonLayout + Layout.minimumHeight: shadowToggle.height + width: parent.width anchors.left: parent.left - - onClicked: { - if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) { - scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftMedium; - text = "Hide Shadows"; - } else { - scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone; - text = "Show Shadows"; + spacing: 0 + + NewButton { + id: shadowToggle + Layout.fillHeight: true + Layout.minimumWidth: parent.width / 3 // 3 buttons divided equally in the layout + text: "Hide Shadows" + + onClicked: { + if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) { + scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftMedium; + text = "Hide Shadows"; + } else { + scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone; + text = "Show Shadows"; + } } } - } - NewButton { - id: cameraToggle - width: parent.width / 3 - text: "Animate Camera" - anchors.left: shadowToggle.right - - onClicked: { - cameraAnimationX.paused = !cameraAnimationX.paused; - cameraAnimationY.paused = cameraAnimationX.paused; - if (cameraAnimationX.paused) { - text = "Animate Camera"; - } else { - text = "Pause Camera"; + NewButton { + id: cameraToggle + Layout.fillHeight: true + Layout.minimumWidth: parent.width / 3 + text: "Animate Camera" + + onClicked: { + cameraAnimationX.paused = !cameraAnimationX.paused; + cameraAnimationY.paused = cameraAnimationX.paused; + if (cameraAnimationX.paused) { + text = "Animate Camera"; + } else { + text = "Pause Camera"; + } } } - } - NewButton { - id: exitButton - width: parent.width / 3 - text: "Quit" - anchors.left: cameraToggle.right - onClicked: Qt.quit(0); + NewButton { + id: exitButton + Layout.fillHeight: true + Layout.minimumWidth: parent.width / 3 + text: "Quit" + onClicked: Qt.quit(0); + } } } diff --git a/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml b/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml index 895db183..e44c9d1a 100644 --- a/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml +++ b/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml @@ -18,6 +18,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 +import QtQuick.Controls.Styles 1.0 Item { id: newbutton @@ -26,17 +27,25 @@ Item { signal clicked - height: 80 + implicitWidth: buttonText.implicitWidth + 5 + implicitHeight: buttonText.implicitHeight + 10 Button { + id: buttonText width: parent.width height: parent.height - Text { - id: buttonText - wrapMode: Text.WordWrap - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - anchors.fill: parent + + style: ButtonStyle { + label: Component { + Text { + text: buttonText.text + clip: true + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.fill: parent + } + } } onClicked: newbutton.clicked() } diff --git a/examples/qmlscatter/qml/qmlscatter/main.qml b/examples/qmlscatter/qml/qmlscatter/main.qml index 40e48996..338bec24 100644 --- a/examples/qmlscatter/qml/qmlscatter/main.qml +++ b/examples/qmlscatter/qml/qmlscatter/main.qml @@ -18,6 +18,7 @@ //! [0] import QtQuick 2.1 +import QtQuick.Layouts 1.0 import QtDataVisualization 1.0 import "." //! [0] @@ -49,7 +50,7 @@ Item { anchors.bottom: parent.bottom //! [9] width: parent.width - height: parent.height - shadowToggle.height + height: parent.height - buttonLayout.height //! [8] //! [2] @@ -126,90 +127,102 @@ Item { } } - //! [7] - NewButton { - id: shadowToggle - width: parent.width / 6 // We're adding 6 buttons and want to divide them equally - text: "Hide Shadows" - onClicked: { - if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) { - scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow; - text = "Hide Shadows"; - } else { - scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone; - text = "Show Shadows"; + RowLayout { + id: buttonLayout + Layout.minimumHeight: cameraToggle.height + width: parent.width + anchors.left: parent.left + spacing: 0 + //! [7] + NewButton { + id: shadowToggle + Layout.fillHeight: true + Layout.fillWidth: true + text: "Hide Shadows" + onClicked: { + if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) { + scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow; + text = "Hide Shadows"; + } else { + scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone; + text = "Show Shadows"; + } } } - } - //! [7] - - NewButton { - id: smoothToggle - width: parent.width / 6 - text: "Use Smooth for Series One" - anchors.left: shadowToggle.right - onClicked: { - if (scatterSeries.meshSmooth === false) { - text = "Use Flat for Series One"; - scatterSeries.meshSmooth = true; - } else { - text = "Use Smooth for Series One" - scatterSeries.meshSmooth = false; + //! [7] + + NewButton { + id: smoothToggle + Layout.fillHeight: true + Layout.fillWidth: true + text: "Use Smooth Dots" + onClicked: { + if (scatterSeries.meshSmooth === false) { + text = "Use Flat for Series One"; + scatterSeries.meshSmooth = true; + } else { + text = "Use Smooth for Series One" + scatterSeries.meshSmooth = false; + } } } - } - NewButton { - id: cameraToggle - width: parent.width / 6 - text: "Change Camera Placement" - anchors.left: smoothToggle.right - onClicked: { - if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) { - scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricRightHigh; - } else { - scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront; + NewButton { + id: cameraToggle + Layout.fillHeight: true + Layout.fillWidth: true + text: "Change Camera Placement" + onClicked: { + if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) { + scatterGraph.scene.activeCamera.cameraPreset = + Camera3D.CameraPresetIsometricRightHigh; + } else { + scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront; + } } } - } - NewButton { - id: themeToggle - width: parent.width / 6 - text: "Change Theme" - anchors.left: cameraToggle.right - onClicked: { - if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) { - // Ownership of the theme is transferred and old theme is destroyed when setting - // a new one, so we need to create them dynamically - scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0; Theme3D {type: Theme3D.ThemeIsabelle; font.family: "Lucida Handwriting"; font.pointSize: 40}', parent); - } else { - scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0; Theme3D {type: Theme3D.ThemeArmyBlue}', parent); + NewButton { + id: themeToggle + Layout.fillHeight: true + Layout.fillWidth: true + text: "Change Theme" + onClicked: { + if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) { + // Ownership of the theme is transferred and old theme is destroyed when setting + // a new one, so we need to create them dynamically + scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0; + Theme3D {type: Theme3D.ThemeIsabelle; font.family: "Lucida Handwriting"; + font.pointSize: 40}', parent); + } else { + scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0; + Theme3D {type: Theme3D.ThemeArmyBlue}', parent); + } } } - } - NewButton { - id: backgroundToggle - width: parent.width / 6 - text: "Hide Background" - anchors.left: themeToggle.right - onClicked: { - if (scatterGraph.theme.backgroundEnabled === true) { - scatterGraph.theme.backgroundEnabled = false; - text = "Show Background"; - } else { - scatterGraph.theme.backgroundEnabled = true; - text = "Hide Background"; + NewButton { + id: backgroundToggle + Layout.fillHeight: true + Layout.fillWidth: true + text: "Hide Background" + onClicked: { + if (scatterGraph.theme.backgroundEnabled === true) { + scatterGraph.theme.backgroundEnabled = false; + text = "Show Background"; + } else { + scatterGraph.theme.backgroundEnabled = true; + text = "Hide Background"; + } } } - } - NewButton { - id: exitButton - width: parent.width / 6 - text: "Quit" - anchors.left: backgroundToggle.right - onClicked: Qt.quit(0); + NewButton { + id: exitButton + Layout.fillHeight: true + Layout.fillWidth: true + text: "Quit" + onClicked: Qt.quit(0); + } } } diff --git a/examples/qmlscatter/qml/qmlscatter/newbutton.qml b/examples/qmlscatter/qml/qmlscatter/newbutton.qml index 895db183..e44c9d1a 100644 --- a/examples/qmlscatter/qml/qmlscatter/newbutton.qml +++ b/examples/qmlscatter/qml/qmlscatter/newbutton.qml @@ -18,6 +18,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 +import QtQuick.Controls.Styles 1.0 Item { id: newbutton @@ -26,17 +27,25 @@ Item { signal clicked - height: 80 + implicitWidth: buttonText.implicitWidth + 5 + implicitHeight: buttonText.implicitHeight + 10 Button { + id: buttonText width: parent.width height: parent.height - Text { - id: buttonText - wrapMode: Text.WordWrap - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - anchors.fill: parent + + style: ButtonStyle { + label: Component { + Text { + text: buttonText.text + clip: true + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.fill: parent + } + } } onClicked: newbutton.clicked() } diff --git a/examples/qmlsurface/qml/qmlsurface/main.qml b/examples/qmlsurface/qml/qmlsurface/main.qml index 13f3f7ce..efec0b24 100644 --- a/examples/qmlsurface/qml/qmlsurface/main.qml +++ b/examples/qmlsurface/qml/qmlsurface/main.qml @@ -17,6 +17,7 @@ ****************************************************************************/ import QtQuick 2.1 +import QtQuick.Layouts 1.0 import QtDataVisualization 1.0 import "." @@ -26,13 +27,16 @@ Item { height: 720 visible: true + property int buttonMaximumWidth: surfaceGridToggle.width + property int buttonMinimumHeight: seriesToggle.height + Data { id: surfaceData } Item { id: surfaceView - width: mainview.width - surfaceGridToggle.width + width: mainview.width - buttonLayout.width height: mainview.height anchors.right: mainview.right; @@ -113,120 +117,132 @@ Item { } } //! [4] - - NewButton { - id: surfaceGridToggle + ColumnLayout { + id: buttonLayout anchors.top: parent.top anchors.left: parent.left - width: 200 - text: "Show Surface Grid" - //! [1] - onClicked: { - if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) { - surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe; - heightSeries.drawMode &= ~Surface3DSeries.DrawWireframe; - text = "Show Surface Grid" - } else { - surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe; - heightSeries.drawMode |= Surface3DSeries.DrawWireframe; - text = "Hide Surface Grid" + spacing: 0 + + NewButton { + id: surfaceGridToggle + Layout.maximumWidth: buttonMaximumWidth + Layout.fillWidth: true + Layout.minimumHeight: buttonMinimumHeight + text: "Show Surface Grid" + //! [1] + onClicked: { + if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) { + surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe; + heightSeries.drawMode &= ~Surface3DSeries.DrawWireframe; + text = "Show Surface Grid" + } else { + surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe; + heightSeries.drawMode |= Surface3DSeries.DrawWireframe; + text = "Hide Surface Grid" + } } + //! [1] } - //! [1] - } - NewButton { - id: surfaceToggle - anchors.top: surfaceGridToggle.bottom - width: surfaceGridToggle.width - text: "Hide Surface" - //! [8] - onClicked: { - if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface) { - surfaceSeries.drawMode &= ~Surface3DSeries.DrawSurface; - heightSeries.drawMode &= ~Surface3DSeries.DrawSurface; - text = "Show Surface" - } else { - surfaceSeries.drawMode |= Surface3DSeries.DrawSurface; - heightSeries.drawMode |= Surface3DSeries.DrawSurface; - text = "Hide Surface" + NewButton { + id: surfaceToggle + Layout.maximumWidth: buttonMaximumWidth + Layout.fillWidth: true + Layout.minimumHeight: buttonMinimumHeight + text: "Hide Surface" + //! [8] + onClicked: { + if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface) { + surfaceSeries.drawMode &= ~Surface3DSeries.DrawSurface; + heightSeries.drawMode &= ~Surface3DSeries.DrawSurface; + text = "Show Surface" + } else { + surfaceSeries.drawMode |= Surface3DSeries.DrawSurface; + heightSeries.drawMode |= Surface3DSeries.DrawSurface; + text = "Hide Surface" + } } + //! [8] } - //! [8] - } - NewButton { - id: flatShadingToggle - anchors.top: surfaceToggle.bottom - width: surfaceToggle.width - text: "Show Flat" - enabled: surfaceSeries.flatShadingSupported - //! [2] - onClicked: { - if (surfaceSeries.flatShadingEnabled === true) { - surfaceSeries.flatShadingEnabled = false; - heightSeries.flatShadingEnabled = false; - text = "Show Flat" - } else { - surfaceSeries.flatShadingEnabled = true; - heightSeries.flatShadingEnabled = true; - text = "Show Smooth" + NewButton { + id: flatShadingToggle + Layout.maximumWidth: buttonMaximumWidth + Layout.fillWidth: true + Layout.minimumHeight: buttonMinimumHeight + + text: "Show Flat" + enabled: surfaceSeries.flatShadingSupported + //! [2] + onClicked: { + if (surfaceSeries.flatShadingEnabled === true) { + surfaceSeries.flatShadingEnabled = false; + heightSeries.flatShadingEnabled = false; + text = "Show Flat" + } else { + surfaceSeries.flatShadingEnabled = true; + heightSeries.flatShadingEnabled = true; + text = "Show Smooth" + } } + //! [2] } - //! [2] - } - NewButton { - id: backgroundToggle - anchors.top: flatShadingToggle.bottom - width: flatShadingToggle.width - text: "Hide Background" - onClicked: { - if (surfaceplot.theme.backgroundEnabled === true) { - surfaceplot.theme.backgroundEnabled = false; - text = "Show Background" - } else { - surfaceplot.theme.backgroundEnabled = true; - text = "Hide Background" + NewButton { + id: backgroundToggle + Layout.maximumWidth: buttonMaximumWidth + Layout.fillWidth: true + Layout.minimumHeight: buttonMinimumHeight + text: "Hide Background" + onClicked: { + if (surfaceplot.theme.backgroundEnabled === true) { + surfaceplot.theme.backgroundEnabled = false; + text = "Show Background" + } else { + surfaceplot.theme.backgroundEnabled = true; + text = "Hide Background" + } } } - } - NewButton { - id: gridToggle - anchors.top: backgroundToggle.bottom - width: backgroundToggle.width - text: "Hide Grid" - onClicked: { - if (surfaceplot.theme.gridEnabled === true) { - surfaceplot.theme.gridEnabled = false; - text = "Show Grid" - } else { - surfaceplot.theme.gridEnabled = true; - text = "Hide Grid" + NewButton { + id: gridToggle + Layout.maximumWidth: buttonMaximumWidth + Layout.fillWidth: true + Layout.minimumHeight: buttonMinimumHeight + text: "Hide Grid" + onClicked: { + if (surfaceplot.theme.gridEnabled === true) { + surfaceplot.theme.gridEnabled = false; + text = "Show Grid" + } else { + surfaceplot.theme.gridEnabled = true; + text = "Hide Grid" + } } } - } - NewButton { - id: seriesToggle - anchors.top: gridToggle.bottom - width: gridToggle.width - text: "Switch to Item Model Series" - //! [3] - onClicked: { - if (surfaceplot.seriesList[0] === heightSeries) { - surfaceplot.axisY.max = 500.0 - surfaceplot.seriesList = [surfaceSeries] - middleGradient.position = 0.25 - text = "Switch to Height Map Series" - } else { - surfaceplot.axisY.max = 250.0 - surfaceplot.seriesList = [heightSeries] - middleGradient.position = 0.50 - text = "Switch to Item Model Series" + NewButton { + id: seriesToggle + Layout.maximumWidth: buttonMaximumWidth + Layout.fillWidth: true + Layout.minimumHeight: buttonMinimumHeight + text: "Switch to Item Model Series" + //! [3] + onClicked: { + if (surfaceplot.seriesList[0] === heightSeries) { + surfaceplot.axisY.max = 500.0 + surfaceplot.seriesList = [surfaceSeries] + middleGradient.position = 0.25 + text = "Switch to Height Map Series" + } else { + surfaceplot.axisY.max = 250.0 + surfaceplot.seriesList = [heightSeries] + middleGradient.position = 0.50 + text = "Switch to Item Model Series" + } } + //! [3] } - //! [3] } } diff --git a/examples/qmlsurface/qml/qmlsurface/newbutton.qml b/examples/qmlsurface/qml/qmlsurface/newbutton.qml index 895db183..e44c9d1a 100644 --- a/examples/qmlsurface/qml/qmlsurface/newbutton.qml +++ b/examples/qmlsurface/qml/qmlsurface/newbutton.qml @@ -18,6 +18,7 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 +import QtQuick.Controls.Styles 1.0 Item { id: newbutton @@ -26,17 +27,25 @@ Item { signal clicked - height: 80 + implicitWidth: buttonText.implicitWidth + 5 + implicitHeight: buttonText.implicitHeight + 10 Button { + id: buttonText width: parent.width height: parent.height - Text { - id: buttonText - wrapMode: Text.WordWrap - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - anchors.fill: parent + + style: ButtonStyle { + label: Component { + Text { + text: buttonText.text + clip: true + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.fill: parent + } + } } onClicked: newbutton.clicked() } -- cgit v1.2.3