diff options
author | Jens Bache-Wiig <jens.bache-wiig@digia.com> | 2013-08-21 18:08:38 +0200 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-09-22 18:46:26 +0200 |
commit | e29fefa6ddbf3d30f8dde0735132e3dbb93cbef0 (patch) | |
tree | 4c521d13dca0c4fc72df2cab32f8aaa9f912955a /src | |
parent | 72072899c653430912e8fcafa82d624755d465ad (diff) | |
download | qtquickcontrols-e29fefa6ddbf3d30f8dde0735132e3dbb93cbef0.tar.gz |
Add a basic Switch control
This is a very simple switch. I left out text label as this is
very mobile oriented. A clicked signal is also debatable
as you dont really click on a switch.
Change-Id: I84269297cba48f0e81af8f25af5b97acadecdd6a
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/controls/Styles/Base/SwitchStyle.qml | 162 | ||||
-rw-r--r-- | src/controls/Styles/Desktop/SwitchStyle.qml | 46 | ||||
-rw-r--r-- | src/controls/Styles/qmldir | 1 | ||||
-rw-r--r-- | src/controls/Styles/styles.pri | 2 | ||||
-rw-r--r-- | src/controls/Switch.qml | 153 | ||||
-rw-r--r-- | src/controls/controls.pro | 1 | ||||
-rw-r--r-- | src/controls/plugin.cpp | 1 |
7 files changed, 366 insertions, 0 deletions
diff --git a/src/controls/Styles/Base/SwitchStyle.qml b/src/controls/Styles/Base/SwitchStyle.qml new file mode 100644 index 00000000..a17fb505 --- /dev/null +++ b/src/controls/Styles/Base/SwitchStyle.qml @@ -0,0 +1,162 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Digia Plc and its Subsidiary(-ies) 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.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Private 1.0 + +/*! + \qmltype SwitchStyle + \inqmlmodule QtQuick.Controls.Styles + \since QtQuick.Controls.Styles 1.1 + \ingroup controlsstyling + \brief Provides custom styling for Switch + + Example: + \qml + Switch { + style: SwitchStyle { + groove: Rectangle { + implicitWidth: 100 + implicitHeight: 20 + radius: 9 + border.color: control.activeFocus ? "darkblue" : "gray" + border.width: 1 + } + } + } + \endqml +*/ +Style { + id: switchstyle + + /*! The content padding. */ + padding { + top: 0 + left: 0 + right: 0 + bottom: 0 + } + + /*! This defines the switch handle. */ + property Component handle: Rectangle { + implicitWidth: 32 + implicitHeight: 18 + + border.color: control.activeFocus ? Qt.darker(__syspal.highlight, 2) : Qt.darker(__syspal.button, 2) + property color bg: control.activeFocus ? Qt.darker(__syspal.highlight, 1.2) : __syspal.button + gradient: Gradient { + GradientStop {color: Qt.lighter(bg, 1.4) ; position: 0} + GradientStop {color: bg ; position: 1} + } + + radius: 2 + } + + /*! This property holds the background groove of the switch. */ + property Component groove: Rectangle { + property color shadow: control.checked ? Qt.darker(__syspal.highlight, 1.2): "#999" + property color bg: control.checked ? __syspal.highlight:"#bbb" + + implicitWidth: 60 + implicitHeight: 18 + + border.color: "gray" + color: "red" + + radius: 2 + Behavior on shadow {ColorAnimation{ duration: 80 }} + Behavior on bg {ColorAnimation{ duration: 80 }} + gradient: Gradient { + GradientStop {color: shadow; position: 0} + GradientStop {color: bg ; position: 0.2} + GradientStop {color: bg ; position: 1} + } + Rectangle { + color: "#44ffffff" + height: 1 + anchors.bottom: parent.bottom + anchors.bottomMargin: -1 + width: parent.width - 2 + x: 1 + } + } + + /*! \internal */ + property Component panel: Item { + + implicitWidth: Math.round(grooveLoader.width + padding.left + padding.right) + implicitHeight: grooveLoader.implicitHeight + padding.top + padding.bottom + + property var __groove: grooveLoader + property var __handle: handleLoader + property bool enableAnimation: false + + Loader { + id: grooveLoader + y: padding.top + x: padding.left + + sourceComponent: groove + anchors.verticalCenter: parent.verticalCenter + + + Loader { + id: handleLoader + + z:1 + anchors.top: grooveLoader.top + anchors.bottom: grooveLoader.bottom + anchors.topMargin: padding.top + anchors.bottomMargin: padding.bottom + + Behavior on x { + id: behavior + enabled: enableAnimation + NumberAnimation { + duration: 150 + easing.type: Easing.OutCubic + } + } + + sourceComponent: handle + } + } + } +} diff --git a/src/controls/Styles/Desktop/SwitchStyle.qml b/src/controls/Styles/Desktop/SwitchStyle.qml new file mode 100644 index 00000000..df9dd5bf --- /dev/null +++ b/src/controls/Styles/Desktop/SwitchStyle.qml @@ -0,0 +1,46 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Digia Plc and its Subsidiary(-ies) 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.1 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Private 1.0 +import QtQuick.Controls.Styles 1.1 + +SwitchStyle { +} diff --git a/src/controls/Styles/qmldir b/src/controls/Styles/qmldir index f291f3ff..1688f662 100644 --- a/src/controls/Styles/qmldir +++ b/src/controls/Styles/qmldir @@ -8,6 +8,7 @@ RadioButtonStyle 1.0 Base/RadioButtonStyle.qml ScrollViewStyle 1.0 Base/ScrollViewStyle.qml SliderStyle 1.0 Base/SliderStyle.qml SpinBoxStyle 1.1 Base/SpinBoxStyle.qml +SwitchStyle 1.1 Base/SwitchStyle.qml TabViewStyle 1.0 Base/TabViewStyle.qml TableViewStyle 1.0 Base/TableViewStyle.qml TextFieldStyle 1.0 Base/TextFieldStyle.qml diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri index 9cdd9c95..77f99892 100644 --- a/src/controls/Styles/styles.pri +++ b/src/controls/Styles/styles.pri @@ -14,6 +14,7 @@ STYLES_QML_FILES = \ $$PWD/Base/ScrollViewStyle.qml\ $$PWD/Base/SliderStyle.qml \ $$PWD/Base/SpinBoxStyle.qml \ + $$PWD/Base/SwitchStyle.qml \ $$PWD/Base/StatusBarStyle.qml \ $$PWD/Base/TableViewStyle.qml \ $$PWD/Base/TabViewStyle.qml \ @@ -36,6 +37,7 @@ STYLES_QML_FILES += \ $$PWD/Desktop/ScrollViewStyle.qml \ $$PWD/Desktop/SliderStyle.qml \ $$PWD/Desktop/SpinBoxStyle.qml \ + $$PWD/Desktop/SwitchStyle.qml \ $$PWD/Desktop/StatusBarStyle.qml\ $$PWD/Desktop/TabViewStyle.qml \ $$PWD/Desktop/TableViewStyle.qml \ diff --git a/src/controls/Switch.qml b/src/controls/Switch.qml new file mode 100644 index 00000000..87cdc0c3 --- /dev/null +++ b/src/controls/Switch.qml @@ -0,0 +1,153 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 Digia Plc and its Subsidiary(-ies) 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.1 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Private 1.0 + +/*! + \qmltype Switch + \inqmlmodule QtQuick.Controls + \since QtQuick.Controls 1.1 + \ingroup controls + \brief A switch. + + A Switch is an option button that can be switched on (checked) or off + (unchecked). Switches are typically used to represent features in an + application that can be enabled or disabled without affecting others. + + On mobile platforms, switches are commonly used to enable or disable + features. + + \qml + Column { + Switch { checked: true } + Switch { checked: false } + } + \endqml + + You can create a custom appearance for a Switch by + assigning a \l SwitchStyle. +*/ + +Control { + id: root + + /*! + This property is \c true if the control is checked. + The default value is \c false. + */ + property bool checked: false + + /*! + This property is \c true if the control takes the focus when it is + pressed; \l{QQuickItem::forceActiveFocus()}{forceActiveFocus()} will be + called on the control. + */ + property bool activeFocusOnPress: false + + /*! + This property stores the ExclusiveGroup that the control belongs to. + */ + property ExclusiveGroup exclusiveGroup: null + + Keys.onPressed: { + if (event.key === Qt.Key_Space && !event.isAutoRepeat) + checked = !checked; + } + + /*! \internal */ + onExclusiveGroupChanged: { + if (exclusiveGroup) + exclusiveGroup.bindCheckable(root) + } + + MouseArea { + id: internal + + property Item handle: __panel ? __panel.__handle : null + property int min: __style ? __style.padding.left : 0 + property int max: handle.parent.width - (handle ? handle.width : 0) - + ( __style ? __style.padding.right : 0) + focus: true + anchors.fill: parent + drag.threshold: 0 + drag.target: handle + drag.axis: Drag.XAxis + drag.minimumX: min + drag.maximumX: max + + onPressed: { + if (activeFocusOnPress) + root.forceActiveFocus() + } + + onReleased: { + if (drag.active) { + checked = (handle.x < max/2) ? false : true; + internal.handle.x = checked ? internal.max : internal.min + } else { + checked = (handle.x === max) ? false : true + } + } + } + + Component.onCompleted: { + internal.handle.x = checked ? internal.max : internal.min + __panel.enableAnimation = true + } + + onCheckedChanged: { + if (internal.handle) + internal.handle.x = checked ? internal.max : internal.min + } + + activeFocusOnTab: true + Accessible.role: Accessible.CheckBox + Accessible.name: "switch" + + /*! + The style that should be applied to the switch. Custom style + components can be created with: + + \codeline Qt.createComponent("path/to/style.qml", switchId); + */ + style: Qt.createComponent(Settings.style + "/SwitchStyle.qml", root) +} diff --git a/src/controls/controls.pro b/src/controls/controls.pro index bf2b38d7..3de8aece 100644 --- a/src/controls/controls.pro +++ b/src/controls/controls.pro @@ -26,6 +26,7 @@ CONTROLS_QML_FILES = \ StackViewDelegate.qml \ StackViewTransition.qml \ StatusBar.qml \ + Switch.qml \ Tab.qml \ TabView.qml \ TableView.qml \ diff --git a/src/controls/plugin.cpp b/src/controls/plugin.cpp index 64386e72..0c7f8966 100644 --- a/src/controls/plugin.cpp +++ b/src/controls/plugin.cpp @@ -84,6 +84,7 @@ static const struct { { "StackViewDelegate", 1, 0 }, { "StackViewTransition", 1, 0 }, { "StatusBar", 1, 0 }, + { "Switch", 1, 1 }, { "Tab", 1, 0 }, { "TabView", 1, 0 }, { "TableView", 1, 0 }, |