import/qml/CardDelegate.qml

0001 /*
0002  * Copyright 2021 by Aditya Mehra <aix.m@outlook.com>
0003  *
0004  * Licensed under the Apache License, Version 2.0 (the "License");
0005  * you may not use this file except in compliance with the License.
0006  * You may obtain a copy of the License at
0007  *
0008  *    http://www.apache.org/licenses/LICENSE-2.0
0009  *
0010  * Unless required by applicable law or agreed to in writing, software
0011  * distributed under the License is distributed on an "AS IS" BASIS,
0012  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0013  * See the License for the specific language governing permissions and
0014  * limitations under the License.
0015  *
0016  */
0017
0018 import QtQuick 2.15
0019 import QtQuick.Layouts 2.15
0020 import QtQuick.Controls 2.15 as Controls
0021 import org.kde.kirigami 2.19 as Kirigami
0022 import Mycroft 1.0 as Mycroft
0023 import Qt5Compat.GraphicalEffects
0024
0025 Delegate {
0026     id: root
0027     leftPadding: 0
0028     bottomPadding: 0
0029     topPadding: 0
0030     rightPadding: 0
0031     property int gridUnit: Mycroft.Units.gridUnit
0032
0033     skillBackgroundColorOverlay: "black"
0034
0035     rightInset: gridUnit * 2
0036     leftInset: gridUnit * 2
0037     topInset: gridUnit * 2
0038     bottomInset: gridUnit * 2
0039
0040     // Allows cards to set the background image of only the card
0041     // Allows setting a color overlay for card background
0042     property alias cardBackgroundOverlayColor: cardBackground.color
0043     property alias cardBackgroundImage: backgroundImage.source
0044     property int cardRadius: 20
0045
0046     background: Rectangle {
0047         id: cardBackground
0048         radius: cardRadius
0049         color: Qt.rgba(0, 0, 0, 0.5)
0050
0051         Image {
0052             id: backgroundImage
0053             anchors.fill: parent
0054             z: -1
0055             source: ""
0056             visible: source != "" ? 1 : 0
0057             layer.enabled: source != "" ? 1 : 0
0058             layer.effect: OpacityMask {
0059                 maskSource: Rectangle {
0060                     width: backgroundImage.width
0061                     height: backgroundImage.height
0062                     visible: false
0063                     radius: cardRadius
0064                 }
0065             }
0066         }
0067     }
0068
0069     contentItem: Item {
0070         z: 2
0071     }
0072 }