Use Adw.StatusPage instead of custom placeholders

6 files changed, 68 insertions, 189 deletions

diff --git a/main/data/global_search.ui b/main/data/global_search.ui
index a29c48de..610bcace 100644
--- a/main/data/global_search.ui
+++ b/main/data/global_search.ui
@@ -19,40 +19,13 @@
                             <object class="GtkStackPage">
                                 <property name="name">empty</property>
                                 <property name="child">
-                                    <object class="GtkBox">
-                                        <property name="orientation">vertical</property>
-                                        <property name="spacing">10</property>
-                                        <property name="valign">center</property>
-                                        <child>
-                                            <object class="GtkImage">
-                                                <property name="icon-name">system-search-symbolic</property>
-                                                <property name="icon-size">large</property>
-                                                <property name="pixel-size">72</property>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel">
-                                                <property name="label" translatable="1">No active search</property>
-                                                <attributes>
-                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
-                                                    <attribute name="scale" value="1.3"></attribute>
-                                                </attributes>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel">
-                                                <property name="label" translatable="1">Type to start a search</property>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
+                                    <object class="AdwStatusPage">
+                                        <style>
+                                            <class name="compact"/>
+                                        </style>
+                                        <property name="icon-name">system-search-symbolic</property>
+                                        <property name="title" translatable="1">No active search</property>
+                                        <property name="description" translatable="1">Type to start a search</property>
                                     </object>
                                 </property>
                             </object>
@@ -61,40 +34,13 @@
                             <object class="GtkStackPage">
                                 <property name="name">no-result</property>
                                 <property name="child">
-                                    <object class="GtkBox">
-                                        <property name="orientation">vertical</property>
-                                        <property name="spacing">10</property>
-                                        <property name="valign">center</property>
-                                        <child>
-                                            <object class="GtkImage">
-                                                <property name="icon-name">face-uncertain-symbolic</property>
-                                                <property name="icon-size">large</property>
-                                                <property name="pixel-size">72</property>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel">
-                                                <property name="label" translatable="1">No matching messages</property>
-                                                <attributes>
-                                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"></attribute>
-                                                    <attribute name="scale" value="1.3"></attribute>
-                                                </attributes>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel">
-                                                <property name="label" translatable="1">Check the spelling or try to remove filters</property>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
+                                    <object class="AdwStatusPage">
+                                        <style>
+                                            <class name="compact"/>
+                                        </style>
+                                        <property name="icon-name">face-uncertain-symbolic</property>
+                                        <property name="title" translatable="1">No matching messages</property>
+                                        <property name="description" translatable="1">Check the spelling or try to remove filters</property>
                                     </object>
                                 </property>
                             </object>
diff --git a/main/data/theme.css b/main/data/theme.css
index 3d24750e..6b93bc8f 100644
--- a/main/data/theme.css
+++ b/main/data/theme.css
@@ -3,6 +3,10 @@
  * It provides sane defaults for things that are very Dino-specific.
  */
 
+statuspage {
+    opacity: 0.5;
+}
+
 window.dino-main .dino-header-right {
     background: @theme_base_color;
 }
diff --git a/main/data/unified_main_content.ui b/main/data/unified_main_content.ui
index 83cfc942..a66275de 100644
--- a/main/data/unified_main_content.ui
+++ b/main/data/unified_main_content.ui
@@ -30,37 +30,18 @@
                             <object class="GtkStackPage">
                                 <property name="name">placeholder</property>
                                 <property name="child">
-                                    <object class="GtkBox">
+                                    <object class="AdwStatusPage">
+                                        <style>
+                                            <class name="compact"/>
+                                        </style>
                                         <property name="margin-start">20</property>
                                         <property name="margin-end">20</property>
                                         <property name="margin-top">20</property>
                                         <property name="margin-bottom">20</property>
-                                        <property name="spacing">10</property>
-                                        <property name="valign">start</property>
-                                        <property name="halign">start</property>
                                         <property name="width_request">260</property>
