From 89eb31a141e966c1156e4d4c44c13e02b178ab1c Mon Sep 17 00:00:00 2001 From: Bharat Date: Thu, 4 Jul 2024 21:33:16 +0530 Subject: [PATCH 1/5] library: Remove Usage of PreferencesPage and Group Initial implementation -Design is still WIP Current bugs : -Labels for categories are added as a ListBox Row, design needs changes -Increasing window size increases the size of rows (ideal -> row length remains constant and only reduces in length when window is minimized) --- src/Library/Library.blp | 228 +++++++++++++++++++++++++++++++++------- src/Library/Library.js | 2 +- 2 files changed, 191 insertions(+), 39 deletions(-) diff --git a/src/Library/Library.blp b/src/Library/Library.blp index a218402bf..e64b4cd7b 100644 --- a/src/Library/Library.blp +++ b/src/Library/Library.blp @@ -16,15 +16,22 @@ Adw.Window window { }; } - content: Adw.PreferencesPage { - Adw.PreferencesGroup { + content: ScrolledWindow { + hscrollbar-policy: never; + + child: Box { + spacing: 24; + margin-start: 72; + margin-end: 72; + orientation: vertical; + Box { halign: center; vexpand: false; Picture picture_illustration { can-shrink: false; - margin-bottom: 32; + margin-top: 24; } } @@ -41,57 +48,202 @@ Adw.Window window { placeholder-text: _("Search demos"); activates-default: true; width-request: 400; - margin-top: 32; } - } - Adw.PreferencesGroup library_uncategorized {} + ListBox library_uncategorized { + selection-mode: none; - Adw.PreferencesGroup library_tools { - title: _("Tools"); - } + styles [ + "boxed-list" + ] - Adw.PreferencesGroup library_network { - title: _("Network"); - } + ListBoxRow { + activatable: false; - Adw.PreferencesGroup library_controls { - title: _("Controls"); - } + Label { + label: _("Library Uncategorized"); - Adw.PreferencesGroup library_layout { - title: _("Layout"); - } + styles [ + "title-1" + ] + } + } + } - Adw.PreferencesGroup library_feedback { - title: _("Feedback"); - } + ListBox library_tools { + selection-mode: none; - Adw.PreferencesGroup library_navigation { - title: _("Navigation"); - } + styles [ + "boxed-list" + ] - Adw.PreferencesGroup library_user_interface { - title: _("User Interface"); - } + ListBoxRow { + activatable: false; - Adw.PreferencesGroup library_platform { - title: _("Platform APIs"); - } + Label { + label: _("Tools"); - Adw.PreferencesGroup { - vexpand: true; - valign: end; + styles [ + "title-1" + ] + } + } + } - 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; + ListBox library_network { + selection-mode: none; styles [ - "caption" + "boxed-list" ] + + ListBoxRow { + activatable: false; + + Label { + label: _("Network"); + + styles [ + "title-1" + ] + } + } } - } + + ListBox library_controls { + selection-mode: none; + + styles [ + "boxed-list" + ] + + ListBoxRow { + activatable: false; + + Label { + label: _("Controls"); + + styles [ + "title-1" + ] + } + } + } + + ListBox library_layout { + selection-mode: none; + + styles [ + "boxed-list" + ] + + ListBoxRow { + activatable: false; + + Label { + label: _("Layout"); + + styles [ + "title-1" + ] + } + } + } + + ListBox library_feedback { + selection-mode: none; + + styles [ + "boxed-list" + ] + + ListBoxRow { + activatable: false; + + Label { + label: _("Feedback"); + + styles [ + "title-1" + ] + } + } + } + + ListBox library_navigation { + selection-mode: none; + + styles [ + "boxed-list" + ] + + ListBoxRow { + activatable: false; + + Label { + label: _("Navigation"); + + styles [ + "title-1" + ] + } + } + } + + ListBox library_user_interface { + selection-mode: none; + + styles [ + "boxed-list" + ] + + ListBoxRow { + activatable: false; + + Label { + label: _("User Interface"); + + styles [ + "title-1" + ] + } + } + } + + ListBox library_platform { + selection-mode: none; + + styles [ + "boxed-list" + ] + + ListBoxRow { + activatable: false; + + Label { + label: _("Platform APIs"); + + styles [ + "title-1" + ] + } + } + } + + Box { + halign: center; + margin-bottom: 24; + + 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..3a576f73c 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 }); }); From bd5d2d2a3b868abca1af48c681ddac8341dc4b1d Mon Sep 17 00:00:00 2001 From: Bharat Date: Thu, 4 Jul 2024 22:05:28 +0530 Subject: [PATCH 2/5] minor change: row size increasing fixed --- src/Library/Library.blp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/Library.blp b/src/Library/Library.blp index e64b4cd7b..899982862 100644 --- a/src/Library/Library.blp +++ b/src/Library/Library.blp @@ -24,10 +24,10 @@ Adw.Window window { margin-start: 72; margin-end: 72; orientation: vertical; + halign: center; Box { halign: center; - vexpand: false; Picture picture_illustration { can-shrink: false; From 99cbe8bd37864269c03b5fd7ef866dd0b01654ed Mon Sep 17 00:00:00 2001 From: Bharat Date: Fri, 5 Jul 2024 19:31:54 +0530 Subject: [PATCH 3/5] minor fixes: Change design closer to current --- src/Library/Library.blp | 268 +++++++++++++++++++++------------------- 1 file changed, 139 insertions(+), 129 deletions(-) diff --git a/src/Library/Library.blp b/src/Library/Library.blp index 899982862..3e08afae1 100644 --- a/src/Library/Library.blp +++ b/src/Library/Library.blp @@ -19,230 +19,240 @@ Adw.Window window { content: ScrolledWindow { hscrollbar-policy: never; - child: Box { - spacing: 24; - margin-start: 72; - margin-end: 72; - orientation: vertical; - halign: center; - - Box { - halign: center; - - Picture picture_illustration { - can-shrink: false; - margin-top: 24; - } - } + child: Adw.Clamp { + maximum-size: 550; - Label { - label: _("Learn, Test, Remix"); + child: Box { + spacing: 24; + orientation: vertical; - styles [ - "title-1" - ] - } + Box { + halign: center; + vexpand: false; - SearchEntry search_entry { - search-delay: 100; - placeholder-text: _("Search demos"); - activates-default: true; - width-request: 400; - } + Picture picture_illustration { + can-shrink: false; + margin-top: 24; + } + } - ListBox library_uncategorized { - selection-mode: none; + Label { + label: _("Learn, Test, Remix"); - styles [ - "boxed-list" - ] + styles [ + "title-1" + ] + } - ListBoxRow { - activatable: false; + SearchEntry search_entry { + search-delay: 100; + placeholder-text: _("Search demos"); + activates-default: true; + width-request: 400; + } - Label { - label: _("Library Uncategorized"); + Box { + orientation: vertical; + + ListBox library_uncategorized { + selection-mode: none; styles [ - "title-1" + "boxed-list" ] } } - } - - ListBox library_tools { - selection-mode: none; - - styles [ - "boxed-list" - ] - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Tools"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_network { - selection-mode: none; + ListBox library_tools { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Network"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_controls { - selection-mode: none; + ListBox library_network { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Controls"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_layout { - selection-mode: none; + ListBox library_controls { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Layout"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_feedback { - selection-mode: none; + ListBox library_layout { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Feedback"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_navigation { - selection-mode: none; + ListBox library_feedback { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Navigation"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_user_interface { - selection-mode: none; + ListBox library_navigation { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("User Interface"); + halign: start; + margin-bottom: 12; styles [ - "title-1" + "title-4" ] } - } - } - ListBox library_platform { - selection-mode: none; + ListBox library_user_interface { + selection-mode: none; - styles [ - "boxed-list" - ] + styles [ + "boxed-list" + ] + } + } - ListBoxRow { - activatable: false; + Box { + orientation: vertical; Label { label: _("Platform APIs"); + halign: start; + margin-bottom: 12; + + styles [ + "title-4" + ] + } + + ListBox library_platform { + selection-mode: none; styles [ - "title-1" + "boxed-list" ] } } - } - Box { - halign: center; - margin-bottom: 24; + Box { + halign: center; + margin-bottom: 24; - 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; + 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" - ] + styles [ + "caption" + ] + } } - } + }; }; }; } From 321794a41539156431ddcb4d9a2b100d6b67829b Mon Sep 17 00:00:00 2001 From: Bharat Date: Fri, 5 Jul 2024 23:00:58 +0530 Subject: [PATCH 4/5] [WIP] Fixes Hide categories on search Remove separate boxes for each listbox + label combination Margins use hardcoded values to look similar to current Workbench --- src/Library/Library.blp | 289 ++++++++++++++++++---------------------- src/Library/Library.js | 2 + 2 files changed, 129 insertions(+), 162 deletions(-) diff --git a/src/Library/Library.blp b/src/Library/Library.blp index 3e08afae1..57fd0fdbd 100644 --- a/src/Library/Library.blp +++ b/src/Library/Library.blp @@ -20,228 +20,193 @@ Adw.Window window { hscrollbar-policy: never; child: Adw.Clamp { - maximum-size: 550; + maximum-size: 576; + margin-end: 12; + margin-start: 12; child: Box { - spacing: 24; orientation: vertical; - - Box { - halign: center; - vexpand: false; - - Picture picture_illustration { - can-shrink: false; - 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; - } + spacing: 12; Box { orientation: vertical; - ListBox library_uncategorized { - selection-mode: none; + Box { + halign: center; + vexpand: false; - styles [ - "boxed-list" - ] + Picture picture_illustration { + can-shrink: false; + margin-bottom: 32; + margin-top: 24; + } } - } - - Box { - orientation: vertical; Label { - label: _("Tools"); - halign: start; - margin-bottom: 12; + label: _("Learn, Test, Remix"); styles [ - "title-4" + "title-1" ] } - ListBox library_tools { - selection-mode: none; - - styles [ - "boxed-list" - ] + SearchEntry search_entry { + search-delay: 100; + placeholder-text: _("Search demos"); + activates-default: true; + width-request: 400; + margin-top: 32; } } - Box { - orientation: vertical; - - Label { - label: _("Network"); - halign: start; - margin-bottom: 12; + ListBox library_uncategorized { + selection-mode: none; - styles [ - "title-4" - ] - } + styles [ + "boxed-list" + ] + } - ListBox library_network { - selection-mode: none; + Label label_tools { + label: _("Tools"); + halign: start; - styles [ - "boxed-list" - ] - } + styles [ + "title-4" + ] } - Box { - orientation: vertical; + ListBox library_tools { + selection-mode: none; - Label { - label: _("Controls"); - halign: start; - margin-bottom: 12; - - styles [ - "title-4" - ] - } + styles [ + "boxed-list" + ] + } - ListBox library_controls { - selection-mode: none; + Label label_network { + label: _("Network"); + halign: start; - styles [ - "boxed-list" - ] - } + styles [ + "title-4" + ] } - Box { - orientation: vertical; - - Label { - label: _("Layout"); - halign: start; - margin-bottom: 12; + ListBox library_network { + selection-mode: none; - styles [ - "title-4" - ] - } + styles [ + "boxed-list" + ] + } - ListBox library_layout { - selection-mode: none; + Label label_controls { + label: _("Controls"); + halign: start; - styles [ - "boxed-list" - ] - } + styles [ + "title-4" + ] } - Box { - orientation: vertical; - - Label { - label: _("Feedback"); - halign: start; - margin-bottom: 12; + ListBox library_controls { + selection-mode: none; - styles [ - "title-4" - ] - } + styles [ + "boxed-list" + ] + } - ListBox library_feedback { - selection-mode: none; + Label label_layout { + label: _("Layout"); + halign: start; - styles [ - "boxed-list" - ] - } + styles [ + "title-4" + ] } - Box { - orientation: vertical; + ListBox library_layout { + selection-mode: none; - Label { - label: _("Navigation"); - halign: start; - margin-bottom: 12; + styles [ + "boxed-list" + ] + } - styles [ - "title-4" - ] - } + Label label_feedback { + label: _("Feedback"); + halign: start; - ListBox library_navigation { - selection-mode: none; + styles [ + "title-4" + ] + } - styles [ - "boxed-list" - ] - } + ListBox library_feedback { + selection-mode: none; + + styles [ + "boxed-list" + ] } - Box { - orientation: vertical; + Label label_navigation { + label: _("Navigation"); + halign: start; - Label { - label: _("User Interface"); - halign: start; - margin-bottom: 12; + styles [ + "title-4" + ] + } - styles [ - "title-4" - ] - } + ListBox library_navigation { + selection-mode: none; - ListBox library_user_interface { - selection-mode: none; + styles [ + "boxed-list" + ] + } - styles [ - "boxed-list" - ] - } + Label label_user_interface { + label: _("User Interface"); + halign: start; + + styles [ + "title-4" + ] } - Box { - orientation: vertical; + ListBox library_user_interface { + selection-mode: none; - Label { - label: _("Platform APIs"); - halign: start; - margin-bottom: 12; + styles [ + "boxed-list" + ] + } - styles [ - "title-4" - ] - } + Label label_platform { + label: _("Platform APIs"); + halign: start; - ListBox library_platform { - selection-mode: none; + styles [ + "title-4" + ] + } - styles [ - "boxed-list" - ] - } + 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"); diff --git a/src/Library/Library.js b/src/Library/Library.js index 3a576f73c..b70358c95 100644 --- a/src/Library/Library.js +++ b/src/Library/Library.js @@ -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); }); }); From 020a60be3be591b08c4282e963932d6847296ad1 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Sun, 7 Jul 2024 01:47:31 +0200 Subject: [PATCH 5/5] add margin --- src/Library/Library.blp | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Library/Library.blp b/src/Library/Library.blp index 57fd0fdbd..c63bf450f 100644 --- a/src/Library/Library.blp +++ b/src/Library/Library.blp @@ -70,6 +70,7 @@ Adw.Window window { Label label_tools { label: _("Tools"); halign: start; + margin-top: 12; styles [ "title-4" @@ -87,6 +88,7 @@ Adw.Window window { Label label_network { label: _("Network"); halign: start; + margin-top: 12; styles [ "title-4" @@ -104,6 +106,7 @@ Adw.Window window { Label label_controls { label: _("Controls"); halign: start; + margin-top: 12; styles [ "title-4" @@ -121,6 +124,7 @@ Adw.Window window { Label label_layout { label: _("Layout"); halign: start; + margin-top: 12; styles [ "title-4" @@ -138,6 +142,7 @@ Adw.Window window { Label label_feedback { label: _("Feedback"); halign: start; + margin-top: 12; styles [ "title-4" @@ -155,6 +160,7 @@ Adw.Window window { Label label_navigation { label: _("Navigation"); halign: start; + margin-top: 12; styles [ "title-4" @@ -172,6 +178,7 @@ Adw.Window window { Label label_user_interface { label: _("User Interface"); halign: start; + margin-top: 12; styles [ "title-4" @@ -189,6 +196,7 @@ Adw.Window window { Label label_platform { label: _("Platform APIs"); halign: start; + margin-top: 12; styles [ "title-4"