From dd8bf92f8548ac4eab02d2ede6c0207deb1de593 Mon Sep 17 00:00:00 2001
From: Franck LAURENT <franck.laurent@savoirfairelinux.com>
Date: Fri, 21 Apr 2023 17:17:21 -0400
Subject: [PATCH] ChatViewFooter: add shortcut tooltip
Change-Id: Iceea3bda86ebfcc9c9b5f2b5039187dac9661add
---
src/app/commoncomponents/MarkdownPopup.qml | 4 +-
src/app/commoncomponents/MaterialToolTip.qml | 58 +++++++++++++++++--
src/app/commoncomponents/PushButton.qml | 3 +-
src/app/constant/JamiStrings.qml | 3 +-
src/app/constant/JamiTheme.qml | 3 +
.../components/KeyboardShortcutTable.qml | 56 +++++++++++++++++-
src/app/mainview/components/MessageBar.qml | 36 ++++++++----
7 files changed, 142 insertions(+), 21 deletions(-)
diff --git a/src/app/commoncomponents/MarkdownPopup.qml b/src/app/commoncomponents/MarkdownPopup.qml
index e9d4fc690..0423571e5 100644
--- a/src/app/commoncomponents/MarkdownPopup.qml
+++ b/src/app/commoncomponents/MarkdownPopup.qml
@@ -57,7 +57,9 @@ Popup {
imageContainerHeight: 20
radius: 5
- toolTipText: modelData.toolTip
+ toolTipText: modelData.shortcutText
+ shortcutKey: modelData.shortcutKey
+ hasShortcut: true
source: modelData.iconSrc
focusPolicy: Qt.TabFocus
diff --git a/src/app/commoncomponents/MaterialToolTip.qml b/src/app/commoncomponents/MaterialToolTip.qml
index 5c66f0121..d1f6e23fd 100644
--- a/src/app/commoncomponents/MaterialToolTip.qml
+++ b/src/app/commoncomponents/MaterialToolTip.qml
@@ -1,6 +1,7 @@
/*
* Copyright (C) 2021-2023 Savoir-faire Linux Inc.
* Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
+ * Author: Franck Laurent <franck.laurent@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
@@ -17,6 +18,7 @@
*/
import QtQuick
import QtQuick.Controls
+import QtQuick.Layouts
import net.jami.Constants 1.1
ToolTip {
@@ -24,22 +26,49 @@ ToolTip {
property alias backGroundColor: background.color
property alias textColor: label.color
+ property bool hasShortcut: false
+ property string shortcutKey
onVisibleChanged: {
if (visible)
animation.start();
}
- contentItem: Text {
- id: label
- text: root.text
- font.pixelSize: 13
- color: "white"
+ contentItem: ColumnLayout {
+
+ Text {
+ id: label
+ text: root.text
+ font.pixelSize: 13
+ color: "white"
+ Layout.alignment: Qt.AlignHCenter
+ Layout.preferredHeight: label.contentHeight
+ Layout.preferredWidth: label.contentWidth
+ }
+
+ Rectangle {
+ id: shortcutTextRect
+ Layout.preferredWidth: shortcutText.contentWidth + 10
+ Layout.preferredHeight: shortcutText.contentHeight + 10
+ visible: hasShortcut
+
+ color: JamiTheme.tooltipShortCutBackgroundColor
+ radius: JamiTheme.primaryRadius
+
+ Text {
+ id: shortcutText
+ anchors.centerIn: parent
+ font.pixelSize: 13
+ font.weight: Font.DemiBold
+ color: JamiTheme.tooltipShortCutTextColor
+ text: root.shortcutKey
+ }
+ }
}
background: Rectangle {
id: background
- color: "#c4272727"
+ color: JamiTheme.tooltipBackgroundColor
radius: 5
}
@@ -52,6 +81,15 @@ ToolTip {
to: 1.0
duration: JamiTheme.shortFadeDuration
}
+
+ NumberAnimation {
+ target: shortcutTextRect
+ properties: "opacity"
+ from: 0
+ to: 1.0
+ duration: JamiTheme.shortFadeDuration
+ }
+
NumberAnimation {
target: background
properties: "scale"
@@ -59,5 +97,13 @@ ToolTip {
to: 1.0
duration: JamiTheme.shortFadeDuration * 0.5
}
+
+ NumberAnimation {
+ target: shortcutTextRect
+ properties: "scale"
+ from: 0.5
+ to: 1.0
+ duration: JamiTheme.shortFadeDuration * 0.5
+ }
}
}
diff --git a/src/app/commoncomponents/PushButton.qml b/src/app/commoncomponents/PushButton.qml
index 741a48a36..21d320379 100644
--- a/src/app/commoncomponents/PushButton.qml
+++ b/src/app/commoncomponents/PushButton.qml
@@ -50,8 +50,9 @@ AbstractButton {
property alias textHAlign: textContent.horizontalAlignment
property bool buttonTextEnableElide: false
property alias alignement: textContent.horizontalAlignment
-
property alias toolTipText: toolTip.text
+ property alias hasShortcut: toolTip.hasShortcut
+ property alias shortcutKey: toolTip.shortcutKey
// State colors
property string pressedColor: JamiTheme.pressedButtonColor
diff --git a/src/app/constant/JamiStrings.qml b/src/app/constant/JamiStrings.qml
index 8a29377b8..ed5996f3f 100644
--- a/src/app/constant/JamiStrings.qml
+++ b/src/app/constant/JamiStrings.qml
@@ -572,6 +572,7 @@ Item {
property string conversationKeyboardShortcuts: qsTr("Conversation")
property string callKeyboardShortcuts: qsTr("Call")
property string settings: qsTr("Settings")
+ property string markdownKeyboardShortcuts: qsTr("Markdown")
property string openAccountList: qsTr("Open account list")
property string focusConversationsList: qsTr("Focus conversations list")
property string requestsList: qsTr("Requests list")
@@ -795,7 +796,7 @@ Item {
property string bold: qsTr("Bold")
property string italic: qsTr("Italic")
- property string barre: qsTr("Barre")
+ property string barre: qsTr("Strikethrough")
property string title: qsTr("Title")
property string link: qsTr("Link")
property string code: qsTr("Code")
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index 999410c88..72a961310 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -545,6 +545,9 @@ Item {
property real tipBoxContentFontSize: calcSize(12)
property color tipBoxBackgroundColor: darkTheme ? blackColor : whiteColor
property color tipBoxBorderColor: darkTheme ? "#123F4A" : "#A3C2DA"
+ property color tooltipBackgroundColor: darkTheme ? "#66000000" : "#c4272727"
+ property color tooltipShortCutBackgroundColor: darkTheme ? blackColor : "#2c2c2c"
+ property color tooltipShortCutTextColor: "#a7a7a7"
//sharePosition
property real timerButtonsFontSize: calcSize(11)
diff --git a/src/app/mainview/components/KeyboardShortcutTable.qml b/src/app/mainview/components/KeyboardShortcutTable.qml
index f1dac9d2d..49ea293a6 100644
--- a/src/app/mainview/components/KeyboardShortcutTable.qml
+++ b/src/app/mainview/components/KeyboardShortcutTable.qml
@@ -207,6 +207,56 @@ Window {
}
}
+ ListModel {
+ id: keyboardMarkdownShortcutsModel
+
+ ListElement {
+ shortcut: "Ctrl + B"
+ shortcut2: ""
+ description: qsTr("Bold")
+ }
+ ListElement {
+ shortcut: "Ctrl + I"
+ shortcut2: ""
+ description: qsTr("Italic")
+ }
+ ListElement {
+ shortcut: "Shift + Alt + X"
+ shortcut2: ""
+ description: qsTr("Strikethrough")
+ }
+ ListElement {
+ shortcut: "Ctrl + Alt + H"
+ shortcut2: ""
+ description: qsTr("Heading")
+ }
+ ListElement {
+ shortcut: "Ctrl + Alt + K"
+ shortcut2: ""
+ description: qsTr("Link")
+ }
+ ListElement {
+ shortcut: "Ctrl + Alt + C"
+ shortcut2: ""
+ description: qsTr("Code")
+ }
+ ListElement {
+ shortcut: "Shift + Alt + 9"
+ shortcut2: ""
+ description: qsTr("Quote")
+ }
+ ListElement {
+ shortcut: "Shift + Alt + 8"
+ shortcut2: ""
+ description: qsTr("Bulleted List")
+ }
+ ListElement {
+ shortcut: "Shift + Alt + 7"
+ shortcut2: ""
+ description: qsTr("Numbered List")
+ }
+ }
+
Rectangle {
id: windowRect
@@ -243,6 +293,8 @@ Window {
return JamiStrings.callKeyboardShortcuts;
case 3:
return JamiStrings.settings;
+ case 4:
+ return JamiStrings.markdownKeyboardShortcuts;
}
}
color: JamiTheme.textColor
@@ -269,6 +321,8 @@ Window {
return keyboardCallsShortcutsModel;
case 3:
return keyboardSettingsShortcutsModel;
+ case 4:
+ return keyboardMarkdownShortcutsModel;
}
}
delegate: KeyboardShortcutKeyDelegate {
@@ -292,7 +346,7 @@ Window {
}
Repeater {
- model: ["1", "2", "3", "4"]
+ model: ["1", "2", "3", "4", "5"]
KeyboardShortcutTabButton {
currentIndex: selectionBar.currentIndex
diff --git a/src/app/mainview/components/MessageBar.qml b/src/app/mainview/components/MessageBar.qml
index 157dab89a..cd870e209 100644
--- a/src/app/mainview/components/MessageBar.qml
+++ b/src/app/mainview/components/MessageBar.qml
@@ -403,7 +403,8 @@ ColumnLayout {
Action {
id: boldAction
property var iconSrc: JamiResources.bold_black_24dp_svg
- property var toolTip: JamiStrings.bold
+ property var shortcutText: JamiStrings.bold
+ property string shortcutKey: "Ctrl+B"
onTriggered: function clickAction() {
listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "**", "**");
@@ -412,7 +413,8 @@ ColumnLayout {
Action {
id: italicAction
property var iconSrc: JamiResources.italic_black_24dp_svg
- property var toolTip: JamiStrings.italic
+ property var shortcutText: JamiStrings.italic
+ property string shortcutKey: "Ctrl+I"
onTriggered: function clickAction() {
listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "*", "*");
}
@@ -420,7 +422,8 @@ ColumnLayout {
Action {
id: barreAction
property var iconSrc: JamiResources.s_barre_black_24dp_svg
- property var toolTip: JamiStrings.barre
+ property var shortcutText: JamiStrings.barre
+ property string shortcutKey: "Shift+Alt+X"
onTriggered: function clickAction() {
listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "~~", "~~");
}
@@ -428,7 +431,8 @@ ColumnLayout {
Action {
id: titleAction
property var iconSrc: JamiResources.title_black_24dp_svg
- property var toolTip: JamiStrings.title
+ property var shortcutText: JamiStrings.title
+ property string shortcutKey: "Ctrl+Alt+H"
onTriggered: function clickAction() {
listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "### ", false);
}
@@ -445,7 +449,10 @@ ColumnLayout {
imageContainerHeight: 15
radius: 5
- toolTipText: modelData.toolTip
+ toolTipText: modelData.shortcutText
+ shortcutKey: modelData.shortcutKey
+ hasShortcut: true
+
source: modelData.iconSrc
focusPolicy: Qt.TabFocus
@@ -563,7 +570,8 @@ ColumnLayout {
Action {
id: linkAction
property var iconSrc: JamiResources.link_web_black_24dp_svg
- property var toolTip: JamiStrings.link
+ property var shortcutText: JamiStrings.link
+ property string shortcutKey: "Ctrl+Alt+K"
onTriggered: function clickAction() {
listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "[", "](url)");
}
@@ -571,7 +579,8 @@ ColumnLayout {
Action {
id: codeAction
property var iconSrc: JamiResources.code_black_24dp_svg
- property var toolTip: JamiStrings.code
+ property var shortcutText: JamiStrings.code
+ property string shortcutKey: "Ctrl+Alt+C"
onTriggered: function clickAction() {
listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "```", "```");
}
@@ -579,7 +588,8 @@ ColumnLayout {
Action {
id: quoteAction
property var iconSrc: JamiResources.quote_black_24dp_svg
- property var toolTip: JamiStrings.quote
+ property var shortcutText: JamiStrings.quote
+ property string shortcutKey: "Shift+Alt+9"
onTriggered: function clickAction() {
listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "> ", false);
}
@@ -587,7 +597,8 @@ ColumnLayout {
Action {
id: bulletPointAction
property var iconSrc: JamiResources.bullet_point_black_24dp_svg
- property var toolTip: JamiStrings.bulletPoint
+ property var shortcutText: JamiStrings.bulletPoint
+ property string shortcutKey: "Shift+Alt+8"
onTriggered: function clickAction() {
listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "- ", false);
}
@@ -595,7 +606,8 @@ ColumnLayout {
Action {
id: bulletNumberAction
property var iconSrc: JamiResources.bullet_number_black_24dp_svg
- property var toolTip: JamiStrings.bulletNumber
+ property var shortcutText: JamiStrings.bulletNumber
+ property string shortcutKey: "Shift+Alt+7"
onTriggered: function clickAction() {
listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "", true);
}
@@ -612,7 +624,9 @@ ColumnLayout {
imageContainerHeight: 20
radius: 5
- toolTipText: modelData.toolTip
+ toolTipText: modelData.shortcutText
+ shortcutKey: modelData.shortcutKey
+ hasShortcut: true
source: modelData.iconSrc
focusPolicy: Qt.TabFocus
--
GitLab