From b5356d3f6af80871011ad8d7b60ecc7581f4042f Mon Sep 17 00:00:00 2001 From: halfmexican Date: Thu, 10 Aug 2023 18:37:43 -0500 Subject: [PATCH 01/10] add main.json --- src/Library/demos/Breakpoints/main.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/Library/demos/Breakpoints/main.json diff --git a/src/Library/demos/Breakpoints/main.json b/src/Library/demos/Breakpoints/main.json new file mode 100644 index 000000000..15b8f4ec5 --- /dev/null +++ b/src/Library/demos/Breakpoints/main.json @@ -0,0 +1,6 @@ +{ + "category": "Breakpoints", + "description": "Create adaptive UI elements", + "panels": ["ui", "preview"], + "autorun": true +} From 0435e03fb5e0fee58249fd54e67b396a0fd06b68 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 12 Aug 2023 15:48:07 -0500 Subject: [PATCH 02/10] fix main.json --- src/Library/demos/Breakpoints/main.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Breakpoints/main.json b/src/Library/demos/Breakpoints/main.json index 15b8f4ec5..ada779eaa 100644 --- a/src/Library/demos/Breakpoints/main.json +++ b/src/Library/demos/Breakpoints/main.json @@ -1,5 +1,5 @@ { - "category": "Breakpoints", + "category": "layout", "description": "Create adaptive UI elements", "panels": ["ui", "preview"], "autorun": true From 16df74dd74a680b59297fe1200d788aa9c622eaf Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 12 Aug 2023 16:27:14 -0500 Subject: [PATCH 03/10] add main.blp --- src/Library/demos/Breakpoints/main.blp | 46 ++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/Library/demos/Breakpoints/main.blp diff --git a/src/Library/demos/Breakpoints/main.blp b/src/Library/demos/Breakpoints/main.blp new file mode 100644 index 000000000..01620fad6 --- /dev/null +++ b/src/Library/demos/Breakpoints/main.blp @@ -0,0 +1,46 @@ +using Gtk 4.0; +using Adw 1; + +Gtk.Window { + width-request: 360; + height-request: 200; + default-width: 640; + default-height: 480; + title: _("Breakpoints"); + + Box { + orientation: vertical; + spacing: 12; + valign: center; + + Image image { + icon-size: large; + icon-name: "face-devilish-symbolic"; + } + + Adw.BreakpointBin breakpoint_bin { + width-request: 200; + height-request: 50; + + Adw.Breakpoint breakpoint { + condition ("max-width: 500sp") + setters { + breakpoint_bin.child: narrow; + } + } + + child: wide; + } + } +} + + +Label narrow { + label: _("Narrow"); + styles ["title-4"] +} + +Label wide { + label: _("Wide"); + styles ["title-1"] +} From 8837c39e9743006baa4f42eb53212cfaffdf186c Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 12 Aug 2023 16:28:27 -0500 Subject: [PATCH 04/10] add main.js --- src/Library/demos/Breakpoints/main.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/Library/demos/Breakpoints/main.js diff --git a/src/Library/demos/Breakpoints/main.js b/src/Library/demos/Breakpoints/main.js new file mode 100644 index 000000000..6418c9006 --- /dev/null +++ b/src/Library/demos/Breakpoints/main.js @@ -0,0 +1,14 @@ +import Gtk from "gi://Gtk"; + +const breakpoint = workbench.builder.get_object("breakpoint"); +const image = workbench.builder.get_object("image"); + +breakpoint.connect("apply", () => { + image.icon_size = Gtk.IconSize.NORMAL; + console.log("Breakpoint Applied"); +}); + +breakpoint.connect("unapply", () => { + image.icon_size = Gtk.IconSize.LARGE; + console.log("Breakpoint Unapplied"); +}); From 648d4f6edb622a99a5e98a0dc6cdf86311d76681 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 12 Aug 2023 19:23:33 -0500 Subject: [PATCH 05/10] add API References --- src/Library/demos/Breakpoints/main.blp | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Library/demos/Breakpoints/main.blp b/src/Library/demos/Breakpoints/main.blp index 01620fad6..dac25c220 100644 --- a/src/Library/demos/Breakpoints/main.blp +++ b/src/Library/demos/Breakpoints/main.blp @@ -31,6 +31,17 @@ Gtk.Window { child: wide; } + + LinkButton { + margin-top: 24; + label: "Breakpoint"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Breakpoint.html"; + } + + LinkButton { + label: "Breakpoint Bin"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html"; + } } } From e3ab2da50b2b9e2c22c4b6aed6a88042046d969f Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Sun, 13 Aug 2023 09:34:35 -0500 Subject: [PATCH 06/10] Apply suggestions from code review Co-authored-by: Sonny Piers --- src/Library/demos/Breakpoints/main.blp | 4 ++-- src/Library/demos/Breakpoints/main.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Library/demos/Breakpoints/main.blp b/src/Library/demos/Breakpoints/main.blp index dac25c220..d44d5b7f8 100644 --- a/src/Library/demos/Breakpoints/main.blp +++ b/src/Library/demos/Breakpoints/main.blp @@ -46,12 +46,12 @@ Gtk.Window { } -Label narrow { +Label label_narrow { label: _("Narrow"); styles ["title-4"] } -Label wide { +Label label_wide { label: _("Wide"); styles ["title-1"] } diff --git a/src/Library/demos/Breakpoints/main.json b/src/Library/demos/Breakpoints/main.json index ada779eaa..dad230599 100644 --- a/src/Library/demos/Breakpoints/main.json +++ b/src/Library/demos/Breakpoints/main.json @@ -1,6 +1,6 @@ { "category": "layout", - "description": "Create adaptive UI elements", + "description": "Create adaptive UI", "panels": ["ui", "preview"], "autorun": true } From 6d2739e31bed6b12621d586d0990580e4018076f Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sun, 13 Aug 2023 10:47:41 -0500 Subject: [PATCH 07/10] Fix indentation and image --- src/Library/demos/Breakpoints/main.blp | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Library/demos/Breakpoints/main.blp b/src/Library/demos/Breakpoints/main.blp index d44d5b7f8..9a957f476 100644 --- a/src/Library/demos/Breakpoints/main.blp +++ b/src/Library/demos/Breakpoints/main.blp @@ -15,7 +15,7 @@ Gtk.Window { Image image { icon-size: large; - icon-name: "face-devilish-symbolic"; + icon-name: "smile-symbolic"; } Adw.BreakpointBin breakpoint_bin { @@ -23,7 +23,7 @@ Gtk.Window { height-request: 50; Adw.Breakpoint breakpoint { - condition ("max-width: 500sp") + condition ("max-width: 500sp") setters { breakpoint_bin.child: narrow; } From bdba26f9c3305bd2a2eea10a7883837c46495498 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sun, 13 Aug 2023 10:57:29 -0500 Subject: [PATCH 08/10] main.js: remove image --- src/Library/demos/Breakpoints/main.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Library/demos/Breakpoints/main.js b/src/Library/demos/Breakpoints/main.js index 6418c9006..97f3118c5 100644 --- a/src/Library/demos/Breakpoints/main.js +++ b/src/Library/demos/Breakpoints/main.js @@ -1,14 +1,11 @@ import Gtk from "gi://Gtk"; const breakpoint = workbench.builder.get_object("breakpoint"); -const image = workbench.builder.get_object("image"); breakpoint.connect("apply", () => { - image.icon_size = Gtk.IconSize.NORMAL; console.log("Breakpoint Applied"); }); breakpoint.connect("unapply", () => { - image.icon_size = Gtk.IconSize.LARGE; console.log("Breakpoint Unapplied"); }); From f3bbca07dd191f37f2fc30dfb028f8db743d7700 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sun, 13 Aug 2023 10:58:03 -0500 Subject: [PATCH 09/10] main.blp: add StatusPage and small fix --- src/Library/demos/Breakpoints/main.blp | 65 ++++++++++++++------------ 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/src/Library/demos/Breakpoints/main.blp b/src/Library/demos/Breakpoints/main.blp index 9a957f476..64cef66fd 100644 --- a/src/Library/demos/Breakpoints/main.blp +++ b/src/Library/demos/Breakpoints/main.blp @@ -8,40 +8,45 @@ Gtk.Window { default-height: 480; title: _("Breakpoints"); - Box { - orientation: vertical; - spacing: 12; - valign: center; - - Image image { - icon-size: large; - icon-name: "smile-symbolic"; - } - - Adw.BreakpointBin breakpoint_bin { - width-request: 200; - height-request: 50; - - Adw.Breakpoint breakpoint { - condition ("max-width: 500sp") - setters { - breakpoint_bin.child: narrow; - } + Adw.StatusPage { + title: _("Breakpoints"); + description: _("Resize the window to see the breakpoint effect"); + child: Box { + orientation: vertical; + spacing: 12; + valign: center; + + Image image { + icon-size: large; + icon-name: "smile-symbolic"; } - child: wide; - } + Adw.BreakpointBin breakpoint_bin { + width-request: 200; + height-request: 50; + + Adw.Breakpoint breakpoint { + condition ("max-width: 500sp") + setters { + breakpoint_bin.child: label_narrow; + image.icon-size: normal; + } + } - LinkButton { - margin-top: 24; - label: "Breakpoint"; - uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Breakpoint.html"; - } + child: label_wide; + } - LinkButton { - label: "Breakpoint Bin"; - uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html"; - } + LinkButton { + margin-top: 24; + label: "Breakpoint"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Breakpoint.html"; + } + + LinkButton { + label: "Breakpoint Bin"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html"; + } + }; } } From 24d326bf57296bd48546309620779eabc9f0f49b Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sun, 13 Aug 2023 11:12:06 -0500 Subject: [PATCH 10/10] main.blp: small change --- src/Library/demos/Breakpoints/main.blp | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Library/demos/Breakpoints/main.blp b/src/Library/demos/Breakpoints/main.blp index 64cef66fd..1ed4833b4 100644 --- a/src/Library/demos/Breakpoints/main.blp +++ b/src/Library/demos/Breakpoints/main.blp @@ -6,9 +6,9 @@ Gtk.Window { height-request: 200; default-width: 640; default-height: 480; - title: _("Breakpoints"); + title: bind page.title; - Adw.StatusPage { + Adw.StatusPage page { title: _("Breakpoints"); description: _("Resize the window to see the breakpoint effect"); child: Box { @@ -50,7 +50,6 @@ Gtk.Window { } } - Label label_narrow { label: _("Narrow"); styles ["title-4"] @@ -58,5 +57,5 @@ Label label_narrow { Label label_wide { label: _("Wide"); - styles ["title-1"] + styles ["title-1"] }