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 * @deprecated Set leadingAction instead.
0054 */
0055 property alias leftAction: root.leadingAction
0056
0057 /**
0058 * This property holds the trailing action.
0059 * @deprecated Set trailingAction instead.
0060 */
0061 property alias rightAction: root.trailingAction
0062
0063 /**
0064 * This property holds the leading action.
0065 */
0066 property Kirigami.Action leadingAction
0067
0068 /**
0069 * This property holds the trailing action.
0070 */
0071 property Kirigami.Action trailingAction
0072
0073 // Note: binding corners to each other results in binding loops, because
0074 // they share one common NOTIFY signal. Storing properties wastes memory.
0075 // So these two expressions are implemented as little helper functions.
0076
0077 // Left for leading and right for trailing buttons
0078 function __radiusA(): real {
0079 return LayoutMirroring.enabled ? 0 : radius;
0080 }
0081
0082 // and vice-versa
0083 function __radiusB(): real {
0084 return LayoutMirroring.enabled ? radius : 0;
0085 }
0086
0087 radius: Kirigami.Units.largeSpacing
0088 color: "transparent"
0089 height: Math.round(Kirigami.Units.gridUnit * 2.5)
0090 width: 2 * height - 1
0091
0092 shadow {
0093 size: 10
0094 xOffset: 0
0095 yOffset: 2
0096 color: Qt.rgba(0, 0, 0, 0.2)
0097 }
0098
0099 QQC2.Button {
0100 id: leadingButton
0101
0102 LayoutMirroring.enabled: root.LayoutMirroring.enabled
0103
0104 z: (down || visualFocus || (enabled && hovered)) ? 2 : leadingButtonBorderAnimation.running ? 1 : 0
0105
0106 background: Kirigami.ShadowedRectangle {
0107 id: leadingButtonBackground
0108
0109 Kirigami.Theme.inherit: false
0110 Kirigami.Theme.colorSet: Kirigami.Theme.Window
0111
0112 corners {
0113 topLeftRadius: root.__radiusA()
0114 bottomLeftRadius: root.__radiusA()
0115 topRightRadius: root.__radiusB()
0116 bottomRightRadius: root.__radiusB()
0117 }
0118
0119 border {
0120 width: 1
0121 color: if (leadingButton.down || leadingButton.visualFocus) {
0122 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0123 } else if (leadingButton.enabled && leadingButton.hovered) {
0124 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0125 } else {
0126 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0127 }
0128 }
0129
0130 color: if (leadingButton.down || leadingButton.visualFocus) {
0131 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0132 } else if (leadingButton.enabled && leadingButton.hovered) {
0133 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0134 } else {
0135 Kirigami.Theme.backgroundColor
0136 }
0137
0138 Behavior on color {
0139 enabled: true
0140 ColorAnimation {
0141 duration: Kirigami.Units.longDuration
0142 easing.type: Easing.OutCubic
0143 }
0144 }
0145
0146 Behavior on border.color {
0147 enabled: true
0148 ColorAnimation {
0149 id: leadingButtonBorderAnimation
0150 duration: Kirigami.Units.longDuration
0151 easing.type: Easing.OutCubic
0152 }
0153 }
0154 }
0155
0156 contentItem: Item {
0157 Kirigami.Icon {
0158 implicitHeight: if (leadingButton.icon.height) {
0159 leadingButton.icon.height
0160 } else {
0161 Kirigami.Units.iconSizes.medium
0162 }
0163 implicitWidth: if (leadingButton.icon.width) {
0164 leadingButton.icon.width
0165 } else {
0166 Kirigami.Units.iconSizes.medium
0167 }
0168 source: if (leadingButton.icon.name) {
0169 leadingButton.icon.name
0170 } else {
0171 leadingButton.icon.source
0172 }
0173 anchors.centerIn: parent
0174 }
0175 }
0176 action: root.leadingAction
0177 anchors.left: root.left
0178 height: root.height
0179 width: root.height
0180 enabled: action ? action.enabled : false
0181 display: QQC2.AbstractButton.IconOnly
0182 }
0183
0184 QQC2.Button {
0185 id: trailingButton
0186
0187 LayoutMirroring.enabled: root.LayoutMirroring.enabled
0188
0189 z: (down || visualFocus || (enabled && hovered)) ? 2 : trailingButtonBorderAnimation.running ? 1 : 0
0190
0191 background: Kirigami.ShadowedRectangle {
0192 Kirigami.Theme.inherit: false
0193 Kirigami.Theme.colorSet: Kirigami.Theme.Window
0194
0195 corners {
0196 topLeftRadius: root.__radiusB()
0197 bottomLeftRadius: root.__radiusB()
0198 topRightRadius: root.__radiusA()
0199 bottomRightRadius: root.__radiusA()
0200 }
0201
0202 border {
0203 width: 1
0204 color: if (trailingButton.down || trailingButton.visualFocus) {
0205 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0206 } else if (trailingButton.enabled && trailingButton.hovered) {
0207 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0208 } else {
0209 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0210 }
0211 }
0212
0213 color: if (trailingButton.down || trailingButton.visualFocus) {
0214 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0215 } else if (trailingButton.enabled && trailingButton.hovered) {
0216 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0217 } else {
0218 Kirigami.Theme.backgroundColor
0219 }
0220
0221 Behavior on color {
0222 enabled: true
0223 ColorAnimation {
0224 duration: Kirigami.Units.longDuration
0225 easing.type: Easing.OutCubic
0226 }
0227 }
0228
0229 Behavior on border.color {
0230 id: trailingButtonBorderAnimation
0231 enabled: true
0232 ColorAnimation {
0233 duration: Kirigami.Units.longDuration
0234 easing.type: Easing.OutCubic
0235 }
0236 }
0237 }
0238
0239 contentItem: Item {
0240 Kirigami.Icon {
0241 implicitHeight: if (trailingButton.icon.height) {
0242 trailingButton.icon.height
0243 } else {
0244 Kirigami.Units.iconSizes.medium
0245 }
0246 implicitWidth: if (trailingButton.icon.width) {
0247 trailingButton.icon.width
0248 } else {
0249 Kirigami.Units.iconSizes.medium
0250 }
0251 source: if (trailingButton.icon.name) {
0252 trailingButton.icon.name
0253 } else {
0254 trailingButton.icon.source
0255 }
0256 anchors.centerIn: parent
0257 }
0258 }
0259
0260 action: root.trailingAction
0261 anchors.right: root.right
0262 height: root.height
0263 width: root.height
0264 enabled: action ? action.enabled : false
0265 display: QQC2.AbstractButton.IconOnly
0266 }
0267 }