-                                        <child>
-                                            <object class="GtkImage" id="conversation_list_placeholder_image">
-                                                <property name="valign">start</property>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
-                                        <child>
-                                            <object class="GtkLabel">
-                                                <property name="wrap">1</property>
-                                                <property name="margin-top">70</property>
-                                                <property name="margin-end">50</property>
-                                                <property name="xalign">0</property>
-                                                <property name="valign">end</property>
-                                                <property name="max-width-chars">0</property>
-                                                <property name="label" translatable="1">Click here to start a conversation or join a channel.</property>
-                                                <style>
-                                                    <class name="dim-label"/>
-                                                </style>
-                                            </object>
-                                        </child>
+
+                                        <property name="title" translatable="True">You have no open chats</property>
+                                        <property name="description" translatable="True">Click + to start a conversation or join a channel</property>
                                     </object>
                                 </property>
                             </object>
@@ -89,33 +70,10 @@
                                     <object class="GtkStackPage">
                                         <property name="name">placeholder</property>
                                         <property name="child">
-                                            <object class="GtkBox">
-                                                <property name="orientation">vertical</property>
-                                                <property name="hexpand">1</property>
-                                                <property name="vexpand">1</property>
-                                                <property name="halign">center</property>
-                                                <property name="valign">center</property>
-                                                <child>
-                                                    <object class="GtkImage">
-                                                        <property name="icon-name">im.dino.Dino-symbolic</property>
-                                                        <property name="pixel-size">144</property>
-                                                        <property name="margin-bottom">30</property>
-                                                        <style>
-                                                            <class name="dim-label"/>
-                                                        </style>
-                                                    </object>
-                                                </child>
-                                                <child>
-                                                    <object class="GtkLabel">
-                                                        <property name="label" translatable="1">You have no open chats</property>
-                                                        <style>
-                                                            <class name="dim-label"/>
-                                                        </style>
-                                                        <attributes>
-                                                            <attribute name="scale" value="1.2"></attribute>
-                                                        </attributes>
-                                                    </object>
-                                                </child>
+                                            <object class="AdwStatusPage">
+                                                <property name="icon-name">im.dino.Dino-symbolic</property>
+                                                <property name="hexpand">True</property>
+                                                <property name="vexpand">True</property>
                                             </object>
                                         </property>
                                     </object>
diff --git a/main/data/unified_window_placeholder.ui b/main/data/unified_window_placeholder.ui
index 91958077..123920fe 100644
--- a/main/data/unified_window_placeholder.ui
+++ b/main/data/unified_window_placeholder.ui
@@ -2,69 +2,47 @@
 <interface>
     <requires lib="gtk" version="4.0"/>
     <template class="DinoUiMainWindowPlaceholder">
-        <property name="valign">fill</property>
         <child>
             <object class="GtkBox" id="box">
                 <property name="orientation">vertical</property>
-                <property name="valign">fill</property>
-                <property name="halign">fill</property>
-                <property name="hexpand">1</property>
-                <property name="vexpand">1</property>
+                <property name="hexpand">True</property>
+                <property name="vexpand">True</property>
                 <child>
                     <object class="GtkHeaderBar">
                         <property name="show-title-buttons">true</property>
                     </object>
                 </child>
                 <child>
-                    <object class="GtkImage">
-                        <property name="icon-name">im.dino.Dino-symbolic</property>
-                        <property name="pixel-size">144</property>
-                        <property name="margin-start">30</property>
-                        <property name="margin-end">30</property>
-                        <property name="margin-top">30</property>
-                        <property name="margin-bottom">30</property>
-                        <style>
-                            <class name="dim-label"/>
-                        </style>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkLabel" id="title_label">
-                        <property name="visible">0</property>
-                        <style>
-                            <class name="dim-label"/>
-                        </style>
-                        <attributes>
-                            <attribute name="scale" value="1.3"></attribute>
-                        </attributes>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkLabel" id="label">
-                        <property name="margin-top">5</property>
-                        <style>
-                            <class name="dim-label"/>
-                        </style>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkButton" id="primary_button">
-                        <property name="margin-top">15</property>
-                        <property name="halign">center</property>
-                        <style>
-                            <class name="text-button"/>
-                            <class name="suggested-action"/>
-                        </style>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkButton" id="secondary_button">
-                        <property name="visible">0</property>
-                        <property name="halign">center</property>
-<!--                        <property name="no_show_all">True</property>-->
-                        <style>
-                            <class name="text-button"/>
-                        </style>
+                    <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="valign">center</property>
+                        <property name="hexpand">True</property>
+                        <property name="vexpand">True</property>
+                        <child>
+                            <object class="AdwStatusPage" id="status_page">
+                                <property name="icon-name">im.dino.Dino-symbolic</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkButton" id="primary_button">
+                                <property name="halign">center</property>
+                                <property name="visible">False</property>
+                                <style>
+                                    <class name="text-button"/>
+                                    <class name="suggested-action"/>
+                                </style>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkButton" id="secondary_button">
+                                <property name="visible">0</property>
+                                <property name="halign">center</property>
+                                <property name="visible">False</property>
+                                <style>
+                                    <class name="text-button"/>
+                                </style>
+                            </object>
+                        </child>
                     </object>
                 </child>
             </object>
diff --git a/main/src/ui/conversation_titlebar/occupants_entry.vala b/main/src/ui/conversation_titlebar/occupants_entry.vala
index a71cf05e..63a35d52 100644
--- a/main/src/ui/conversation_titlebar/occupants_entry.vala
+++ b/main/src/ui/conversation_titlebar/occupants_entry.vala
@@ -11,7 +11,7 @@ class OccupantsEntry : Plugins.ConversationTitlebarEntry, Object {
     StreamInteractor stream_interactor;
     private Conversation? conversation;
 
-    private MenuButton button = new MenuButton() { icon_name="system-users-symbolic", tooltip_text=Util.string_if_tooltips_active(_("Members")) };
+    private MenuButton button = new MenuButton() { icon_name="system-users-symbolic", tooltip_text=Util.string_if_tooltips_active(_("Members")), visible=false };
 
     private OccupantMenu.View menu = null;
 
diff --git a/main/src/ui/main_window.vala b/main/src/ui/main_window.vala
index 9aeb4217..d892d9ab 100644
--- a/main/src/ui/main_window.vala
+++ b/main/src/ui/main_window.vala
@@ -74,9 +74,6 @@ public class MainWindow : Adw.Window {
         Frame search_frame = (Frame) builder.get_object("search_frame");
         global_search = new GlobalSearch(stream_interactor);
         search_frame.set_child(global_search.get_widget());
-
-        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/dino-conversation-list-placeholder-arrow.svg"));
     }
 
     private void setup_headerbar() {
@@ -179,28 +176,24 @@ public class MainWindow : Adw.Window {
 
 public class WelcomePlaceholder : MainWindowPlaceholder {
     public WelcomePlaceholder() {
-        title_label.label = _("Welcome to Dino!");
-        label.label = _("Sign in or create an account to get started.");
+        status_page.title = _("Welcome to Dino!");
+        status_page.description = _("Sign in or create an account to get started.");
         primary_button.label = _("Set up account");
-        title_label.visible = true;
-        secondary_button.visible = false;
+        primary_button.visible = true;
     }
 }
 
 public class NoAccountsPlaceholder : MainWindowPlaceholder {
     public NoAccountsPlaceholder() {
-        title_label.label = _("No active accounts");
+        status_page.title = _("No active accounts");
         primary_button.label = _("Manage accounts");
-        title_label.visible = true;
-        label.visible = false;
-        secondary_button.visible = false;
+        primary_button.visible = true;
     }
 }
 
 [GtkTemplate (ui = "/im/dino/Dino/unified_window_placeholder.ui")]
 public class MainWindowPlaceholder : Box {
-    [GtkChild] public unowned Label title_label;
-    [GtkChild] public unowned Label label;
+    [GtkChild] public unowned Adw.StatusPage status_page;
     [GtkChild] public unowned Button primary_button;
     [GtkChild] public unowned Button secondary_button;
 }