From b286a8f55e9a01aead2b12ba0605ef2aa1ccc14f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Wed, 8 Feb 2023 16:03:24 +0100
Subject: [PATCH] status/network: Tweak connection items

Always use the plain name as label, and indicate the "(dis)connect"
action in a subtitle.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2631>
---
 .../widgets/_quick-settings.scss              |  2 ++
 js/ui/status/network.js                       | 23 +++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 52fcf6bc4..58f3db34b 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -122,3 +122,5 @@
 .nm-network-item {
   .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
 }
+
+.device-subtitle { color: transparentize($fg_color, 0.5); }
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index d3297a504..13f297477 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -305,11 +305,18 @@ class NMConnectionItem extends NMMenuItem {
         this.add_child(this._icon);
 
         this._label = new St.Label({
+            x_expand: true,
             y_expand: true,
             y_align: Clutter.ActorAlign.CENTER,
         });
         this.add_child(this._label);
-        this.label_actor = this._label;
+
+        this._subtitle = new St.Label({
+            style_class: 'device-subtitle',
+            y_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        this.add_child(this._subtitle);
 
         this.bind_property('icon-name',
             this._icon, 'icon-name',
@@ -350,7 +357,7 @@ class NMConnectionItem extends NMMenuItem {
             ? PopupMenu.Ornament.DOT : PopupMenu.Ornament.NONE);
     }
 
-    _getRegularLabel() {
+    _getAccessibleName() {
         return this.is_active
             // Translators: %s is a device name like "MyPhone"
             ? _('Disconnect %s').format(this.name)
@@ -358,12 +365,20 @@ class NMConnectionItem extends NMMenuItem {
             : _('Connect to %s').format(this.name);
     }
 
+    _getSubtitleLabel() {
+        return this.is_active ? _('Disconnect') : _('Connect');
+    }
+
     _sync() {
+        this._label.text = this.name;
+
         if (this.radioMode) {
-            this._label.text = this.name;
+            this._subtitle.text = null;
+            this.accessible_name = this.name;
             this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
         } else {
-            this._label.text = this._getRegularLabel();
+            this.accessible_name = this._getAccessibleName();
+            this._subtitle.text = this._getSubtitleLabel();
             this.accessible_role = Atk.Role.MENU_ITEM;
         }
         this._updateOrnament();