From 04ba2fdd10a6189951b344edb6ba305a779e8ab4 Mon Sep 17 00:00:00 2001 From: AkshayWarrier Date: Sun, 23 Jul 2023 03:18:37 +0530 Subject: [PATCH 1/3] library: Add Menu entry --- src/Library/demos/Menu/main.blp | 159 +++++++++++++++++++++++++++++++ src/Library/demos/Menu/main.js | 57 +++++++++++ src/Library/demos/Menu/main.json | 7 ++ 3 files changed, 223 insertions(+) create mode 100644 src/Library/demos/Menu/main.blp create mode 100644 src/Library/demos/Menu/main.js create mode 100644 src/Library/demos/Menu/main.json diff --git a/src/Library/demos/Menu/main.blp b/src/Library/demos/Menu/main.blp new file mode 100644 index 000000000..c2305a313 --- /dev/null +++ b/src/Library/demos/Menu/main.blp @@ -0,0 +1,159 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage demo { + title: _("Menu"); + description: _("Display structured menus with items, sections and submenus"); + + Box { + halign: center; + orientation: vertical; + + Box { + orientation: vertical; + spacing: 42; + + Adw.PreferencesGroup { + title: _("Primary and Secondary Menus"); + description: _("Used with controls such as menu buttons"); + + MenuButton { + halign: center; + label: _("Menu Button"); + menu-model: demo_menu; + } + } + + Adw.PreferencesGroup { + title: _("Context Menus"); + description: _("Menus that popup on right-clicking a widget"); + + Adw.Clamp { + maximum-size: 500; + + Frame { + Label label { + margin-top: 6; + margin-bottom: 6; + margin-start: 6; + margin-end: 6; + wrap: true; + wrap-mode: char; + selectable: true; + label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel elit scelerisque mauris pellentesque pulvinar. Molestie nunc non blandit massa enim nec dui nunc."; + extra-menu: context_menu; + } + } + } + } + + Box { + halign: center; + + LinkButton { + label: "GJS Guide"; + uri: "https://gjs.guide/guides/gio/actions-and-menus.html#gmenu"; + } + + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/controls/menus.html"; + } + } + } + } +} + +menu demo_menu { + item { + label: _("New File"); + } + + section { + item { + label: _("New Terminal"); + } + + item { + label: _("New Build Terminal"); + } + + item { + label: _("New Runtime Terminal"); + } + } + + section { + label: _("Settings"); + + submenu { + label: _("Appearance"); + + item { + label: _("Force System Default"); + } + + item { + label: _("Force Light Mode"); + } + + item { + label: _("Force Dark Mode"); + } + } + + submenu { + label: _("Accessibility"); + + item { + label: _("High Contrast"); + } + + section { + label: _("Text Direction"); + + item { + label: _("Left-to-Right"); + } + + item { + label: _("Right-to-Left"); + } + } + } + } +} + +menu context_menu { + item { + label: _("Italics"); + action: "text.italic"; + } + + item { + label: _("Bold"); + action: "text.bold"; + } + + submenu { + label: _("Font Color"); + + item { + label: _("White"); + action: "text.color"; + target: "white"; + } + + item { + label: _("Blue"); + action: "text.color"; + target: "blue"; + } + + item { + label: _("Red"); + action: "text.color"; + target: "red"; + } + } +} diff --git a/src/Library/demos/Menu/main.js b/src/Library/demos/Menu/main.js new file mode 100644 index 000000000..be4a4f9f8 --- /dev/null +++ b/src/Library/demos/Menu/main.js @@ -0,0 +1,57 @@ +import GLib from "gi://GLib"; +import Gio from "gi://Gio"; +import Pango from "gi://Pango"; + +const label = workbench.builder.get_object("label"); + +const text_group = new Gio.SimpleActionGroup(); +label.insert_action_group("text", text_group); + +const text_state = { italic: false, bold: false, foreground: "white" }; + +const italic_action = new Gio.SimpleAction({ + name: "italic", + state: GLib.Variant.new_boolean(false), +}); + +italic_action.connect("notify::state", (action) => { + if (action.state.unpack()) text_state["italic"] = true; + else text_state["italic"] = false; + label.attributes = stateToAttr(text_state); +}); +text_group.add_action(italic_action); + +const bold_action = new Gio.SimpleAction({ + name: "bold", + state: GLib.Variant.new_boolean(false), +}); + +bold_action.connect("notify::state", (action) => { + if (action.state.unpack()) text_state["bold"] = true; + else text_state["bold"] = false; + label.attributes = stateToAttr(text_state); +}); +text_group.add_action(bold_action); + +const color_action = new Gio.SimpleAction({ + name: "color", + state: GLib.Variant.new_string("white"), + parameter_type: new GLib.VariantType("s"), +}); + +color_action.connect("notify::state", (action) => { + text_state["foreground"] = action.state.unpack(); + label.attributes = stateToAttr(text_state); +}); + +text_group.add_action(color_action); + +// Helper function to create a PangoAttrList from text_state +function stateToAttr(state) { + const attrs = []; + if (state["bold"]) attrs.push("0 -1 weight bold"); + if (state["italic"]) attrs.push("0 -1 style italic"); + attrs.push(`0 -1 foreground ${state["foreground"]}`); + const attr_string = attrs.join(", "); + return Pango.attr_list_from_string(attr_string); +} diff --git a/src/Library/demos/Menu/main.json b/src/Library/demos/Menu/main.json new file mode 100644 index 000000000..d53ac9845 --- /dev/null +++ b/src/Library/demos/Menu/main.json @@ -0,0 +1,7 @@ +{ + "name": "Menu", + "category": "controls", + "description": "Display structured menus with items, sections and submenus", + "panels": ["ui", "preview"], + "autorun": true +} From e3f8b8361c8db6d27627fc5b7ba325ed7da80bad Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Mon, 7 Aug 2023 09:52:55 +0530 Subject: [PATCH 2/3] Menu: Minor change from review Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com> --- src/Library/demos/Menu/main.blp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Menu/main.blp b/src/Library/demos/Menu/main.blp index c2305a313..914188747 100644 --- a/src/Library/demos/Menu/main.blp +++ b/src/Library/demos/Menu/main.blp @@ -90,7 +90,7 @@ menu demo_menu { label: _("Appearance"); item { - label: _("Force System Default"); + label: _("System Default"); } item { From ad384af03b30c4e8a07b617c79b1f3f6ee0dc3bb Mon Sep 17 00:00:00 2001 From: Andy Holmes Date: Tue, 8 Aug 2023 16:27:12 -0700 Subject: [PATCH 3/3] Set default text color to green This should be visible in any color scheme. --- src/Library/demos/Menu/main.blp | 4 ++-- src/Library/demos/Menu/main.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Library/demos/Menu/main.blp b/src/Library/demos/Menu/main.blp index 914188747..b88dcfc9b 100644 --- a/src/Library/demos/Menu/main.blp +++ b/src/Library/demos/Menu/main.blp @@ -139,9 +139,9 @@ menu context_menu { label: _("Font Color"); item { - label: _("White"); + label: _("Green"); action: "text.color"; - target: "white"; + target: "green"; } item { diff --git a/src/Library/demos/Menu/main.js b/src/Library/demos/Menu/main.js index be4a4f9f8..f83a66219 100644 --- a/src/Library/demos/Menu/main.js +++ b/src/Library/demos/Menu/main.js @@ -7,7 +7,7 @@ const label = workbench.builder.get_object("label"); const text_group = new Gio.SimpleActionGroup(); label.insert_action_group("text", text_group); -const text_state = { italic: false, bold: false, foreground: "white" }; +const text_state = { italic: false, bold: false, foreground: "green" }; const italic_action = new Gio.SimpleAction({ name: "italic", @@ -35,7 +35,7 @@ text_group.add_action(bold_action); const color_action = new Gio.SimpleAction({ name: "color", - state: GLib.Variant.new_string("white"), + state: GLib.Variant.new_string("green"), parameter_type: new GLib.VariantType("s"), });