Rework no-open-conversation placeholder

11 files changed, 185 insertions, 39 deletions

diff --git a/libdino/src/plugin/interfaces.vala b/libdino/src/plugin/interfaces.vala
index 41929ac0..2c9fb69d 100644
--- a/libdino/src/plugin/interfaces.vala
+++ b/libdino/src/plugin/interfaces.vala
@@ -70,6 +70,7 @@ public interface ConversationTitlebarEntry : Object {
 
 public interface ConversationTitlebarWidget : Object {
     public abstract void set_conversation(Conversation conversation);
+    public abstract void unset_conversation();
 }
 
 public abstract interface ConversationItemPopulator : Object {
diff --git a/libdino/src/service/conversation_manager.vala b/libdino/src/service/conversation_manager.vala
index 10ba5f6d..1ba53b35 100644
--- a/libdino/src/service/conversation_manager.vala
+++ b/libdino/src/service/conversation_manager.vala
@@ -143,6 +143,7 @@ public class ConversationManager : StreamInteractionModule, Object {
                 if(conversation.active) conversation_deactivated(conversation);
             }
         }
+        conversations.unset(account);
     }
 
     private class MessageListener : Dino.MessageListener {
diff --git a/main/CMakeLists.txt b/main/CMakeLists.txt
index 84bd0044..ae3cd494 100644
--- a/main/CMakeLists.txt
+++ b/main/CMakeLists.txt
@@ -14,6 +14,7 @@ find_packages(MAIN_PACKAGES REQUIRED
 
 set(RESOURCE_LIST
     icons/dino-changes-prevent-symbolic.svg
+    icons/dino-conversation-list-placeholder-arrow.svg
     icons/dino-double-tick-symbolic.svg
     icons/dino-emoticon-symbolic.svg
     icons/dino-qr-code-symbolic.svg
diff --git a/main/data/icons/dino-conversation-list-placeholder-arrow.svg b/main/data/icons/dino-conversation-list-placeholder-arrow.svg
new file mode 100644
index 00000000..1de38347
--- /dev/null
+++ b/main/data/icons/dino-conversation-list-placeholder-arrow.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14.423mm" height="25.742mm" version="1.1" viewBox="0 0 14.422716 25.741774" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="a" overflow="visible" orient="auto">
+      <path transform="scale(.6)" d="m8.7186 4.0337-10.926-4.0177 10.926-4.0177c-1.7455 2.3721-1.7354 5.6175-6e-7 8.0354z" fill-rule="evenodd" stroke="#000" stroke-linejoin="round" stroke-width=".625"/>
+    </marker>
+  </defs>
+  <g transform="translate(-76.236 -40.41)">
+    <path d="m77.066 41.011c1.1174 11.205 6.3598 21.407 13.389 24.939" fill="none" marker-start="url(#a)" stroke="#000" stroke-linecap="round" stroke-width=".4"/>
+  </g>
+</svg>
diff --git a/main/data/unified_main_content.ui b/main/data/unified_main_content.ui
index 9e660b50..587fb706 100644
--- a/main/data/unified_main_content.ui
+++ b/main/data/unified_main_content.ui
@@ -5,14 +5,56 @@
         <property name="orientation">horizontal</property>
         <property name="visible">True</property>
         <child>
-            <object class="GtkScrolledWindow" id="scrolled">
-                <property name="expand">True</property>
-                <property name="hscrollbar_policy">never</property>
+            <object class="GtkStack" id="left_stack">
                 <property name="visible">True</property>
                 <child>
-                    <object class="DinoUiConversationSelector" id="conversation_list">
+                    <object class="GtkScrolledWindow" id="scrolled">
+                        <property name="expand">True</property>
+                        <property name="hscrollbar_policy">never</property>
                         <property name="visible">True</property>
+                        <child>
+                            <object class="DinoUiConversationSelector" id="conversation_list">
+                                <property name="visible">True</property>
+                            </object>
+                        </child>
                     </object>
+                    <packing>
+                        <property name="name">content</property>
+                    </packing>
+                </child>
+                <child>
+                    <object class="GtkBox">
+                        <property name="margin">20</property>
+                        <property name="spacing">10</property>
+                        <property name="valign">start</property>
+                        <property name="halign">start</property>
+                        <property name="visible">True</property>
+                        <child>
+                            <object class="GtkImage" id="conversation_list_placeholder_image">
+                                <property name="visible">True</property>
+                                <property name="valign">start</property>
+                                <style>
+                                    <class name="dim-label"/>
+                                </style>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="wrap">True</property>
+                                <property name="margin-top">70</property>
+                                <property name="margin-right">50</property>
+                                <property name="visible">True</property>
+                                <property name="valign">end</property>
+                                <property name="label">Click here to start a conversation or join a channel</property>
+                                <style>
+                                    <class name="dim-label"/>
+                                </style>
+                            </object>
+                        </child>
+                    </object>
+                    <packing>
+                        <property name="name">placeholder</property>
+                    </packing>
                 </child>
             </object>
             <packing>
@@ -24,54 +66,99 @@
             <object class="GtkOverlay">
                 <property name="visible">True</property>
                 <child>
-                    <object class="GtkOverlay">
+                    <object class="GtkStack" id="right_stack">
                         <property name="visible">True</property>
                         <child>
-                            <object class="GtkBox">
-                                <property name="orientation">vertical</property>
+                            <object class="GtkOverlay">
                                 <property name="visible">True</property>
-                                <style>
-                                    <class name="dino-conversation"/>
-                                </style>
                                 <child>
-                                    <object class="DinoUiConversationSummaryConversationView" id="conversation_frame">
+                                    <object class="GtkBox">
+                                        <property name="orientation">vertical</property>
                                         <property name="visible">True</property>
+                                        <style>
+                                            <class name="dino-conversation"/>
+                                        </style>
+                                        <child>
+                                            <object class="DinoUiConversationSummaryConversationView" id="conversation_frame">
+                                                <property name="visible">True</property>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="DinoUiChatInputView" id="chat_input">
+                                                <property name="visible">True</property>
+                                            </object>
+                                        </child>
                                     </object>
                                 </child>
-                                <child>
-                                    <object class="DinoUiChatInputView" id="chat_input">
+                                <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">70</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>
+                            <packing>
+                                <property name="name">content</property>
+                            </packing>
                         </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>
+                        <child>
+                            <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <property name="expand">True</property>
+                                <property name="halign">center</property>
+                                <property name="valign">center</property>
                                 <property name="visible">True</property>
-                                <property name="margin-end">30</property>
-                                <property name="margin-bottom">70</property>
                                 <child>
-                                    <object class="GtkButton" id="goto_end_button">
-                                        <property name="vexpand">False</property>
-                                        <property name="halign">end</property>
-                                        <property name="valign">end</property>
+                                    <object class="GtkImage">
+                                        <property name="icon-name">im.dino.Dino-symbolic</property>
+                                        <property name="pixel-size">144</property>
+                                        <property name="margin-bottom">30</property>
                                         <property name="visible">True</property>
                                         <style>
-                                            <class name="circular"/>
+                                            <class name="dim-label"/>
                                         </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>
+                                <child>
+                                    <object class="GtkLabel">
+                                        <property name="visible">True</property>
+                                        <property name="label">You have no open chats</property>
+                                        <property name="xalign">0.5</property>
+                                        <property name="yalign">0.5</property>
+                                        <style>
+                                            <class name="dim-label"/>
+                                        </style>
+                                        <attributes>
+                                            <attribute name="scale" value="1.2"/>
+                                        </attributes>
                                     </object>
                                 </child>
                             </object>
+                            <packing>
+                                <property name="name">placeholder</property>
+                            </packing>
                         </child>
                     </object>
                 </child>
diff --git a/main/data/unified_window_placeholder.ui b/main/data/unified_window_placeholder.ui
index a16d98d4..cfabd132 100644
--- a/main/data/unified_window_placeholder.ui
+++ b/main/data/unified_window_placeholder.ui
@@ -6,7 +6,6 @@
         <child>
             <object class="GtkBox" id="box">
                 <property name="orientation">vertical</property>
-                <property name="spacing">10</property>
                 <property name="valign">center</property>
                 <property name="halign">center</property>
                 <property name="hexpand">True</property>
@@ -38,6 +37,7 @@
                     <object class="GtkLabel" id="label">
                         <property name="xalign">0.5</property>
                         <property name="yalign">0.5</property>
+                        <property name="margin-top">5</property>
                         <property name="visible">True</property>
                         <style>
                             <class name="dim-label"/>
@@ -46,6 +46,7 @@
                 </child>
                 <child>
                     <object class="GtkButton" id="primary_button">
+                        <property name="margin-top">15</property>
                         <property name="halign">center</property>
                         <property name="visible">True</property>
                         <style>
diff --git a/main/src/ui/conversation_titlebar/menu_entry.vala b/main/src/ui/conversation_titlebar/menu_entry.vala
index daee48c2..e72cb629 100644
--- a/main/src/ui/conversation_titlebar/menu_entry.vala
+++ b/main/src/ui/conversation_titlebar/menu_entry.vala
@@ -18,7 +18,7 @@ class MenuEntry : Plugins.ConversationTitlebarEntry, Object {
     public Plugins.ConversationTitlebarWidget? get_widget(Plugins.WidgetType type) {
         if (type == Plugins.WidgetType.GTK) {
             if (widget == null) {
-                widget = new MenuWidget(stream_interactor) { visible=true };
+                widget = new MenuWidget(stream_interactor) { visible=true, sensitive=false };
             }
             return widget;
         }
@@ -41,6 +41,7 @@ class MenuWidget : Button, Plugins.ConversationTitlebarWidget {
     }
 
     public new void set_conversation(Conversation conversation) {
+        this.sensitive = true;
         this.conversation = conversation;
         if (conversation.type_ == Conversation.Type.GROUPCHAT) {
             tooltip_text = "Channel details";
@@ -48,6 +49,11 @@ class MenuWidget : Button, Plugins.ConversationTitlebarWidget {
             tooltip_text = "Conversation details";
         }
     }
+
+    public new void unset_conversation() {
+        this.sensitive = false;
+    }
+
 }
 
 }
diff --git a/main/src/ui/conversation_titlebar/occupants_entry.vala b/main/src/ui/conversation_titlebar/occupants_entry.vala
index b5c4c228..facaa50f 100644
--- a/main/src/ui/conversation_titlebar/occupants_entry.vala
+++ b/main/src/ui/conversation_titlebar/occupants_entry.vala
@@ -18,7 +18,7 @@ class OccupantsEntry : Plugins.ConversationTitlebarEntry, Object {
     public Plugins.ConversationTitlebarWidget? get_widget(Plugins.WidgetType type) {
         if (type == Plugins.WidgetType.GTK) {
             if (widget == null) {
-                widget = new OccupantsWidget(stream_interactor) { visible=true };
+                widget = new OccupantsWidget(stream_interactor);
             }
             return widget;
         }
@@ -51,6 +51,10 @@ class OccupantsWidget : MenuButton, Plugins.ConversationTitlebarWidget {
             menu = new_menu;
         }
     }
+
+    public new void unset_conversation() {
+        visible = false;
+    }
 }
 
 }
diff --git a/main/src/ui/conversation_titlebar/search_entry.vala b/main/src/ui/conversation_titlebar/search_entry.vala
index 9fab0614..109c54d7 100644
--- a/main/src/ui/conversation_titlebar/search_entry.vala
+++ b/main/src/ui/conversation_titlebar/search_entry.vala
@@ -25,6 +25,7 @@ public class SearchMenuEntry : Plugins.ConversationTitlebarEntry, Object {
 
 public class GlobalSearchButton : Plugins.ConversationTitlebarWidget, Gtk.ToggleButton {
     public new void set_conversation(Conversation conversation) { }
+    public new void unset_conversation() { }
 }
 
 }
diff --git a/main/src/ui/unified_window.vala b/main/src/ui/unified_window.vala
index 6e0a1070..9e8c4484 100644
--- a/main/src/ui/unified_window.vala
+++ b/main/src/ui/unified_window.vala
@@ -32,6 +32,8 @@ public class UnifiedWindow : Gtk.Window {
     public SearchEntry search_entry;
     public GlobalSearch search_box;
     private Stack stack = new Stack() { visible=true };
+    private Stack left_stack;
+    private Stack right_stack;
 
     private StreamInteractor stream_interactor;
     private Conversation? conversation;
@@ -74,6 +76,8 @@ public class UnifiedWindow : Gtk.Window {
         Builder builder = new Builder.from_resource("/im/dino/Dino/unified_main_content.ui");
         paned = (Paned) builder.get_object("paned");
         box.add(paned);
+        left_stack = (Stack) builder.get_object("left_stack");
+        right_stack = (Stack) builder.get_object("right_stack");
         chat_input = ((ChatInput.View) builder.get_object("chat_input")).init(stream_interactor);
         chat_input.key_press_event.connect(forward_key_press_to_chat_input);
         conversation_frame = ((ConversationSummary.ConversationView) builder.get_object("conversation_frame")).init(stream_interactor);
@@ -84,6 +88,8 @@ public class UnifiedWindow : Gtk.Window {
         search_box = ((GlobalSearch) builder.get_object("search_box")).init(stream_interactor);
         search_revealer = (Revealer) builder.get_object("search_revealer");
         search_entry = (SearchEntry) builder.get_object("search_entry");
+        Image conversation_list_placeholder_image = (Image) builder.get_object("conversation_list_placeholder_image");
+        conversation_list_placeholder_image.set_from_pixbuf(new Pixbuf.from_resource("/im/dino/Dino/icons/dino-conversation-list-placeholder-arrow.svg"));
     }
 
     private void setup_headerbar() {
@@ -136,11 +142,16 @@ public class UnifiedWindow : Gtk.Window {
                 set_titlebar(placeholder_headerbar);
             }
         } else if (stream_interactor.get_module(ConversationManager.IDENTITY).get_active_conversations().size == 0) {
-            stack.set_visible_child_name("conversations_placeholder");
+            stack.set_visible_child_name("main");
+            left_stack.set_visible_child_name("placeholder");
+            right_stack.set_visible_child_name("placeholder");
             if (Util.use_csd()) {
-                set_titlebar(placeholder_headerbar);
+                set_titlebar(headerbar_paned);
             }
         } else {
+            left_stack.set_visible_child_name("content");
+            right_stack.set_visible_child_name("content");
+
             stack.set_visible_child_name("main");
             if (Util.use_csd()) {
                 set_titlebar(headerbar_paned);
@@ -171,7 +182,7 @@ public class UnifiedWindow : Gtk.Window {
 public class WelcomePlceholder : UnifiedWindowPlaceholder {
     public WelcomePlceholder() {
         title_label.label = _("Welcome to Dino!");
-        label.label = "Communicating happiness.";
+        label.label = "Create or log in to your account to get started.";
         primary_button.label = _("Set up account");
         title_label.visible = true;
         secondary_button.visible = false;
diff --git a/main/src/ui/unified_window_controller.vala b/main/src/ui/unified_window_controller.vala
index 2fd8eb0d..6ac941cc 100644
--- a/main/src/ui/unified_window_controller.vala
+++ b/main/src/ui/unified_window_controller.vala
@@ -43,6 +43,8 @@ public class UnifiedWindowController : Object {
                 update_conversation_topic(subject);
             }
         });
+        stream_interactor.get_module(ConversationManager.IDENTITY).conversation_deactivated.connect(check_unset_conversation);
+        stream_interactor.account_removed.connect(check_unset_conversation);
 
         app.plugin_registry.register_contact_titlebar_entry(new MenuEntry(stream_interactor));
         app.plugin_registry.register_contact_titlebar_entry(search_menu_entry);
@@ -120,7 +122,7 @@ public class UnifiedWindowController : Object {
         restore_window_size();
     }
 
-    public void select_conversation(Conversation conversation, bool do_reset_search = true, bool default_initialize_conversation = true) {
+    public void select_conversation(Conversation? conversation, bool do_reset_search = true, bool default_initialize_conversation = true) {
         this.conversation = conversation;
 
         update_conversation_display_name();
@@ -147,6 +149,26 @@ public class UnifiedWindowController : Object {
         }
     }
 
+    private void check_unset_conversation() {
+        if (stream_interactor.get_module(ConversationManager.IDENTITY).get_active_conversations().size == 0) {
+            unset_conversation();
+        }
+    }
+
+    private void unset_conversation() {
+        this.conversation = null;
+
+        conversation_display_name = null;
+        conversation_topic = null;
+
+        foreach(var e in this.app.plugin_registry.conversation_titlebar_entries) {
+            Plugins.ConversationTitlebarWidget widget = e.get_widget(Plugins.WidgetType.GTK);
+            if (widget != null) {
+                widget.unset_conversation();
+            }
+        }
+    }
+
     private void update_conversation_display_name() {
         conversation_display_name = Util.get_conversation_display_name(stream_interactor, conversation);
     }