From b49634523d3dea418f5e607cbd4933810a5b8db8 Mon Sep 17 00:00:00 2001 From: AkshayWarrier Date: Sat, 12 Aug 2023 02:35:13 +0530 Subject: [PATCH 1/2] library: Add Network Monitor demo --- src/Library/demos/Network Monitor/main.blp | 173 ++++++++++++++++++++ src/Library/demos/Network Monitor/main.css | 3 + src/Library/demos/Network Monitor/main.js | 17 ++ src/Library/demos/Network Monitor/main.json | 6 + 4 files changed, 199 insertions(+) create mode 100644 src/Library/demos/Network Monitor/main.blp create mode 100644 src/Library/demos/Network Monitor/main.css create mode 100644 src/Library/demos/Network Monitor/main.js create mode 100644 src/Library/demos/Network Monitor/main.json diff --git a/src/Library/demos/Network Monitor/main.blp b/src/Library/demos/Network Monitor/main.blp new file mode 100644 index 000000000..ced1896cf --- /dev/null +++ b/src/Library/demos/Network Monitor/main.blp @@ -0,0 +1,173 @@ +using Gtk 4.0; +using Adw 1; + +Box { + orientation: vertical; + + Adw.Banner banner { + button-label: _("Resume"); + title: _("Metered Network — syncing paused"); + use-markup: true; + revealed: false; + } + + Adw.StatusPage { + title: _("Network Monitor"); + description: _("An API to monitor network connectivity"); + vexpand: true; + + Box { + spacing: 54; + orientation: vertical; + halign: center; + + Box { + homogeneous: true; + + Box { + spacing: 6; + orientation: vertical; + + Label { + halign: start; + label: _("Network Metered"); + styles ["title-4"] + } + + Label { + halign: start; + label: _("Check if your network is metered"); + styles ["dim-label"] + } + } + + MenuButton { + halign: end; + valign: center; + icon-name: "lightbulb-symbolic"; + + popover: Popover { + Box steps { + margin-top: 6; + margin-bottom: 6; + margin-start: 6; + margin-end: 6; + orientation: vertical; + spacing: 12; + + Label { + halign: start; + label: _("To mark your network as metered"); + } + + Label { + halign: start; + label: _("1. Go to Settings > Wi-Fi"); + } + + Label { + halign: start; + label: _("2. Click on the gear next to your network's name"); + } + + Label { + halign: start; + label: _("3. Check off \"Metered connection: has data limits or can incur charges\""); + } + + Label { + halign: start; + label: _("4. Apply the changes and reconnect to the network"); + } + } + }; + styles ["flat"] + } + } + + Box { + spacing: 24; + orientation: vertical; + halign: center; + + Box { + homogeneous: true; + + Box { + spacing: 6; + orientation: vertical; + + Label { + halign: start; + label: _("Network Connectivity"); + styles ["title-4"] + } + + Label { + halign: start; + label: _("Check your network connectivity status"); + styles ["dim-label"] + } + } + + MenuButton { + valign: center; + halign: end; + icon-name: "lightbulb-symbolic"; + popover: Popover { + Box { + margin-top: 6; + margin-bottom: 6; + margin-start: 6; + margin-end:6; + + Label { + label: _("You can try turning your network off/on"); + } + } + }; + + styles ["flat"] + } + } + + + Box { + orientation: vertical; + spacing: 12; + + LevelBar level_bar{ + mode: discrete; + min-value: 0; + max-value: 4; + } + + Box { + homogeneous: true; + + Label { + label: _("Local"); + } + + Label { + label: _("Limited"); + } + + Label { + label: _("Portal"); + } + + Label { + label: _("Full"); + } + } + } + } + + LinkButton { + label: "API Reference"; + uri: "https://docs.gtk.org/gio/iface.NetworkMonitor.html"; + } + } + } +} diff --git a/src/Library/demos/Network Monitor/main.css b/src/Library/demos/Network Monitor/main.css new file mode 100644 index 000000000..c142ce0bc --- /dev/null +++ b/src/Library/demos/Network Monitor/main.css @@ -0,0 +1,3 @@ +levelbar block.full { + background-color: @blue_3; +} diff --git a/src/Library/demos/Network Monitor/main.js b/src/Library/demos/Network Monitor/main.js new file mode 100644 index 000000000..92c67114c --- /dev/null +++ b/src/Library/demos/Network Monitor/main.js @@ -0,0 +1,17 @@ +import Gio from "gi://Gio"; + +const banner = workbench.builder.get_object("banner"); +const network_monitor = Gio.NetworkMonitor.get_default(); +const scale = workbench.builder.get_object("scale"); +const level_bar = workbench.builder.get_object("level_bar"); + +level_bar.value = network_monitor.connectivity; + +network_monitor.connect("network-changed", () => { + banner.revealed = network_monitor.network_metered; + level_bar.value = network_monitor.connectivity; +}); + +banner.connect("button-clicked", () => { + banner.revealed = false; +}); diff --git a/src/Library/demos/Network Monitor/main.json b/src/Library/demos/Network Monitor/main.json new file mode 100644 index 000000000..ff5a7e616 --- /dev/null +++ b/src/Library/demos/Network Monitor/main.json @@ -0,0 +1,6 @@ +{ + "category": "platform", + "description": "An API to monitor network connectivity", + "panels": ["code", "preview"], + "autorun": true +} From 98631c1107a5f9ab2a55e8c9cf4d880fb9fe0c1a Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Sun, 13 Aug 2023 16:12:30 +0200 Subject: [PATCH 2/2] improvements --- src/Library/demos/Network Monitor/main.blp | 2 +- src/Library/demos/Network Monitor/main.js | 10 +++++++--- src/Library/demos/Network Monitor/main.json | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Library/demos/Network Monitor/main.blp b/src/Library/demos/Network Monitor/main.blp index ced1896cf..6f4e426a4 100644 --- a/src/Library/demos/Network Monitor/main.blp +++ b/src/Library/demos/Network Monitor/main.blp @@ -13,7 +13,7 @@ Box { Adw.StatusPage { title: _("Network Monitor"); - description: _("An API to monitor network connectivity"); + description: _("Monitor network status"); vexpand: true; Box { diff --git a/src/Library/demos/Network Monitor/main.js b/src/Library/demos/Network Monitor/main.js index 92c67114c..5bbd28e69 100644 --- a/src/Library/demos/Network Monitor/main.js +++ b/src/Library/demos/Network Monitor/main.js @@ -5,13 +5,17 @@ const network_monitor = Gio.NetworkMonitor.get_default(); const scale = workbench.builder.get_object("scale"); const level_bar = workbench.builder.get_object("level_bar"); -level_bar.value = network_monitor.connectivity; - -network_monitor.connect("network-changed", () => { +function setNetworkStatus() { banner.revealed = network_monitor.network_metered; level_bar.value = network_monitor.connectivity; +} + +setNetworkStatus(); +network_monitor.connect("network-changed", () => { + setNetworkStatus(); }); banner.connect("button-clicked", () => { banner.revealed = false; }); + diff --git a/src/Library/demos/Network Monitor/main.json b/src/Library/demos/Network Monitor/main.json index ff5a7e616..74dd2fe9b 100644 --- a/src/Library/demos/Network Monitor/main.json +++ b/src/Library/demos/Network Monitor/main.json @@ -1,6 +1,6 @@ { "category": "platform", - "description": "An API to monitor network connectivity", + "description": "Monitor network status", "panels": ["code", "preview"], "autorun": true }