From 503a07bf5a14de826d8477cd3b3dcc1cb067f7eb Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Fri, 27 Aug 2021 14:06:20 +0200
Subject: [PATCH] fix(StatusModal): ensure header and subtitles elide if needed

Closes #256
---
 sandbox/Popups.qml                            | 32 +++++++++++++++++++
 .../statusModal/StatusImageWithTitle.qml      | 10 +++++-
 .../Popups/statusModal/StatusModalHeader.qml  |  1 +
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/sandbox/Popups.qml b/sandbox/Popups.qml
index 1a65d44b..7fbf006e 100644
--- a/sandbox/Popups.qml
+++ b/sandbox/Popups.qml
@@ -48,6 +48,11 @@ Column {
         onClicked: modalWithIdenticon.open()
     }
 
+    StatusButton {
+        text: "Modal with long titles"
+        onClicked: modalWithLongTitles.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -234,4 +239,31 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             }
         ]
     }
+
+    StatusModal {
+        id: modalWithLongTitles
+        anchors.centerIn: parent
+        header.title: "Some super long text here that exceeds the available space"
+        header.subTitle: "Some super long text here that exceeds the available space"
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        content: StatusBaseText {
+            id: text
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithContentAccess.contentComponent.text = "Changed!"
+                }
+            }
+        ]
+    }
 }
diff --git a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
index 8fb9544a..bcd0c47f 100644
--- a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
+++ b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
@@ -77,15 +77,21 @@ Row {
 
     Column {
         id: textLayout
-
+        width: !iconOrImage.active ? parent.width :
+              parent.width - iconOrImage.width - parent.spacing
         Row {
+            id: headerTitleRow
+            width: parent.width
             spacing: 4
             StatusBaseText {
                 id: headerTitle
                 font.family: Theme.palette.baseFont.name
                 font.pixelSize: 17
                 font.bold: true
+                elide: Text.ElideRight
                 color: Theme.palette.directColor1
+                width: !editButton.visible ? parent.width : 
+                      parent.width - editButton.width - parent.spacing
             }
             StatusFlatRoundButton {
                 id: editButton
@@ -109,6 +115,8 @@ Row {
             font.family: Theme.palette.baseFont.name
             font.pixelSize: 15
             color:Theme.palette.baseColor1
+            width: parent.width
+            elide: Text.ElideRight
         }
     }
 }
diff --git a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
index e2f2e85a..3ad384cd 100644
--- a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
+++ b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
@@ -31,6 +31,7 @@ Rectangle {
         id: imageWithTitle
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
+        anchors.right: actionButtonLoader.left
         anchors.leftMargin: 16
 
         editable: statusModalHeader.editable