Differential D11316 Diff 29585 src/controls/private/BannerImage.qml

Changeset View

Standalone View

src/controls/private/BannerImage.qml

This file was added.

1		/*
2		* Copyright 2018 Marco Martin <mart@kde.org>
3		*
4		* This program is free software; you can redistribute it and/or modify
5		* it under the terms of the GNU Library General Public License as
6		* published by the Free Software Foundation; either version 2, or
7		* (at your option) any later version.
8		*
9		* This program is distributed in the hope that it will be useful,
10		* but WITHOUT ANY WARRANTY; without even the implied warranty of
11		* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12		* GNU Library General Public License for more details
13		*
14		* You should have received a copy of the GNU Library General Public
15		* License along with this program; if not, write to the
16		* Free Software Foundation, Inc.,
17		* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
18		*/
19
20		import QtQuick 2.6
21		import QtQuick.Layouts 1.2
22		import QtGraphicalEffects 1.0
23		import org.kde.kirigami 2.3 as Kirigami
24
25		Image {
26		id: root
27
28		/**
29		* title: string
30		* A title to be displayed on top of the image
31		*/
32		property alias title: heading.text
33
34		/**
35		* icon: var
36		* An icon to be displayed alongside the title.
37		* It can be a QIcon, a fdo-compatible icon name, or any url understood by Image
38		*/
39		property alias titleIcon: headingIcon.source
40
41		/**
42		* titleAlignment: Qt.Alignment
43		*/
44		property int titleAlignment: Qt.AlignTop \| Qt.AlignLeft
45
46		Layout.fillWidth: true
47
48		Layout.preferredWidth: title.implicitWidth
49		Layout.preferredHeight: source != "" ? width/(sourceSize.width / sourceSize.height) : Layout.minimumHeight
50		Layout.minimumHeight: title.height > 0 ? title.height + Kirigami.Units.smallSpacing * 2 : 0
51
52		fillMode: Image.PreserveAspectFit
53		asynchronous: true
54
55		LinearGradient {
56		anchors {
57		left: parent.left
58		right: parent.right
59		top: (root.titleAlignment & Qt.AlignTop) ? parent.top : undefined
60		bottom: (root.titleAlignment & Qt.AlignBottom) ? parent.bottom : undefined
61		}
62		visible: root.source != "" && root.title != "" && ((root.titleAlignment & Qt.AlignTop) \|\| (root.titleAlignment & Qt.AlignBottom))
63		height: title.height * 2
64		start: Qt.point(0, 0)
65		end: Qt.point(0, height)
66		gradient: Gradient {
67		GradientStop {
68		position: (root.titleAlignment & Qt.AlignTop) ? 0.0 : 1.0
69		color: Qt.rgba(0, 0, 0, 0.8)
70		}
71		GradientStop {
72		position: (root.titleAlignment & Qt.AlignTop) ? 1.0 : 0.0
73		color: "transparent"
74		}
75		}
76		}
77
78		RowLayout {
79		id: title
80		anchors {
81		left: root.titleAlignment & Qt.AlignLeft ? parent.left : undefined
82		top: root.titleAlignment & Qt.AlignTop ? parent.top : undefined
83		right: root.titleAlignment & Qt.AlignRight ? parent.right : undefined
84		bottom: root.titleAlignment & Qt.AlignBottom ? parent.bottom : undefined
85		horizontalCenter: root.titleAlignment & Qt.AlignHCenter ? parent.horizontalCenter : undefined
86		verticalCenter: root.titleAlignment & Qt.AlignVCenter ? parent.verticalCenter : undefined
87
88		margins: headingIcon.valid ? Kirigami.Units.smallSpacing * 2 : Kirigami.Units.largeSpacing
89		}
90		width: Math.min(implicitWidth, parent.width)
91		Kirigami.Icon {
92		id: headingIcon
93		Layout.minimumWidth: Kirigami.Units.iconSizes.large
94		Layout.minimumHeight: width
95		visible: valid
96		isMask: false
97		//TODO: find a better way to control selective coloring on Android
98		enabled: !Kirigami.Settings.isMobile
99		}
100		Kirigami.Heading {
101		id: heading
102		Layout.fillWidth: true
103		visible: text.length > 0
104		level: 1
105		color: source != "" ? "white" : Kirigami.Theme.textColor
106		wrapMode: Text.NoWrap
107		elide: Text.ElideRight
	davidedmundsonUnsubmitted Done this will never elide properly, the layout it's filling is not constrained. left: root.titleAlignment & Qt.AlignLeft ? parent.left : undefined right: root.titleAlignment & Qt.AlignRight ? parent.right : undefined will only have one. davidedmundson: this will never elide properly, the layout it's filling is not constrained. left: root.
108		}
109		}
110		}