103 lines
2.4 KiB
QML
103 lines
2.4 KiB
QML
import QtQuick 2.7
|
|
import QtGraphicalEffects 1.0
|
|
|
|
Item
|
|
{
|
|
id: itemRoot
|
|
opacity: distance
|
|
property int duration: 100
|
|
width: parent.width
|
|
height: descriptionLabel.height + textBoxPaddingBottom + textBoxPaddingTop
|
|
|
|
property bool hover: false
|
|
|
|
property int textBoxPaddingTop: sizes.paddingTopItemPower
|
|
property int textBoxPaddingLeft: sizes.paddingLeftItemPower
|
|
property int textBoxPaddingBottom: sizes.paddingBottomItemPower
|
|
property int textBoxPaddingRight: sizes.paddingRightItemPower
|
|
|
|
property int imagePadding: sizes.imagePaddingItemPower
|
|
property int textBoxMargin: sizes.spacingItemPower
|
|
|
|
signal clicked()
|
|
signal entered()
|
|
|
|
transform: Scale
|
|
{
|
|
origin.x: itemRoot.height + textBoxMargin
|
|
origin.y: itemRoot.height / 2
|
|
xScale: distance
|
|
yScale: distance
|
|
}
|
|
|
|
Behavior on distance
|
|
{
|
|
PropertyAnimation { duration: itemRoot.duration }
|
|
}
|
|
|
|
property real distance: 1.0
|
|
property string icon: "icons/no_avatar.svg"
|
|
property string title: ""
|
|
readonly property int imageWidth: itemRoot.height - (imagePadding * 2)
|
|
|
|
|
|
Rectangle
|
|
{
|
|
width: itemRoot.height
|
|
height: itemRoot.height
|
|
color: ( hover ? colors.iconBgHover : colors.iconBg )
|
|
}
|
|
|
|
Image
|
|
{
|
|
id: powerItemIcon
|
|
source: icon
|
|
sourceSize.width: imageWidth
|
|
sourceSize.height: imageWidth
|
|
x: imagePadding
|
|
y: imagePadding
|
|
opacity: 0
|
|
}
|
|
|
|
ColorOverlay
|
|
{
|
|
id: powerItemIconOverlay
|
|
anchors.fill: powerItemIcon
|
|
source: powerItemIcon
|
|
color: ( hover ? colors.iconHover : colors.icon )
|
|
opacity: parent.opacity
|
|
}
|
|
|
|
Rectangle
|
|
{
|
|
id: textBackground
|
|
x: itemRoot.height + textBoxMargin
|
|
width: parent.width - x
|
|
height: itemRoot.height
|
|
color: ( hover ? colors.textBgHover : colors.textBg )
|
|
}
|
|
|
|
Text
|
|
{
|
|
id: descriptionLabel
|
|
text: itemRoot.title
|
|
color: ( hover ? colors.textHover : colors.text )
|
|
width: parent.width - x - textBoxPaddingRight
|
|
|
|
font: fonts.listItemMed
|
|
elide: Text.ElideRight
|
|
|
|
x: textBackground.x + textBoxPaddingLeft
|
|
y: textBoxPaddingTop
|
|
}
|
|
|
|
MouseArea
|
|
{
|
|
width: itemRoot.width
|
|
height: itemRoot.height
|
|
hoverEnabled: true
|
|
|
|
onClicked: itemRoot.clicked()
|
|
onEntered: itemRoot.entered()
|
|
}
|
|
}
|