ubuntu-sdk-bugs team mailing list archive

[Michał Sawicz <michal.sawicz@xxxxxxxxxxxxx>]

Public bug reported:

I have an UbuntuListView with ListItems, and I add items into the model at runtime.
I want to keep the list sorted, so I insert items at specific positions instead of appending them.
The problem is that the divider only shows up for items that are inserted before the last one.
I read in the API documentation for ListItem [1]:
> When used in ListView or UbuntuListView, the last list item will not show the divider no matter of the visible property value set.

So I suppose this is the reason. But shouldn't the divider become
visible when the model changes and the ListItem is no longer the last
one?

For example, I add the following items, in order:
* aaa
* ccc
* bbb

Because the list is sorted, when adding `bbb` it is inserted in the
middle and receives a divider. But `aaa` remains with no divider, and
the list looks weird.

Expected:
    aaa
    -----
    bbb
    -----
    ccc

Actual:
    aaa
    bbb
    -----
    ccc

Here is the full source code:

=== Main.qml ===

import QtQuick 2.4
import QtQuick.Layouts 1.1

import Ubuntu.Components 1.2

MainView {

    width: units.gu(40)
    height: units.gu(40)

    Page {

        ColumnLayout {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            TextField {
                id: textInput
                Layout.fillWidth: true;
                hasClearButton: true
                onAccepted: {
                    addToList();
                }
            }

            MyList {
                id: myList
                anchors {
                    left: parent.left
                    right: parent.right
                }
                height: parent.height
            }
        }
    }

    function addToList() {
        if(textInput.text.length > 0) {
            myList.add(textInput.text);
            textInput.text = '';
        }
    }
}

=== MyList.qml ===

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.ListItems 1.0

Item {

    ListModel {
        id: listModel
    }

    UbuntuListView {
        anchors.fill: parent
        model: listModel

        delegate: ListItem {
            id: listItem
            height: units.gu(5)

            divider.visible: true; // doesn't help
            Label {
                text: itemName
                verticalAlignment: Text.AlignVCenter
                height: parent.height
            }

            onClicked: {
                divider.visible = true; // doesn't help
            }
        }
    }

    function add(text) {
        var indexToInsert = listModel.count;
        for(var i = 0; i < listModel.count; i++) {
            var compareResult = text.localeCompare(listModel.get(i).itemName);
            if(compareResult <= 0) {
                indexToInsert = i;
                break;
            }
        }
        listModel.insert(indexToInsert, {itemName: text});
    }
}


I'm not really sure if this is a bug, or if I'm not using the API correctly.

[1]
https://developer.ubuntu.com/api/apps/qml/sdk-15.04/Ubuntu.Components.ListItem/

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

** Package changed: ubuntu => ubuntu-ui-toolkit (Ubuntu)

-- 
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/1665559

Title:
  UbuntuListView dividers don't get updated on model changes

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

Bug description:
  I have an UbuntuListView with ListItems, and I add items into the model at runtime.
  I want to keep the list sorted, so I insert items at specific positions instead of appending them.
  The problem is that the divider only shows up for items that are inserted before the last one.
  I read in the API documentation for ListItem [1]:
  > When used in ListView or UbuntuListView, the last list item will not show the divider no matter of the visible property value set.

  So I suppose this is the reason. But shouldn't the divider become
  visible when the model changes and the ListItem is no longer the last
  one?

  For example, I add the following items, in order:
  * aaa
  * ccc
  * bbb

  Because the list is sorted, when adding `bbb` it is inserted in the
  middle and receives a divider. But `aaa` remains with no divider, and
  the list looks weird.

  Expected:
      aaa
      -----
      bbb
      -----
      ccc

  Actual:
      aaa
      bbb
      -----
      ccc

  Here is the full source code:

  === Main.qml ===

  import QtQuick 2.4
  import QtQuick.Layouts 1.1

  import Ubuntu.Components 1.2

  MainView {

      width: units.gu(40)
      height: units.gu(40)

      Page {

          ColumnLayout {
              spacing: units.gu(1)
              anchors {
                  margins: units.gu(2)
                  fill: parent
              }

              TextField {
                  id: textInput
                  Layout.fillWidth: true;
                  hasClearButton: true
                  onAccepted: {
                      addToList();
                  }
              }

              MyList {
                  id: myList
                  anchors {
                      left: parent.left
                      right: parent.right
                  }
                  height: parent.height
              }
          }
      }

      function addToList() {
          if(textInput.text.length > 0) {
              myList.add(textInput.text);
              textInput.text = '';
          }
      }
  }

  === MyList.qml ===

  import QtQuick 2.4
  import Ubuntu.Components 1.2
  import Ubuntu.Components.ListItems 1.0

  Item {

      ListModel {
          id: listModel
      }

      UbuntuListView {
          anchors.fill: parent
          model: listModel

          delegate: ListItem {
              id: listItem
              height: units.gu(5)

              divider.visible: true; // doesn't help
              Label {
                  text: itemName
                  verticalAlignment: Text.AlignVCenter
                  height: parent.height
              }

              onClicked: {
                  divider.visible = true; // doesn't help
              }
          }
      }

      function add(text) {
          var indexToInsert = listModel.count;
          for(var i = 0; i < listModel.count; i++) {
              var compareResult = text.localeCompare(listModel.get(i).itemName);
              if(compareResult <= 0) {
                  indexToInsert = i;
                  break;
              }
          }
          listModel.insert(indexToInsert, {itemName: text});
      }
  }

  
  I'm not really sure if this is a bug, or if I'm not using the API correctly.

  [1]
  https://developer.ubuntu.com/api/apps/qml/sdk-15.04/Ubuntu.Components.ListItem/

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