From 7cf893113b7c774d342a7eb347712d22ad7c4e96 Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Mon, 30 Aug 2021 12:32:31 +0200 Subject: [PATCH] feat(StatusModal): add ability to set elide config of header titles There are now two new properties in `StatusModalHeaderSettings`: - `titleElide` - `subTitleElide` These can be used to configure the `elide` property of both header titles. The default values for both of them is `Text.ElideRight`. Closes #353 --- ui/StatusQ/sandbox/Popups.qml | 1 + ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml | 3 ++- ui/StatusQ/src/StatusQ/Popups/StatusModal.qml | 2 ++ .../src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml | 6 ++++-- .../src/StatusQ/Popups/statusModal/StatusModalHeader.qml | 4 ++++ 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/ui/StatusQ/sandbox/Popups.qml b/ui/StatusQ/sandbox/Popups.qml index 7fbf006e8e..bbceef5c2f 100644 --- a/ui/StatusQ/sandbox/Popups.qml +++ b/ui/StatusQ/sandbox/Popups.qml @@ -245,6 +245,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I 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.subTitleElide: Text.ElideMiddle header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" header.image.isIdenticon: true diff --git a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml index 1b759a8cb9..6cf49bf2d4 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml @@ -3,7 +3,8 @@ import QtQuick 2.14 QtObject { property string title property string subTitle - + property int titleElide: Text.ElideRight + property int subTitleElide: Text.ElideRight property StatusImageSettings image: StatusImageSettings { width: 40 height: 40 diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml index dab861a05d..31a6fd96be 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml @@ -52,7 +52,9 @@ QC.Popup { visible: statusModal.showHeader title: header.title + titleElide: header.titleElide subTitle: header.subTitle + subTitleElide: header.subTitleElide image: header.image icon: header.icon diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml index bcd0c47f47..9a1aaf4362 100644 --- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml +++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml @@ -9,6 +9,8 @@ Row { property alias title: headerTitle.text property alias subTitle: headerSubTitle.text + property int titleElide: Text.ElideRight + property int subTitleElide: Text.ElideRight property bool editable: false signal editButtonClicked @@ -88,7 +90,7 @@ Row { font.family: Theme.palette.baseFont.name font.pixelSize: 17 font.bold: true - elide: Text.ElideRight + elide: statusImageWithTitle.titleElide color: Theme.palette.directColor1 width: !editButton.visible ? parent.width : parent.width - editButton.width - parent.spacing @@ -116,7 +118,7 @@ Row { font.pixelSize: 15 color:Theme.palette.baseColor1 width: parent.width - elide: Text.ElideRight + elide: statusImageWithTitle.subTitleElide } } } diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml index 3ad384cde4..cb904c43af 100644 --- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml +++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml @@ -11,6 +11,8 @@ Rectangle { property alias title: imageWithTitle.title property alias subTitle: imageWithTitle.subTitle + property int titleElide + property int subTitleElide property alias actionButton: actionButtonLoader.sourceComponent property alias image: imageWithTitle.image @@ -35,6 +37,8 @@ Rectangle { anchors.leftMargin: 16 editable: statusModalHeader.editable + titleElide: statusModalHeader.titleElide + subTitleElide: statusModalHeader.subTitleElide onEditButtonClicked: statusModalHeader.editButtonClicked() }