Placeholder: resize based on parent

elementary · Jan 10, 2024 · d2c44cf · d2c44cf
1 parent 978d80f
commit d2c44cf
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 3 deletions.
diff --git a/demo/Views/WelcomeView.vala b/demo/Views/WelcomeView.vala
@@ -38,12 +38,53 @@ public class WelcomeView : Gtk.Box {
             icon = new ThemedIcon ("edit-find-symbolic")
         };
 
+        var listbox = new Gtk.ListBox () {
+            margin_top = 12,
+            margin_end = 12,
+            margin_bottom = 12,
+            margin_start = 12
+        };
+        listbox.set_placeholder (search_placeholder);
+        listbox.add_css_class (Granite.STYLE_CLASS_FRAME);
+
+        var search_entry = new Gtk.SearchEntry () {
+            margin_top = 12,
+            margin_bottom = 9,
+            margin_start = 12,
+            margin_end = 12
+        };
+
+        var popover_placeholder = new Granite.Placeholder ("No mailboxes found") {
+            description = "Try changing search terms",
+            icon = new ThemedIcon ("edit-find-symbolic")
+        };
+
+        var popover_list = new Gtk.ListBox ();
+        popover_list.set_placeholder (popover_placeholder);
+
+        var box = new Gtk.Box (VERTICAL, 0);
+        box.append (search_entry);
+        box.append (popover_list);
+
+        var popover = new Gtk.Popover () {
+            autohide = true,
+            child = box
+        };
+
+        var menubutton = new Gtk.MenuButton () {
+            halign = CENTER,
+            valign = CENTER,
+            label = "Listbox in a Popover",
+            popover = popover
+        };
+
         var stack = new Gtk.Stack () {
             vexpand = true
         };
         stack.add_titled (welcome, "Welcome", "Welcome");
         stack.add_titled (alert, "Alert", "Alert");
-        stack.add_titled (search_placeholder, "Search", "Search");
+        stack.add_titled (listbox, "ListBox", "ListBox");
+        stack.add_titled (menubutton, "Popover", "Popover");
 
         var stack_switcher = new Gtk.StackSwitcher () {
             margin_top = 24,

diff --git a/lib/Styles/Granite/Placeholder.scss b/lib/Styles/Granite/Placeholder.scss
@@ -30,8 +30,8 @@ placeholder {
     .title-2 {
         @extend .dim-label;
 
-        color: #{'@theme_fg_color'};
-        font-size: 12pt;
+        color: $fg-color;
+        font-size: 1.3em;
         font-weight: initial;
     }
 
@@ -68,3 +68,35 @@ placeholder {
         }
     }
 }
+
+list placeholder {
+    .title-1 {
+        font-size: 2em;
+    }
+    .title-2 {
+        font-size: 1em;
+    }
+}
+
+popover placeholder {
+    > grid > .large-icons {
+        -gtk-icon-size: 32px;
+
+        &:dir(ltr) {
+            margin-right: 0;
+        }
+
+        &:dir(rtl) {
+            margin-left: 0;
+        }
+    }
+
+    .title-1 {
+        font-size: 1em;
+        font-weight: initial;
+    }
+
+    .title-2 {
+        font-size: 0.85em;
+    }
+}