rattlesnake/components/DoubleActionButton.qml

0001 // SPDX-FileCopyrightText: 2023 Mathis Brüchert <mbb@kaidan.im>
0002 //
0003 // SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0004
0005 import QtQuick 2.1
0006 import QtQuick.Controls 2.12 as Controls
0007 import QtQuick.Layouts 1.3
0008 import org.kde.kirigami 2.19 as Kirigami
0009 import org.kde.rattlesnake 1.0
0010
0011 import ".."
0012
0013
0014 Kirigami.ShadowedRectangle{
0015     id: root
0016     property Kirigami.Action leftAction
0017     property Kirigami.Action rightAction
0018
0019
0020     property int margin: 10
0021     radius: 10
0022     color: "transparent"
0023     height: 55
0024     width: 2* height - 1
0025     shadow.size: 10
0026     shadow.xOffset: 2
0027     shadow.yOffset: 2
0028     shadow.color: Qt.rgba(0, 0, 0, 0.2)
0029     Controls.Button {
0030         id: rightButton
0031         property int margin: 10
0032         Controls.ToolTip.delay: Kirigami.Units.toolTipDelay
0033         Controls.ToolTip.visible: hovered
0034         Controls.ToolTip.text: root.rightAction.text
0035         background: Kirigami.ShadowedRectangle{
0036             Kirigami.Theme.inherit: false
0037             Kirigami.Theme.colorSet: Kirigami.Theme.Window
0038             border.width: 1
0039             border.color: if (parent.down){
0040                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0041                 }else if(parent.hovered){
0042                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0043                 }else{
0044                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0045                 }
0046             color: if (parent.down){
0047                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0048                 }else if(parent.hovered){
0049                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0050                 }else{
0051                     Kirigami.Theme.backgroundColor
0052                 }
0053             Behavior on color {
0054                     enabled: true
0055                     ColorAnimation {
0056                         duration: Kirigami.Units.longDuration
0057                         easing.type: Easing.OutCubic
0058                     }
0059                 }
0060             Behavior on border.color {
0061                 enabled: true
0062                 ColorAnimation {
0063                     duration: Kirigami.Units.longDuration
0064                     easing.type: Easing.OutCubic
0065                 }
0066             }
0067             corners.topRightRadius: 10
0068             corners.bottomRightRadius: 10
0069
0070         }
0071         contentItem: Item{
0072             Kirigami.Icon{
0073                 isMask: true
0074                 implicitHeight: Kirigami.Units.gridUnit *1.2
0075                 source: root.rightAction.icon.name
0076                 anchors.centerIn: parent
0077             }
0078         }
0079         text: root.rightAction.text
0080         onClicked: root.rightAction.triggered()
0081         anchors.right: root.right
0082         height: 55
0083         width: 55
0084         display: Controls.AbstractButton.IconOnly
0085     }
0086     Controls.Button {
0087         id: leftButton
0088         Controls.ToolTip.delay: Kirigami.Units.toolTipDelay
0089         Controls.ToolTip.visible: hovered
0090         Controls.ToolTip.text: root.leftAction.text
0091         background: Kirigami.ShadowedRectangle{
0092             Kirigami.Theme.inherit: false
0093             Kirigami.Theme.colorSet: Kirigami.Theme.Window
0094             border.width: 1
0095             border.color: if (parent.down){
0096                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0097                 }else if(parent.hovered){
0098                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0099                 }else{
0100                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0101                 }
0102             color: if (parent.down){
0103                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0104                 }else if(parent.hovered){
0105                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0106                 }else{
0107                     Kirigami.Theme.backgroundColor
0108                 }
0109             Behavior on color {
0110                     enabled: true
0111                     ColorAnimation {
0112                         duration: Kirigami.Units.longDuration
0113                         easing.type: Easing.OutCubic
0114                     }
0115                 }
0116             Behavior on border.color {
0117                 enabled: true
0118                 ColorAnimation {
0119                     duration: Kirigami.Units.longDuration
0120                     easing.type: Easing.OutCubic
0121                 }
0122             }
0123             corners.topLeftRadius: 10
0124             corners.bottomLeftRadius: 10
0125         }
0126         contentItem: Item{
0127             Kirigami.Icon{
0128                 isMask: true
0129                 implicitHeight: Kirigami.Units.gridUnit * 1.2
0130                 source: root.leftAction.icon.name
0131                 anchors.centerIn: parent
0132             }
0133         }
0134         text: root.leftAction.text
0135         onClicked: root.leftAction.triggered()
0136         anchors.left: root.left
0137         height: 55
0138         width: 55
0139         display: Controls.AbstractButton.IconOnl
0140     }
0141 }