From 223090d26b9b5064c9bd0bcb95176af67650bdb1 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 11 Mar 2023 18:14:34 +0530 Subject: [PATCH 1/6] Add Toggle Button entry --- src/Library/demos/Toggle Button/main.blp | 76 +++++++++++++++++++++++ src/Library/demos/Toggle Button/main.js | 19 ++++++ src/Library/demos/Toggle Button/main.json | 10 +++ 3 files changed, 105 insertions(+) create mode 100644 src/Library/demos/Toggle Button/main.blp create mode 100644 src/Library/demos/Toggle Button/main.js create mode 100644 src/Library/demos/Toggle Button/main.json diff --git a/src/Library/demos/Toggle Button/main.blp b/src/Library/demos/Toggle Button/main.blp new file mode 100644 index 000000000..e2139bfb4 --- /dev/null +++ b/src/Library/demos/Toggle Button/main.blp @@ -0,0 +1,76 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Toggle Button"; + description: _("Represent active-state visually"); + + Box { + orientation: vertical; + + Box { + orientation: horizontal; + halign: center; + + ToggleButton button_first { + active: true; + icon-name: "audio-volume-muted-symbolic"; + halign: center; + margin-end: 12; + margin-bottom: 18; + } + + ToggleButton button_second { + active: false; + icon-name: "audio-volume-high-symbolic"; + halign: center; + group: button_first; + margin-bottom: 18; + } + } + + Box { + orientation: horizontal; + halign: center; + + ToggleButton button_third { + active: false; + icon-name: "photo-camera-symbolic"; + halign: center; + margin-end: 12; + margin-bottom: 18; + } + + ToggleButton button_fourth { + active: false; + icon-name: "flashlight-symbolic"; + halign: center; + margin-bottom: 18; + } + } + + ToggleButton disabled { + halign:center; + width-request: 120; + margin-bottom: 18; + icon-name: "user-home-symbolic"; + sensitive: false; + } + + LinkButton{ + label: "Tutorial"; + uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/toggle.html"; + } + + LinkButton{ + label: "API Reference"; + uri: "https://docs.gtk.org/gtk4/class.ToggleButton.html#description"; + } + + LinkButton{ + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/controls/buttons.html"; + } + } +} + diff --git a/src/Library/demos/Toggle Button/main.js b/src/Library/demos/Toggle Button/main.js new file mode 100644 index 000000000..d4b0ebf90 --- /dev/null +++ b/src/Library/demos/Toggle Button/main.js @@ -0,0 +1,19 @@ +const third = workbench.builder.get_object("button_third"); +const fourth = workbench.builder.get_object("button_fourth"); +let toggle_count_camera = 0; +let toggle_count_flashlight = 0; + +third.connect("toggled", () => { + toggle_count_camera++; + console.log( + toggle_count_camera % 2 !== 0 ? "Camera Toggled On" : "Camera Toggled Off", + ); +}); +fourth.connect("toggled", () => { + toggle_count_flashlight++; + console.log( + toggle_count_flashlight % 2 !== 0 + ? "Flashlight Toggled On" + : "Flashlight Toggled Off", + ); +}); diff --git a/src/Library/demos/Toggle Button/main.json b/src/Library/demos/Toggle Button/main.json new file mode 100644 index 000000000..b1c830741 --- /dev/null +++ b/src/Library/demos/Toggle Button/main.json @@ -0,0 +1,10 @@ +{ + "name": "Toggle Button", + "category": "user_interface", + "description": "Represent active-state visually", + "panels": [ + "ui", + "preview" + ], + "autorun": true +} From a2b231852c7fb99baa3f6f603e765dd3658ac427 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Mon, 13 Mar 2023 18:44:24 +0530 Subject: [PATCH 2/6] Applied Suggested Changes --- src/Library/demos/Toggle Button/main.blp | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/Library/demos/Toggle Button/main.blp b/src/Library/demos/Toggle Button/main.blp index e2139bfb4..35cdba722 100644 --- a/src/Library/demos/Toggle Button/main.blp +++ b/src/Library/demos/Toggle Button/main.blp @@ -22,7 +22,7 @@ Adw.StatusPage { ToggleButton button_second { active: false; - icon-name: "audio-volume-high-symbolic"; + icon-name: "list-compact"; halign: center; group: button_first; margin-bottom: 18; @@ -50,13 +50,17 @@ Adw.StatusPage { } ToggleButton disabled { - halign:center; - width-request: 120; - margin-bottom: 18; - icon-name: "user-home-symbolic"; - sensitive: false; - } + halign: center; + margin-bottom: 18; + sensitive: false; + Adw.ButtonContent { + halign: center; + valign: center; + label: "Console"; + icon-name: "code-symbolic"; + } + } LinkButton{ label: "Tutorial"; uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/toggle.html"; @@ -74,3 +78,5 @@ Adw.StatusPage { } } + + From c82daa8c55c860c024582b8ed7d54229a54e27cd Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Wed, 15 Mar 2023 01:44:36 +0530 Subject: [PATCH 3/6] Applied Suggested Changes --- src/Library/demos/Toggle Button/main.blp | 37 ++++++++++++++---------- src/Library/demos/Toggle Button/main.js | 17 +++++++---- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/Library/demos/Toggle Button/main.blp b/src/Library/demos/Toggle Button/main.blp index 35cdba722..191a52c6a 100644 --- a/src/Library/demos/Toggle Button/main.blp +++ b/src/Library/demos/Toggle Button/main.blp @@ -8,57 +8,64 @@ Adw.StatusPage { Box { orientation: vertical; - Box { + Box Grouped_Toggle_Buttons { orientation: horizontal; halign: center; + margin-bottom: 12; + styles ["linked"] ToggleButton button_first { active: true; - icon-name: "audio-volume-muted-symbolic"; - halign: center; - margin-end: 12; - margin-bottom: 18; + icon-name: "eye-not-looking-symbolic"; } ToggleButton button_second { active: false; - icon-name: "list-compact"; - halign: center; + icon-name: "eye-open-negative-filled-symbolic"; group: button_first; - margin-bottom: 18; } } - Box { + Label { + label: "Grouped Toggle Buttons"; + justify: center; + margin-bottom: 18; + } + + Box Ungrouped_Toggle_Buttons { orientation: horizontal; halign: center; + margin-bottom: 12; ToggleButton button_third { active: false; icon-name: "photo-camera-symbolic"; halign: center; - margin-end: 12; - margin-bottom: 18; + margin-end: 6; } ToggleButton button_fourth { active: false; icon-name: "flashlight-symbolic"; halign: center; - margin-bottom: 18; } } - ToggleButton disabled { + Label { + label: "Ungrouped Toggle Buttons"; + margin-bottom: 18; + justify: center; + } + + ToggleButton console { halign: center; margin-bottom: 18; - sensitive: false; Adw.ButtonContent { halign: center; valign: center; label: "Console"; - icon-name: "code-symbolic"; + icon-name: "terminal-symbolic"; } } LinkButton{ diff --git a/src/Library/demos/Toggle Button/main.js b/src/Library/demos/Toggle Button/main.js index d4b0ebf90..663166247 100644 --- a/src/Library/demos/Toggle Button/main.js +++ b/src/Library/demos/Toggle Button/main.js @@ -1,19 +1,24 @@ const third = workbench.builder.get_object("button_third"); const fourth = workbench.builder.get_object("button_fourth"); +const terminal = workbench.builder.get_object("console"); + let toggle_count_camera = 0; let toggle_count_flashlight = 0; +let toggle_count_terminal = 0; third.connect("toggled", () => { toggle_count_camera++; - console.log( - toggle_count_camera % 2 !== 0 ? "Camera Toggled On" : "Camera Toggled Off", - ); + console.log(toggle_count_camera % 2 !== 0 ? "Camera On" : "Camera Off"); }); fourth.connect("toggled", () => { toggle_count_flashlight++; console.log( - toggle_count_flashlight % 2 !== 0 - ? "Flashlight Toggled On" - : "Flashlight Toggled Off", + toggle_count_flashlight % 2 !== 0 ? "Flashlight On" : "Flashlight Off", + ); +}); +terminal.connect("toggled", () => { + toggle_count_terminal++; + console.log( + toggle_count_terminal % 2 !== 0 ? "Entered Console" : "Exited Console", ); }); From a807b250668bfcb5e561694a91ccbc54ba2db530 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Wed, 15 Mar 2023 02:00:21 +0530 Subject: [PATCH 4/6] Improved JS Code --- src/Library/demos/Toggle Button/main.js | 25 +++++++------------------ 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/src/Library/demos/Toggle Button/main.js b/src/Library/demos/Toggle Button/main.js index 663166247..3b9ccf568 100644 --- a/src/Library/demos/Toggle Button/main.js +++ b/src/Library/demos/Toggle Button/main.js @@ -1,24 +1,13 @@ -const third = workbench.builder.get_object("button_third"); -const fourth = workbench.builder.get_object("button_fourth"); +const camera = workbench.builder.get_object("button_third"); +const flashlight = workbench.builder.get_object("button_fourth"); const terminal = workbench.builder.get_object("console"); -let toggle_count_camera = 0; -let toggle_count_flashlight = 0; -let toggle_count_terminal = 0; - -third.connect("toggled", () => { - toggle_count_camera++; - console.log(toggle_count_camera % 2 !== 0 ? "Camera On" : "Camera Off"); +camera.connect("toggled", () => { + console.log(camera.get_active() ? "Camera On" : "Camera Off"); }); -fourth.connect("toggled", () => { - toggle_count_flashlight++; - console.log( - toggle_count_flashlight % 2 !== 0 ? "Flashlight On" : "Flashlight Off", - ); +flashlight.connect("toggled", () => { + console.log(flashlight.get_active() ? "Flashlight On" : "Flashlight Off"); }); terminal.connect("toggled", () => { - toggle_count_terminal++; - console.log( - toggle_count_terminal % 2 !== 0 ? "Entered Console" : "Exited Console", - ); + console.log(terminal.get_active() ? "Entered Console" : "Exited Console"); }); From a03625901e78a3d692b1cae49fe02b673d6798bb Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Tue, 21 Mar 2023 17:36:52 +0530 Subject: [PATCH 5/6] Improved UI and JS code --- src/Library/demos/Toggle Button/main.blp | 31 ++++++++++++++---------- src/Library/demos/Toggle Button/main.js | 26 +++++++++++--------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/Library/demos/Toggle Button/main.blp b/src/Library/demos/Toggle Button/main.blp index 191a52c6a..1b3b32f5b 100644 --- a/src/Library/demos/Toggle Button/main.blp +++ b/src/Library/demos/Toggle Button/main.blp @@ -8,10 +8,10 @@ Adw.StatusPage { Box { orientation: vertical; - Box Grouped_Toggle_Buttons { + Box { orientation: horizontal; halign: center; - margin-bottom: 12; + margin-bottom: 6; styles ["linked"] ToggleButton button_first { @@ -27,21 +27,20 @@ Adw.StatusPage { } Label { - label: "Grouped Toggle Buttons"; - justify: center; - margin-bottom: 18; + label: "Grouped"; + margin-bottom: 12; } - Box Ungrouped_Toggle_Buttons { + Box { orientation: horizontal; halign: center; - margin-bottom: 12; + spacing: 6; + margin-bottom: 6; ToggleButton button_third { active: false; icon-name: "photo-camera-symbolic"; halign: center; - margin-end: 6; } ToggleButton button_fourth { @@ -52,14 +51,13 @@ Adw.StatusPage { } Label { - label: "Ungrouped Toggle Buttons"; - margin-bottom: 18; - justify: center; + label: "Independent"; + margin-bottom: 12; } - ToggleButton console { + ToggleButton button_console { halign: center; - margin-bottom: 18; + margin-bottom: 6; Adw.ButtonContent { halign: center; @@ -68,6 +66,12 @@ Adw.StatusPage { icon-name: "terminal-symbolic"; } } + + Label { + label: "With label"; + margin-bottom: 12; + } + LinkButton{ label: "Tutorial"; uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/toggle.html"; @@ -87,3 +91,4 @@ Adw.StatusPage { + diff --git a/src/Library/demos/Toggle Button/main.js b/src/Library/demos/Toggle Button/main.js index 3b9ccf568..b672d55b7 100644 --- a/src/Library/demos/Toggle Button/main.js +++ b/src/Library/demos/Toggle Button/main.js @@ -1,13 +1,15 @@ -const camera = workbench.builder.get_object("button_third"); -const flashlight = workbench.builder.get_object("button_fourth"); -const terminal = workbench.builder.get_object("console"); +const connectToggleButton = (button, message) => + button.connect("toggled", () => + console.log(`${message} ${button.active ? "On" : "Off"}`), + ); -camera.connect("toggled", () => { - console.log(camera.get_active() ? "Camera On" : "Camera Off"); -}); -flashlight.connect("toggled", () => { - console.log(flashlight.get_active() ? "Flashlight On" : "Flashlight Off"); -}); -terminal.connect("toggled", () => { - console.log(terminal.get_active() ? "Entered Console" : "Exited Console"); -}); +const buttons = { + Camera: workbench.builder.get_object("button_third"), + Flashlight: workbench.builder.get_object("button_fourth"), + Console: workbench.builder.get_object("button_console"), + Eye: workbench.builder.get_object("button_second"), +}; + +Object.entries(buttons).forEach(([name, button]) => + connectToggleButton(button, name), +); From 44d9ec85dc1217df76194b502ee5bdcc768a4332 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Tue, 21 Mar 2023 18:28:07 +0100 Subject: [PATCH 6/6] small improvements --- src/Library/demos/Toggle Button/main.blp | 22 +++++++++------------- src/Library/demos/Toggle Button/main.js | 23 +++++++++++------------ 2 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/Library/demos/Toggle Button/main.blp b/src/Library/demos/Toggle Button/main.blp index 1b3b32f5b..c98a6548c 100644 --- a/src/Library/demos/Toggle Button/main.blp +++ b/src/Library/demos/Toggle Button/main.blp @@ -14,21 +14,21 @@ Adw.StatusPage { margin-bottom: 6; styles ["linked"] - ToggleButton button_first { + ToggleButton button_no_look { active: true; icon-name: "eye-not-looking-symbolic"; } - ToggleButton button_second { + ToggleButton button_look { active: false; icon-name: "eye-open-negative-filled-symbolic"; - group: button_first; + group: button_no_look; } } Label { label: "Grouped"; - margin-bottom: 12; + margin-bottom: 24; } Box { @@ -37,13 +37,13 @@ Adw.StatusPage { spacing: 6; margin-bottom: 6; - ToggleButton button_third { + ToggleButton button_camera { active: false; icon-name: "photo-camera-symbolic"; halign: center; } - ToggleButton button_fourth { + ToggleButton button_flashlight { active: false; icon-name: "flashlight-symbolic"; halign: center; @@ -52,7 +52,7 @@ Adw.StatusPage { Label { label: "Independent"; - margin-bottom: 12; + margin-bottom: 24; } ToggleButton button_console { @@ -69,7 +69,7 @@ Adw.StatusPage { Label { label: "With label"; - margin-bottom: 12; + margin-bottom: 24; } LinkButton{ @@ -79,7 +79,7 @@ Adw.StatusPage { LinkButton{ label: "API Reference"; - uri: "https://docs.gtk.org/gtk4/class.ToggleButton.html#description"; + uri: "https://docs.gtk.org/gtk4/class.ToggleButton.html"; } LinkButton{ @@ -88,7 +88,3 @@ Adw.StatusPage { } } } - - - - diff --git a/src/Library/demos/Toggle Button/main.js b/src/Library/demos/Toggle Button/main.js index b672d55b7..870047a95 100644 --- a/src/Library/demos/Toggle Button/main.js +++ b/src/Library/demos/Toggle Button/main.js @@ -1,15 +1,14 @@ -const connectToggleButton = (button, message) => - button.connect("toggled", () => - console.log(`${message} ${button.active ? "On" : "Off"}`), - ); - const buttons = { - Camera: workbench.builder.get_object("button_third"), - Flashlight: workbench.builder.get_object("button_fourth"), - Console: workbench.builder.get_object("button_console"), - Eye: workbench.builder.get_object("button_second"), + button_no_look: "Don't look", + button_look: "Look", + button_camera: "Camera", + button_flashlight: "Flashlight", + button_console: "Console", }; -Object.entries(buttons).forEach(([name, button]) => - connectToggleButton(button, name), -); +for (const [id, name] of Object.entries(buttons)) { + const button = workbench.builder.get_object(id); + button.connect("notify::active", () => { + console.log(`${name} ${button.active ? "On" : "Off"}`); + }); +}