From 93574e4708d725efaae328054e9984be64034600 Mon Sep 17 00:00:00 2001 From: wlhunter Date: Sun, 11 Jun 2023 23:51:59 -0500 Subject: [PATCH 1/9] library: add carousel entry --- src/Library/demos/Carousel/main.blp | 61 ++++++++++++++++++++++++++++ src/Library/demos/Carousel/main.js | 10 +++++ src/Library/demos/Carousel/main.json | 8 ++++ src/Library/demos/Carousel/main.vala | 0 4 files changed, 79 insertions(+) create mode 100644 src/Library/demos/Carousel/main.blp create mode 100644 src/Library/demos/Carousel/main.js create mode 100644 src/Library/demos/Carousel/main.json create mode 100644 src/Library/demos/Carousel/main.vala diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp new file mode 100644 index 000000000..d538120d3 --- /dev/null +++ b/src/Library/demos/Carousel/main.blp @@ -0,0 +1,61 @@ +using Gtk 4.0; +using Adw 1; + +Box { + orientation: vertical; + valign: center; + + + Adw.Carousel carousel { + halign: center; + Adw.StatusPage { + title: _("Carousel"); + icon-name: "carousel-symbolic"; + } + + Adw.Clamp { + maximum-size: 700; + + Adw.PreferencesGroup { + styles ["boxed-list"] + + Adw.ComboRow { + title: _("Orientation"); + model: StringList { + strings [_("Horizontal"), _("Vertical")] + }; + } + + Adw.ComboRow { + title: _("Page Indicators"); + model: StringList { + strings [_("Dots"), _("Lines")] + }; + } + + Adw.ActionRow { + title: _("Scroll Wheel"); + activatable-widget: sw_switch; + + Gtk.Switch sw_switch { + valign: center; + } + } + + Adw.ActionRow { + title: _("Long Swipes"); + activatable-widget: ls_switch; + + Gtk.Switch ls_switch { + valign: center; + } + } + } + } + + Adw.StatusPage { + title: _("Last Page"); + description: _("You've reached the end of the carousel."); + } + } +} diff --git a/src/Library/demos/Carousel/main.js b/src/Library/demos/Carousel/main.js new file mode 100644 index 000000000..c4650c459 --- /dev/null +++ b/src/Library/demos/Carousel/main.js @@ -0,0 +1,10 @@ +import Gtk from "gi://Gtk"; +import Adw from "gi://Adw"; + +const carousel = workbench.builder.get_object("carousel"); +const ls_switch = workbench.builder.get_object("ls_switch"); +const sw_switch = workbench.builder.get_object("sw_switch"); + +sw_switch.connect("notify::active", () => { + carousel.allow_scroll_wheel = sw_switch.active ? true : false; +}); diff --git a/src/Library/demos/Carousel/main.json b/src/Library/demos/Carousel/main.json new file mode 100644 index 000000000..8060ccba6 --- /dev/null +++ b/src/Library/demos/Carousel/main.json @@ -0,0 +1,8 @@ +{ + "name": "Carousel", + "category": "user_interface", + "description": "A paginated scrolling widget", + "panels": ["code", "ui", "preview"], + "autorun": false + } + \ No newline at end of file diff --git a/src/Library/demos/Carousel/main.vala b/src/Library/demos/Carousel/main.vala new file mode 100644 index 000000000..e69de29bb From ce6bccba1947e5d63ac84207bc6eda683cac8040 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Mon, 12 Jun 2023 12:38:46 -0500 Subject: [PATCH 2/9] make carousel functional --- src/Library/demos/Carousel/main.blp | 23 +++++++----- src/Library/demos/Carousel/main.js | 54 ++++++++++++++++++++++++++++- 2 files changed, 67 insertions(+), 10 deletions(-) diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp index d538120d3..23a300649 100644 --- a/src/Library/demos/Carousel/main.blp +++ b/src/Library/demos/Carousel/main.blp @@ -1,32 +1,37 @@ using Gtk 4.0; using Adw 1; -Box { +Box root_box { orientation: vertical; - valign: center; - + valign: center; + spacing: 10; Adw.Carousel carousel { halign: center; + valign: center; + allow-long-swipes: true; + allow-scroll-wheel: true; + Adw.StatusPage { title: _("Carousel"); + description: _("Swipe or Scroll to Navigate"); icon-name: "carousel-symbolic"; } - + Adw.Clamp { maximum-size: 700; Adw.PreferencesGroup { styles ["boxed-list"] - Adw.ComboRow { - title: _("Orientation"); + Adw.ComboRow orientation_row { + title: _("Carousel Orientation"); model: StringList { strings [_("Horizontal"), _("Vertical")] }; } - Adw.ComboRow { + Adw.ComboRow indicator_row { title: _("Page Indicators"); model: StringList { strings [_("Dots"), _("Lines")] @@ -36,7 +41,7 @@ Box { Adw.ActionRow { title: _("Scroll Wheel"); activatable-widget: sw_switch; - + Gtk.Switch sw_switch { valign: center; } @@ -45,7 +50,7 @@ Box { Adw.ActionRow { title: _("Long Swipes"); activatable-widget: ls_switch; - + Gtk.Switch ls_switch { valign: center; } diff --git a/src/Library/demos/Carousel/main.js b/src/Library/demos/Carousel/main.js index c4650c459..b24e5667d 100644 --- a/src/Library/demos/Carousel/main.js +++ b/src/Library/demos/Carousel/main.js @@ -1,10 +1,62 @@ import Gtk from "gi://Gtk"; import Adw from "gi://Adw"; +const root_box = workbench.builder.get_object("root_box"); const carousel = workbench.builder.get_object("carousel"); const ls_switch = workbench.builder.get_object("ls_switch"); const sw_switch = workbench.builder.get_object("sw_switch"); +const indicator_row = workbench.builder.get_object("indicator_row"); +const orientation_row = workbench.builder.get_object("orientation_row"); +let indicators; + +carousel.connect("page-changed", () => { + console.log("Page Changed"); +}); + +// Scroll Wheel Switch +sw_switch.active = carousel.allow_scroll_wheel; sw_switch.connect("notify::active", () => { - carousel.allow_scroll_wheel = sw_switch.active ? true : false; + carousel.allow_scroll_wheel = sw_switch.active ? true : false; +}); + +// Long Swipe Switch +ls_switch.active = carousel.allow_long_swipes; + +ls_switch.connect("notify::active", () => { + carousel.allow_long_swipes = ls_switch.active ? true : false; +}); + +if (indicator_row.get_selected() === 0) { + indicators = new Adw.CarouselIndicatorDots({ carousel: carousel }); +} else { + indicators = new Adw.CarouselIndicatorLines({ carousel: carousel }); +} + +indicators.orientation = carousel.orientation; +root_box.append(indicators); + +indicator_row.connect("notify::selected-item", () => { + root_box.remove(indicators); + + if (indicator_row.get_selected() === 0) { + indicators = new Adw.CarouselIndicatorDots({ carousel: carousel }); + } else { + indicators = new Adw.CarouselIndicatorLines({ carousel: carousel }); + } + + indicators.orientation = carousel.orientation; + root_box.append(indicators); +}); + +orientation_row.connect("notify::selected-item", () => { + if (orientation_row.get_selected() === 0) { + root_box.orientation = Gtk.Orientation.VERTICAL; + carousel.orientation = Gtk.Orientation.HORIZONTAL; + indicators.orientation = Gtk.Orientation.HORIZONTAL; + } else { + root_box.orientation = Gtk.Orientation.HORIZONTAL; + carousel.orientation = Gtk.Orientation.VERTICAL; + indicators.orientation = Gtk.Orientation.VERTICAL; + } }); From c0096b83ac8bb4ab640f5c7b8c87d226bf0ee4a6 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Mon, 12 Jun 2023 13:14:40 -0500 Subject: [PATCH 3/9] add main.vala --- src/Library/demos/Carousel/main.vala | 70 ++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/src/Library/demos/Carousel/main.vala b/src/Library/demos/Carousel/main.vala index e69de29bb..7159eefe7 100644 --- a/src/Library/demos/Carousel/main.vala +++ b/src/Library/demos/Carousel/main.vala @@ -0,0 +1,70 @@ +#! /usr/bin/env -S vala workbench.vala --pkg gtk4 --pkg libadwaita-1 + +public void main() { + var root_box = workbench.builder.get_object("root_box") as Gtk.Box; + var carousel = workbench.builder.get_object("carousel") as Adw.Carousel; + var ls_switch = workbench.builder.get_object("ls_switch") as Gtk.Switch; + var sw_switch = workbench.builder.get_object("sw_switch") as Gtk.Switch; + var indicator_row = workbench.builder.get_object("indicator_row") as Adw.ComboRow; + var orientation_row = workbench.builder.get_object("orientation_row") as Adw.ComboRow; + Adw.CarouselIndicatorDots? dots = null; + Adw.CarouselIndicatorLines? lines = null; + + carousel.page_changed.connect(() => { + debug("Page Changed"); + }); + + // Scroll Wheel Switch + sw_switch.active = carousel.allow_scroll_wheel; + sw_switch.notify["active"].connect(() => { + carousel.allow_scroll_wheel = sw_switch.active; + }); + + // Long Swipe Switch + ls_switch.active = carousel.allow_long_swipes; + ls_switch.notify["active"].connect(() => { + carousel.allow_long_swipes = ls_switch.active; + }); + +if (indicator_row.get_selected() == 0) { + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); +} else { + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); +} + +indicator_row.notify["selected-item"].connect(() => { + + + if (indicator_row.get_selected() == 0) { + root_box.remove(lines); + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); + } else { + root_box.remove(dots); + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); + } +}); + + orientation_row.notify["selected-item"].connect(() => { + if (orientation_row.get_selected() == 0) { + root_box.orientation = Gtk.Orientation.VERTICAL; + carousel.orientation = Gtk.Orientation.HORIZONTAL; + dots.orientation = Gtk.Orientation.HORIZONTAL; + lines.orientation = Gtk.Orientation.HORIZONTAL; + } else { + root_box.orientation = Gtk.Orientation.HORIZONTAL; + carousel.orientation = Gtk.Orientation.VERTICAL; + dots.orientation = Gtk.Orientation.VERTICAL; + lines.orientation = Gtk.Orientation.VERTICAL; + } + }); +} + + From 4212593f8cf4aa1c225104b0531a97359ab9e126 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Mon, 12 Jun 2023 13:14:49 -0500 Subject: [PATCH 4/9] fix horizontal orientation --- src/Library/demos/Carousel/main.blp | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp index 23a300649..4e1d42b0f 100644 --- a/src/Library/demos/Carousel/main.blp +++ b/src/Library/demos/Carousel/main.blp @@ -4,6 +4,7 @@ using Adw 1; Box root_box { orientation: vertical; valign: center; + halign:center; spacing: 10; Adw.Carousel carousel { From e9905eb9ef5fc5d89f12b8db67803903986a1d09 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Mon, 12 Jun 2023 13:19:58 -0500 Subject: [PATCH 5/9] fix alignment on prefsrow --- src/Library/demos/Carousel/main.blp | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp index 4e1d42b0f..9f2396db3 100644 --- a/src/Library/demos/Carousel/main.blp +++ b/src/Library/demos/Carousel/main.blp @@ -17,10 +17,19 @@ Box root_box { title: _("Carousel"); description: _("Swipe or Scroll to Navigate"); icon-name: "carousel-symbolic"; + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.Carousel.html"; + margin-top: 12; + } + } Adw.Clamp { maximum-size: 700; + halign: center; + valign: center; Adw.PreferencesGroup { styles ["boxed-list"] From 089246ab28be105335664008f94f457062e68539 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Mon, 12 Jun 2023 22:01:33 -0500 Subject: [PATCH 6/9] main.vala: fix formatting --- src/Library/demos/Carousel/main.vala | 30 +++++++++++++--------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/Library/demos/Carousel/main.vala b/src/Library/demos/Carousel/main.vala index 7159eefe7..569039fc3 100644 --- a/src/Library/demos/Carousel/main.vala +++ b/src/Library/demos/Carousel/main.vala @@ -26,31 +26,29 @@ public void main() { carousel.allow_long_swipes = ls_switch.active; }); -if (indicator_row.get_selected() == 0) { - dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; - dots.orientation = carousel.orientation; - root_box.append(dots); -} else { - lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; - lines.orientation = carousel.orientation; - root_box.append(lines); -} - -indicator_row.notify["selected-item"].connect(() => { - - if (indicator_row.get_selected() == 0) { - root_box.remove(lines); dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; dots.orientation = carousel.orientation; root_box.append(dots); } else { - root_box.remove(dots); lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; lines.orientation = carousel.orientation; root_box.append(lines); } -}); + + indicator_row.notify["selected-item"].connect(() => { + if (indicator_row.get_selected() == 0) { + root_box.remove(lines); + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); + } else { + root_box.remove(dots); + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); + } + }); orientation_row.notify["selected-item"].connect(() => { if (orientation_row.get_selected() == 0) { From 59b21d448c8a2c4f4d365207cb7f2afc8733f5d7 Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Thu, 15 Jun 2023 14:19:40 -0500 Subject: [PATCH 7/9] Apply suggestions from code review Fix formatting and remove stuff Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com> --- src/Library/demos/Carousel/main.blp | 2 +- src/Library/demos/Carousel/main.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp index 9f2396db3..de0d56230 100644 --- a/src/Library/demos/Carousel/main.blp +++ b/src/Library/demos/Carousel/main.blp @@ -4,7 +4,7 @@ using Adw 1; Box root_box { orientation: vertical; valign: center; - halign:center; + halign: center; spacing: 10; Adw.Carousel carousel { diff --git a/src/Library/demos/Carousel/main.js b/src/Library/demos/Carousel/main.js index b24e5667d..c38ec05f3 100644 --- a/src/Library/demos/Carousel/main.js +++ b/src/Library/demos/Carousel/main.js @@ -17,14 +17,15 @@ carousel.connect("page-changed", () => { sw_switch.active = carousel.allow_scroll_wheel; sw_switch.connect("notify::active", () => { - carousel.allow_scroll_wheel = sw_switch.active ? true : false; + carousel.allow_scroll_wheel = sw_switch.active; }); // Long Swipe Switch ls_switch.active = carousel.allow_long_swipes; ls_switch.connect("notify::active", () => { - carousel.allow_long_swipes = ls_switch.active ? true : false; + carousel.allow_long_swipes = ls_switch.active; +`` }); if (indicator_row.get_selected() === 0) { From 655f28849c793b9db29640feff4f7302a367686a Mon Sep 17 00:00:00 2001 From: halfmexican Date: Thu, 15 Jun 2023 14:22:28 -0500 Subject: [PATCH 8/9] main.blp: fix spacing --- src/Library/demos/Carousel/main.blp | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp index de0d56230..74fd3d69f 100644 --- a/src/Library/demos/Carousel/main.blp +++ b/src/Library/demos/Carousel/main.blp @@ -5,13 +5,14 @@ Box root_box { orientation: vertical; valign: center; halign: center; - spacing: 10; + spacing: 12; Adw.Carousel carousel { halign: center; valign: center; allow-long-swipes: true; allow-scroll-wheel: true; + spacing: 12; Adw.StatusPage { title: _("Carousel"); From 790b75c326b36f2d061ca4e5662bdacfe039d6cd Mon Sep 17 00:00:00 2001 From: halfmexican Date: Thu, 15 Jun 2023 14:22:52 -0500 Subject: [PATCH 9/9] remove quotes --- src/Library/demos/Carousel/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Library/demos/Carousel/main.js b/src/Library/demos/Carousel/main.js index c38ec05f3..40c10d250 100644 --- a/src/Library/demos/Carousel/main.js +++ b/src/Library/demos/Carousel/main.js @@ -25,7 +25,6 @@ ls_switch.active = carousel.allow_long_swipes; ls_switch.connect("notify::active", () => { carousel.allow_long_swipes = ls_switch.active; -`` }); if (indicator_row.get_selected() === 0) {