Make chart example galleries change layout depending on orientation

When app window width is smaller than height, layout example and list
in a column rather than a row.

Fixes: QTBUG-115977
Pick-to: 6.6 6.5
Change-Id: Ic7c3ae314ad51642f13cd73d84ee6d7f690dc23d
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

3 files changed, 57 insertions, 18 deletions

diff --git a/examples/charts/chartsgallery/mainwidget.cpp b/examples/charts/chartsgallery/mainwidget.cpp
index cb535217..8607a71a 100644
--- a/examples/charts/chartsgallery/mainwidget.cpp
+++ b/examples/charts/chartsgallery/mainwidget.cpp
@@ -48,6 +48,7 @@
 #include <QListView>
 #include <QModelIndex>
 #include <QStringListModel>
+#include <QVBoxLayout>
 
 #include <algorithm>
 
@@ -100,19 +101,15 @@ MainWidget::MainWidget(QWidget *parent)
     std::sort(examples.begin(), examples.end());
     m_listModel->setStringList(examples);
 
-    m_listView->setMaximumWidth(220);
     m_listView->setModel(m_listModel);
     m_listView->setCurrentIndex(m_listModel->index(0));
     m_listView->setEditTriggers(QAbstractItemView::NoEditTriggers);
 
+    m_contentArea->installEventFilter(this);
+
     setMinimumSize(800, 400);
     resize(1200, 600);
 
-    auto layout = new QHBoxLayout(this);
-    layout->addWidget(m_listView);
-    layout->addWidget(m_contentArea);
-    setLayout(layout);
-
     connect(m_listView->selectionModel(), &QItemSelectionModel::currentChanged, this,
             [this](const QModelIndex &index) {
         setActiveExample(m_exampleMap[m_listModel->data(index).toString()]);
@@ -127,7 +124,21 @@ MainWidget::MainWidget(QWidget *parent)
 
 void MainWidget::resizeEvent(QResizeEvent *)
 {
-    m_activeWidget->resize(m_contentArea->size());
+    bool isHorizontal = width() >= height();
+    if (!layout() || isHorizontal != m_isHorizontal)
+        relayout(isHorizontal);
+
+    if (m_isHorizontal)
+        m_listView->setMaximumHeight(QWIDGETSIZE_MAX);
+    else
+        m_listView->setMaximumHeight(height() / 3);
+}
+
+bool MainWidget::eventFilter(QObject *object, QEvent *event)
+{
+    if (event->type() == QEvent::Resize && object == m_contentArea && m_activeWidget)
+        m_activeWidget->resize(m_contentArea->size());
+    return QObject::eventFilter(object, event);
 }
 
 void MainWidget::setActiveExample(Example example)
@@ -260,3 +271,24 @@ void MainWidget::setActiveExample(Example example)
     m_activeWidget->resize(m_contentArea->size());
     m_activeWidget->setVisible(true);
 }
+
+void MainWidget::relayout(bool horizontal)
+{
+    m_isHorizontal = horizontal;
+
+    delete layout();
+
+    QBoxLayout *layout;
+    if (horizontal) {
+        layout = new QHBoxLayout(this);
+        layout->addWidget(m_listView);
+        layout->addWidget(m_contentArea);
+        m_listView->setMaximumWidth(220);
+    } else {
+        layout = new QVBoxLayout(this);
+        layout->addWidget(m_contentArea);
+        layout->addWidget(m_listView);
+        m_listView->setMaximumWidth(QWIDGETSIZE_MAX);
+    }
+    setLayout(layout);
+}
diff --git a/examples/charts/chartsgallery/mainwidget.h b/examples/charts/chartsgallery/mainwidget.h
index 8082812c..3008d386 100644
--- a/examples/charts/chartsgallery/mainwidget.h
+++ b/examples/charts/chartsgallery/mainwidget.h
@@ -20,6 +20,7 @@ public:
 
 protected:
     void resizeEvent(QResizeEvent *) override;
+    bool eventFilter(QObject *object, QEvent *event) override;
 
 private:
     enum Example {
@@ -64,12 +65,14 @@ private:
     };
 
     void setActiveExample(Example example);
+    void relayout(bool horizontal);
 
     QListView *m_listView = nullptr;
     QStringListModel *m_listModel = nullptr;
     QWidget *m_contentArea = nullptr;
     ContentWidget *m_activeWidget = nullptr;
     QHash<QString, Example> m_exampleMap;
+    bool m_isHorizontal = false;
 };
 
 #endif
diff --git a/examples/charts/qmlchartsgallery/qml/Main.qml b/examples/charts/qmlchartsgallery/qml/Main.qml
index 0670b810..fe4b4c08 100644
--- a/examples/charts/qmlchartsgallery/qml/Main.qml
+++ b/examples/charts/qmlchartsgallery/qml/Main.qml
@@ -10,14 +10,18 @@ Rectangle {
 
     color: "#f0f0f0"
 
-    Row {
-        id: row
-        padding: 8
-        spacing: 8
+    property bool isHorizontalView: root.width >= root.height
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: 8
 
         Rectangle {
-            width: 200
-            height: root.height - row.padding * 2
+            id: listRect
+            width: isHorizontalView ? 200 : parent.width
+            height: isHorizontalView ? parent.height : parent.height / 3
+            x: 0
+            y: isHorizontalView ? 0 : parent.height - height
             border.width: 1
 
             ListView {
@@ -26,6 +30,7 @@ Rectangle {
                 anchors.fill: parent
                 anchors.margins: 1
                 highlightMoveDuration: 250
+                highlightResizeDuration: 0
                 orientation: ListView.Vertical
                 boundsBehavior: Flickable.StopAtBounds
                 currentIndex: 0
@@ -147,16 +152,15 @@ Rectangle {
         }
 
         Rectangle {
-            height: root.height - row.padding * 2
-            width: root.width - listView.width - row.spacing - row.padding * 2
+            width: isHorizontalView ? parent.width - listView.width - 8 : parent.width
+            height: isHorizontalView ? parent.height : parent.height - listView.height - 8
             radius: 5
+            x: isHorizontalView ? 208 : 0
+            y: 0
             clip: true
 
             Loader {
-                id: loader
                 anchors.fill: parent
-                anchors.margins: 4
-
                 asynchronous: true
                 source: listView.currentItem.source
             }