Warning, /libraries/kirigami-addons/src/components/DoubleFloatingButton.qml is written in an unsupported language. File is not indexed.
0001 // SPDX-FileCopyrightText: 2023 Mathis Brüchert <mbb@kaidan.im>
0002 // SPDX-FileCopyrightText: 2023 Carl Schwan <carl@carlschwan.eu>
0003 //
0004 // SPDX-License-Identifier: LGPL-2.0-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0005
0006 import QtQuick 2.15
0007 import QtQuick.Layouts 1.15
0008 import QtQuick.Controls 2.15 as QQC2
0009 import org.kde.kirigami 2.20 as Kirigami
0010
0011 /**
0012 * This component allows to display two buttons at the bottom of a page.
0013 *
0014 * @code{.qml}
0015 * import QtQuick 2.15
0016 * import QtQuick.Controls 2.15 as QQC2
0017 * import org.kde.kirigami 2.20 as Kirigami
0018 * import org.kde.kirigamiaddons.components 1.0 as KirigamiComponents
0019 *
0020 * Kirigami.ScrollablePage {
0021 * ListView {
0022 * model: []
0023 * delegate: QQC2.ItemDelegate {}
0024 *
0025 * KirigamiComponents.DoubleFloatingButton {
0026 * anchors {
0027 * right: parent.right
0028 * bottom: parent.bottom
0029 * margins: Kirigami.Units.largeSpacing
0030 * }
0031 *
0032 * leadingAction: Kirigami.Action {
0033 * text: "Zoom Out"
0034 * icon.name: "list-remove"
0035 * }
0036 *
0037 * trailingAction: Kirigami.Action {
0038 * text: "Zoom In"
0039 * icon.name: "list-add"
0040 * }
0041 * }
0042 * }
0043 * }
0044 * @endcode
0045 *
0046 * @since Kirigami Addons 0.11
0047 */
0048 Kirigami.ShadowedRectangle {
0049 id: root
0050
0051 /**
0052 * This property holds the leading action.
0053 */
0054 property Kirigami.Action leadingAction
0055
0056 /**
0057 * This property holds the trailing action.
0058 */
0059 property Kirigami.Action trailingAction
0060
0061 // Note: binding corners to each other results in binding loops, because
0062 // they share one common NOTIFY signal. Storing properties wastes memory.
0063 // So these two expressions are implemented as little helper functions.
0064
0065 // Left for leading and right for trailing buttons
0066 function __radiusA(): real {
0067 return LayoutMirroring.enabled ? 0 : radius;
0068 }
0069
0070 // and vice-versa
0071 function __radiusB(): real {
0072 return LayoutMirroring.enabled ? radius : 0;
0073 }
0074
0075 readonly property real __padding: Kirigami.Settings.hasTransientTouchInput ? (Kirigami.Units.largeSpacing * 2) : Kirigami.Units.largeSpacing
0076
0077 radius: Kirigami.Units.largeSpacing
0078 color: "transparent"
0079
0080 implicitHeight: Math.max(leadingButton.implicitContentHeight, trailingButton.implicitContentHeight) + __padding * 2
0081 implicitWidth: 2 * implicitHeight - 1
0082
0083 shadow {
0084 size: 10
0085 xOffset: 0
0086 yOffset: 2
0087 color: Qt.rgba(0, 0, 0, 0.2)
0088 }
0089
0090 QQC2.Button {
0091 id: leadingButton
0092
0093 LayoutMirroring.enabled: root.LayoutMirroring.enabled
0094
0095 z: (down || visualFocus || (enabled && hovered)) ? 2 : leadingButtonBorderAnimation.running ? 1 : 0
0096
0097 background: Kirigami.ShadowedRectangle {
0098 id: leadingButtonBackground
0099
0100 Kirigami.Theme.inherit: false
0101 Kirigami.Theme.colorSet: Kirigami.Theme.Window
0102
0103 corners {
0104 topLeftRadius: root.__radiusA()
0105 bottomLeftRadius: root.__radiusA()
0106 topRightRadius: root.__radiusB()
0107 bottomRightRadius: root.__radiusB()
0108 }
0109
0110 border {
0111 width: 1
0112 color: if (leadingButton.down || leadingButton.visualFocus) {
0113 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0114 } else if (leadingButton.enabled && leadingButton.hovered) {
0115 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0116 } else {
0117 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0118 }
0119 }
0120
0121 color: if (leadingButton.down || leadingButton.visualFocus) {
0122 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0123 } else if (leadingButton.enabled && leadingButton.hovered) {
0124 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0125 } else {
0126 Kirigami.Theme.backgroundColor
0127 }
0128
0129 Behavior on color {
0130 enabled: true
0131 ColorAnimation {
0132 duration: Kirigami.Units.longDuration
0133 easing.type: Easing.OutCubic
0134 }
0135 }
0136
0137 Behavior on border.color {
0138 enabled: true
0139 ColorAnimation {
0140 id: leadingButtonBorderAnimation
0141 duration: Kirigami.Units.longDuration
0142 easing.type: Easing.OutCubic
0143 }
0144 }
0145 }
0146
0147 contentItem: Item {
0148 implicitHeight: leadingIcon.implicitHeight
0149 implicitWidth: leadingIcon.implicitWidth
0150 Kirigami.Icon {
0151 id: leadingIcon
0152 implicitHeight: if (leadingAction.icon.height) {
0153 leadingButton.icon.height
0154 } else {
0155 Kirigami.Units.iconSizes.medium
0156 }
0157 implicitWidth: if (leadingAction.icon.width) {
0158 leadingButton.icon.width
0159 } else {
0160 Kirigami.Units.iconSizes.medium
0161 }
0162 source: if (leadingButton.icon.name) {
0163 leadingButton.icon.name
0164 } else {
0165 leadingButton.icon.source
0166 }
0167 anchors.centerIn: parent
0168 }
0169 }
0170 action: root.leadingAction
0171 anchors.left: root.left
0172 height: root.height
0173 width: root.height
0174 enabled: action ? action.enabled : false
0175 display: QQC2.AbstractButton.IconOnly
0176 }
0177
0178 QQC2.Button {
0179 id: trailingButton
0180
0181 LayoutMirroring.enabled: root.LayoutMirroring.enabled
0182
0183 z: (down || visualFocus || (enabled && hovered)) ? 2 : trailingButtonBorderAnimation.running ? 1 : 0
0184
0185 background: Kirigami.ShadowedRectangle {
0186 Kirigami.Theme.inherit: false
0187 Kirigami.Theme.colorSet: Kirigami.Theme.Window
0188
0189 corners {
0190 topLeftRadius: root.__radiusB()
0191 bottomLeftRadius: root.__radiusB()
0192 topRightRadius: root.__radiusA()
0193 bottomRightRadius: root.__radiusA()
0194 }
0195
0196 border {
0197 width: 1
0198 color: if (trailingButton.down || trailingButton.visualFocus) {
0199 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0200 } else if (trailingButton.enabled && trailingButton.hovered) {
0201 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0202 } else {
0203 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0204 }
0205 }
0206
0207 color: if (trailingButton.down || trailingButton.visualFocus) {
0208 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0209 } else if (trailingButton.enabled && trailingButton.hovered) {
0210 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0211 } else {
0212 Kirigami.Theme.backgroundColor
0213 }
0214
0215 Behavior on color {
0216 enabled: true
0217 ColorAnimation {
0218 duration: Kirigami.Units.longDuration
0219 easing.type: Easing.OutCubic
0220 }
0221 }
0222
0223 Behavior on border.color {
0224 id: trailingButtonBorderAnimation
0225 enabled: true
0226 ColorAnimation {
0227 duration: Kirigami.Units.longDuration
0228 easing.type: Easing.OutCubic
0229 }
0230 }
0231 }
0232
0233 contentItem: Item {
0234 implicitHeight: trailingIcon.implicitHeight
0235 implicitWidth: trailingIcon.implicitWidth
0236 Kirigami.Icon {
0237 id: trailingIcon
0238 implicitHeight: if (trailingAction.icon.height) {
0239 trailingButton.icon.height
0240 } else {
0241 Kirigami.Units.iconSizes.medium
0242 }
0243 implicitWidth: if (trailingAction.icon.width) {
0244 trailingButton.icon.width
0245 } else {
0246 Kirigami.Units.iconSizes.medium
0247 }
0248 source: if (trailingButton.icon.name) {
0249 trailingButton.icon.name
0250 } else {
0251 trailingButton.icon.source
0252 }
0253 anchors.centerIn: parent
0254 }
0255 }
0256
0257 action: root.trailingAction
0258 anchors.right: root.right
0259 height: root.height
0260 width: root.height
0261 enabled: action ? action.enabled : false
0262 display: QQC2.AbstractButton.IconOnly
0263 }
0264 }