Differential D11316 Diff 29626 src/controls/templates/AbstractCard.qml

Changeset View

Standalone View

View Options

src/controls/templates/AbstractCard.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 QtQuick.Templates 2.0 as T
23​import org.kde.kirigami 2.3 as Kirigami
24​
25​/**
26​ * A AbstractCard is the base for cards. A Card is a visual object that serves
27​ * as an entry point for more detailed information. An abstractCard is empty,
28​ * providing just the look and the base properties and signals for an ItemDelegate.
29​ * It can be filled with any custom layout of items, its content is organized
30​ * in 3 properties: header, contentItem and footer.
31​ * Use this only when you need particular custom contents, for a standard layout
32​ * for cards, use the Card component.
33​ *
34​ * @see Card
35​ * @inherits QtQuick.Templates.ItemDelegate
36​ * @since 2.4
37​ */
38​T.ItemDelegate {
39​ id: root
40​
41​ /**
42​ * header: Item
43​ * This item serves as header, it will be put either on top if headerOrientation
44​ * is Qt.Vertical(default) or on the left if it's Qt.Horizontal
45​ */
46​ property Item header
47​
48​ /**
49​ * headerOrientation: Qt.Orientation
50​ * If Qt.Vertical the header will be positioned on top(default),
51​ * if Qt.Horizontal will be positioned on the left (or right if an RTL layout is used)
52​ */
53​ property int headerOrientation: Qt.Vertical
54​
55​ /**
56​ * footer: Item
57​ * This item serves as footer, and it will be positioned at the bottom of the card.
58​ */
59​ property Item footer
60​
61​ /**
62​ * showClickFeedback: bool
63​ * if true, when clicking or tapping on the card area, the card will be colored
64​ * to show a visual click feedback.
65​ * Use this if you want to do an action in the onClicked signal handler of the card.
66​ */
67​ property bool showClickFeedback: false
68​
69​ Layout.fillWidth: true
70​
davidedmundsonUnsubmitted
Not Done

are you basing the implicit size from the size of the parent layout?

davidedmundson: are you basing the implicit size from the size of the parent layout?
martAuthorUnsubmitted
Not Done

no, when it's in a layout the size hints are based purely on the content.

the different behavior is when it's in a gridview or a listview, where its sized is based respectively on the cell size or to be expanding to be as wide as the listview.
it is kindof hacky, but is the only way i found that "just works"

mart: no, when it's in a layout the size hints are based purely on the content. the different…
martAuthorUnsubmitted
Not Done

in the latest version i get zero binding loops in fact

mart: in the latest version i get zero binding loops in fact
davidedmundsonUnsubmitted
Not Done

The following should behave the same and it keeps all the semantic meaning and it means data flows in the right directions

implicitHeight: mainLayout.implicitHeight + topPadding + bottomPadding
height: internal.completed && internal.gridView
        ? internal.gridView.cellHeight - Kirigami.Units.largeSpacing*2 : implicitHeight

(not tested as I have an error running the gallery, see IRC)

davidedmundson: The following should behave the same and it keeps all the semantic meaning and it means data…
martAuthorUnsubmitted
Not Done

seems to behave the same, but with it i have a binding loop on implicitHeight now

mart: seems to behave the same, but with it i have a binding loop on implicitHeight now
71​ implicitWidth: internal.completed
72​ ? (internal.listView ? internal.listView.width - internal.listView.spacing * 2 :
73​ (internal.gridView ? Math.min(internal.gridView.cellWidth, internal.gridView.maximumColumnWidth) - Kirigami.Units.largeSpacing*2 : Math.max(background.implicitWidth, mainLayout.implicitWidth) + leftPadding + rightPadding))
74​ : 0
75​
76​ implicitHeight: internal.completed && internal.gridView
77​ ? internal.gridView.cellHeight - Kirigami.Units.largeSpacing*2
78​ : mainLayout.implicitHeight + topPadding + bottomPadding
79​
80​ x: internal.listView ? internal.listView.spacing : (internal.gridView ? internal.gridView.cellWidth - width: 0)
81​
82​ //in grid views align the cells in the middle
83​ anchors.left: internal.gridView !== null ? parent.left : undefined
84​ anchors.leftMargin: internal.gridView === null || internal.gridView.width <= internal.gridView.maximumColumnWidth ? 0 : (index % 2 === 0 ? Math.max(0, internal.gridView.cellWidth - internal.gridView.maximumColumnWidth) : internal.gridView.cellWidth)
85​
86​ hoverEnabled: !Kirigami.Settings.isMobile && showClickFeedback
87​ //if it's in a CardLayout, try to expand horizontal cards to both columns
88​ Layout.columnSpan: headerOrientation == Qt.Horizontal && parent.hasOwnProperty("columns") ? parent.columns : 1
89​
90​ Kirigami.Theme.inherit: false
91​ Kirigami.Theme.colorSet: Kirigami.Theme.View
92​
93​ topPadding: Kirigami.Units.largeSpacing
94​ leftPadding: Kirigami.Units.largeSpacing
95​ bottomPadding: Kirigami.Units.largeSpacing
96​ rightPadding: Kirigami.Units.largeSpacing
97​
98​ GridLayout {
99​ id: mainLayout
100​ rowSpacing: root.topPadding
101​ columnSpacing: root.leftPadding
102​ anchors {
103​ top: parent.top
104​ left: parent.left
105​ right: parent.right
106​ leftMargin: root.leftPadding
107​ topMargin: root.topPadding
108​ rightMargin: root.rightPadding
109​ //never anchor bottom, to not have binding loops
110​ }
111​ columns: headerOrientation == Qt.Vertical ? 1 : 2
112​ function preferredHeight(item) {
113​ if (!item) {
114​ return 0;
115​ }
116​ if (item.Layout.preferredHeight > 0) {
117​ return item.Layout.preferredHeight;
118​ }
119​ return item.implicitHeight
120​ }
121​ Item {
122​ id: headerParent
123​ Layout.fillWidth: true
124​ Layout.fillHeight: root.headerOrientation == Qt.Horizontal
125​ Layout.rowSpan: root.headerOrientation == Qt.Vertical ? 1 : 2
126​ Layout.preferredWidth: header ? header.implicitWidth : 0
127​ Layout.preferredHeight: root.headerOrientation == Qt.Vertical ? mainLayout.preferredHeight(header) : -1
128​ }
129​ Item {
130​ id: contentItemParent
131​ Layout.fillWidth: true
132​ Layout.preferredWidth: contentItem ? contentItem.implicitWidth : 0
133​ Layout.preferredHeight: mainLayout.preferredHeight(contentItem)
134​ }
135​ Item {
136​ id: footerParent
137​ Layout.fillWidth: true
138​ Layout.preferredWidth: footer ? footer.implicitWidth : 0
139​ Layout.preferredHeight: mainLayout.preferredHeight(footer)
140​ }
141​ }
142​ QtObject {
143​ id: internal
144​ property bool completed: false
145​ property ListView listView
146​ property GridView gridView
147​ }
148​//BEGIN signal handlers
149​ onContentItemChanged: {
150​ if (!contentItem) {
151​ return;
152​ }
153​
154​ contentItem.parent = contentItemParent;
155​ contentItem.anchors.fill = contentItemParent;
156​ }
157​ onHeaderChanged: {
158​ if (!header) {
159​ return;
160​ }
161​
162​ header.parent = headerParent;
163​ header.anchors.fill = headerParent;
164​ }
165​ onFooterChanged: {
166​ if (!footer) {
167​ return;
168​ }
169​
170​ //make the footer always looking it's at the bottom of the card
171​ footer.parent = footerParent;
172​ footer.anchors.left = footerParent.left;
173​ footer.anchors.top = footerParent.top;
174​ footer.anchors.right = footerParent.right;
175​ footer.anchors.topMargin = Qt.binding(function() {return (root.height - root.bottomPadding - root.topPadding) - (footerParent.y + footerParent.height)});
176​ }
177​ Component.onCompleted: {
178​ internal.listView = ListView.view;
179​ //only consider gridviews which are CardsGridView
180​ if (GridView.view && GridView.view.hasOwnProperty("maximumColumnWidth")) {
181​ internal.gridView = GridView.view;
182​ }
183​ internal.completed = true;
184​ contentItemChanged();
185​ }
186​//END signal handlers
187​}