Changing elide in ListItemLayout title not possible

Bug #1603450 reported by Jonas G. Drange
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Canonical System Image
Medium
Unassigned
ubuntu-ui-toolkit (Ubuntu)
Medium
Andrea Bernabei
ubuntu-ui-toolkit (Ubuntu RTM)
Undecided
Unassigned

Bug Description

Reproduce:

import QtQuick 2.4
import Ubuntu.Components 1.3
Item {
    width: units.gu(30)
    height: units.gu(50)

    ListItem {
        ListItemLayout {
            id: fileLayout
            title.elide: Text.ElideMiddle
            title.text: "Red Roses run no risk, sir, on nurses order."
        }
    }
}

What happens:
The text is not elided at all

What should happen:
Text should elide, and the palindrome edges should be visible:

Red roses run … nurses order.

Related branches

summary: - Tweaking elide in ListItemLayout title not possible
+ Changing elide in ListItemLayout title not possible
Revision history for this message
Jonas G. Drange (jonas-drange) wrote :

This is due to the title's Label having WrapAnywhere as wrapMode. This means only ElideRight will function.

Adding a note of this in the documentation, with an accompanying example [1] about how to get e.g. ElideMiddle to function, would fix this issue.

[1]
import QtQuick 2.4
import Ubuntu.Components 1.3
Item {
    width: units.gu(30)
    height: units.gu(50)

    ListItem {
        ListItemLayout {
            id: fileLayout
            title.elide: Text.ElideMiddle
            title.wrapMode: Text.NoWrap
            title.text: "Red Roses run no risk, sir, on nurses order."
        }
    }
}

Revision history for this message
Andrea Bernabei (faenil) wrote :

The problem here is ListItemLayout's labels have "WrapAnywhere" set by default, for convenience.

From QML Text documentation:
"If this property is set to Text.ElideRight, it can be used with wrapped text."

That is why nothing is happening when you set ElideMiddle. It's not compatible with wrapped text :9

I noticed that the ListItemLayout documentation does mention anything about the wrapping mode of the labels that it contains, and that's why the developers are confused when they notice ElideMiddle does not work.

We have 2 options:
1) Default to NoWrap for the title, so that other elision modes will work without having to manually also set NoWrap
2) Amend ListItemLayout documentation to mention that the default wrapMode is not the same as QML Text's.

I'll have a quick chat with the designers to see what they think. The requirements was to have a sensible wrapMode by default, but given the confusion it can bring, maybe we could revisit that.

Andrea Bernabei (faenil)
Changed in ubuntu-ui-toolkit (Ubuntu RTM):
assignee: nobody → Andrea Bernabei (faenil)
assignee: Andrea Bernabei (faenil) → nobody
Changed in ubuntu-ui-toolkit (Ubuntu):
assignee: nobody → Andrea Bernabei (faenil)
Revision history for this message
Andrea Bernabei (faenil) wrote :

After chatting with jgdx, we agreed I will go for option 2.

MR attached.

Changed in ubuntu-ui-toolkit (Ubuntu):
importance: Undecided → Medium
status: New → In Progress
Revision history for this message
Łukasz Zemczak (sil2100) wrote :
Download full text (3.2 KiB)

This bug was fixed in the package ubuntu-ui-toolkit 1.3.2060+15.04.20160814 in https://launchpad.net/~ci-train-ppa-service/+archive/ubuntu/stable-phone-overlay

---------------

ubuntu-ui-toolkit (1.3.2060+15.04.20160814) vivid; urgency=medium

  [ Zoltan Balogh ]
  * Fix OptionSelectorTestCase tests.
  * Fix more OptionSelector autopilot tests

  [ Timo Jyrinki ]
  * Disable documentation building for GLES builds. Fixes LP: #1606222.
  * Replace abs with qFabs due to GCC6 breakage. Fixes LP: #1610943.
  * Limit s390x dependencies more due to upstart/s390x problems and removed
    packages in archives. Fixes LP: #1610951

  [ Andrea Bernabei ]
  * ListItemLayout doc: add elide mode change example and add section about
    labels default properties values. Fixes LP: #1603450.
  * ListItemLayout doc: add explicit note about the need to bind ListItem's
    height to layout's height.
  * More Scrollbar optimizations: 20% faster creation time. Fixes LP: #1606451
  * Scrollbar: fix wrong thumb color on tap/mouse release and increase coverage
    of hover states unit tests. Fixes LP: #1608897

  [ Zsombor Egri ]
  * Fix null pointer property initializer used with 1.3 PageWrapper.
    Fixes LP: #1604780.
  * Fix BottomEdge content URL preloading. Fixes LP: #1604509.

  [Albert Astals Cid ]
  * UCUnits::resolveResource: Prefer image path if it exists. This saves
    searching the disk for @gu images, which is a big speedup. According to
    callgrind loading 100 images from a folder that contains 380 images goes
    from around 3 million instructions per UCUnits::resolveResource call down
    to around 10 thousand. This optimization is ok since it is not correct to
    ship both image.png and image@20.png. You either have to ship gu-enabled
    files or not, but mixing them is not allowed. Searched for cases in which
    that may be happening in my phone and found none. Fixes LP: #1604029.

  [ Tim Peeters ]
  * Configure colors of the buttons in the ActionBar and PageHeader through
    their Styles. Fixes LP: #1597774.
  * Fix assigning of constant values to a grouped property in StyleHints.
    Fixes LP: #1602836.
  * Fix list view keyboard navigation for RightToLeft and BottomToTop
    directions. Fixes LP: #1605634
  * Use external QML files instead of embedded QML strings for autopilot tests.
    Fixes LP: #1578319
  * Fix failing autopilot header tests.
  * Fix ActionSelectionPopover Autopilot CPO tests.

  [Christian Dywan ]
  * Include indexes in "offline" docs and filter out link errors.
    Fixes LP: #1603937.
  * Increase focus ring thickness from 1dp to 2dp. Fixes LP: #1602690.
  * Add a snippet about tests to the toplevel README
  * Enter/Return to trigger, Space to expand ComboButton. Fixes LP: #1523817.
  * Initialize engine variable before using it in the _engine case.
  * Use Qt.rgba instead of #0000 checking ListItem default color.
    Fixes LP: #1560004
  * Don't use a different .desktop file in the gallery tests.
    Fixes LP: #1578319
  * Update scaling docs, set QT_SCALE_FACTOR and unset GRID_UNIT_PX.
    Fixes LP: #1610208

  [ Florian Boucault ]
  * Sections: load Icons asynchronously.

 -- Zoltán Balogh <zoltan.balogh@canonica...

