library: Remove Usage of PreferencesPage and Group (#958)

workbenchdev · Jul 6, 2024 · f4eb0e6 · f4eb0e6
1 parent 2b13cf3
commit f4eb0e6
Show file tree

Hide file tree

Showing 2 changed files with 214 additions and 77 deletions.
diff --git 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 <b>can be used freely</b> under the terms of <a href=\"https://creativecommons.org/publicdomain/zero/1.0/\">CC0 1.0</a>");
-          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 <b>can be used freely</b> under the terms of <a href=\"https://creativecommons.org/publicdomain/zero/1.0/\">CC0 1.0</a>");
+              use-markup: true;
+
+              styles [
+                "caption"
+              ]
+            }
+          }
+        };
+      };
     };
   }
 }
diff --git 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);
     });
   });