diff --git a/examples/gallerydata/contents/ui/gallery/FormLayoutGallery.qml b/examples/gallerydata/contents/ui/gallery/FormLayoutGallery.qml index 7e3135ce..60a3b862 100644 --- a/examples/gallerydata/contents/ui/gallery/FormLayoutGallery.qml +++ b/examples/gallerydata/contents/ui/gallery/FormLayoutGallery.qml @@ -1,80 +1,95 @@ import QtQuick 2.6 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.2 import org.kde.kirigami 2.3 as Kirigami Kirigami.ScrollablePage { title: "Form Layout" Kirigami.FormLayout { + id: layout width: 500 height: 500 TextField { - id: uh Kirigami.FormData.label: "Label:" } TextField { - id: uh2 } TextField { - id: uh3 Kirigami.FormData.label:"Longer label:" } Kirigami.Separator { Kirigami.FormData.isSection: true } TextField { Kirigami.FormData.label: "After separator:" } ComboBox { Kirigami.FormData.label: "Combo:" model: ["First", "Second", "Third"] } CheckBox { checked: true text: "Option" } Kirigami.Separator { Kirigami.FormData.isSection: true Kirigami.FormData.label: "Section title" } TextField { Kirigami.FormData.label: "Label:" } Item { width:1 height:1 Kirigami.FormData.isSection: true } TextField { Kirigami.FormData.label: "Section without line:" } TextField { } Item { width:1 height:1 Kirigami.FormData.isSection: true Kirigami.FormData.label: "Section with title without line" } TextField { Kirigami.FormData.label: "Title:" } ColumnLayout { Layout.rowSpan: 3 Kirigami.FormData.label: "Label for radios:" RadioButton { checked: true text: "One" } RadioButton { text: "Two" } RadioButton { text: "Three" } } + Button { + text: item ? "Remove Field" : "Add Field" + property var item + onClicked: { + if (item) { + item.destroy(); + } else { + item = dyncomponent.createObject(layout); + } + } + Component { + id: dyncomponent + TextField { + Kirigami.FormData.label: "Generated Title:" + } + } + } } } diff --git a/src/controls/Heading.qml b/src/controls/Heading.qml index 713c8c16..410897fd 100644 --- a/src/controls/Heading.qml +++ b/src/controls/Heading.qml @@ -1,84 +1,84 @@ /* * Copyright 2012 by Sebastian Kügler * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA. */ import QtQuick 2.0 import QtQuick.Controls 2.0 as QQC2 import org.kde.kirigami 2.2 /** * A heading label used for subsections of texts. * * The characteristics of the text will be automatically set according to the * plasma Theme. Use this components for section titles or headings in your UI, * for example page or section titles. * * Example usage: * * @code * import org.kde.kirigami 2.2 as Kirigami * [...] * Column { * Kirigami.Heading { * text: "Apples in the sunlight" * level: 2 * } * [...] * } * @endcode * * The most important property is "text", which applies to the text property of * Label. See PlasmaComponents Label and primitive QML Text element API for * additional properties, methods and signals. * @inherits QtQuick.Controls.Label */ QQC2.Label { id: heading /** * level: int * The level determines how big the section header is display, values * between 1 (big) and 5 (small) are accepted */ property int level: 1 /** * step: int * adjust the point size in between a level and another. */ property int step: 2 lineHeight: 1.2 font.pointSize: headerPointSize(level) - font.weight: level <= 4 ? Font.Light : Fornt.Normal + font.weight: level <= 4 ? Font.Light : Font.Normal wrapMode: Text.WordWrap opacity: 0.8 function headerPointSize(l) { var n = Theme.defaultFont.pointSize; var s; if (l > 4) { s = n } else if (l < 2) { s = n + (5*step) } else { s = n + ((5-level)*2) } return s; } } diff --git a/src/controls/templates/FormLayout.qml b/src/controls/templates/FormLayout.qml index 2695bf60..dca5f702 100644 --- a/src/controls/templates/FormLayout.qml +++ b/src/controls/templates/FormLayout.qml @@ -1,108 +1,131 @@ /* * Copyright 2017 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2 or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.6 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.2 import org.kde.kirigami 2.3 as Kirigami Control { id: root implicitWidth: lay.implicitWidth implicitHeight: lay.implicitHeight Layout.preferredHeight: lay.implicitHeight property bool wideMode: width > Kirigami.Units.gridUnit * 15 GridLayout { id: lay columns: root.wideMode ? 2 : 1 rowSpacing: Kirigami.Units.smallSpacing columnSpacing: Kirigami.Units.smallSpacing anchors { left: parent.left top: parent.top right: parent.right } } - default property list __items - on__ItemsChanged: { - for (var i = 0; i < __items.length; ++i) { + Item { + id: temp + } + // default property list __items + onChildrenChanged: { + var __items = children; + for (var i = 2; i < __items.length; ++i) { var item = __items[i]; - //skip items that are already there + //skip items that are already there if (item.parent && item.parent.parent == lay) { continue; } - var itemContainer = itemComponent.createObject(root, {"item": item}) + var itemContainer = itemComponent.createObject(temp, {"item": item}) item.parent = itemContainer; item.anchors.fill = itemContainer; //if section, label goes after the separator if (item.Kirigami.FormData.isSection) { //put an extra spacer - var placeHolder = placeHolderComponent.createObject(lay); + var placeHolder = placeHolderComponent.createObject(lay, {"item": item}); placeHolder.Layout.colSpan = 2; itemContainer.parent = lay; } - var buddy = buddyComponent.createObject(lay, {"formData": item.Kirigami.FormData}) + var buddy = buddyComponent.createObject(lay, {"item": item}) itemContainer.parent = lay; //if section, wee need another placeholder if (item.Kirigami.FormData.isSection) { - var placeHolder = placeHolderComponent.createObject(lay); + var placeHolder = placeHolderComponent.createObject(lay, {"item": item}); placeHolder.parent = lay; } } } - Component.onCompleted: __itemsChanged() + + Component.onCompleted: childrenChanged() Component { id: itemComponent Item { + id: container property var item implicitWidth: item.implicitWidth Layout.preferredHeight: Math.max(item.Layout.preferredHeight, item.implicitHeight) Layout.alignment: (root.wideMode ? Qt.AlignLeft : Qt.AlignHCenter) | Qt.AlignVCenter Layout.fillWidth: item.Kirigami.FormData.isSection Layout.columnSpan: item.Kirigami.FormData.isSection ? lay.columns : 1 + onItemChanged: { + if (!item) { + container.destroy(); + } + } } } Component { id: placeHolderComponent Item { + property var item width: Kirigami.Units.smallSpacing height: Kirigami.Units.smallSpacing + onItemChanged: { + if (!item) { + labelItem.destroy(); + } + } } } Component { id: buddyComponent Kirigami.Heading { - property var formData - text: formData.label + id: labelItem + property var item + text: item.Kirigami.FormData.label - level: formData.isSection ? 3 : 5 + level: item.Kirigami.FormData.isSection ? 3 : 5 - Layout.preferredHeight: formData.label.length > 0 ? implicitHeight : Kirigami.Units.smallSpacing - Layout.alignment: root.wideMode ? (Qt.AlignRight | (formData.buddyFor.height > height * 2 ? Qt.AlignTop : Qt.AlignVCenter)) + Layout.preferredHeight: item.Kirigami.FormData.label.length > 0 ? implicitHeight : Kirigami.Units.smallSpacing + Layout.alignment: root.wideMode ? (Qt.AlignRight | (item.Kirigami.FormData.buddyFor.height > height * 2 ? Qt.AlignTop : Qt.AlignVCenter)) : (Qt.AlignLeft | Qt.AlignBottom) - Layout.topMargin: formData.buddyFor.height > height * 2 ? Kirigami.Units.smallSpacing : 0 + Layout.topMargin: item.Kirigami.FormData.buddyFor.height > height * 2 ? Kirigami.Units.smallSpacing : 0 + onItemChanged: { + if (!item) { + labelItem.destroy(); + } + } } } }