add reaction box to message in qml

Dockerfile

@@ -3,7 +3,7 @@ FROM ubuntu:23.10
 RUN apt update -y \
     && apt install -y lld-16 ninja-build  build-essential libstdc++-13-dev git\
       clang-16 clang-tools-16 llvm-16 lcov cmake g++-12 \
-      libboost-all-dev libgl1-mesa-dev libglx-dev \
+      libboost-all-dev libgl1-mesa-dev libglx-dev libcurl4-openssl-dev \
       qt6-base-dev libqt6sql6-psql libqt6qml6 qt6-declarative-dev qt6-tools-dev qt6-tools-dev-tools qt6-l10n-tools qt6-svg-dev \
       qml6-module-qtquick-controls qml6-module-qtqml-workerscript qml6-module-qtquick-templates \
       postgresql libcutl-1.10 libpq-dev sqlite3 libsqlite3-dev odb libhiredis-dev

apps/client/CMakeLists.txt

@@ -67,8 +67,10 @@ set(QML_SOURCES
         gui/qml/components/SettingsButton.qml
         gui/qml/components/CustomButton.qml
         gui/qml/components/Invitation.qml
+
         gui/qml/components/messages/MessageView.qml
         gui/qml/components/messages/Message.qml
+        gui/qml/components/messages/ReactionBox.ui.qml
 
         gui/states/register/RegisterView.qml
         gui/states/login/LoginView.qml
@@ -100,6 +102,7 @@ set(RESOURCES
         resources/svg/close.svg
         resources/svg/check.svg
         resources/svg/cross.svg
+        resources/svg/happy-face.svg
 )
 
 qt_add_executable(${EXECUTABLE_NAME} Main.cpp ${SOURCES})

apps/client/core/configProvider/ConfigProvider.h

@@ -14,5 +14,8 @@ class ConfigProvider
 
     std::string getServerHost() const;
     int getServerPort() const;
+
+private:
+    std::unique_ptr<config::Config> config;
 };
 }

apps/client/gui/controllers/MessagesController.cpp

@@ -65,4 +65,9 @@ void MessagesController::requestMoreMessages()
 
     emit getMoreMessages();
 }
+
+void MessagesController::startChoosingReactions(const QString& messageId)
+{
+    currentMessageIdToChooseReaction = messageId.toStdString();
+}
 }

apps/client/gui/controllers/MessagesController.h

@@ -28,6 +28,7 @@ class MessagesController : public QObject
     QList<QObject*> getMessages();
 
     Q_INVOKABLE void sendMessage(const QString& text);
+    Q_INVOKABLE void startChoosingReactions(const QString& messageId);
 
 signals:
     void newMessageToSend(const QString& messageText);
@@ -45,6 +46,7 @@ public slots:
     const StateFactory& stateFactory;
     std::shared_ptr<StateMachine> stateMachine;
     std::shared_ptr<storage::MessageStorage> messageStorage;
+    std::string currentMessageIdToChooseReaction;
 
     inline static const QString name{"messagesController"};
 };

apps/client/gui/qml/common/settings.js

@@ -24,4 +24,6 @@ const buttonColor = "#313338"
 
 const settingsButtonColor = "#b5bac1"
 
-const boxColor = "#232428"
+const boxColor = "#232428"
+
+const hoverMessageColor = "#2e2f35"

apps/client/gui/qml/components/CustomButton.qml

@@ -10,10 +10,9 @@ Button {
     property string hoverColor: "#d8d9da"
     property int size: 45
 
-        signal
-    mouseEnteredArea
-        signal
-    mouseExitedArea
+    signal mouseEnteredArea()
+
+    signal mouseExitedArea()
 
     hoverEnabled: true
 

apps/client/gui/qml/components/messages/Message.qml

@@ -12,7 +12,9 @@ Rectangle {
 
     property string baseColor: Settings.backgroundColor
     color: baseColor
-    property string hoverColor: "#2e2f35"
+    property string hoverColor: Settings.hoverMessageColor
+
+    signal addReactionToMessage(messageId: string)
 
     Column {
         id: messageColumn
@@ -85,6 +87,19 @@ Rectangle {
         }
     }
 
+    ReactionBox {
+        id: reactionBox
+        anchors {
+            right: messageColumn.right
+            rightMargin: 10
+            verticalCenter: messageColumn.top
+        }
+
+        onAddReaction: {
+            message.addReactionToMessage(message.messageData.messageId)
+        }
+    }
+
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
@@ -93,9 +108,13 @@ Rectangle {
 
         onEntered: {
             message.color = message.hoverColor
+            reactionBox.visible = true
+            reactionBox.enabled = true
         }
         onExited: {
             message.color = message.baseColor
+            reactionBox.visible = false
+            reactionBox.enabled = false
         }
     }
 }

apps/client/gui/qml/components/messages/MessageView.qml

@@ -37,6 +37,11 @@ Rectangle {
             delegate: Message {
                 messageData: modelData
                 width: messagesView.width
+
+                onAddReactionToMessage: (messageId) => {
+                    console.log("Add reaction to message " + messageId);
+                    messagesController.startChoosingReactions(messageId);
+                }
             }
             onContentYChanged: {
                 if (messagesScrollView.ScrollBar.vertical.position > 0.01) {

apps/client/gui/qml/components/messages/ReactionBox.ui.qml

@@ -0,0 +1,53 @@
+import QtQuick 6.4
+import QtQuick.Controls 6.4
+import "../../common/settings.js" as Settings
+import ".."
+
+Rectangle {
+    z: 1
+    id: reactionBox
+    visible: false
+    width: 60
+    height: 25
+    radius: 5
+    color: Settings.hoverMessageColor
+    border.color: Settings.boxColor
+    border.width: 1
+
+        signal
+    addReaction
+
+    CustomButton {
+        id: reactionButton
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            verticalCenter: parent.verticalCenter
+        }
+        size: 25
+        height: size
+        icon.color: color
+        icon.height: size
+        icon.source: "../../../../resources/svg/happy-face.svg"
+        icon.width: size
+        width: size
+        enabled: true
+
+        background: Rectangle {
+            height: reactionButton.size
+            opacity: 0.5
+            radius: 3
+            visible: false
+            width: reactionButton.size
+        }
+
+        onMouseEnteredArea: {
+            background.visible = true;
+        }
+        onMouseExitedArea: {
+            background.visible = false;
+        }
+        onClicked: {
+            reactionBox.addReaction();
+        }
+    }
+}

externals/CMakeLists.txt

@@ -7,5 +7,4 @@ add_subdirectory(faker-cxx)
 add_subdirectory(cpr)
 add_subdirectory(fmt)
 set(BUILD_CONFIG_CXX_TESTS OFF)
-add_subdirectory(config-cxx)
-add_subdirectory(aws-sdk-cpp)
+add_subdirectory(config-cxx)