Make the reaction button configurable

harbour-fernschreiber.pro

@@ -64,6 +64,7 @@ DISTFILES += qml/harbour-fernschreiber.qml \
     qml/components/PollPreview.qml \
     qml/components/PressEffect.qml \
     qml/components/ProfilePictureList.qml \
+    qml/components/ReactionButton.qml \
     qml/components/ReplyMarkupButtons.qml \
     qml/components/StickerPicker.qml \
     qml/components/PhotoTextsListItem.qml \

qml/components/MessageListViewItem.qml

@@ -126,7 +126,7 @@ ListItem {
             Debug.log("Obtaining message reactions")
             tdLibWrapper.getMessageAvailableReactions(messageListItem.chatId, messageListItem.messageId);
         }
-        selectReactionBubble.visible = false;
+        selectReactionBubble.enabled = false;
     }
 
     function getContentWidthMultiplier() {
@@ -150,9 +150,13 @@ ListItem {
 
             if (messageListItem.messageReactions) {
                 messageListItem.messageReactions = null;
-                selectReactionBubble.visible = false;
+                selectReactionBubble.enabled = false;
             } else {
-                selectReactionBubble.visible = !selectReactionBubble.visible;
+                if (selectReactionBubble.enabled) {
+                    selectReactionBubble.enabled = false
+                } else if (appSettings.showReactionButton) {
+                    selectReactionBubble.enabled = true
+                }
                 elementSelected(index);
             }
         }
@@ -189,11 +193,11 @@ ListItem {
         target: chatPage
         onResetElements: {
             messageListItem.messageReactions = null;
-            selectReactionBubble.visible = false;
+            selectReactionBubble.enabled = false;
         }
         onElementSelected: {
             if (elementIndex !== index) {
-                selectReactionBubble.visible = false;
+                selectReactionBubble.enabled = false;
             }
         }
         onNavigatedTo: {
@@ -716,7 +720,7 @@ ListItem {
                                 onClicked: {
                                     if (messageListItem.messageReactions) {
                                         messageListItem.messageReactions = null;
-                                        selectReactionBubble.visible = false;
+                                        selectReactionBubble.enabled = false;
                                     } else {
                                         openReactions();
                                     }
@@ -728,35 +732,23 @@ ListItem {
 
             }
 
-            Rectangle {
+            Loader {
                 id: selectReactionBubble
-                visible: false
-                opacity: visible ? 0.5 : 0.0
-                Behavior on opacity { NumberAnimation {} }
                 anchors {
                     horizontalCenter: messageListItem.isOwnMessage ? messageBackground.left : messageBackground.right
                     verticalCenter: messageBackground.verticalCenter
                 }
-                height: Theme.itemSizeExtraSmall
-                width: Theme.itemSizeExtraSmall
-                color: Theme.primaryColor
-                radius: parent.width / 2
-            }
-
-            IconButton {
-                id: selectReactionButton
-                visible: selectReactionBubble.visible
-                opacity: visible ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation {} }
-                icon.source: "image://theme/icon-s-favorite"
-                anchors.centerIn: selectReactionBubble
-                onClicked: {
-                    openReactions();
+                enabled: false
+                opacity: enabled ? 1 : 0
+                active: opacity > 0
+                Behavior on opacity { FadeAnimation {} }
+                sourceComponent: Component {
+                    ReactionButton {
+                        onClicked: openReactions()
+                    }
                 }
             }
-
         }
-
     }
 
     Column {
@@ -818,7 +810,7 @@ ListItem {
                                 // Reaction is not yet selected
                                 tdLibWrapper.addMessageReaction(chatId, messageId, modelData)
                                 messageReactions = null
-                                selectReactionBubble.visible = false
+                                selectReactionBubble.enabled = false
                             }
                         }
                     }

qml/components/ReactionButton.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+Rectangle {
+    id: button
+
+    height: Theme.itemSizeExtraSmall
+    width: Theme.itemSizeExtraSmall
+    color: Theme.rgba(Theme.primaryColor, 0.4)
+    radius: width / 2
+
+    signal clicked()
+
+    IconButton {
+        icon.source: "image://theme/icon-s-favorite"
+        anchors.centerIn: parent
+        onClicked: button.clicked()
+    }
+}

qml/components/settingsPage/SettingsBehavior.qml

@@ -21,6 +21,8 @@ import QtQuick 2.6
 import Sailfish.Silica 1.0
 import WerkWolf.Fernschreiber 1.0
 
+import ".."
+
 AccordionItem {
     text: qsTr("Behavior")
     Component {
@@ -114,6 +116,31 @@ AccordionItem {
                 }
             }
 
+            TextSwitch {
+                width: parent.columnWidth
+                checked: appSettings.showReactionButton
+                text: qsTr("Show reaction button on tap")
+                description: qsTr("The reaction button may appear when you tap the message bubble, to make access to the reactions even easier.")
+                automaticCheck: false
+                onClicked: {
+                    appSettings.showReactionButton = !checked
+                }
+
+                ReactionButton {
+                    Behavior on opacity { FadeAnimation {} }
+                    opacity: appSettings.showReactionButton ? 1 : 0
+                    visible: opacity > 0
+                    anchors {
+                        right: parent.right
+                        rightMargin: parent.rightMargin
+                        verticalCenter: parent.verticalCenter
+                    }
+                    onClicked: {
+                        appSettings.showReactionButton = !parent.checked
+                    }
+                }
+            }
+
             ComboBox {
                 id: feedbackComboBox
                 width: parent.columnWidth

src/appsettings.cpp

@@ -42,6 +42,7 @@ namespace {
     const QString KEY_FOCUS_TEXTAREA_ON_CHAT_OPEN("focusTextAreaOnChatOpen");
     const QString KEY_SPONSORED_MESS("sponsoredMess");
     const QString KEY_HIGHLIGHT_UNREADCONVS("highlightUnreadConversations");
+    const QString KEY_SHOW_REACTION_BUTTON("showReactionButton");
 }
 
 AppSettings::AppSettings(QObject *parent) : QObject(parent), settings(QStandardPaths::writableLocation(QStandardPaths::ConfigLocation) + "/de.ygriega/fernschreiber/settings.conf", QSettings::NativeFormat)
@@ -329,6 +330,20 @@ void AppSettings::setFocusTextAreaOnChatOpen(bool focusTextAreaOnChatOpen)
     }
 }
 
+bool AppSettings::showReactionButton() const
+{
+    return settings.value(KEY_SHOW_REACTION_BUTTON, true).toBool();
+}
+
+void AppSettings::setShowReactionButton(bool enable)
+{
+    if (showReactionButton() != enable) {
+        LOG(KEY_SHOW_REACTION_BUTTON << enable);
+        settings.setValue(KEY_SHOW_REACTION_BUTTON, enable);
+        emit showReactionButtonChanged();
+    }
+}
+
 AppSettings::SponsoredMess AppSettings::getSponsoredMess() const
 {
     return (SponsoredMess) settings.value(KEY_SPONSORED_MESS, (int)

src/appsettings.h

@@ -43,8 +43,9 @@ class AppSettings : public QObject {
     Q_PROPERTY(bool onlineOnlyMode READ onlineOnlyMode WRITE setOnlineOnlyMode NOTIFY onlineOnlyModeChanged)
     Q_PROPERTY(bool delayMessageRead READ delayMessageRead WRITE setDelayMessageRead NOTIFY delayMessageReadChanged)
     Q_PROPERTY(bool focusTextAreaOnChatOpen READ getFocusTextAreaOnChatOpen WRITE setFocusTextAreaOnChatOpen NOTIFY focusTextAreaOnChatOpenChanged)
-    Q_PROPERTY(SponsoredMess sponsoredMess READ getSponsoredMess WRITE setSponsoredMess NOTIFY sponsoredMessChanged)
     Q_PROPERTY(bool highlightUnreadConversations READ highlightUnreadConversations WRITE setHighlightUnreadConversations NOTIFY highlightUnreadConversationsChanged)
+    Q_PROPERTY(bool showReactionButton READ showReactionButton WRITE setShowReactionButton NOTIFY showReactionButtonChanged)
+    Q_PROPERTY(SponsoredMess sponsoredMess READ getSponsoredMess WRITE setSponsoredMess NOTIFY sponsoredMessChanged)
 
 public:
     enum SponsoredMess {
@@ -121,12 +122,15 @@ class AppSettings : public QObject {
     bool getFocusTextAreaOnChatOpen() const;
     void setFocusTextAreaOnChatOpen(bool focusTextAreaOnChatOpen);
 
-    SponsoredMess getSponsoredMess() const;
-    void setSponsoredMess(SponsoredMess sponsoredMess);
-
     bool highlightUnreadConversations() const;
     void setHighlightUnreadConversations(bool enable);
 
+    bool showReactionButton() const;
+    void setShowReactionButton(bool enable);
+
+    SponsoredMess getSponsoredMess() const;
+    void setSponsoredMess(SponsoredMess sponsoredMess);
+
 signals:
     void sendByEnterChanged();
     void focusTextAreaAfterSendChanged();
@@ -147,8 +151,9 @@ class AppSettings : public QObject {
     void onlineOnlyModeChanged();
     void delayMessageReadChanged();
     void focusTextAreaOnChatOpenChanged();
-    void sponsoredMessChanged();
     void highlightUnreadConversationsChanged();
+    void showReactionButtonChanged();
+    void sponsoredMessChanged();
 
 private:
     QSettings settings;