SDDM theme: stop eliding people's names so aggressively

When more than one user is shown on the login screen, username labels
are limited to the width of the avatar so they don't overlap one
another. However they are not allowed to become multi-line strings, so
they can get elided if they are not somewhat short. This was worsened
recently by a change in Plasma 5.24 to increase the size of the
username labels, which shortened the amount of text that can be seen
without eliding.

This commit fixes that problem by allowing constrained username labels
to become multi-line strings with up to 3 lines, and adjusting the
surrounding layout to visually accommodate this.

BUG: 450673
FIXED-IN: 5.24.3
(cherry picked from commit a630dfb6b6)

lookandfeel/contents/components/SessionManagementScreen.qml

@@ -52,11 +52,18 @@ FocusScope {
 
     default property alias _children: innerLayout.children
 
+    // FIXME: move this component into a layout, rather than abusing
+    // anchors and implicitly relying on other components' built-in
+    // whitespace to avoid items being overlapped.
     UserList {
         id: userListView
         visible: showUserList && y > 0
         anchors {
             bottom: parent.verticalCenter
+            // We only need an extra bottom margin when text is constrained,
+            // since only in this case can the username label be a multi-line
+            // string that would otherwise overflow.
+            bottomMargin: constrainText ? PlasmaCore.Units.gridUnit * 3 : 0
             left: parent.left
             right: parent.right
         }

lookandfeel/contents/components/UserDelegate.qml

@@ -53,12 +53,10 @@ Item {
 
     Item {
         id: imageSource
-        anchors {
-            bottom: usernameDelegate.top
-            bottomMargin: PlasmaCore.Units.largeSpacing
-            horizontalCenter: parent.horizontalCenter
-        }
-        Behavior on width { 
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Behavior on width {
             PropertyAnimation {
                 from: faceSize
                 duration: PlasmaCore.Units.longDuration;
@@ -87,11 +85,8 @@ Item {
     }
 
     ShaderEffect {
-        anchors {
-            bottom: usernameDelegate.top
-            bottomMargin: PlasmaCore.Units.largeSpacing
-            horizontalCenter: parent.horizontalCenter
-        }
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
 
         width: imageSource.width
         height: imageSource.height
@@ -151,16 +146,18 @@ Item {
     PlasmaComponents3.Label {
         id: usernameDelegate
 
+        anchors.top: imageSource.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+
         // Make it bigger than other fonts to match the scale of the avatar better
         font.pointSize: wrapper.fontSize + 4
-        anchors {
-            bottom: parent.bottom
-            horizontalCenter: parent.horizontalCenter
-        }
+
         width: constrainText ? parent.width : implicitWidth
         text: wrapper.name
         style: softwareRendering ? Text.Outline : Text.Normal
         styleColor: softwareRendering ? PlasmaCore.ColorScope.backgroundColor : "transparent" //no outline, doesn't matter
+        wrapMode: Text.WordWrap
+        maximumLineCount: wrapper.constrainText ? 3 : 1
         elide: Text.ElideRight
         horizontalAlignment: Text.AlignHCenter
         //make an indication that this has active focus, this only happens when reached with keyboard navigation

lookandfeel/contents/components/UserList.qml

@@ -12,6 +12,7 @@ ListView {
     readonly property string selectedUser: currentItem ? currentItem.userName : ""
     readonly property int userItemWidth: PlasmaCore.Units.gridUnit * 8
     readonly property int userItemHeight: PlasmaCore.Units.gridUnit * 8
+    readonly property bool constrainText: count > 1
     property int fontSize: PlasmaCore.Theme.defaultFont.pointSize + 2
 
     implicitHeight: userItemHeight
@@ -72,7 +73,7 @@ ListView {
         height: userItemHeight
 
         //if we only have one delegate, we don't need to clip the text as it won't be overlapping with anything
-        constrainText: ListView.view.count > 1
+        constrainText: view.constrainText
 
         isCurrent: ListView.isCurrentItem