diff options
author | J-P Nurmi <jpnurmi@qt.io> | 2017-03-13 09:15:39 +0100 |
---|---|---|
committer | J-P Nurmi <jpnurmi@qt.io> | 2017-03-13 09:31:49 +0000 |
commit | 77cbcb964185cbcfeb67b1dad6475507420f1093 (patch) | |
tree | c86c12f0b23181f508b5dea4cb7f97e164f97c53 /examples | |
parent | d99dea884aa7ab8c710e65cd211f9dff92eb5d61 (diff) |
Wearable: add NaviButton
Replace the hand-made home/back buttons with an AbstractButton-based
custom type.
Change-Id: Icc2555e9ef67ae7461a072caf2dae780aaeafba2
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'examples')
-rw-r--r-- | examples/quickcontrols2/wearable/qml/MainContainer.qml | 138 | ||||
-rw-r--r-- | examples/quickcontrols2/wearable/qml/NaviButton.qml | 83 | ||||
-rw-r--r-- | examples/quickcontrols2/wearable/wearable.qrc | 1 |
3 files changed, 98 insertions, 124 deletions
diff --git a/examples/quickcontrols2/wearable/qml/MainContainer.qml b/examples/quickcontrols2/wearable/qml/MainContainer.qml index 142fd59b..6b6045d9 100644 --- a/examples/quickcontrols2/wearable/qml/MainContainer.qml +++ b/examples/quickcontrols2/wearable/qml/MainContainer.qml @@ -56,8 +56,8 @@ import "Navigation" import "Style" Item { - Item { - id: homeCntrl + NaviButton { + id: homeButton z: 2 @@ -65,73 +65,18 @@ Item { anchors.left: parent.left anchors.right: parent.right - height: 40 + edge: Qt.TopEdge + enabled: stackView.depth > 1 + imageSource: "../images/home.png" - states: State { - name: "slideOut" - - AnchorChanges { - target: homeButton - anchors.bottom: homeCntrl.bottom - } - } - - transitions: Transition { - AnchorAnimation { - duration: 250 - } - } - - state: (stackView.depth > 1) ? "slideOut" : "" - - Item { - id: homeButton - - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.top - - height: parent.height - - Rectangle { - height: parent.height * 4 - width: height - radius: width / 2 - - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.top - anchors.verticalCenterOffset: -height / 4 - - color: UIStyle.colorQtGray2 - } - - Image { - height: parent.height - width: height - - anchors.horizontalCenter: parent.horizontalCenter - - source: "../images/home.png" - } - } - - MouseArea { - id: homeCntrlMArea - anchors.fill: parent - onClicked: { - homeCntrl.homeKeyPressed() - } - } - - function homeKeyPressed() { - stackView.pop() - } + onClicked: stackView.pop(null) } QQC2.StackView { id: stackView - anchors.top: homeCntrl.bottom - anchors.bottom: backCntrl.top + anchors.top: homeButton.bottom + anchors.bottom: backButton.top width: parent.width @@ -141,8 +86,8 @@ Item { } } - Item { - id: backCntrl + NaviButton { + id: backButton z: 2 @@ -150,65 +95,10 @@ Item { anchors.left: parent.left anchors.right: parent.right - height: 40 + edge: Qt.BottomEdge + enabled: stackView.depth > 1 + imageSource: "../images/back.png" - states: State { - name: "slideOut" - - AnchorChanges { - target: backButton - anchors.top: backCntrl.top - } - } - - transitions: Transition { - AnchorAnimation { - duration: 250 - } - } - - state: (stackView.depth > 1) ? "slideOut" : "" - - Item { - id: backButton - - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.bottom - - height: parent.height - - Rectangle { - height: parent.height * 4 - width: height - radius: width / 2 - - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.bottom - anchors.verticalCenterOffset: height / 4 - - color: UIStyle.colorQtGray2 - } - - Image { - height: parent.height - width: height - - anchors.horizontalCenter: parent.horizontalCenter - - source: "../images/back.png" - } - } - - MouseArea { - id: backCntrlMArea - anchors.fill: parent - onClicked: { - backCntrl.backKeyPressed() - } - } - - function backKeyPressed() { - stackView.pop() - } + onClicked: stackView.pop() } } diff --git a/examples/quickcontrols2/wearable/qml/NaviButton.qml b/examples/quickcontrols2/wearable/qml/NaviButton.qml new file mode 100644 index 00000000..7a8f7c14 --- /dev/null +++ b/examples/quickcontrols2/wearable/qml/NaviButton.qml @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.7 +import QtQuick.Controls 2.0 as QQC2 +import "Style" + +QQC2.AbstractButton { + id: button + + property int edge: Qt.TopEdge + property alias imageSource: image.source + + contentItem: Image { + id: image + fillMode: Image.Pad + sourceSize { width: 40; height: 40 } // ### TODO: resize the image + } + + background: Rectangle { + height: button.height * 4 + width: height + radius: width / 2 + + anchors.horizontalCenter: button.horizontalCenter + anchors.top: edge === Qt.BottomEdge ? button.top : undefined + anchors.bottom: edge === Qt.TopEdge ? button.bottom : undefined + + color: UIStyle.colorQtGray2 + } + + transform: Translate { + Behavior on y { NumberAnimation { } } + y: enabled ? 0 : edge === Qt.TopEdge ? -button.height : button.height + } +} diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc index 7c88cafa..312c09ff 100644 --- a/examples/quickcontrols2/wearable/wearable.qrc +++ b/examples/quickcontrols2/wearable/wearable.qrc @@ -7,6 +7,7 @@ <file>qml/Fitness/FitnessMain.qml</file> <file>qml/LauncherMain.qml</file> <file>qml/MainContainer.qml</file> + <file>qml/NaviButton.qml</file> <file>qml/Navigation/navigation.js</file> <file>qml/Navigation/NavigationMain.qml</file> <file>qml/Navigation/RouteElement.qml</file> |