import QtQuick 2.0 import Sailfish.Silica 1.0 Item { id: header property int value: 0; property string title: ""; property string description: ""; property string image: ""; property string bg: ""; width: parent.width height: icon.height + Theme.paddingLarge*2 Rectangle { id: bgImage anchors.fill: parent opacity: 0.2 gradient: Gradient { GradientStop { position: 0.0; color: Theme.highlightBackgroundColor } GradientStop { position: 1.0; color: Theme.highlightBackgroundColor } } Image { anchors.fill: bgImage asynchronous: true fillMode: Image.PreserveAspectCrop source: bg opacity: 0.8 } } Image { id: icon anchors { left: parent.left leftMargin: Theme.paddingLarge top: parent.top topMargin: Theme.paddingLarge } asynchronous: true width: description === "" ? Theme.iconSizeMedium : Theme.iconSizeLarge height: width source: if (icon.status === Image.Error) source = "../../images/icon-l-profile.svg?" + (pressed ? Theme.highlightColor : Theme.primaryColor) else image } Column { anchors { left: icon.right leftMargin: Theme.paddingLarge right: parent.right rightMargin: Theme.paddingLarge verticalCenter: parent.verticalCenter } Label { id: ttl text: if (title === "") { description.split('@')[0] } else title height: contentHeight color: Theme.highlightColor font.pixelSize: Theme.fontSizeLarge font.family: Theme.fontFamilyHeading horizontalAlignment: Text.AlignRight truncationMode: TruncationMode.Fade width: parent.width } Label { height: description === "" ? 0 : contentHeight text: "@"+description color: Theme.secondaryHighlightColor font.pixelSize: Theme.fontSizeSmall font.family: Theme.fontFamilyHeading horizontalAlignment: Text.AlignRight truncationMode: TruncationMode.Fade width: parent.width } } }