Read more...

Changed in ubuntu-ui-toolkit (Ubuntu RTM):
status: New → Fix Released
Changed in canonical-devices-system-image:
status: New → Fix Committed
importance: Undecided → Medium
milestone: none → 13
Revision history for this message
Launchpad Janitor (janitor) wrote :

This bug was fixed in the package ubuntu-ui-toolkit - 1.3.2060+16.10.20160814

---------------
ubuntu-ui-toolkit (1.3.2060+16.10.20160814) yakkety; urgency=medium

  [ Zoltan Balogh ]
  * Fix OptionSelectorTestCase tests.
  * Fix more OptionSelector autopilot tests

  [ Timo Jyrinki ]
  * Disable documentation building for GLES builds. Fixes LP: #1606222.
  * Replace abs with qFabs due to GCC6 breakage. Fixes LP: #1610943.
  * Limit s390x dependencies more due to upstart/s390x problems and removed
    packages in archives. Fixes LP: #1610951

  [ Andrea Bernabei ]
  * ListItemLayout doc: add elide mode change example and add section about
    labels default properties values. Fixes LP: #1603450.
  * ListItemLayout doc: add explicit note about the need to bind ListItem's
    height to layout's height.
  * More Scrollbar optimizations: 20% faster creation time. Fixes LP: #1606451
  * Scrollbar: fix wrong thumb color on tap/mouse release and increase coverage
    of hover states unit tests. Fixes LP: #1608897

  [ Zsombor Egri ]
  * Fix null pointer property initializer used with 1.3 PageWrapper.
    Fixes LP: #1604780.
  * Fix BottomEdge content URL preloading. Fixes LP: #1604509.

  [Albert Astals Cid ]
  * UCUnits::resolveResource: Prefer image path if it exists. This saves
    searching the disk for @gu images, which is a big speedup. According to
    callgrind loading 100 images from a folder that contains 380 images goes
    from around 3 million instructions per UCUnits::resolveResource call down
    to around 10 thousand. This optimization is ok since it is not correct to
    ship both image.png and image@20.png. You either have to ship gu-enabled
    files or not, but mixing them is not allowed. Searched for cases in which
    that may be happening in my phone and found none. Fixes LP: #1604029.

  [ Tim Peeters ]
  * Configure colors of the buttons in the ActionBar and PageHeader through
    their Styles. Fixes LP: #1597774.
  * Fix assigning of constant values to a grouped property in StyleHints.
    Fixes LP: #1602836.
  * Fix list view keyboard navigation for RightToLeft and BottomToTop
    directions. Fixes LP: #1605634
  * Use external QML files instead of embedded QML strings for autopilot tests.
    Fixes LP: #1578319
  * Fix failing autopilot header tests.
  * Fix ActionSelectionPopover Autopilot CPO tests.

  [Christian Dywan ]
  * Include indexes in "offline" docs and filter out link errors.
    Fixes LP: #1603937.
  * Increase focus ring thickness from 1dp to 2dp. Fixes LP: #1602690.
  * Add a snippet about tests to the toplevel README
  * Enter/Return to trigger, Space to expand ComboButton. Fixes LP: #1523817.
  * Initialize engine variable before using it in the _engine case.
  * Use Qt.rgba instead of #0000 checking ListItem default color.
    Fixes LP: #1560004
  * Don't use a different .desktop file in the gallery tests.
    Fixes LP: #1578319
  * Update scaling docs, set QT_SCALE_FACTOR and unset GRID_UNIT_PX.
    Fixes LP: #1610208

  [ Florian Boucault ]
  * Sections: load Icons asynchronously.

 -- Zoltán Balogh <email address hidden> Sun, 14 Aug 2016 09:06:46 +0000

Changed in ubuntu-ui-toolkit (Ubuntu):
status: In Progress → Fix Released
Changed in canonical-devices-system-image:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers