Add file upload preview

fixes #756

5 files changed, 181 insertions, 53 deletions

diff --git a/main/data/conversation_content_view/image_toolbar.ui b/main/data/conversation_content_view/image_toolbar.ui
index 562f944b..4046658b 100644
--- a/main/data/conversation_content_view/image_toolbar.ui
+++ b/main/data/conversation_content_view/image_toolbar.ui
@@ -13,7 +13,7 @@
                         <property name="visible">True</property>
                         <child>
                             <object class="GtkLabel" id="url_label">
-                                <property name="max_width_chars">25</property>
+                                <property name="max_width_chars">18</property>
                                 <property name="ellipsize">middle</property>
                                 <property name="hexpand">True</property>
                                 <property name="margin-left">5</property>
diff --git a/main/data/conversation_view.ui b/main/data/conversation_view.ui
index df9df7e0..3c157960 100644
--- a/main/data/conversation_view.ui
+++ b/main/data/conversation_view.ui
@@ -1,54 +1,76 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-    <template class="DinoUiConversationView" parent="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="visible">True</property>
-            <style>
-                <class name="dino-conversation"/>
-            </style>
-            <child>
-                <object class="GtkOverlay">
-                    <property name="visible">True</property>
-                    <child>
-                <object class="DinoUiConversationSummaryConversationView" id="conversation_frame">
-                    <property name="visible">True</property>
-                </object>
-                    </child>
-                    <child type="overlay">
-                        <object class="GtkRevealer" id="goto_end_revealer">
-                            <property name="halign">end</property>
-                            <property name="valign">end</property>
-                            <property name="transition-type">crossfade</property>
-                            <property name="visible">True</property>
-                            <property name="margin-end">30</property>
-                            <property name="margin-bottom">30</property>
-                            <child>
-                                <object class="GtkButton" id="goto_end_button">
-                                    <property name="vexpand">False</property>
-                                    <property name="halign">end</property>
-                                    <property name="valign">end</property>
-                                    <property name="visible">True</property>
-                                    <style>
-                                        <class name="circular"/>
-                                    </style>
-                                    <child>
-                                        <object class="GtkImage">
-                                            <property name="icon-name">go-down-symbolic</property>
-                                            <property name="icon-size">1</property>
-                                            <property name="visible">True</property>
-                                        </object>
-                                    </child>
-                                </object>
-                            </child>
-                        </object>
+    <template class="DinoUiConversationView" parent="GtkOverlay">
+        <property name="visible">True</property>
+        <child>
+            <object class="GtkBox">
+                <property name="orientation">vertical</property>
+                <property name="visible">True</property>
+                <style>
+                    <class name="dino-conversation"/>
+                </style>
+                <child>
+                    <object class="GtkOverlay">
+                        <property name="visible">True</property>
+                        <child>
+                            <object class="DinoUiConversationSummaryConversationView" id="conversation_frame">
+                                <property name="visible">True</property>
+                            </object>
+                        </child>
+                        <child type="overlay">
+                            <object class="GtkRevealer" id="goto_end_revealer">
+                                <property name="halign">end</property>
+                                <property name="valign">end</property>
+                                <property name="transition-type">crossfade</property>
+                                <property name="visible">True</property>
+                                <property name="margin-end">30</property>
+                                <property name="margin-bottom">30</property>
+                                <child>
+                                    <object class="GtkButton" id="goto_end_button">
+                                        <property name="vexpand">False</property>
+                                        <property name="halign">end</property>
+                                        <property name="valign">end</property>
+                                        <property name="visible">True</property>
+                                        <style>
+                                            <class name="circular"/>
+                                        </style>
+                                        <child>
+                                            <object class="GtkImage">
+                                                <property name="icon-name">go-down-symbolic</property>
+                                                <property name="icon-size">1</property>
+                                                <property name="visible">True</property>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </child>
+                            </object>
 
-                    </child>
-                </object>
-            </child>
-            <child>
-                <object class="DinoUiChatInputView" id="chat_input">
-                    <property name="visible">True</property>
-                </object>
-            </child>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="DinoUiChatInputView" id="chat_input">
+                        <property name="visible">True</property>
+                    </object>
+                </child>
+            </object>
+        </child>
+        <child type="overlay">
+            <object class="GtkRevealer" id="white_revealer">
+                <property name="transition-type">crossfade</property>
+                <property name="transition-duration">200</property>
+                <property name="reveal-child">False</property>
+                <property name="visible">False</property>
+                <child>
+                    <object class="GtkBox">
+                        <property name="opacity">0.7</property>
+                        <property name="visible">true</property>
+                        <style>
+                            <class name="dino-white-overlay"/>
+                        </style>
+                    </object>
+                </child>
+            </object>
+        </child>
     </template>
 </interface>
diff --git a/main/data/file_default_widget.ui b/main/data/file_default_widget.ui
index 7019f0c2..9da961c4 100644
--- a/main/data/file_default_widget.ui
+++ b/main/data/file_default_widget.ui
@@ -2,7 +2,6 @@
 <interface>
     <template class="DinoUiFileDefaultWidget" parent="GtkEventBox">
         <property name="halign">start</property>
-        <property name="visible">True</property>
         <style>
             <class name="file-box-outer"/>
         </style>
diff --git a/main/data/file_send_overlay.ui b/main/data/file_send_overlay.ui
new file mode 100644
index 00000000..c82cc3f1
--- /dev/null
+++ b/main/data/file_send_overlay.ui
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+    <template class="DinoUiFileSendOverlay">
+        <property name="hexpand">False</property>
+        <property name="vexpand">False</property>
+        <property name="halign">center</property>
+        <property name="valign">center</property>
+        <property name="visible">True</property>
+        <style>
+            <class name="background"/>
+            <class name="dino-file-overlay"/>
+        </style>
+        <child>
+            <object class="DinoUiSizeRequestBox">
+                <property name="size-request-mode">height-for-width</property>
+                <property name="orientation">vertical</property>
+                <property name="margin-right">20</property>
+                <property name="margin-left">20</property>
+                <property name="visible">True</property>
+                <child>
+                    <object class="GtkBox">
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
+                        <property name="orientation">horizontal</property>
+                        <property name="visible">True</property>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="label">Send a file</property>
+                                <property name="hexpand">True</property>
+                                <property name="visible">True</property>
+                                <attributes>
+                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                </attributes>
+                            </object>
+                            <packing>
+                                <property name="pack_type">start</property>
+                            </packing>
+                        </child>
+                        <child>
+                            <object class="GtkButton" id="close_button">
+                                <property name="can_default">True</property>
+                                <property name="can_focus">True</property>
+                                <property name="visible">True</property>
+                                <style>
+                                    <class name="titlebutton"/>
+                                    <class name="close"/>
+                                </style>
+                                <child>
+                                    <object class="GtkImage">
+                                        <property name="visible">True</property>
+                                        <property name="icon-name">window-close-symbolic</property>
+                                        <property name="icon-size">1</property>
+                                    </object>
+                                </child>
+                            </object>
+                            <packing>
+                                <property name="pack_type">end</property>
+                            </packing>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="DinoUiSizingBin" id="file_widget_insert">
+                        <property name="visible">True</property>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox">
+                        <property name="margin-top">15</property>
+                        <property name="margin-bottom">15</property>
+                        <property name="spacing">5</property>
+                        <property name="visible">True</property>
+                        <child>
+                            <object class="GtkLabel" id="info_label">
+                                <property name="visible">True</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkButton" id="send_button">
+                                <property name="label" translatable="yes">Send</property>
+                                <property name="can_default">True</property>
+                                <property name="can_focus">True</property>
+                                <property name="visible">True</property>
+                                <style>
+                                    <class name="suggested-action"/>
+                                </style>
+                            </object>
+                            <packing>
+                                <property name="pack_type">end</property>
+                            </packing>
+                        </child>
+                    </object>
+                </child>
+            </object>
+        </child>
+    </template>
+</interface>
diff --git a/main/data/theme.css b/main/data/theme.css
index 44b4b890..fb6e2b11 100644
--- a/main/data/theme.css
+++ b/main/data/theme.css
@@ -60,13 +60,13 @@ window.dino-main .dino-conversation .message-box.edit-mode:hover {
     background: alpha(@theme_selected_bg_color, 0.12);
 }
 
-window.dino-main .dino-conversation .file-box-outer {
+window.dino-main .file-box-outer {
     background: @theme_base_color;
     border-radius: 3px;
     border: 1px solid alpha(@theme_fg_color, 0.1);
 }
 
-window.dino-main .dino-conversation .file-box {
+window.dino-main .file-box {
     margin: 12px 16px 12px 12px;
 }
 
@@ -82,6 +82,16 @@ window.dino-main .dino-sidebar frame.auto-complete list > row {
     transition: none;
 }
 
+window.dino-main .dino-white-overlay {
+    background: @theme_base_color;
+}
+
+window.dino-main .dino-file-overlay {
+    border-radius: 5px;
+    border: 1px solid alpha(black, 0.2);
+    box-shadow: 0 2px 3px alpha(black, 0.1);
+}
+
 window.dino-main .dino-chatinput frame box {
     background: transparent;
 }