ubuntu-sdk-bugs team mailing list archive

[Moritz Weber <moritz.weber@xxxxxxxxx>]

Public bug reported:

When using 3 columns (each with a page) and resizing the window to 2 and
1 column, the middle column is empty after resizing to 3 columns again.
(The video may show this more clearly.)


Maybe I am just using this wrong.

Here is the code I used:

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    objectName: "mainView"

    applicationName: "apltest.mweber"

    width: units.gu(100)
    height: units.gu(75)

    AdaptivePageLayout {
        id: apl
        anchors.fill: parent
        primaryPage: page1

        property bool thirdCol: false

        layouts: [
            PageColumnsLayout {
                when: width > units.gu(140) && apl.thirdCol
                // column #0
                PageColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(60)
                    preferredWidth: units.gu(40)
                }
                // column #1
                PageColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(60)
                    preferredWidth: units.gu(40)
                }
                // column #2
                PageColumn {
                    fillWidth: true
                }
            },
            PageColumnsLayout {
                when: width > units.gu(80)
                // column #0
                PageColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(60)
                    preferredWidth: units.gu(40)
                }
                // column #1
                PageColumn {
                    fillWidth: true
                }
            }
        ]

        Page {
            id: page1
            header: PageHeader {
                id: header
                title: "Main Page"
            }
            Column {
                anchors.top: header.bottom
                width: parent.width
                ListItem {
                    ListItemLayout {
                        title.text: "Home"
                    }
                    onClicked: {
                        page1.pageStack.addPageToNextColumn(page1, page2)
                        apl.thirdCol = false
                    }
                }
                ListItem {
                    ListItemLayout {
                        title.text: "Settings"
                    }
                    onClicked: {
                        page1.pageStack.addPageToNextColumn(page1, page3)
                        apl.thirdCol = true
                    }
                }
                ListItem {
                    ListItemLayout {
                        title.text: apl.columns
                    }
                }
            }
        }
        Page {
            id: page2
            header: PageHeader {
                title: "Home"
            }

            Rectangle {
                width: Math.min(parent.width / 2, parent.height / 2)
                height: width

                color: "green"
                anchors.centerIn: parent
            }
        }

        Page {
            id: page3
            header: PageHeader {
                title: "Settings"
            }

            Column {
                anchors.top: parent.top
                anchors.topMargin: header.height
                width: parent.width
                ListItem {
                    ListItemLayout {
                        title.text: "About"
                    }
                    onClicked: page3.pageStack.addPageToNextColumn(page3, page4)
                }
            }
        }

        Page {
            id: page4
            header: PageHeader {
                title: "Page #4"
            }
            Rectangle {
                width: Math.min(parent.width / 2, parent.height / 2)
                height: width

                color: "red"
                anchors.centerIn: parent
            }
        }

    }
}

** Affects: ubuntu-ui-toolkit (Ubuntu)
     Importance: Undecided
         Status: New

** Attachment added: "apl-2016-08-24_22.50.02.mkv"
   https://bugs.launchpad.net/bugs/1616798/+attachment/4727418/+files/apl-2016-08-24_22.50.02.mkv

-- 
You received this bug notification because you are a member of Ubuntu
SDK bug tracking, which is subscribed to ubuntu-ui-toolkit in Ubuntu.
https://bugs.launchpad.net/bugs/1616798

Title:
  AdaptivePageLayout behaves odd, when using 3 columns

Status in ubuntu-ui-toolkit package in Ubuntu:
  New

Bug description:
  When using 3 columns (each with a page) and resizing the window to 2
  and 1 column, the middle column is empty after resizing to 3 columns
  again. (The video may show this more clearly.)

  
  Maybe I am just using this wrong.

  Here is the code I used:

  import QtQuick 2.4
  import Ubuntu.Components 1.3

  MainView {
      objectName: "mainView"

      applicationName: "apltest.mweber"

      width: units.gu(100)
      height: units.gu(75)

      AdaptivePageLayout {
          id: apl
          anchors.fill: parent
          primaryPage: page1

          property bool thirdCol: false

          layouts: [
              PageColumnsLayout {
                  when: width > units.gu(140) && apl.thirdCol
                  // column #0
                  PageColumn {
                      minimumWidth: units.gu(30)
                      maximumWidth: units.gu(60)
                      preferredWidth: units.gu(40)
                  }
                  // column #1
                  PageColumn {
                      minimumWidth: units.gu(30)
                      maximumWidth: units.gu(60)
                      preferredWidth: units.gu(40)
                  }
                  // column #2
                  PageColumn {
                      fillWidth: true
                  }
              },
              PageColumnsLayout {
                  when: width > units.gu(80)
                  // column #0
                  PageColumn {
                      minimumWidth: units.gu(30)
                      maximumWidth: units.gu(60)
                      preferredWidth: units.gu(40)
                  }
                  // column #1
                  PageColumn {
                      fillWidth: true
                  }
              }
          ]

          Page {
              id: page1
              header: PageHeader {
                  id: header
                  title: "Main Page"
              }
              Column {
                  anchors.top: header.bottom
                  width: parent.width
                  ListItem {
                      ListItemLayout {
                          title.text: "Home"
                      }
                      onClicked: {
                          page1.pageStack.addPageToNextColumn(page1, page2)
                          apl.thirdCol = false
                      }
                  }
                  ListItem {
                      ListItemLayout {
                          title.text: "Settings"
                      }
                      onClicked: {
                          page1.pageStack.addPageToNextColumn(page1, page3)
                          apl.thirdCol = true
                      }
                  }
                  ListItem {
                      ListItemLayout {
                          title.text: apl.columns
                      }
                  }
              }
          }
          Page {
              id: page2
              header: PageHeader {
                  title: "Home"
              }

              Rectangle {
                  width: Math.min(parent.width / 2, parent.height / 2)
                  height: width

                  color: "green"
                  anchors.centerIn: parent
              }
          }

          Page {
              id: page3
              header: PageHeader {
                  title: "Settings"
              }

              Column {
                  anchors.top: parent.top
                  anchors.topMargin: header.height
                  width: parent.width
                  ListItem {
                      ListItemLayout {
                          title.text: "About"
                      }
                      onClicked: page3.pageStack.addPageToNextColumn(page3, page4)
                  }
              }
          }

          Page {
              id: page4
              header: PageHeader {
                  title: "Page #4"
              }
              Rectangle {
                  width: Math.min(parent.width / 2, parent.height / 2)
                  height: width

                  color: "red"
                  anchors.centerIn: parent
              }
          }

      }
  }

To manage notifications about this bug go to:
https://bugs.launchpad.net/ubuntu/+source/ubuntu-ui-toolkit/+bug/1616798/+subscriptions