aboutsummaryrefslogtreecommitdiffstats
path: root/tests/manual/quicklayouts
diff options
context:
space:
mode:
Diffstat (limited to 'tests/manual/quicklayouts')
-rw-r--r--tests/manual/quicklayouts/gridlayout/uniformColumnTest.qml111
-rw-r--r--tests/manual/quicklayouts/layoutItemProxy/LayoutChooser.qml52
-rw-r--r--tests/manual/quicklayouts/layoutItemProxy/ms-rearchitect.qml235
-rw-r--r--tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml137
-rw-r--r--tests/manual/quicklayouts/layoutItemProxy/ms-showhide.qml155
-rw-r--r--tests/manual/quicklayouts/layoutItemProxy/scaffold.qml202
6 files changed, 892 insertions, 0 deletions
diff --git a/tests/manual/quicklayouts/gridlayout/uniformColumnTest.qml b/tests/manual/quicklayouts/gridlayout/uniformColumnTest.qml
new file mode 100644
index 0000000000..61e07ef0a7
--- /dev/null
+++ b/tests/manual/quicklayouts/gridlayout/uniformColumnTest.qml
@@ -0,0 +1,111 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Window {
+ id: window
+ visible: true
+
+ width: grid.implicitWidth
+ height: grid.implicitHeight
+
+ title: "Window (" + grid.width + "x" + grid.height + ")"
+
+ GridLayout {
+ id: grid
+ columns: 3
+ rows: 3
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
+ uniformCellWidths: true
+
+ Repeater {
+ model: 3
+ Rectangle {
+ color: "#243a5e"
+ implicitWidth: 300
+ implicitHeight: 300
+ opacity: implicitWidth/600/2 + implicitHeight/600/2
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
+ Layout.maximumWidth: 1000
+ Layout.maximumHeight: 1000
+
+ Layout.minimumWidth: 20
+ Layout.minimumHeight: 20
+
+ Layout.alignment: Qt.AlignCenter
+ Text {
+ id: sizeText
+ anchors.centerIn: parent
+ text: "min :" + parent.Layout.minimumWidth + "x" + parent.Layout.minimumHeight
+ }
+ Text {
+ id: sizeText2
+ anchors.top: sizeText.bottom
+ anchors.horizontalCenter: sizeText.horizontalCenter
+ text: "want:" + parent.implicitWidth + "x" + parent.implicitHeight
+ }
+ Text {
+ id: sizeText3
+ anchors.top: sizeText2.bottom
+ anchors.horizontalCenter: sizeText2.horizontalCenter
+ text: "size :" + parent.width + "x" + parent.height
+ }
+ Text {
+ anchors.top: sizeText3.bottom
+ anchors.horizontalCenter: sizeText3.horizontalCenter
+ text: "max :" + parent.Layout.maximumWidth + "x" + parent.Layout.maximumHeight
+ }
+ Text {
+ anchors.bottom: sizeText.top
+ anchors.horizontalCenter: sizeText.horizontalCenter
+ text: index
+ font.pointSize: 14
+ }
+ WheelHandler {
+ acceptedModifiers: Qt.NoModifier
+ acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+ onWheel: (event)=> {
+ if (event.angleDelta.y > 0)
+ implicitWidth += 5
+ else if (implicitWidth > 50)
+ implicitWidth -= 5
+ }
+ }
+ WheelHandler {
+ acceptedModifiers: Qt.ShiftModifier
+ acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+ onWheel: (event)=> {
+ if (event.angleDelta.y > 0)
+ parent.Layout.minimumWidth = Math.min(parent.Layout.minimumWidth + 5, parent.Layout.maximumWidth)
+ else
+ parent.Layout.minimumWidth = Math.max(parent.Layout.minimumWidth - 5, 0)
+ }
+ }
+ WheelHandler {
+ acceptedModifiers: Qt.ControlModifier
+ acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+ onWheel: (event)=> {
+ if (event.angleDelta.y > 0)
+ parent.Layout.maximumWidth = Math.min(parent.Layout.maximumWidth + 5, 2500)
+ else
+ parent.Layout.maximumWidth = Math.max(parent.Layout.maximumWidth - 5, parent.Layout.minimumWidth)
+ }
+ }
+ }
+ }
+ }
+
+ onWidthChanged: {
+ console.log("Preferred Size:", grid.implicitWidth, "x", grid.implicitHeight)
+ console.log(" Minimum Size:", grid.Layout.minimumWidth, "x", grid.Layout.minimumHeight)
+ console.log(" Maximum Size:", grid.Layout.maximumWidth, "x", grid.Layout.maximumHeight)
+ }
+}
diff --git a/tests/manual/quicklayouts/layoutItemProxy/LayoutChooser.qml b/tests/manual/quicklayouts/layoutItemProxy/LayoutChooser.qml
new file mode 100644
index 0000000000..7667aa950d
--- /dev/null
+++ b/tests/manual/quicklayouts/layoutItemProxy/LayoutChooser.qml
@@ -0,0 +1,52 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+Item {
+ id: __layoutChooser
+ property var chosenLayout: undefined
+ property list<bool> criteria: []
+ property list<var> layoutChoices: []
+
+ implicitWidth: chosenLayout.implicitWidth
+ implicitHeight: chosenLayout.implicitHeight
+
+ onCriteriaChanged: {
+ console.log("Criterias:", criteria)
+ showAndHide()
+ }
+
+ onLayoutChoicesChanged: {
+ console.log("Layouts:", layoutChoices)
+ showAndHide()
+ }
+
+ function showAndHide() {
+ const oldLayout = chosenLayout
+
+ let i = 0
+ for (; i < criteria.length; i++) {
+ if (criteria[i])
+ break
+ }
+
+ console.log("Choosing layout", i)
+
+ if (i < layoutChoices.length)
+ chosenLayout = layoutChoices[i]
+ else if (layoutChoices.length > 0)
+ chosenLayout = layoutChoices[0]
+ else
+ return
+
+ for (i = 0; i < layoutChoices.length; i++) {
+ layoutChoices[i].visible = false
+ }
+ chosenLayout.visible = true
+ chosenLayout.ensurePolished()
+ }
+}
diff --git a/tests/manual/quicklayouts/layoutItemProxy/ms-rearchitect.qml b/tests/manual/quicklayouts/layoutItemProxy/ms-rearchitect.qml
new file mode 100644
index 0000000000..6a884075e7
--- /dev/null
+++ b/tests/manual/quicklayouts/layoutItemProxy/ms-rearchitect.qml
@@ -0,0 +1,235 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// This example was created for the blog post about responsive layouts:
+// https://www.qt.io/blog/responsive-layouts-in-qt
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+Window {
+ id: window
+
+ width: 700
+ height: 800
+
+ minimumHeight: 500
+ minimumWidth: 200
+
+ title: "Window: (" + width + "x" + height + ")"
+ visible: true
+
+ Component {
+ id: delegate
+ Rectangle {
+ width: listView.width
+ height: 70
+ Rectangle {
+ id: circ
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 10
+ height: 50
+ width: 50
+ radius: 25
+ color: "#c8c8c8"
+ }
+ Rectangle {
+ anchors.left: circ.right
+ anchors.right: parent.right
+ anchors.bottom: circ.verticalCenter
+ anchors.leftMargin: 10
+ anchors.rightMargin: 90
+ anchors.bottomMargin: 5
+ height: 11
+ color: "#c8c8c8"
+ }
+ Rectangle {
+ anchors.left: circ.right
+ anchors.right: parent.right
+ anchors.top: circ.verticalCenter
+ anchors.leftMargin: 10
+ anchors.rightMargin: 90
+ anchors.topMargin: 5
+ height: 11
+ color: "#c8c8c8"
+ }
+ Rectangle {
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ height: 1
+ color: "#eaeaea"
+ }
+ Rectangle {
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.bottom: parent.bottom
+ width: 1
+ color: "#eaeaea"
+ }
+ }
+ }
+
+ ListView {
+ id: listView
+ z: 2
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Layout.minimumWidth: 300
+ Layout.maximumWidth: 550
+
+ model: 20
+ delegate: delegate
+
+ TapHandler {
+ onTapped: swipeView.currentIndex = 1
+ }
+ }
+
+ GridLayout {
+ z: 2
+ id: detailView
+
+ Layout.minimumWidth: 250
+ Layout.fillHeight: false
+ Layout.fillWidth: true
+ Layout.leftMargin: 15
+ Layout.rightMargin: 15
+ Layout.alignment: Qt.AlignTop
+
+ columns: Math.max(width,100)/10
+ columnSpacing: 0
+ rowSpacing: 10
+ Rectangle {
+ Layout.columnSpan: detailView.columns
+ Layout.fillWidth: true
+ height: 300
+ color: "#c8c8c8"
+ }
+ Rectangle {
+ Layout.columnSpan: detailView.columns
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ height: 10
+ }
+ Repeater {
+ model: 1000
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ height: 10
+ color: "#c8c8c8"
+ }
+ }
+ }
+
+ LayoutChooser {
+ id: layoutChooser
+ width: parent.width
+ height: parent.height
+
+ layoutChoices: [
+ smallLayout,
+ largeLayout
+ ]
+
+ criteria: [
+ window.width < listView.Layout.minimumWidth + detailView.Layout.minimumWidth + 20,
+ true
+ ]
+
+ property Item smallLayout: ColumnLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+
+ SwipeView {
+ id: swipeView
+
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ Item {
+ ColumnLayout {
+ height: parent.height
+ width: parent.width
+
+ spacing: 0
+ Rectangle {
+ height: 50
+ Layout.fillWidth: true
+ }
+ Rectangle {
+ height: 1
+ color: "#eaeaea"
+ Layout.fillWidth: true
+ }
+ LayoutItemProxy { target: listView }
+ }
+ }
+ Item {
+ ColumnLayout {
+ height: parent.height
+ width: parent.width
+ Rectangle {
+ height: 50
+ Layout.fillWidth: true
+
+ Text {
+ id: im
+ FontLoader {
+ id: materialFont
+ source: "https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.ttf?raw=true"
+ }
+ font.family: materialFont.font.family
+ font.weight: materialFont.font.weight
+ font.pixelSize: 32
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 10
+ text: String.fromCodePoint(0xe5c4)
+ color: "#010101"
+ TapHandler {
+ onTapped: { swipeView.currentIndex = 0; }
+ }
+ }
+ }
+
+ Rectangle {
+ height: 1
+ color: "#eaeaea"
+ Layout.fillWidth: true
+ }
+
+ LayoutItemProxy { target: detailView }
+ }
+ }
+ }
+ }
+
+ property Item largeLayout: ColumnLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+
+ spacing: 0
+ Rectangle {
+ height: 50
+ Layout.fillWidth: true
+ }
+ Rectangle {
+ height: 1
+ color: "#eaeaea"
+ Layout.fillWidth: true
+ }
+
+ RowLayout {
+ spacing: 0
+ LayoutItemProxy { target: listView }
+ LayoutItemProxy { target: detailView }
+ }
+ }
+ }
+
+}
diff --git a/tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml b/tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml
new file mode 100644
index 0000000000..a1b9ba476a
--- /dev/null
+++ b/tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml
@@ -0,0 +1,137 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// This example was created for the blog post about responsive layouts:
+// https://www.qt.io/blog/responsive-layouts-in-qt
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+Window {
+ id: window
+
+ width: 600
+ height: 800
+
+ minimumHeight: 500
+ minimumWidth: 160
+
+ title: "Window: (" + width + "x" + height + ")"
+ visible: true
+
+
+ component MyButton : Rectangle {
+ implicitWidth: 56
+ implicitHeight: 56
+ Layout.minimumWidth: 56
+ Layout.minimumHeight: 56
+ Layout.fillWidth: true
+ Layout.fillHeight: false
+ Layout.alignment: Qt.AlignHCenter
+ property string label: ""
+ color: "#eaeaea"
+ Rectangle {
+ implicitWidth: 56
+ implicitHeight: 56
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ color: "#eaeaea"
+ Text {
+ font.pixelSize: 32
+ font.bold: true
+ anchors.centerIn: parent
+ text: label
+ color: "#243a5e"
+ }
+ }
+ }
+
+ LayoutChooser {
+ id: layoutChooser
+ width: parent.width
+ height: parent.height
+
+ layoutChoices: [
+ smallLayout,
+ largeLayout
+ ]
+
+ criteria: [
+ window.width < rl2.Layout.minimumWidth + rl2.anchors.margins * 2,
+ true
+ ]
+
+ MyButton { id: aButton; label: "A"; z: 2 }
+ MyButton { id: bButton; label: "B"; z: 2 }
+ MyButton { id: cButton; label: "C"; z: 2 }
+ MyButton { id: dButton; label: "D"; z: 2 }
+ MyButton { id: eButton; label: "E"; z: 2 }
+ MyButton { id: fButton; label: "F"; z: 2 }
+ MyButton { id: gButton; label: "G"; z: 2 }
+
+ Rectangle {
+ id: rect
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ color: "#fff"
+ }
+
+ property Item smallLayout: RowLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+ spacing: 0
+ Rectangle {
+ id: buttonRect1
+ width: 200
+ Layout.fillHeight: true
+ color: "#c8c8c8"
+ ColumnLayout {
+ anchors.margins: 10
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.top: parent.top
+ spacing: 8
+ LayoutItemProxy { target: aButton }
+ LayoutItemProxy { target: bButton }
+ LayoutItemProxy { target: cButton }
+ LayoutItemProxy { target: dButton }
+ LayoutItemProxy { target: eButton }
+ LayoutItemProxy { target: fButton }
+ LayoutItemProxy { target: gButton }
+ }
+ }
+ LayoutItemProxy { target: rect }
+ }
+
+ property Item largeLayout: ColumnLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+ spacing: 0
+ Rectangle {
+ id: buttonRect2
+ Layout.fillWidth: true
+ height: rl2.height + rl2.anchors.margins * 2
+ implicitWidth: rl2.width + rl2.anchors.margins * 2
+ color: "#c8c8c8"
+ RowLayout {
+ id: rl2
+ anchors.margins: 10
+ anchors.top: parent.top
+ anchors.left: parent.left
+ spacing: 8
+ LayoutItemProxy { target: aButton }
+ LayoutItemProxy { target: bButton }
+ LayoutItemProxy { target: cButton }
+ LayoutItemProxy { target: dButton }
+ LayoutItemProxy { target: eButton }
+ LayoutItemProxy { target: fButton }
+ LayoutItemProxy { target: gButton }
+ }
+ }
+ LayoutItemProxy { target: rect }
+ }
+ }
+}
diff --git a/tests/manual/quicklayouts/layoutItemProxy/ms-showhide.qml b/tests/manual/quicklayouts/layoutItemProxy/ms-showhide.qml
new file mode 100644
index 0000000000..2e4ca140a1
--- /dev/null
+++ b/tests/manual/quicklayouts/layoutItemProxy/ms-showhide.qml
@@ -0,0 +1,155 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// This example was created for the blog post about responsive layouts:
+// https://www.qt.io/blog/responsive-layouts-in-qt
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+
+Window {
+ id: window
+
+ width: 600
+ height: 800
+
+ minimumHeight: 500
+ minimumWidth: 160
+
+ title: "Window: (" + width + "x" + height + ")"
+ visible: true
+
+
+ component MyButton : Rectangle {
+ implicitWidth: 56
+ implicitHeight: 56
+ Layout.minimumWidth: 56
+ Layout.minimumHeight: 56
+ Layout.fillWidth: false
+ Layout.fillHeight: false
+ Layout.alignment: Qt.AlignHCenter
+ property string label: ""
+ color: "#eaeaea"
+ Text {
+ font.pixelSize: 32
+ font.bold: true
+ anchors.centerIn: parent
+ text: label
+ color: "#243a5e"
+ }
+ }
+
+ component ButtonBox : Rectangle {
+
+ id: bb
+ property Item elideButton: Item {}
+ property Item buttonLayout: Item {}
+
+ height: buttonLayout.height + buttonLayout.anchors.margins * 2
+ implicitWidth: buttonLayout.width + buttonLayout.anchors.margins * 2
+
+ color: "#c8c8c8"
+
+ function updateItems() {
+
+ if (width == 0)
+ return;
+
+ let butts = buttonLayout.children
+
+ let lastBut = undefined
+ let xmax = buttonLayout.anchors.margins
+ for (let i = butts.length - 1; i>= 0; --i) {
+ if (butts[i] !== elideButton && butts[i].visible) {
+ if (butts[i].x + butts[i].width > xmax) {
+ lastBut = butts[i]
+ xmax = butts[i].x + butts[i].width
+ }
+ }
+ }
+
+ let buttonsRightX = xmax
+ + buttonLayout.spacing * 2
+ let hiddenItems = 0
+ for (let i = 0; i < butts.length; i++) {
+ if (butts[i] === elideButton)
+ continue;
+ if (butts[i].visible === false) {
+ hiddenItems++;
+ let buttonAddedWidth = butts[i].width + buttonLayout.spacing
+ if (buttonsRightX + buttonAddedWidth < width - elideButton.implicitWidth - buttonLayout.anchors.margins - buttonLayout.spacing) {
+ buttonsRightX += buttonAddedWidth
+ butts[i].visible = true
+ hiddenItems--;
+ }
+ }
+ }
+
+ for (let i = butts.length - 1; i>= 0; --i) {
+ if ( butts[i] === elideButton)
+ continue;
+ if (butts[i].visible === true) {
+ let buttonRemovedWidth = butts[i].width + buttonLayout.spacing
+ if (buttonsRightX > width - elideButton.implicitWidth - buttonLayout.anchors.margins - buttonLayout.spacing) {
+ buttonsRightX -= buttonRemovedWidth
+ butts[i].visible = false
+ hiddenItems++;
+ }
+ }
+ }
+
+ if (hiddenItems == 0)
+ elideButton.visible = false
+ else if (hiddenItems == 1) {
+ for (let i = butts.length - 1; i>= 0; --i)
+ butts[i].visible = true
+ elideButton.visible = false
+ } else
+ elideButton.visible = true
+ }
+
+ onWidthChanged: {
+ updateItems()
+ }
+
+ onChildrenChanged: {
+ updateItems()
+ }
+ }
+
+ ColumnLayout {
+ height: parent.height
+ width: parent.width
+ spacing: 0
+ ButtonBox {
+ Layout.fillHeight: false
+ Layout.fillWidth: true
+
+ RowLayout {
+ id: buttonLayout
+ anchors.margins: 10
+ anchors.top: parent.top
+ anchors.left: parent.left
+ spacing: 8
+ MyButton { id: aButton; label: "A"; z: 2 }
+ MyButton { id: bButton; label: "B"; z: 2 }
+ MyButton { id: cButton; label: "C"; z: 2 }
+ MyButton { id: dButton; label: "D"; z: 2 }
+ MyButton { id: eButton; label: "E"; z: 2 }
+ MyButton { id: fButton; label: "F"; z: 2 }
+ MyButton { id: gButton; label: "G"; z: 2 }
+ MyButton { id: elideButton; label: "..."; z: 2 }
+ }
+ elideButton: elideButton
+ buttonLayout: buttonLayout
+ }
+
+ Rectangle {
+ id: rect
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ color: "#fff"
+ }
+ }
+}
+
diff --git a/tests/manual/quicklayouts/layoutItemProxy/scaffold.qml b/tests/manual/quicklayouts/layoutItemProxy/scaffold.qml
new file mode 100644
index 0000000000..4b45cfb96e
--- /dev/null
+++ b/tests/manual/quicklayouts/layoutItemProxy/scaffold.qml
@@ -0,0 +1,202 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// This example was created for the blog post about responsive layouts:
+// https://www.qt.io/blog/responsive-layouts-in-qt
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+
+Window {
+ id: window
+
+ width: 600
+ height: 800
+
+ minimumHeight: 500
+ minimumWidth: 160
+
+ title: "Window: (" + width + "x" + height + ")"
+ visible: true
+
+ FontLoader { id: materialFont; source: "https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.ttf?raw=true" }
+
+ component MyButton : Rectangle {
+ implicitWidth: 32
+ implicitHeight: label == "" ? 32 : 32+22
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Layout.alignment: Qt.AlignHCenter
+ property int iconId: 0
+ property string label: ""
+
+ Text {
+ id: im
+ height: 32
+ width: 32
+ font.family: materialFont.font.family
+ font.weight: materialFont.font.weight
+ font.pixelSize: 32
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.top: parent.top
+ text: String.fromCodePoint(iconId)
+ color: "#555"
+ }
+
+ Text {
+ text: parent.label
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.top: im.bottom
+ font.pixelSize: 12
+ color: "#555"
+ }
+ }
+
+ LayoutChooser {
+ id: layoutChooser
+ width: parent.width
+ height: parent.height
+
+ layoutChoices: [
+ smallLayout,
+ mediumLayout,
+ largeLayout
+ ]
+
+ criteria: [
+ width < 700,
+ width < 1000,
+ true
+ ]
+
+ MyButton {
+ id: inboxButton
+ objectName: "inboxButton"
+ iconId: 0xe156 // see https://fonts.google.com/icons
+ label: layoutChooser.width <700 ? "Inbox" : ""
+ }
+ MyButton {
+ id: articlesButton
+ objectName: "articlesButton"
+ iconId: 0xef42 // see https://fonts.google.com/icons
+ }
+ MyButton {
+ id: chatButton
+ objectName: "chatButton"
+ iconId: 0xe0b7 // see https://fonts.google.com/icons
+ }
+ MyButton {
+ id: videoButton
+ objectName: "videoButton"
+ iconId: 0xe070 // see https://fonts.google.com/icons
+ }
+
+ Rectangle {
+ id: bigbox
+ color: '#e99ec0'
+ implicitHeight: 512
+ implicitWidth: 512
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ }
+
+ Flickable {
+ id: flick
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ implicitWidth: 512
+ contentWidth: width
+ contentHeight: gl.height
+ GridLayout {
+ id: gl
+ columns: 2
+ width: parent.width
+ height: implicitHeight
+ columnSpacing: 10
+ rowSpacing: 10
+ Repeater {
+ model: 12
+ LayoutItemProxy { target: rep.itemAt(index) }
+ }
+ }
+ ScrollIndicator.vertical: ScrollIndicator { }
+ }
+
+ Repeater {
+ id: rep
+ model: 12
+ Rectangle {
+ objectName: "Rectangle" + index
+ color: '#ffc9c5'
+ implicitHeight: width
+ implicitWidth: 256
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ Text {
+ anchors.centerIn: parent
+ color: '#e99ec0'
+ text: index
+ font.pixelSize: 64
+ }
+ }
+ }
+
+ property Item smallLayout: ColumnLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+ Repeater {
+ model: 2
+ LayoutItemProxy { target: rep.itemAt(index) }
+ }
+ RowLayout {
+ Layout.fillHeight: false
+ Layout.fillWidth: true
+ LayoutItemProxy { target: inboxButton }
+ LayoutItemProxy { target: articlesButton }
+ LayoutItemProxy { target: chatButton }
+ LayoutItemProxy { target: videoButton }
+ }
+ }
+
+ property Item mediumLayout: RowLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+ ColumnLayout {
+ Layout.fillHeight: false
+ Layout.alignment: Qt.AlignTop
+ LayoutItemProxy { target: inboxButton }
+ LayoutItemProxy { target: articlesButton }
+ LayoutItemProxy { target: chatButton }
+ LayoutItemProxy { target: videoButton }
+ }
+ LayoutItemProxy { target: flick }
+ LayoutItemProxy { target: bigbox }
+ }
+
+ property Item largeLayout: RowLayout {
+ parent: layoutChooser
+ height: parent.height
+ width: parent.width
+ GridLayout {
+ columns: 2
+ Layout.fillHeight: false
+ Layout.fillWidth: false
+ Layout.alignment: Qt.AlignTop
+ LayoutItemProxy { target: inboxButton }
+ Text { text: "Inbox"; color: "#555"; font.pixelSize: 20 }
+ LayoutItemProxy { target: articlesButton }
+ Text { text: "Articles"; color: "#555"; font.pixelSize: 20 }
+ LayoutItemProxy { target: chatButton }
+ Text { text: "Chat"; color: "#555"; font.pixelSize: 20 }
+ LayoutItemProxy { target: videoButton }
+ Text { text: "Video"; color: "#555"; font.pixelSize: 20 }
+ }
+ LayoutItemProxy { target: flick }
+ LayoutItemProxy { target: bigbox }
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-20 20:59:23 +0000