Add support for reactions

3 files changed, 64 insertions, 0 deletions

diff --git a/main/data/conversation_content_view/view.ui b/main/data/conversation_content_view/view.ui
index d64c0982..a9aae318 100644
--- a/main/data/conversation_content_view/view.ui
+++ b/main/data/conversation_content_view/view.ui
@@ -36,6 +36,9 @@
                                                                 <property name="margin-end">10</property>
                                                                 <property name="halign">end</property>
                                                                 <property name="valign">start</property>
+                                                                <style>
+                                                                    <class name="linked"/>
+                                                                </style>
                                                                 <child>
                                                                     <object class="GtkButton" id="button1">
                                                                         <property name="visible">0</property>
diff --git a/main/data/icons/scalable/actions/dino-emoticon-add-symbolic.svg b/main/data/icons/scalable/actions/dino-emoticon-add-symbolic.svg
new file mode 100644
index 00000000..51cc75c6
--- /dev/null
+++ b/main/data/icons/scalable/actions/dino-emoticon-add-symbolic.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 23.568 23.711" xmlns="http://www.w3.org/2000/svg">
+  <path d="m10 19.211c2.33 0 4.3-1.46 5.11-3.5h-10.22c0.8 2.04 2.78 3.5 5.11 3.5m-3.5-6.5c0.82843 0 1.5-0.67157 1.5-1.5s-0.67157-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.67157 1.5 1.5 1.5m7 0c0.82843 0 1.5-0.67157 1.5-1.5s-0.67157-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.67157 1.5 1.5 1.5m-3.5 9c-4.4183 0-8-3.5817-8-8s3.5817-8 8-8c1.4367-0.016553 1.4581-1.9613 0-2-5.53 0-10 4.5-10 10 0 5.5228 4.4772 10 10 10s10-4.4772 10-10c0-1.0544-2-1.0324-2 0 0 4.4183-3.5817 8-8 8"/>
+  <path d="m18.908 0c-0.33046 0-0.61972 0.12233-0.80078 0.36133-0.18106 0.239-0.25586 0.56747-0.25586 0.97266v2.6523h-2.2715c-0.38896 0-0.70598 0.064394-0.94727 0.21875-0.26371 0.15646-0.38672 0.4669-0.38672 0.83789 0 0.36179 0.12302 0.66715 0.38086 0.83398l0.001953 0.0019531h0.001953c0.24918 0.15228 0.56865 0.21875 0.94922 0.21875h2.2715v2.6543c0 0.40519 0.074767 0.73218 0.25586 0.9707 0.18109 0.23852 0.46892 0.35944 0.79883 0.36133 0.32038 0.001837 0.60667-0.12152 0.78906-0.35937 0.18239-0.23785 0.26374-0.56552 0.26758-0.9707v-0.0019531-2.6543h2.2559c0.41061 0 0.74047-0.073348 0.98242-0.25391s0.36719-0.46969 0.36719-0.80078c0-0.33109-0.12524-0.62218-0.36719-0.80273s-0.57181-0.25391-0.98242-0.25391h-2.2559v-2.6523c0-0.38896-0.064393-0.70598-0.21875-0.94727-0.15646-0.26371-0.46495-0.38672-0.83594-0.38672z"/>
+</svg>
diff --git a/main/data/theme.css b/main/data/theme.css
index b689d96c..c4bc36c3 100644
--- a/main/data/theme.css
+++ b/main/data/theme.css
@@ -82,6 +82,8 @@ window.dino-main .dino-sidebar > frame {
     border-bottom: 1px solid @borders;
 }
 
+/* Message */
+
 .message-box {
     transition: background .05s ease;
 }
@@ -107,6 +109,21 @@ window.dino-main .dino-conversation .message-box.error:hover {
     background: alpha(@error_color, 0.12);
 }
 
+/* Message Menu */
+
+.message-menu-box {
+    background-color: @theme_base_color;
+    border: 1px solid alpha(@theme_fg_color, 0.15);
+    border-radius: 5px;
+}
+
+.message-menu-button {
+    padding: 6px;
+    border: none;
+}
+
+/* Fie Widget */
+
 window.dino-main .file-box-outer,
 window.dino-main .call-box-outer {
     background: @theme_base_color;
@@ -140,6 +157,8 @@ window.dino-main .file-image-widget .file-box-outer button:hover {
     background: rgba(100, 100, 100, 0.5);
 }
 
+/* Call widget */
+
 window.dino-main .call-box-outer.incoming {
     border-color: alpha(@theme_selected_bg_color, 0.3);
 }
@@ -153,6 +172,39 @@ window.dino-main .multiparty-participants {
     background: alpha(@theme_fg_color, 0.04);
 }
 
+/* Reactions */
+
+window.dino-main button.reaction-box,
+window.dino-main menubutton.reaction-box > button {
+    border: 1px solid transparent;
+    padding: 3px 5px ;
+    border-radius: 10px;
+    background-color: alpha(@theme_fg_color, 0.05);
+    background-image: none;
+    box-shadow: none;
+    min-height: 0;
+    min-width: 0;
+}
+
+window.dino-main button.reaction-box.own-reaction,
+window.dino-main menubutton.reaction-box.own-reaction > button {
+    color: mix(@theme_selected_bg_color, @theme_fg_color, 0.4);
+    border-color: @theme_selected_bg_color;
+    background-color: alpha(@theme_selected_bg_color, 0.05);
+}
+
+window.dino-main button.reaction-box:hover,
+window.dino-main menubutton.reaction-box:hover > button {
+    background-color: alpha(@theme_fg_color, 0.1);
+}
+
+window.dino-main button.reaction-box.own-reaction:hover,
+window.dino-main menubutton.reaction-box.own-reaction > button {
+    background-color: alpha(@theme_selected_bg_color, 0.2);
+}
+
+/* Sidebar */
+
 window.dino-main .dino-sidebar > frame.collapsed {
     border-bottom: 1px solid @borders;
 }
@@ -165,6 +217,8 @@ window.dino-main .dino-sidebar frame.auto-complete list > row {
     transition: none;
 }
 
+/* File overlay */
+
 window.dino-main .dino-white-overlay {
     background: @theme_base_color;
 }
@@ -175,6 +229,8 @@ window.dino-main .dino-file-overlay {
     box-shadow: 0 2px 3px alpha(black, 0.1);
 }
 
+/* Chat Input*/
+
 window.dino-main .dino-chatinput frame box {
     background: transparent;
 }