ui/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
0010 import org.kde.ytmusic 1.0
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         background: Kirigami.ShadowedRectangle{
0033             Kirigami.Theme.inherit: false
0034             Kirigami.Theme.colorSet: Kirigami.Theme.Window
0035             border.width: 1
0036             border.color: if (parent.down){
0037                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0038                 }else if(parent.hovered){
0039                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0040                 }else{
0041                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0042                 }
0043             color: if (parent.down){
0044                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0045                 }else if(parent.hovered){
0046                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0047                 }else{
0048                     Kirigami.Theme.backgroundColor
0049                 }
0050             Behavior on color {
0051                     enabled: true
0052                     ColorAnimation {
0053                         duration: Kirigami.Units.longDuration
0054                         easing.type: Easing.OutCubic
0055                     }
0056                 }
0057             Behavior on border.color {
0058                 enabled: true
0059                 ColorAnimation {
0060                     duration: Kirigami.Units.longDuration
0061                     easing.type: Easing.OutCubic
0062                 }
0063             }
0064             corners.topRightRadius: 10
0065             corners.bottomRightRadius: 10
0066
0067         }
0068         contentItem: Item{
0069             Kirigami.Icon{
0070                 implicitHeight: Kirigami.Units.gridUnit *1.2
0071                 source: root.rightAction.icon.name
0072                 anchors.centerIn: parent
0073             }
0074         }
0075         text: root.rightAction.text
0076         onClicked: root.rightAction.triggered()
0077         anchors.right: root.right
0078         height: 55
0079         width: 55
0080         display: Controls.AbstractButton.IconOnly
0081     }
0082     Controls.Button {
0083         id: leftButton
0084         background: Kirigami.ShadowedRectangle{
0085             Kirigami.Theme.inherit: false
0086             Kirigami.Theme.colorSet: Kirigami.Theme.Window
0087             border.width: 1
0088             border.color: if (parent.down){
0089                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
0090                 }else if(parent.hovered){
0091                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0092                 }else{
0093                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
0094                 }
0095             color: if (parent.down){
0096                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
0097                 }else if(parent.hovered){
0098                     Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
0099                 }else{
0100                     Kirigami.Theme.backgroundColor
0101                 }
0102             Behavior on color {
0103                     enabled: true
0104                     ColorAnimation {
0105                         duration: Kirigami.Units.longDuration
0106                         easing.type: Easing.OutCubic
0107                     }
0108                 }
0109             Behavior on border.color {
0110                 enabled: true
0111                 ColorAnimation {
0112                     duration: Kirigami.Units.longDuration
0113                     easing.type: Easing.OutCubic
0114                 }
0115             }
0116             corners.topLeftRadius: 10
0117             corners.bottomLeftRadius: 10
0118         }
0119         contentItem: Item{
0120             Kirigami.Icon{
0121                 implicitHeight: Kirigami.Units.gridUnit * 1.2
0122                 source: root.leftAction.icon.name
0123                 anchors.centerIn: parent
0124             }
0125         }
0126         text: root.leftAction.text
0127         onClicked: root.leftAction.triggered()
0128         anchors.left: root.left
0129         height: 55
0130         width: 55
0131         display: Controls.AbstractButton.IconOnly
0132     }
0133 }