controls/private/DefaultCardBackground.qml

0001
0002 /*
0003  *  SPDX-FileCopyrightText: 2019 Marco Martin <mart@kde.org>
0004  *
0005  *  SPDX-License-Identifier: LGPL-2.0-or-later
0006  */
0007 import QtQuick
0008 import org.kde.kirigami as Kirigami
0009
0010 /**
0011  * @brief This is the default background for Cards.
0012  *
0013  * It provides background feedback on hover and click events, border customizability, and the ability to change the radius of each individual corner.
0014  *
0015  * @inherit org::kde::kirigami::ShadowedRectangle
0016  */
0017 Kirigami.ShadowedRectangle {
0018     id: root
0019
0020 //BEGIN properties
0021     /**
0022      * @brief This property sets whether there should be a background change on a click event.
0023      *
0024      * default: ``false``
0025      */
0026     property bool clickFeedback: false
0027
0028     /**
0029      * @brief This property sets whether there should be a background change on a click event.
0030      *
0031      * default: ``false``
0032      */
0033     property bool hoverFeedback: false
0034
0035     /**
0036      * @brief This property holds the card's normal background color.
0037      *
0038      * default: ``Kirigami.Theme.backgroundColor``
0039      */
0040     property color defaultColor: Kirigami.Theme.backgroundColor
0041
0042     /**
0043      * @brief This property holds the color displayed when a click event is triggered.
0044      * @see DefaultCardBackground::clickFeedback
0045      */
0046     property color pressedColor: Kirigami.ColorUtils.tintWithAlpha(
0047                                      defaultColor,
0048                                      Kirigami.Theme.highlightColor, 0.3)
0049
0050     /**
0051      * @brief This property holds the color displayed when a hover event is triggered.
0052      * @see DefaultCardBackground::hoverFeedback
0053      */
0054     property color hoverColor: Kirigami.ColorUtils.tintWithAlpha(
0055                                    defaultColor,
0056                                    Kirigami.Theme.highlightColor, 0.1)
0057
0058     /**
0059      * @brief This property holds the border width which is displayed at the edge of DefaultCardBackground.
0060      *
0061      * default: ``1``
0062      */
0063     property int borderWidth: 1
0064
0065     /**
0066      * @brief This property holds the border color which is displayed at the edge of DefaultCardBackground.
0067      */
0068     property color borderColor: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0069
0070 //END properties
0071
0072     color: {
0073         if (root.parent.checked || (root.clickFeedback && (root.parent.down || root.parent.highlighted)))
0074             return root.pressedColor
0075         else if (root.hoverFeedback && root.parent.hovered)
0076             return root.hoverColor
0077         return root.defaultColor
0078     }
0079
0080     radius: Kirigami.Units.smallSpacing
0081
0082     border {
0083         width: root.borderWidth
0084         color: root.borderColor
0085     }
0086     shadow {
0087         size: Kirigami.Units.gridUnit
0088         color: Qt.rgba(0, 0, 0, 0.05)
0089         yOffset: 2
0090     }
0091
0092     // basic drop shadow
0093     Rectangle {
0094         anchors.left: parent.left
0095         anchors.right: parent.right
0096         anchors.top: parent.top
0097         anchors.topMargin: Math.round(Kirigami.Units.smallSpacing / 4)
0098
0099         radius: root.radius
0100         height: root.height
0101         color: Qt.darker(Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.6), 1.1)
0102         visible: !root.clickFeedback || !root.parent.down
0103
0104         z: -1
0105     }
0106 }