From 6c272dddf68f77dc1b7b15f888952c1e3e60e4ec Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Thu, 11 Feb 2021 16:50:59 +0100 Subject: [PATCH] feat(StatusChatInput): introduce context menu to format message Closes #1804 --- ui/app/img/format-text-bold.svg | 3 + ui/app/img/format-text-code.svg | Bin 0 -> 457 bytes ui/app/img/format-text-italic.svg | 3 + ui/app/img/format-text-strike-through.svg | 3 + ui/shared/status/StatusChatInput.qml | 41 +++++++++++- ui/shared/status/StatusTextFormatMenu.qml | 78 ++++++++++++++++++++++ 6 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 ui/app/img/format-text-bold.svg create mode 100644 ui/app/img/format-text-code.svg create mode 100644 ui/app/img/format-text-italic.svg create mode 100644 ui/app/img/format-text-strike-through.svg create mode 100644 ui/shared/status/StatusTextFormatMenu.qml diff --git a/ui/app/img/format-text-bold.svg b/ui/app/img/format-text-bold.svg new file mode 100644 index 0000000000..4ea39c285f --- /dev/null +++ b/ui/app/img/format-text-bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/format-text-code.svg b/ui/app/img/format-text-code.svg new file mode 100644 index 0000000000000000000000000000000000000000..bfba8bf5faa0c24f3c1921173cfd356c47fe8470 GIT binary patch literal 457 zcmV;)0XF`LP)ce4ax>E0pz7GNJyQ45sF%#2vX86P&OzdlnuH;%Nr7o4?B(1Bsi(v zd$Dx-@AIAg+YAC?_Le>%;`1+8!$}!gET={5&z{vQuUiPQD4F>C;BLKGX zQHpkAnx+FG`HCq2ej3NO^*l%zD55W$nr@ zEtG+pxS)lw#}Q39UsYfNb`Ue%L1*+kf&pHZx?{&uU?~D6(Q8`}25%nl) z7`zyUaYzL=Bk<)(OWF00000NkvXXu0mjf?KrqG literal 0 HcmV?d00001 diff --git a/ui/app/img/format-text-italic.svg b/ui/app/img/format-text-italic.svg new file mode 100644 index 0000000000..aab9090476 --- /dev/null +++ b/ui/app/img/format-text-italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/format-text-strike-through.svg b/ui/app/img/format-text-strike-through.svg new file mode 100644 index 0000000000..159b32865f --- /dev/null +++ b/ui/app/img/format-text-strike-through.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/shared/status/StatusChatInput.qml b/ui/shared/status/StatusChatInput.qml index 76e2715bcc..a65a813326 100644 --- a/ui/shared/status/StatusChatInput.qml +++ b/ui/shared/status/StatusChatInput.qml @@ -1,6 +1,6 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 -import QtGraphicalEffects 1.12 +import QtGraphicalEffects 1.13 import QtQuick.Layouts 1.13 import QtMultimedia 5.13 import QtQuick.Dialogs 1.3 @@ -678,6 +678,45 @@ Rectangle { color: "transparent" } selectionColor: Style.current.primarySelectionColor + persistentSelection: true + onReleased: function (event) { + if (messageInputField.selectedText.trim() !== "") { + let x = event.x - (textFormatMenu.width / 2) + textFormatMenu.popup(x, -messageInputField.height-2) + } + } + + StatusTextFormatMenu { + id: textFormatMenu + Action { + icon.name: "format-text-bold" + icon.width: 12 + icon.height: 16 + onTriggered: wrapSelection("**") + text: qsTr("Bold") + } + Action { + icon.name: "format-text-italic" + icon.width: 12 + icon.height: 16 + onTriggered: wrapSelection("*") + text: qsTr("Italic") + } + Action { + icon.name: "format-text-strike-through" + icon.width: 20 + icon.height: 18 + onTriggered: wrapSelection("~~") + text: qsTr("Strikethrough") + } + Action { + icon.name: "format-text-code" + icon.width: 20 + icon.height: 18 + onTriggered: wrapSelection("`") + text: qsTr("Code") + } + } } Action { shortcut: StandardKey.Bold diff --git a/ui/shared/status/StatusTextFormatMenu.qml b/ui/shared/status/StatusTextFormatMenu.qml new file mode 100644 index 0000000000..9a940b4612 --- /dev/null +++ b/ui/shared/status/StatusTextFormatMenu.qml @@ -0,0 +1,78 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import QtQuick.Layouts 1.13 +import QtQuick.Dialogs 1.3 +import "../../imports" +import "./" + +Menu { + id: root + width: 132 + height: 36 + + onClosed: { + messageInputField.deselect() + } + + background: Item { + id: menuBackground + Rectangle { + id: menuBackgroundContent + implicitWidth: menuBackground.width + implicitHeight: menuBackground.height + color: Style.current.modalBackground + radius: Style.current.radius + layer.enabled: true + layer.effect: DropShadow{ + width: menuBackgroundContent.width + height: menuBackgroundContent.height + x: menuBackgroundContent.x + visible: menuBackgroundContent.visible + source: menuBackgroundContent + horizontalOffset: 0 + verticalOffset: 4 + radius: 12 + samples: 25 + spread: 0.2 + color: "#22000000" + } + } + } + + contentItem: Item { + width: root.width + height: root.height + Row { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + Repeater { + model: root.contentModel + } + } + } + + delegate: MenuItem { + id: menuItem + width: 32 + height: 32 + leftPadding: 0 + topPadding: 0 + action: Action {} + contentItem: Item { + StatusIconButton { + icon.name: menuItem.action.icon.name + icon.width: menuItem.action.icon.width + icon.height: menuItem.action.icon.height + onClicked: menuItem.action.trigger() + StatusToolTip { + visible: parent.hovered + text: menuItem.action.text + } + } + } + background: Rectangle { + color: "transparent" + } + } +}