Introduce explicit clear button for in-reply-to and edit message, fixes #69
This commit is contained in:
parent
6161bc2894
commit
dba973b522
2 changed files with 74 additions and 42 deletions
|
@ -31,6 +31,9 @@ Row {
|
|||
|
||||
property string myUserId;
|
||||
property variant inReplyToMessage;
|
||||
property bool editable: false;
|
||||
|
||||
signal clearRequested()
|
||||
|
||||
onInReplyToMessageChanged: {
|
||||
if (inReplyToMessage) {
|
||||
|
@ -47,37 +50,51 @@ Row {
|
|||
border.width: 0
|
||||
}
|
||||
|
||||
Column {
|
||||
id: inReplyToMessageColumn
|
||||
spacing: Theme.paddingSmall
|
||||
Row {
|
||||
width: parent.width - Theme.paddingSmall - inReplyToMessageRectangle.width
|
||||
spacing: Theme.paddingSmall
|
||||
|
||||
Text {
|
||||
id: inReplyToUserText
|
||||
Column {
|
||||
id: inReplyToMessageColumn
|
||||
spacing: Theme.paddingSmall
|
||||
width: parent.width - ( inReplyToRow.editable ? ( Theme.paddingSmall + removeInReplyToIconButton.width ) : 0 )
|
||||
|
||||
width: parent.width
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
font.weight: Font.ExtraBold
|
||||
color: Theme.primaryColor
|
||||
maximumLineCount: 1
|
||||
elide: Text.ElideRight
|
||||
textFormat: Text.StyledText
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
Text {
|
||||
id: inReplyToUserText
|
||||
|
||||
width: parent.width
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
font.weight: Font.ExtraBold
|
||||
color: Theme.primaryColor
|
||||
maximumLineCount: 1
|
||||
elide: Text.ElideRight
|
||||
textFormat: Text.StyledText
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
}
|
||||
|
||||
Text {
|
||||
id: inReplyToMessageText
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
color: Theme.primaryColor
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
textFormat: Text.StyledText
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
if (truncated) {
|
||||
text = text.replace(/\<img [^>]+\/\>/g, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: inReplyToMessageText
|
||||
font.pixelSize: Theme.fontSizeExtraSmall
|
||||
color: Theme.primaryColor
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
textFormat: Text.StyledText
|
||||
onTruncatedChanged: {
|
||||
// There is obviously a bug in QML in truncating text with images.
|
||||
// We simply remove Emojis then...
|
||||
if (truncated) {
|
||||
text = text.replace(/\<img [^>]+\/\>/g, "");
|
||||
}
|
||||
IconButton {
|
||||
id: removeInReplyToIconButton
|
||||
icon.source: "image://theme/icon-m-clear"
|
||||
visible: inReplyToRow.editable
|
||||
onClicked: {
|
||||
inReplyToRow.clearRequested();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -175,6 +175,8 @@ Page {
|
|||
}
|
||||
}
|
||||
controlSendButton();
|
||||
newMessageInReplyToRow.inReplyToMessage = null;
|
||||
newMessageColumn.editMessageId = "0";
|
||||
}
|
||||
|
||||
function getWordBoundaries(text, cursorPosition) {
|
||||
|
@ -1088,6 +1090,12 @@ Page {
|
|||
}
|
||||
}
|
||||
|
||||
editable: true
|
||||
|
||||
onClearRequested: {
|
||||
newMessageInReplyToRow.inReplyToMessage = null;
|
||||
}
|
||||
|
||||
id: newMessageInReplyToRow
|
||||
myUserId: chatPage.myUserId
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
@ -1265,15 +1273,31 @@ Page {
|
|||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
Row {
|
||||
width: parent.width
|
||||
|
||||
id: editMessageText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.bold: true
|
||||
text: qsTr("Edit Message")
|
||||
color: Theme.secondaryColor
|
||||
spacing: Theme.paddingSmall
|
||||
visible: newMessageColumn.editMessageId !== "0"
|
||||
|
||||
Text {
|
||||
width: parent.width - Theme.paddingSmall - removeEditMessageIconButton.width
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
id: editMessageText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.bold: true
|
||||
text: qsTr("Edit Message")
|
||||
color: Theme.secondaryColor
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: removeEditMessageIconButton
|
||||
icon.source: "image://theme/icon-m-clear"
|
||||
onClicked: {
|
||||
newMessageColumn.editMessageId = "0";
|
||||
newMessageTextField.text = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
|
@ -1291,15 +1315,6 @@ Page {
|
|||
labelVisible: false
|
||||
textLeftMargin: 0
|
||||
textTopMargin: 0
|
||||
onFocusChanged: {
|
||||
if (!focus) {
|
||||
newMessageInReplyToRow.inReplyToMessage = null;
|
||||
if (newMessageColumn.editMessageId !== "0") {
|
||||
newMessageColumn.editMessageId = "0";
|
||||
newMessageTextField.text = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
EnterKey.onClicked: {
|
||||
if (appSettings.sendByEnter) {
|
||||
sendMessage();
|
||||
|
|
Loading…
Reference in a new issue