From de2b0e34aaeb8c414e8738ecdb183e8622d1a915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Sun, 8 Oct 2023 21:52:22 -0600 Subject: [PATCH 01/10] util: Add a function to check if a demo supports a language This adds a key to the the Rust and Vala languages: `default_file`, which contains their expected source file name. It also adds a function, `demoSupportsLanguage`, which checks if the `default_file` for the language exists in the demo directory. --- src/util.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/util.js b/src/util.js index 4a3cd0c43..d94fca87e 100644 --- a/src/util.js +++ b/src/util.js @@ -78,6 +78,7 @@ export const languages = [ types: ["text/x-vala"], document: null, placeholder: "// Sorry, this demo is not available in Vala yet.", + default_file: "main.vala", }, { id: "rust", @@ -87,6 +88,7 @@ export const languages = [ types: ["text/x-rust"], document: null, placeholder: "// Sorry, this demo is not available in Rust yet.", + default_file: "code.rs", }, ]; @@ -186,6 +188,12 @@ export function getDemo(name) { return demo; } +export function demoSupportsLanguage(demo, id) { + const language = getLanguage(id); + const demo_dir = demos_dir.get_child(demo.name); + return demo_dir.get_child(language.default_file).query_exists(null); +} + export function getNowForFilename() { return new GLib.DateTime().format("%Y-%m-%d %H-%M-%S"); } From c9a88687dfa3154e2260bff62d80cec9c5c45011 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Sun, 8 Oct 2023 21:57:04 -0600 Subject: [PATCH 02/10] data: Add symbolic icons for JavaScript, Vala and Rust --- .../symbolic/apps/text-rust-symbolic.svg | 77 +++++++++++++++++++ .../apps/text-x-javascript-symbolic.svg | 67 ++++++++++++++++ .../symbolic/apps/text-x-vala-symbolic.svg | 62 +++++++++++++++ 3 files changed, 206 insertions(+) create mode 100644 data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg create mode 100644 data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg create mode 100644 data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg diff --git a/data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg b/data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg new file mode 100644 index 000000000..11118fac6 --- /dev/null +++ b/data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg b/data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg new file mode 100644 index 000000000..242f2f23d --- /dev/null +++ b/data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg b/data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg new file mode 100644 index 000000000..e8ee65fac --- /dev/null +++ b/data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 47b5a59c7f91d20a2d5465c64e10bb3c8c27d8bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Sun, 8 Oct 2023 21:57:24 -0600 Subject: [PATCH 03/10] Library: Add icons to each demo row indicating available languages --- src/Library/Library.js | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/Library/Library.js b/src/Library/Library.js index 9a6e8ce3c..18acc9e33 100644 --- a/src/Library/Library.js +++ b/src/Library/Library.js @@ -2,7 +2,7 @@ import Gio from "gi://Gio"; import Adw from "gi://Adw"; import Gtk from "gi://Gtk"; -import { demos_dir, getDemo } from "../util.js"; +import { demos_dir, getDemo, demoSupportsLanguage } from "../util.js"; import Window from "../window.js"; import resource from "./Library.blp"; @@ -27,11 +27,45 @@ export default function Library({ application }) { activatable: true, }); if (demo.name === "Welcome") last_selected = widget; + + const languages_box = new Gtk.Box({ + orientation: Gtk.Orientation.HORIZONTAL, + spacing: 6, + margin_end: 6, + }); + widget.add_suffix (languages_box); + + languages_box.append( + new Gtk.Image({ + icon_name: "text-x-javascript-symbolic", + tooltip_text: "JavaScript", + }), + ); + + if (demoSupportsLanguage(demo, "vala")) { + languages_box.append( + new Gtk.Image({ + icon_name: "text-x-vala-symbolic", + tooltip_text: "Vala", + }), + ); + } + + if (demoSupportsLanguage(demo, "rust")) { + languages_box.append( + new Gtk.Image({ + icon_name: "text-rust-symbolic", + tooltip_text: "Rust", + }), + ); + } + widget.add_suffix( new Gtk.Image({ icon_name: "go-next-symbolic", }), ); + widget.connect("activated", () => { last_selected = widget; From c1dc1074e47f4d1cf64043bd9bf193b28e11db65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Tue, 10 Oct 2023 22:12:01 -0600 Subject: [PATCH 04/10] library: Show language labels below description --- po/POTFILES | 4 ++- src/Library/DemoRow.blp | 53 ++++++++++++++++++++++++++++++++++++ src/Library/DemoRow.js | 60 +++++++++++++++++++++++++++++++++++++++++ src/Library/Library.js | 45 ++----------------------------- src/style.css | 7 +++++ 5 files changed, 125 insertions(+), 44 deletions(-) create mode 100644 src/Library/DemoRow.blp create mode 100644 src/Library/DemoRow.js diff --git a/po/POTFILES b/po/POTFILES index 0fa76665d..536d540d3 100644 --- a/po/POTFILES +++ b/po/POTFILES @@ -76,4 +76,6 @@ src/Extensions/Extensions.js src/Manuals/DocumentationViewer.blp src/Manuals/Shortcuts.blp src/Manuals/Shortcuts.js -src/Manuals/DocumentationViewer.js \ No newline at end of file +src/Manuals/DocumentationViewer.js +src/Library/DemoRow.blp +src/Library/DemoRow.js \ No newline at end of file diff --git a/src/Library/DemoRow.blp b/src/Library/DemoRow.blp new file mode 100644 index 000000000..14178e538 --- /dev/null +++ b/src/Library/DemoRow.blp @@ -0,0 +1,53 @@ +using Gtk 4.0; +using Adw 1; + +template $DemoRow : Adw.PreferencesRow { + accessibility { + labelled-by: title_label; + described-by: description_label; + } + title: bind title_label.label; + + Box contents { + orientation: horizontal; + + Box labels_box { + margin-top: 6; + margin-start: 12; + margin-bottom: 6; + spacing: 3; + orientation: vertical; + + Label title_label { + xalign: 0; + wrap: true; + wrap-mode: word_char; + } + Label description_label { + styles ["dim-label", "caption"] + xalign: 0; + wrap: true; + wrap-mode: word_char; + natural-wrap-mode: none; + } + + Box languages_box { + orientation: horizontal; + spacing: 3; + margin-top: 3; + } + } + + Image { + icon-name: "go-next-symbolic"; + margin-end: 12; + margin-start: 6; + hexpand: true; + halign: end; + } + } + + GestureClick { + pressed => $on_pressed(); + } +} diff --git a/src/Library/DemoRow.js b/src/Library/DemoRow.js new file mode 100644 index 000000000..ac6eeb46e --- /dev/null +++ b/src/Library/DemoRow.js @@ -0,0 +1,60 @@ +import Gio from "gi://Gio"; +import Adw from "gi://Adw"; +import Gtk from "gi://Gtk"; +import GObject from "gi://GObject"; + +import { demoSupportsLanguage } from "../util.js"; +import Template from "./DemoRow.blp" with { type: "uri" }; + +class DemoRow extends Adw.PreferencesRow { + constructor({demo, ...params} = {}) { + super(params); + + this._title_label.label = demo.name; + this._description_label.label = demo.description; + + this._languages_box.append(this.#createLanguageTag("JavaScript")); + + if (demoSupportsLanguage(demo, "vala")) { + this._languages_box.append(this.#createLanguageTag("Vala")); + } + + if (demoSupportsLanguage(demo, "rust")) { + this._languages_box.append(this.#createLanguageTag("Rust")); + } + } + + #createLanguageTag(language_name) { + return new Gtk.Label({ + label: language_name, + css_name: "button", + valign: Gtk.Align.CENTER, + css_classes: [ "pill", "small" ] + }); + } + + on_pressed() { + this.emit("activated"); + } +} + +export default GObject.registerClass( + { + GTypeName: "DemoRow", + Template, + Properties: { + demo: GObject.ParamSpec.jsobject( + "demo", + "", + "", + GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY, + null + ), + }, + Signals: { + activated: {}, + }, + InternalChildren: [ "title_label", "description_label", "languages_box" ] + }, + DemoRow +); diff --git a/src/Library/Library.js b/src/Library/Library.js index 18acc9e33..798466488 100644 --- a/src/Library/Library.js +++ b/src/Library/Library.js @@ -7,6 +7,7 @@ import Window from "../window.js"; import resource from "./Library.blp"; import { createSessionFromDemo } from "../sessions.js"; +import DemoRow from "./DemoRow.js"; import illustration from "./library.svg"; @@ -21,51 +22,9 @@ export default function Library({ application }) { const demos = getDemos(); demos.forEach((demo) => { - const widget = new Adw.ActionRow({ - title: demo.name, - subtitle: demo.description, - activatable: true, - }); + const widget = new DemoRow({demo: demo}); if (demo.name === "Welcome") last_selected = widget; - const languages_box = new Gtk.Box({ - orientation: Gtk.Orientation.HORIZONTAL, - spacing: 6, - margin_end: 6, - }); - widget.add_suffix (languages_box); - - languages_box.append( - new Gtk.Image({ - icon_name: "text-x-javascript-symbolic", - tooltip_text: "JavaScript", - }), - ); - - if (demoSupportsLanguage(demo, "vala")) { - languages_box.append( - new Gtk.Image({ - icon_name: "text-x-vala-symbolic", - tooltip_text: "Vala", - }), - ); - } - - if (demoSupportsLanguage(demo, "rust")) { - languages_box.append( - new Gtk.Image({ - icon_name: "text-rust-symbolic", - tooltip_text: "Rust", - }), - ); - } - - widget.add_suffix( - new Gtk.Image({ - icon_name: "go-next-symbolic", - }), - ); - widget.connect("activated", () => { last_selected = widget; diff --git a/src/style.css b/src/style.css index e76a470fa..a876d321c 100644 --- a/src/style.css +++ b/src/style.css @@ -21,6 +21,13 @@ border: 1px solid @borders; } +button.pill.small { + font-size: .83333em; + border-radius: 99px; + margin: 0; + padding: 1px 12px; +} + #panel_code, #panel_style, #panel_ui { From 9b00ce42aac66ae26ce02e8d25d05962bc0efe40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Tue, 10 Oct 2023 22:20:31 -0600 Subject: [PATCH 05/10] data: Remove language icons They are no longer needed as they have been replaced by labels --- .../symbolic/apps/text-rust-symbolic.svg | 77 ------------------- .../apps/text-x-javascript-symbolic.svg | 67 ---------------- .../symbolic/apps/text-x-vala-symbolic.svg | 62 --------------- 3 files changed, 206 deletions(-) delete mode 100644 data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg delete mode 100644 data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg delete mode 100644 data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg diff --git a/data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg b/data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg deleted file mode 100644 index 11118fac6..000000000 --- a/data/icons/hicolor/symbolic/apps/text-rust-symbolic.svg +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg b/data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg deleted file mode 100644 index 242f2f23d..000000000 --- a/data/icons/hicolor/symbolic/apps/text-x-javascript-symbolic.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg b/data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg deleted file mode 100644 index e8ee65fac..000000000 --- a/data/icons/hicolor/symbolic/apps/text-x-vala-symbolic.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From a52b4226f25c55a859949da18802e19147391474 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Wed, 11 Oct 2023 21:58:45 +0200 Subject: [PATCH 06/10] Solve prettier issues --- src/Library/DemoRow.js | 11 +++++------ src/Library/Library.js | 5 ++--- src/style.css | 2 +- src/util.js | 1 + 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/Library/DemoRow.js b/src/Library/DemoRow.js index ac6eeb46e..47ecf4727 100644 --- a/src/Library/DemoRow.js +++ b/src/Library/DemoRow.js @@ -1,4 +1,3 @@ -import Gio from "gi://Gio"; import Adw from "gi://Adw"; import Gtk from "gi://Gtk"; import GObject from "gi://GObject"; @@ -7,7 +6,7 @@ import { demoSupportsLanguage } from "../util.js"; import Template from "./DemoRow.blp" with { type: "uri" }; class DemoRow extends Adw.PreferencesRow { - constructor({demo, ...params} = {}) { + constructor({ demo, ...params } = {}) { super(params); this._title_label.label = demo.name; @@ -29,7 +28,7 @@ class DemoRow extends Adw.PreferencesRow { label: language_name, css_name: "button", valign: Gtk.Align.CENTER, - css_classes: [ "pill", "small" ] + css_classes: ["pill", "small"], }); } @@ -48,13 +47,13 @@ export default GObject.registerClass( "", "", GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY, - null + null, ), }, Signals: { activated: {}, }, - InternalChildren: [ "title_label", "description_label", "languages_box" ] + InternalChildren: ["title_label", "description_label", "languages_box"], }, - DemoRow + DemoRow, ); diff --git a/src/Library/Library.js b/src/Library/Library.js index 798466488..69037c543 100644 --- a/src/Library/Library.js +++ b/src/Library/Library.js @@ -1,8 +1,7 @@ import Gio from "gi://Gio"; -import Adw from "gi://Adw"; import Gtk from "gi://Gtk"; -import { demos_dir, getDemo, demoSupportsLanguage } from "../util.js"; +import { demos_dir, getDemo } from "../util.js"; import Window from "../window.js"; import resource from "./Library.blp"; @@ -22,7 +21,7 @@ export default function Library({ application }) { const demos = getDemos(); demos.forEach((demo) => { - const widget = new DemoRow({demo: demo}); + const widget = new DemoRow({ demo: demo }); if (demo.name === "Welcome") last_selected = widget; widget.connect("activated", () => { diff --git a/src/style.css b/src/style.css index a876d321c..7000c90fc 100644 --- a/src/style.css +++ b/src/style.css @@ -22,7 +22,7 @@ } button.pill.small { - font-size: .83333em; + font-size: 0.83333em; border-radius: 99px; margin: 0; padding: 1px 12px; diff --git a/src/util.js b/src/util.js index d94fca87e..392b98acd 100644 --- a/src/util.js +++ b/src/util.js @@ -61,6 +61,7 @@ export const languages = [ extensions: [".js", ".mjs"], types: ["text/javascript", "application/javascript"], document: null, + default_file: "main.js", }, { id: "css", From d1a14b75a395009f853d5927d57c8b4385b70527 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Fri, 13 Oct 2023 20:59:41 -0600 Subject: [PATCH 07/10] demo-row: Open demo in the language the user selected Each language tag is now a button, which when clicked open the demo in said language. --- src/Library/DemoRow.blp | 4 ---- src/Library/DemoRow.js | 30 ++++++++++++++++++++++++------ src/Library/Library.js | 29 +++++++++++++++++++++++++---- 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/src/Library/DemoRow.blp b/src/Library/DemoRow.blp index 14178e538..cfc0a5ec2 100644 --- a/src/Library/DemoRow.blp +++ b/src/Library/DemoRow.blp @@ -46,8 +46,4 @@ template $DemoRow : Adw.PreferencesRow { halign: end; } } - - GestureClick { - pressed => $on_pressed(); - } } diff --git a/src/Library/DemoRow.js b/src/Library/DemoRow.js index 47ecf4727..eaa22ebe6 100644 --- a/src/Library/DemoRow.js +++ b/src/Library/DemoRow.js @@ -1,5 +1,6 @@ import Adw from "gi://Adw"; import Gtk from "gi://Gtk"; +import Gio from "gi://Gio"; import GObject from "gi://GObject"; import { demoSupportsLanguage } from "../util.js"; @@ -21,19 +22,34 @@ class DemoRow extends Adw.PreferencesRow { if (demoSupportsLanguage(demo, "rust")) { this._languages_box.append(this.#createLanguageTag("Rust")); } + + const action_group = new Gio.SimpleActionGroup(); + const activate_action = new Gio.SimpleAction({ + name: "activate", + parameter_type: null, + }); + + activate_action.connect("activate", () => { + this.emit("activated", null); + }); + action_group.add_action(activate_action); + + this.insert_action_group("demo-row", action_group); + this.action_name = "demo-row.activate"; } #createLanguageTag(language_name) { - return new Gtk.Label({ + const button = new Gtk.Button({ label: language_name, - css_name: "button", valign: Gtk.Align.CENTER, css_classes: ["pill", "small"], }); - } - on_pressed() { - this.emit("activated"); + button.connect("clicked", () => { + this.emit("activated", language_name); + }); + + return button; } } @@ -51,7 +67,9 @@ export default GObject.registerClass( ), }, Signals: { - activated: {}, + activated: { + param_types: [GObject.TYPE_STRING], + }, }, InternalChildren: ["title_label", "description_label", "languages_box"], }, diff --git a/src/Library/Library.js b/src/Library/Library.js index 69037c543..fbfab639c 100644 --- a/src/Library/Library.js +++ b/src/Library/Library.js @@ -1,7 +1,7 @@ import Gio from "gi://Gio"; import Gtk from "gi://Gtk"; -import { demos_dir, getDemo } from "../util.js"; +import { demos_dir, getDemo, settings as global_settings } from "../util.js"; import Window from "../window.js"; import resource from "./Library.blp"; @@ -24,10 +24,14 @@ export default function Library({ application }) { const widget = new DemoRow({ demo: demo }); if (demo.name === "Welcome") last_selected = widget; - widget.connect("activated", () => { + widget.connect("activated", (src, language_name) => { last_selected = widget; - openDemo({ application, demo_name: demo.name }).catch(console.error); + openDemo({ + application, + demo_name: demo.name, + language_name: language_name, + }).catch(console.error); }); builder.get_object(`library_${demo.category}`).add(widget); @@ -69,10 +73,27 @@ function getDemos() { return demos; } -async function openDemo({ application, demo_name }) { +async function openDemo({ application, demo_name, language_name }) { const demo = getDemo(demo_name); const session = await createSessionFromDemo(demo); + if (language_name) { + switch (language_name.toLowerCase()) { + case "javascript": + session.settings.set_int("code-language", 0); + global_settings.set_int("recent-code-language", 0); + break; + case "vala": + session.settings.set_int("code-language", 1); + global_settings.set_int("recent-code-language", 1); + break; + case "rust": + session.settings.set_int("code-language", 2); + global_settings.set_int("recent-code-language", 2); + break; + } + } + const is_js = session.settings.get_int("code-language") === 0; const { load } = Window({ application, session }); From a4ee37d254ef091843dbcce14d419c2523107eb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20Iv=C3=A1n?= Date: Fri, 13 Oct 2023 22:00:31 -0600 Subject: [PATCH 08/10] style: Add link to Builder's stylesheet Specify where the styling for the language tags comes from --- src/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/style.css b/src/style.css index 7000c90fc..5d3ba8285 100644 --- a/src/style.css +++ b/src/style.css @@ -21,6 +21,11 @@ border: 1px solid @borders; } +/* + * From Builder's stylesheet: + * https://gitlab.gnome.org/GNOME/gnome-builder/-/blob/main/src/libide/gui/style.css?ref_type=heads#L33 + * Used to style the language tags for the demo entries in the Library + */ button.pill.small { font-size: 0.83333em; border-radius: 99px; From eca12d60dc5e41011f04281cbe3bf5ca93393d51 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Sat, 14 Oct 2023 15:30:57 +0200 Subject: [PATCH 09/10] Minor changes --- po/POTFILES | 4 +-- src/Library/{DemoRow.blp => EntryRow.blp} | 2 +- src/Library/{DemoRow.js => EntryRow.js} | 35 ++++++++++++----------- src/Library/Library.js | 8 +++--- src/style.css | 2 +- 5 files changed, 26 insertions(+), 25 deletions(-) rename src/Library/{DemoRow.blp => EntryRow.blp} (95%) rename src/Library/{DemoRow.js => EntryRow.js} (66%) diff --git a/po/POTFILES b/po/POTFILES index 536d540d3..e0ccaf03f 100644 --- a/po/POTFILES +++ b/po/POTFILES @@ -77,5 +77,5 @@ src/Manuals/DocumentationViewer.blp src/Manuals/Shortcuts.blp src/Manuals/Shortcuts.js src/Manuals/DocumentationViewer.js -src/Library/DemoRow.blp -src/Library/DemoRow.js \ No newline at end of file +src/Library/EntryRow.blp +src/Library/EntryRow.js diff --git a/src/Library/DemoRow.blp b/src/Library/EntryRow.blp similarity index 95% rename from src/Library/DemoRow.blp rename to src/Library/EntryRow.blp index cfc0a5ec2..a7d88e10c 100644 --- a/src/Library/DemoRow.blp +++ b/src/Library/EntryRow.blp @@ -1,7 +1,7 @@ using Gtk 4.0; using Adw 1; -template $DemoRow : Adw.PreferencesRow { +template $EntryRow : Adw.PreferencesRow { accessibility { labelled-by: title_label; described-by: description_label; diff --git a/src/Library/DemoRow.js b/src/Library/EntryRow.js similarity index 66% rename from src/Library/DemoRow.js rename to src/Library/EntryRow.js index eaa22ebe6..4cb65560f 100644 --- a/src/Library/DemoRow.js +++ b/src/Library/EntryRow.js @@ -3,25 +3,17 @@ import Gtk from "gi://Gtk"; import Gio from "gi://Gio"; import GObject from "gi://GObject"; -import { demoSupportsLanguage } from "../util.js"; -import Template from "./DemoRow.blp" with { type: "uri" }; +import { demoSupportsLanguage, getLanguage } from "../util.js"; +import Template from "./EntryRow.blp" with { type: "uri" }; -class DemoRow extends Adw.PreferencesRow { +class EntryRow extends Adw.PreferencesRow { constructor({ demo, ...params } = {}) { super(params); this._title_label.label = demo.name; this._description_label.label = demo.description; - this._languages_box.append(this.#createLanguageTag("JavaScript")); - - if (demoSupportsLanguage(demo, "vala")) { - this._languages_box.append(this.#createLanguageTag("Vala")); - } - - if (demoSupportsLanguage(demo, "rust")) { - this._languages_box.append(this.#createLanguageTag("Rust")); - } + this.#createLanguageTags(demo); const action_group = new Gio.SimpleActionGroup(); const activate_action = new Gio.SimpleAction({ @@ -38,15 +30,24 @@ class DemoRow extends Adw.PreferencesRow { this.action_name = "demo-row.activate"; } - #createLanguageTag(language_name) { + #createLanguageTags(demo) { + ["javascript", "vala", "rust"].forEach((id) => { + const language = getLanguage(id); + if (!demoSupportsLanguage(demo, language.id)) return; + const language_tag = this.#createLanguageTag(language); + this._languages_box.append(language_tag); + }); + } + + #createLanguageTag(language) { const button = new Gtk.Button({ - label: language_name, + label: language.name, valign: Gtk.Align.CENTER, css_classes: ["pill", "small"], }); button.connect("clicked", () => { - this.emit("activated", language_name); + this.emit("activated", language.id); }); return button; @@ -55,7 +56,7 @@ class DemoRow extends Adw.PreferencesRow { export default GObject.registerClass( { - GTypeName: "DemoRow", + GTypeName: "EntryRow", Template, Properties: { demo: GObject.ParamSpec.jsobject( @@ -73,5 +74,5 @@ export default GObject.registerClass( }, InternalChildren: ["title_label", "description_label", "languages_box"], }, - DemoRow, + EntryRow, ); diff --git a/src/Library/Library.js b/src/Library/Library.js index fbfab639c..cee3e8d8d 100644 --- a/src/Library/Library.js +++ b/src/Library/Library.js @@ -6,7 +6,7 @@ import Window from "../window.js"; import resource from "./Library.blp"; import { createSessionFromDemo } from "../sessions.js"; -import DemoRow from "./DemoRow.js"; +import EntryRow from "./EntryRow.js"; import illustration from "./library.svg"; @@ -21,16 +21,16 @@ export default function Library({ application }) { const demos = getDemos(); demos.forEach((demo) => { - const widget = new DemoRow({ demo: demo }); + const widget = new EntryRow({ demo: demo }); if (demo.name === "Welcome") last_selected = widget; - widget.connect("activated", (src, language_name) => { + widget.connect("activated", (_self, language_name) => { last_selected = widget; openDemo({ application, demo_name: demo.name, - language_name: language_name, + language_name, }).catch(console.error); }); diff --git a/src/style.css b/src/style.css index 5d3ba8285..e25c9e2bf 100644 --- a/src/style.css +++ b/src/style.css @@ -23,7 +23,7 @@ /* * From Builder's stylesheet: - * https://gitlab.gnome.org/GNOME/gnome-builder/-/blob/main/src/libide/gui/style.css?ref_type=heads#L33 + * https://gitlab.gnome.org/GNOME/gnome-builder/-/blob/45d4ec9b6f1aa2236c9bb7dfb846b35f9b959618/src/libide/gui/style.css#L33 * Used to style the language tags for the demo entries in the Library */ button.pill.small { From 0f55da3ba0074ed46e44ba5ec3e695609c737d43 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Sat, 14 Oct 2023 15:36:22 +0200 Subject: [PATCH 10/10] Separate JavaScript. Some demo don't have code. For Vala / Rust it works fine because we have a placeholder. For JavaScript there is nothing in that case. So it says reports as available with Rust/Vala but not JavaScript. Most likely we would want to remove all tags for demos that don't have code but that's a bit more work. Maybe later. --- src/Library/EntryRow.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Library/EntryRow.js b/src/Library/EntryRow.js index 4cb65560f..0b8248efb 100644 --- a/src/Library/EntryRow.js +++ b/src/Library/EntryRow.js @@ -31,7 +31,11 @@ class EntryRow extends Adw.PreferencesRow { } #createLanguageTags(demo) { - ["javascript", "vala", "rust"].forEach((id) => { + const language = getLanguage("javascript"); + const language_tag = this.#createLanguageTag(language); + this._languages_box.append(language_tag); + + ["vala", "rust"].forEach((id) => { const language = getLanguage(id); if (!demoSupportsLanguage(demo, language.id)) return; const language_tag = this.#createLanguageTag(language);