plugins/components/ListItem.qml

0001 /* This file is part of the KDE project
0002  * SPDX-FileCopyrightText: 2012 Arjen Hiemstra <ahiemstra@heimr.nl>
0003  *
0004  * SPDX-License-Identifier: GPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.3
0008 import org.krita.sketch 1.0
0009
0010 Item {
0011     id: base;
0012
0013     property alias title: title.text;
0014     property alias description: description.text;
0015     property alias gradient: background.gradient;
0016     property alias image: image;
0017     property alias imageShadow: imageShadow.visible;
0018
0019     signal clicked();
0020
0021     width: Constants.GridWidth > 1 ? Constants.GridWidth * 4 : 1;
0022     height: Constants.GridHeight > 1 ? Constants.GridHeight * 1.75 : 1;
0023
0024     Rectangle {
0025         id: background;
0026
0027         anchors {
0028             fill: parent;
0029             leftMargin: Constants.GridWidth * 0.25;
0030             rightMargin: Constants.GridWidth * 0.25;
0031             topMargin: Constants.GridHeight * 0.25;
0032             bottomMargin: Constants.GridHeight * 0.25;
0033         }
0034
0035         gradient: Gradient {
0036             GradientStop { position: 0; color: Settings.theme.color("components/listItem/background/start"); }
0037             GradientStop { position: 0.4; color: Settings.theme.color("components/listItem/background/stop"); }
0038         }
0039
0040         Shadow { anchors.top: parent.bottom; width: parent.width; height: Constants.GridHeight / 8; }
0041
0042         Image {
0043             id: image
0044
0045             anchors {
0046                 left: parent.left;
0047                 leftMargin: Constants.GridWidth * 0.125;
0048                 top: parent.top;
0049                 topMargin: Constants.GridHeight * 0.25;
0050                 bottom: parent.bottom;
0051                 bottomMargin: Constants.GridHeight * 0.25;
0052             }
0053
0054             width: Constants.GridWidth * 0.5;
0055
0056             asynchronous: true;
0057             fillMode: Image.PreserveAspectFit;
0058             clip: true;
0059             smooth: true;
0060
0061             sourceSize.width: width > height ? height : width;
0062             sourceSize.height: width > height ? height : width;
0063         }
0064
0065         Shadow {
0066             id: imageShadow;
0067
0068             visible: false;
0069
0070             anchors.horizontalCenter: image.horizontalCenter;
0071             anchors.top: image.bottom;
0072
0073             width: image.width;
0074             height: Constants.GridHeight / 8;
0075         }
0076
0077         Label {
0078             id: title;
0079
0080             anchors {
0081                 top: description.text != "" ? parent.top : undefined;
0082                 verticalCenter: description.text != "" ? undefined : parent.verticalCenter;
0083                 topMargin: Constants.GridHeight * 0.25;
0084                 left: image.source != "" ? image.right : parent.left;
0085                 leftMargin: Constants.GridWidth * 0.25;
0086                 right: parent.right;
0087                 rightMargin: Constants.GridWidth * 0.25;
0088             }
0089
0090             verticalAlignment: Text.AlignTop;
0091             color: Settings.theme.color("components/listItem/title");
0092         }
0093
0094         Label {
0095             id: description;
0096
0097             anchors {
0098                 bottom: parent.bottom;
0099                 bottomMargin:Constants.GridHeight * 0.25;
0100                 left: image.source != "" ? image.right : parent.left;
0101                 leftMargin: Constants.GridWidth * 0.25;
0102                 right: parent.right;
0103                 rightMargin: Constants.GridWidth * 0.25;
0104             }
0105
0106             color: Settings.theme.color("components/listItem/description");
0107             font.styleName: "Light";
0108             font.pixelSize: Constants.SmallFontSize;
0109             verticalAlignment: Text.AlignBottom;
0110         }
0111     }
0112
0113     MouseArea {
0114         anchors.fill: parent;
0115         onClicked: {
0116             base.clicked();
0117         }
0118     }
0119 }