ui/components/BottomDrawer.qml

0001 // SPDX-FileCopyrightText: 2023 Mathis Brüchert <mbb@kaidan.im>
0002 //
0003 // SPDX-License-Identifier: LGPL-2.0-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0004
0005 import QtQuick 2.15
0006 import QtQuick.Controls 2.15 as QQC2
0007 import org.kde.kirigami 2.20 as Kirigami
0008 import QtQuick.Layouts 1.15
0009 import org.kde.powerplant 1.0
0010
0011 /**
0012 * @brief A bottom drawer component with a drag indicator.
0013 *
0014 * Example:
0015 * @code
0016 * Components.BottomDrawer {
0017 *   id: drawer
0018 *   headerContentItem: Kirigami.Heading {
0019 *       text: "Drawer"
0020 *   }
0021 *
0022 *   drawerContentItem: ColumnLayout {
0023 *       Kirigami.BasicListItem {
0024 *           label: "Action 1"
0025 *           icon: "list-add"
0026 *           onClicked: {
0027 *               doSomething()
0028 *               drawer.close()
0029 *           }
0030 *       }
0031 *       Kirigami.BasicListItem{
0032 *           label: "Action 2"
0033 *           icon: "list-add"
0034 *           onClicked: {
0035 *               doSomething()
0036 *               drawer.close()
0037 *           }
0038 *       }
0039 *   }
0040 * }
0041 * @endcode
0042 */
0043 QQC2.Drawer {
0044     id: root
0045
0046     /**
0047     * @brief This property holds the content item of the drawer
0048     */
0049     property alias drawerContentItem: drawerContent.contentItem
0050
0051     /**
0052     * @brief This property holds the content item of the drawer header
0053     *
0054     * when no headerContentItem is set, the header will not be displayed
0055     */
0056     property alias headerContentItem: headerContent.contentItem
0057
0058
0059
0060     edge: Qt.BottomEdge
0061     height:contents.implicitHeight
0062     width: applicationWindow().width
0063
0064     // makes sure the drawer is not able to be opened when not trigered
0065     interactive : false
0066
0067     background: Kirigami.ShadowedRectangle {
0068         corners {
0069             topRightRadius: 10
0070             topLeftRadius: 10
0071         }
0072
0073         shadow {
0074             size: 20
0075             color: Qt.rgba(0, 0, 0, 0.5)
0076         }
0077
0078         color: Kirigami.Theme.backgroundColor
0079     }
0080
0081     onAboutToShow: root.interactive = true
0082     onClosed: root.interactive = false
0083
0084     ColumnLayout {
0085         id: contents
0086
0087         spacing: 0
0088         anchors.fill: parent
0089
0090         Kirigami.ShadowedRectangle {
0091             id: headerBackground
0092
0093             visible: headerContentItem
0094             height: header.implicitHeight
0095
0096             Kirigami.Theme.colorSet: Kirigami.Theme.Header
0097             color: Kirigami.Theme.backgroundColor
0098
0099             Layout.fillWidth: true
0100
0101             corners {
0102                 topRightRadius: 10
0103                 topLeftRadius: 10
0104             }
0105
0106             ColumnLayout{
0107                 id:header
0108
0109                 anchors.fill: parent
0110                 spacing:0
0111                 clip: true
0112
0113                 Handle {
0114                     // drag indicator displayed when there is a headerContentItem
0115                     id: handle
0116
0117                     Layout.bottomMargin: 0
0118                 }
0119
0120                 QQC2.Control {
0121                     id: headerContent
0122
0123                     topPadding: 0
0124                     leftPadding: Kirigami.Units.mediumSpacing + handle.height
0125                     rightPadding: Kirigami.Units.mediumSpacing + handle.height
0126                     bottomPadding: Kirigami.Units.mediumSpacing + handle.height
0127
0128                     Layout.fillHeight: true
0129                     Layout.fillWidth: true
0130                 }
0131
0132                 Kirigami.Separator {
0133                     Layout.fillWidth: true
0134                 }
0135             }
0136         }
0137
0138         Handle {
0139             // drag indecator displayed when there is no headerContentItem
0140             visible: !headerContentItem
0141         }
0142
0143         QQC2.Control {
0144             id: drawerContent
0145
0146             topPadding: 0
0147             leftPadding: 0
0148             rightPadding: 0
0149             bottomPadding: 0
0150
0151             Layout.fillWidth: true
0152         }
0153     }
0154     component Handle: Rectangle {
0155         color: Kirigami.Theme.textColor
0156         radius: height / 2
0157         opacity: 0.5
0158         width: Kirigami.Units.gridUnit * 2.5
0159         height: Kirigami.Units.gridUnit / 4
0160
0161         Layout.margins: Kirigami.Units.mediumSpacing
0162         Layout.alignment: Qt.AlignHCenter
0163     }
0164 }