From 49691e08473db195890d0367e3dacf13f19388f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Fri, 3 Mar 2023 08:48:03 +0800 Subject: Tab item count info is in the content --- HomeDefault.ui.qml | 33 ++++++--------------------------- TabItem.ui.qml | 2 +- 2 files changed, 7 insertions(+), 28 deletions(-) diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index 917102c..4f420d6 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -252,7 +252,6 @@ Flickable { GridView { id: tabs - property int currentItemCount: 8 interactive: false anchors { left: parent.left @@ -264,42 +263,22 @@ Flickable { cellWidth: 142 cellHeight: 46 implicitHeight: width < 284 ? cellHeight * 5 : width < 426 ? cellHeight * 3 : width < 710 ? cellHeight * 2 : cellHeight - model: ListModel { - ListElement { - label: "Web Design" - count: 8 - } - ListElement { - label: "Development" - count: 6 - } - ListElement { - label: "Graphic Design" - count: 4 - } - ListElement { - label: "Marketing" - count: 2 - } - ListElement { - label: "Finance" - count: 2 - } - } + model: ["Web Design", "Development", "Graphic Design", "Marketing", "Finance"] delegate: TabItem {} } } StackLayout { currentIndex: tabs.currentIndex + property int currentCount: 8 Layout.preferredHeight: width < 576 ? width * 1.3 - * tabs.currentItemCount + * currentCount : width < 768 ? width / 2 * 1.3 - * (tabs.currentItemCount + tabs.currentItemCount % 2) / 2 + * (currentCount + currentCount % 2) / 2 : width < 992 ? width / 3 * 1.3 - * (tabs.currentItemCount + (tabs.currentItemCount + 1) % 3) / 3 + * (currentCount + (currentCount + 1) % 3) / 3 : width / 4 * 1.3 - * (tabs.currentItemCount + (tabs.currentItemCount + 2) % 4) / 4 + * (currentCount + (currentCount + 2) % 4) / 4 Repeater { id: tabsContent diff --git a/TabItem.ui.qml b/TabItem.ui.qml index bf895d4..c44f1a3 100644 --- a/TabItem.ui.qml +++ b/TabItem.ui.qml @@ -18,7 +18,7 @@ Button { height: 38 horizontalPadding: 16 verticalPadding: 8 - text: label + text: modelData contentItem: Text { text: button.text color: index == currentIndex ? "white" : "#066ac9" -- cgit v1.2.3 From 640d2ccc4a9caa9b2288277cec2a19e2fc3e7239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Fri, 3 Mar 2023 09:01:52 +0800 Subject: This works without relying on custom property that needs to be set upon component completion --- HomeDefault.ui.qml | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index 4f420d6..0f706cf 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -270,15 +270,17 @@ Flickable { StackLayout { currentIndex: tabs.currentIndex - property int currentCount: 8 - Layout.preferredHeight: width < 576 ? width * 1.3 - * currentCount - : width < 768 ? width / 2 * 1.3 - * (currentCount + currentCount % 2) / 2 - : width < 992 ? width / 3 * 1.3 - * (currentCount + (currentCount + 1) % 3) / 3 + Layout.preferredHeight: width < 576 + ? width * 1.3 + * tabsContent.itemAt(tabsContent.index).count + : width < 768 + ? width / 2 * 1.3 + * (tabsContent.itemAt(tabsContent.index).count + tabsContent.itemAt(tabsContent.index).count % 2) / 2 + : width < 992 + ? width / 3 * 1.3 + * (tabsContent.itemAt(tabsContent.index).count + (tabsContent.itemAt(tabsContent.index).count + 1) % 3) / 3 : width / 4 * 1.3 - * (currentCount + (currentCount + 2) % 4) / 4 + * (tabsContent.itemAt(tabsContent.index).count + (tabsContent.itemAt(tabsContent.index).count + 2) % 4) / 4 Repeater { id: tabsContent -- cgit v1.2.3 From d619302026e10cc2117c96f1003ef70e9b1f378a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Fri, 3 Mar 2023 09:25:56 +0800 Subject: Correct the index referred on previous commit --- HomeDefault.ui.qml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index 0f706cf..be11a37 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -272,15 +272,15 @@ Flickable { currentIndex: tabs.currentIndex Layout.preferredHeight: width < 576 ? width * 1.3 - * tabsContent.itemAt(tabsContent.index).count + * tabsContent.itemAt(currentIndex).count : width < 768 ? width / 2 * 1.3 - * (tabsContent.itemAt(tabsContent.index).count + tabsContent.itemAt(tabsContent.index).count % 2) / 2 + * (tabsContent.itemAt(currentIndex).count + tabsContent.itemAt(currentIndex).count % 2) / 2 : width < 992 ? width / 3 * 1.3 - * (tabsContent.itemAt(tabsContent.index).count + (tabsContent.itemAt(tabsContent.index).count + 1) % 3) / 3 + * (tabsContent.itemAt(currentIndex).count + (tabsContent.itemAt(currentIndex).count + 1) % 3) / 3 : width / 4 * 1.3 - * (tabsContent.itemAt(tabsContent.index).count + (tabsContent.itemAt(tabsContent.index).count + 2) % 4) / 4 + * (tabsContent.itemAt(currentIndex).count + (tabsContent.itemAt(currentIndex).count + 2) % 4) / 4 Repeater { id: tabsContent -- cgit v1.2.3 From d70d0d4feadeb113d7ef380581c2d031c24185ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Fri, 3 Mar 2023 09:31:56 +0800 Subject: Setting the content grid height is not necessary Setting the stack layout height is enough --- HomeDefault.ui.qml | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index be11a37..25c8457 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -363,16 +363,6 @@ Flickable { : width < 992 ? width / 3 : width / 4 cellHeight: cellWidth * 1.3 - height: width < 576 - ? cellHeight * count - : width < 768 - ? cellHeight - * (count + count % 2) / 2 - : width < 992 - ? cellHeight - * (count + (count + 1) % 3) / 3 - : cellHeight - * (count + (count + 2) % 4) / 4 model: content delegate: CardGrid { width: tabPane.cellWidth -- cgit v1.2.3 From 232f00fb063795b6d60116517af6e6839368dd16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Fri, 3 Mar 2023 09:47:57 +0800 Subject: Calculate just once, simplify --- HomeDefault.ui.qml | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index 25c8457..782d5f8 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -270,17 +270,14 @@ Flickable { StackLayout { currentIndex: tabs.currentIndex + property int currentCount: tabsContent.itemAt(currentIndex).count Layout.preferredHeight: width < 576 - ? width * 1.3 - * tabsContent.itemAt(currentIndex).count + ? width * 1.3 * currentCount : width < 768 - ? width / 2 * 1.3 - * (tabsContent.itemAt(currentIndex).count + tabsContent.itemAt(currentIndex).count % 2) / 2 + ? width / 2 * 1.3 * (currentCount + currentCount % 2) / 2 : width < 992 - ? width / 3 * 1.3 - * (tabsContent.itemAt(currentIndex).count + (tabsContent.itemAt(currentIndex).count + 1) % 3) / 3 - : width / 4 * 1.3 - * (tabsContent.itemAt(currentIndex).count + (tabsContent.itemAt(currentIndex).count + 2) % 4) / 4 + ? width / 3 * 1.3 * (currentCount + (currentCount + 1) % 3) / 3 + : width / 4 * 1.3 * (currentCount + (currentCount + 2) % 4) / 4 Repeater { id: tabsContent -- cgit v1.2.3 From aed499a0a6fdc43f61930dcd36bc04f5602cbaae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Fri, 3 Mar 2023 09:55:27 +0800 Subject: Tab item doesn't need to be overridden in general cases. --- TabItem.ui.qml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/TabItem.ui.qml b/TabItem.ui.qml index c44f1a3..e0bb31c 100644 --- a/TabItem.ui.qml +++ b/TabItem.ui.qml @@ -2,7 +2,6 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 Button { - id: button property int currentIndex: 0 property bool doesntEmbed: Qt.platform.os === "android" || Qt.platform.os === "linux" @@ -18,9 +17,8 @@ Button { height: 38 horizontalPadding: 16 verticalPadding: 8 - text: modelData contentItem: Text { - text: button.text + text: modelData color: index == currentIndex ? "white" : "#066ac9" font { family: doesntEmbed ? "Roboto" : regular.name -- cgit v1.2.3