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
This commit is contained in:
parent
5c706fdc80
commit
28e514f927
|
@ -245,6 +245,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
header.title: "Some super long text here that exceeds the available space"
|
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.subTitle: "Some super long text here that exceeds the available space"
|
||||||
|
header.subTitleElide: Text.ElideMiddle
|
||||||
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||||
header.image.isIdenticon: true
|
header.image.isIdenticon: true
|
||||||
|
|
|
@ -3,7 +3,8 @@ import QtQuick 2.14
|
||||||
QtObject {
|
QtObject {
|
||||||
property string title
|
property string title
|
||||||
property string subTitle
|
property string subTitle
|
||||||
|
property int titleElide: Text.ElideRight
|
||||||
|
property int subTitleElide: Text.ElideRight
|
||||||
property StatusImageSettings image: StatusImageSettings {
|
property StatusImageSettings image: StatusImageSettings {
|
||||||
width: 40
|
width: 40
|
||||||
height: 40
|
height: 40
|
||||||
|
|
|
@ -52,7 +52,9 @@ QC.Popup {
|
||||||
|
|
||||||
visible: statusModal.showHeader
|
visible: statusModal.showHeader
|
||||||
title: header.title
|
title: header.title
|
||||||
|
titleElide: header.titleElide
|
||||||
subTitle: header.subTitle
|
subTitle: header.subTitle
|
||||||
|
subTitleElide: header.subTitleElide
|
||||||
image: header.image
|
image: header.image
|
||||||
icon: header.icon
|
icon: header.icon
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,8 @@ Row {
|
||||||
|
|
||||||
property alias title: headerTitle.text
|
property alias title: headerTitle.text
|
||||||
property alias subTitle: headerSubTitle.text
|
property alias subTitle: headerSubTitle.text
|
||||||
|
property int titleElide: Text.ElideRight
|
||||||
|
property int subTitleElide: Text.ElideRight
|
||||||
property bool editable: false
|
property bool editable: false
|
||||||
|
|
||||||
signal editButtonClicked
|
signal editButtonClicked
|
||||||
|
@ -88,7 +90,7 @@ Row {
|
||||||
font.family: Theme.palette.baseFont.name
|
font.family: Theme.palette.baseFont.name
|
||||||
font.pixelSize: 17
|
font.pixelSize: 17
|
||||||
font.bold: true
|
font.bold: true
|
||||||
elide: Text.ElideRight
|
elide: statusImageWithTitle.titleElide
|
||||||
color: Theme.palette.directColor1
|
color: Theme.palette.directColor1
|
||||||
width: !editButton.visible ? parent.width :
|
width: !editButton.visible ? parent.width :
|
||||||
parent.width - editButton.width - parent.spacing
|
parent.width - editButton.width - parent.spacing
|
||||||
|
@ -116,7 +118,7 @@ Row {
|
||||||
font.pixelSize: 15
|
font.pixelSize: 15
|
||||||
color:Theme.palette.baseColor1
|
color:Theme.palette.baseColor1
|
||||||
width: parent.width
|
width: parent.width
|
||||||
elide: Text.ElideRight
|
elide: statusImageWithTitle.subTitleElide
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,8 @@ Rectangle {
|
||||||
|
|
||||||
property alias title: imageWithTitle.title
|
property alias title: imageWithTitle.title
|
||||||
property alias subTitle: imageWithTitle.subTitle
|
property alias subTitle: imageWithTitle.subTitle
|
||||||
|
property int titleElide
|
||||||
|
property int subTitleElide
|
||||||
property alias actionButton: actionButtonLoader.sourceComponent
|
property alias actionButton: actionButtonLoader.sourceComponent
|
||||||
|
|
||||||
property alias image: imageWithTitle.image
|
property alias image: imageWithTitle.image
|
||||||
|
@ -35,6 +37,8 @@ Rectangle {
|
||||||
anchors.leftMargin: 16
|
anchors.leftMargin: 16
|
||||||
|
|
||||||
editable: statusModalHeader.editable
|
editable: statusModalHeader.editable
|
||||||
|
titleElide: statusModalHeader.titleElide
|
||||||
|
subTitleElide: statusModalHeader.subTitleElide
|
||||||
onEditButtonClicked: statusModalHeader.editButtonClicked()
|
onEditButtonClicked: statusModalHeader.editButtonClicked()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue