diff --git a/src/Library/Library.blp b/src/Library/Library.blp
index a218402bf..c63bf450f 100644
--- a/src/Library/Library.blp
+++ b/src/Library/Library.blp
@@ -16,82 +16,217 @@ Adw.Window window {
};
}
- content: Adw.PreferencesPage {
- Adw.PreferencesGroup {
- Box {
- halign: center;
- vexpand: false;
-
- Picture picture_illustration {
- can-shrink: false;
- margin-bottom: 32;
- }
- }
-
- Label {
- label: _("Learn, Test, Remix");
-
- styles [
- "title-1"
- ]
- }
-
- SearchEntry search_entry {
- search-delay: 100;
- placeholder-text: _("Search demos");
- activates-default: true;
- width-request: 400;
- margin-top: 32;
- }
- }
-
- Adw.PreferencesGroup library_uncategorized {}
-
- Adw.PreferencesGroup library_tools {
- title: _("Tools");
- }
-
- Adw.PreferencesGroup library_network {
- title: _("Network");
- }
-
- Adw.PreferencesGroup library_controls {
- title: _("Controls");
- }
-
- Adw.PreferencesGroup library_layout {
- title: _("Layout");
- }
-
- Adw.PreferencesGroup library_feedback {
- title: _("Feedback");
- }
-
- Adw.PreferencesGroup library_navigation {
- title: _("Navigation");
- }
-
- Adw.PreferencesGroup library_user_interface {
- title: _("User Interface");
- }
-
- Adw.PreferencesGroup library_platform {
- title: _("Platform APIs");
- }
-
- Adw.PreferencesGroup {
- vexpand: true;
- valign: end;
-
- Label {
- label: _("All examples are dedicated to the public domain\nand can be used freely under the terms of CC0 1.0");
- use-markup: true;
-
- styles [
- "caption"
- ]
- }
- }
+ content: ScrolledWindow {
+ hscrollbar-policy: never;
+
+ child: Adw.Clamp {
+ maximum-size: 576;
+ margin-end: 12;
+ margin-start: 12;
+
+ child: Box {
+ orientation: vertical;
+ spacing: 12;
+
+ Box {
+ orientation: vertical;
+
+ Box {
+ halign: center;
+ vexpand: false;
+
+ Picture picture_illustration {
+ can-shrink: false;
+ margin-bottom: 32;
+ margin-top: 24;
+ }
+ }
+
+ Label {
+ label: _("Learn, Test, Remix");
+
+ styles [
+ "title-1"
+ ]
+ }
+
+ SearchEntry search_entry {
+ search-delay: 100;
+ placeholder-text: _("Search demos");
+ activates-default: true;
+ width-request: 400;
+ margin-top: 32;
+ }
+ }
+
+ ListBox library_uncategorized {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_tools {
+ label: _("Tools");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_tools {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_network {
+ label: _("Network");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_network {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_controls {
+ label: _("Controls");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_controls {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_layout {
+ label: _("Layout");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_layout {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_feedback {
+ label: _("Feedback");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_feedback {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_navigation {
+ label: _("Navigation");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_navigation {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_user_interface {
+ label: _("User Interface");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_user_interface {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Label label_platform {
+ label: _("Platform APIs");
+ halign: start;
+ margin-top: 12;
+
+ styles [
+ "title-4"
+ ]
+ }
+
+ ListBox library_platform {
+ selection-mode: none;
+
+ styles [
+ "boxed-list"
+ ]
+ }
+
+ Box {
+ halign: center;
+ margin-bottom: 24;
+ margin-top: 12;
+
+ Label {
+ label: _("All examples are dedicated to the public domain\nand can be used freely under the terms of CC0 1.0");
+ use-markup: true;
+
+ styles [
+ "caption"
+ ]
+ }
+ }
+ };
+ };
};
}
}
diff --git a/src/Library/Library.js b/src/Library/Library.js
index ed0973d03..b70358c95 100644
--- a/src/Library/Library.js
+++ b/src/Library/Library.js
@@ -50,7 +50,7 @@ export default function Library({ application }) {
if (!category_map.has(demo.category)) {
category_map.set(demo.category, objects[`library_${demo.category}`]);
}
- objects[`library_${demo.category}`].add(entry_row);
+ objects[`library_${demo.category}`].append(entry_row);
widgets_map.set(demo.name, { entry_row, category: demo.category });
});
@@ -65,6 +65,8 @@ export default function Library({ application }) {
});
category_map.forEach((category_widget, category_name) => {
+ const label = objects[`label_${category_name}`];
+ if (label) label.visible = search_term === "";
category_widget.visible = visible_categories.has(category_name);
});
});