chore(settings/profile): address social links QA issues

ui/app/AppLayouts/Profile/controls/CustomSocialLinkInput.qml

@@ -16,6 +16,9 @@ Item {
     property alias url: urlInput.text
     readonly property alias removeButton: removeButton
 
+    readonly property var focusItem: hyperlinkInput.input.edit
+    property var nextFocusItem: null
+
     implicitHeight: layout.implicitHeight
     implicitWidth: layout.implicitWidth
 
@@ -37,6 +40,8 @@ Item {
                 label: qsTr("Hyperlink Text")
                 placeholderText: qsTr("Example: My Myspace Profile")
                 charLimit: 24
+
+                input.tabNavItem: urlInput.input.edit
             }
 
             StatusInput {
@@ -46,6 +51,8 @@ Item {
                 Layout.fillWidth: true
                 label: qsTr("URL")
                 placeholderText: qsTr("Link URL")
+
+                input.tabNavItem: root.nextFocusItem
             }
         }
 
@@ -69,6 +76,7 @@ Item {
                 }
 
                 SocialLinkPreview {
+                    Layout.preferredHeight: 32
                     text: !!hyperlinkInput.text ? hyperlinkInput.text : qsTr("My Myspace Profile")
                     url: !!urlInput.text ? urlInput.text : urlInput.placeholderText
                     linkType: Constants.socialLinkType.custom

ui/app/AppLayouts/Profile/controls/StaticSocialLinkInput.qml

@@ -10,6 +10,8 @@ StatusInput {
 
     property int linkType
 
+    leftPadding: 18 // by design
+
     placeholderText: {
         if (linkType === Constants.socialLinkType.twitter) return qsTr("Twitter Handle")
         if (linkType === Constants.socialLinkType.personalSite) return qsTr("Personal Site")

ui/app/AppLayouts/Profile/panels/ProfileDescriptionPanel.qml

@@ -39,6 +39,8 @@ Item {
             placeholderText: qsTr("Display Name")
             charLimit: 24
             validators: Constants.validators.displayName
+
+            input.tabNavItem: bioInput.input.edit
         }
 
 
@@ -56,9 +58,13 @@ Item {
             minimumHeight: 108
             maximumHeight: 108
             input.verticalAlignment: TextEdit.AlignTop
+
+            input.tabNavItem: socialLinksRepeater.count ? socialLinksRepeater.itemAt(0).input.edit : null
         }
 
         Repeater {
+            id: socialLinksRepeater
+
             model: root.socialLinksModel
             delegate: StaticSocialLinkInput {
                 objectName: model.text + "-socialLinkInput"
@@ -68,10 +74,19 @@ Item {
                 text: model.url
 
                 onTextChanged: root.socialLinkChanged(model.uuid, model.text, text)
+
+                input.tabNavItem: {
+                    if (index < socialLinksRepeater.count - 1) {
+                        return socialLinksRepeater.itemAt(index + 1).input.edit
+                    }
+                    return addMoreSocialLinksButton
+                }
             }
         }
 
         StatusIconTextButton {
+            id: addMoreSocialLinksButton
+
             objectName: "addMoreSocialLinksButton"
             Layout.topMargin: -8 // by design
             text: qsTr("Add more social links")

ui/app/AppLayouts/Profile/popups/SocialLinksModal.qml

@@ -83,7 +83,18 @@ StatusDialog {
                     linkType: model.linkType
                     text: model.url
 
+                    input.tabNavItem: {
+                        if (index < staticLinksRepeater.count - 1) {
+                            return staticLinksRepeater.itemAt(index + 1).input.edit
+                        }
+                        return customLinksRepeater.count ? customLinksRepeater.itemAt(0).focusItem : null
+                    }
+
                     onTextChanged: root.profileStore.updateLink(model.uuid, model.text, text)
+
+                    Component.onCompleted: if (index === 0) {
+                                               input.edit.forceActiveFocus()
+                                           }
                 }
             }
 
@@ -113,6 +124,13 @@ StatusDialog {
                         removeButton.visible: index > 0
                         removeButton.onClicked: root.profileStore.removeCustomLink(model.uuid)
 
+                        nextFocusItem: {
+                            if (index < customLinksRepeater.count - 1) {
+                                return customLinksRepeater.itemAt(index + 1).focusItem
+                            }
+                            return addAnotherCustomLinkButton
+                        }
+
                         onHyperlinkChanged: root.profileStore.updateLink(model.uuid, hyperlink, url)
                         onUrlChanged: root.profileStore.updateLink(model.uuid, hyperlink, url)
 
@@ -128,6 +146,7 @@ StatusDialog {
             }
 
             StatusIconTextButton {
+                id: addAnotherCustomLinkButton
                 text: qsTr("Add another custom link")
                 onClicked: {
                     root.profileStore.createCustomLink("", "")

ui/imports/shared/controls/SocialLinkPreview.qml

@@ -46,9 +46,11 @@ Rectangle {
         }
 
         StatusBaseText {
+            Layout.maximumWidth: 150
             text: root.linkType === Constants.socialLinkType.custom ? root.text : root.url
             color: Theme.palette.directColor4
             font.weight: Font.Medium
+            elide: Text.ElideMiddle
         }
     }
 
@@ -58,11 +60,12 @@ Rectangle {
         contentItem: RowLayout {
             StatusBaseText {
                 Layout.fillHeight: true
+                Layout.maximumWidth: 300
                 Layout.bottomMargin: 8
 
                 text: toolTip.text
                 color: Theme.palette.white
-                wrapMode: Text.WordWrap
+                elide: Text.ElideMiddle
                 font.pixelSize: 13
                 font.weight: Font.Medium
                 horizontalAlignment: Text.AlignHCenter

ui/imports/shared/panels/ProfileBioSocialsPanel.qml

@@ -79,10 +79,6 @@ Item {
         sorters: [
             ExpressionSorter {
                 expression: sortedSocialLinksModel.customsLastPredicate(modelLeft.linkType, modelRight.linkType)
-            },
-            StringSorter {
-                roleName: "text"
-                caseSensitivity: Qt.CaseInsensitive
             }
         ]
     }
@@ -96,8 +92,9 @@ Item {
 
         StatusBaseText {
             Layout.fillWidth: true
+            visible: text !== ""
             text: root.bio
-            wrapMode: Text.WordWrap
+            wrapMode: Text.Wrap
         }
 
         Flow {
@@ -114,6 +111,7 @@ Item {
 
                 model: sortedSocialLinksModel
                 delegate: SocialLinkPreview {
+                    height: 32
                     text: model.text
                     url: model.url
                     linkType: model.linkType