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); }); });