diff options
Diffstat (limited to 'src/quickcontrols/material/DelayButton.qml')
-rw-r--r-- | src/quickcontrols/material/DelayButton.qml | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/src/quickcontrols/material/DelayButton.qml b/src/quickcontrols/material/DelayButton.qml new file mode 100644 index 0000000000..b18550541c --- /dev/null +++ b/src/quickcontrols/material/DelayButton.qml @@ -0,0 +1,84 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only + +import QtQuick +import QtQuick.Templates as T +import QtQuick.Controls.impl +import QtQuick.Controls.Material +import QtQuick.Controls.Material.impl + +T.DelayButton { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + topInset: 6 + bottomInset: 6 + padding: 12 + horizontalPadding: padding - 4 + + Material.elevation: control.down ? 8 : 2 + + transition: Transition { + NumberAnimation { + duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress) + } + } + + contentItem: Text { + text: control.text + font: control.font + color: !control.enabled ? control.Material.hintTextColor : control.Material.foreground + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state + background: Rectangle { + implicitWidth: 64 + implicitHeight: control.Material.buttonHeight + + radius: 2 + color: control.Material.buttonColor(control.Material.theme, control.Material.background, + control.Material.accent, control.enabled, false /*flat*/, false /*highlighted*/, false /*checked*/) + + PaddedRectangle { + y: parent.height - 4 + width: parent.width + height: 4 + radius: 2 + topPadding: -2 + clip: true + color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor + + PaddedRectangle { + width: parent.width * control.progress + height: 4 + radius: 2 + topPadding: -2 + rightPadding: Math.max(-2, width - parent.width) + clip: true + color: control.Material.accentColor + } + } + + layer.enabled: control.enabled && color.a > 0 && !control.flat + layer.effect: ElevationEffect { + elevation: control.Material.elevation + } + + Ripple { + clipRadius: 2 + width: parent.width + height: parent.height + pressed: control.pressed + anchor: control + active: enabled && (control.down || control.visualFocus || control.hovered) + color: control.Material.rippleColor + } + } +} |