Introduce explicit clear button for in-reply-to and edit message, fixes #69

This commit is contained in:
Sebastian J. Wolf 2020-10-18 21:54:15 +02:00
parent 6161bc2894
commit dba973b522
2 changed files with 74 additions and 42 deletions

View file

@ -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();
}
}
}

View file

@ -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();