diff --git a/src/extension.ts b/src/extension.ts index c6dd0de..2119b17 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -63,9 +63,6 @@ const SIGNAL_QUALITY_BAR_COLORS: Readonly> = { }; type MenuItemId = - | 'ssid' - | 'generation' - | 'band' | 'bitrate' | 'channelWidth' | 'mcs' @@ -79,12 +76,6 @@ interface MenuItemConfig { } const MENU_STRUCTURE: readonly MenuItemConfig[][] = [ - // Section: Connection - [ - { id: 'ssid', label: 'Network' }, - { id: 'generation', label: 'Generation' }, - { id: 'band', label: 'Band' }, - ], // Section: Performance [ { id: 'bitrate', label: 'Speed' }, @@ -114,6 +105,10 @@ export default class WifiSignalPlusExtension extends Extension { MenuItemId, { item: PopupMenu.PopupBaseMenuItem; label: St.Label; value: St.Label; barFill?: St.Widget } >(); + private headerSsidLabel: St.Label | null = null; + private headerGenerationLabel: St.Label | null = null; + private headerBandLabel: St.Label | null = null; + private headerIcon: St.Icon | null = null; private nearbySeparator: PopupMenu.PopupSeparatorMenuItem | null = null; private nearbyItems: PopupMenu.PopupSubMenuMenuItem[] = []; private currentConnectedBssid: string | undefined; @@ -155,6 +150,10 @@ export default class WifiSignalPlusExtension extends Extension { this.signalGraph = null; this.signalHistory.length = 0; this.menuItems.clear(); + this.headerSsidLabel = null; + this.headerGenerationLabel = null; + this.headerBandLabel = null; + this.headerIcon = null; this.nearbySeparator = null; this.nearbyItems = []; this.currentConnectedBssid = undefined; @@ -201,14 +200,14 @@ export default class WifiSignalPlusExtension extends Extension { return undefined; }); - const sectionHeaders = ['', 'Performance', 'Signal']; + this.addConnectionHeader(menu); - const SIGNAL_SECTION_INDEX = 2; + const sectionHeaders = ['Performance', 'Signal']; + + const SIGNAL_SECTION_INDEX = 1; MENU_STRUCTURE.forEach((section, index) => { - if (sectionHeaders[index]) { - menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem(sectionHeaders[index])); - } + menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem(sectionHeaders[index])); if (index === SIGNAL_SECTION_INDEX) { this.addSignalGraph(menu); @@ -223,6 +222,47 @@ export default class WifiSignalPlusExtension extends Extension { menu.addMenuItem(this.nearbySeparator); } + private addConnectionHeader(menu: PopupMenu.PopupMenu): void { + const item = new PopupMenu.PopupBaseMenuItem({ reactive: false }); + item.add_style_class_name('wifi-connection-header'); + + const leftBox = new St.BoxLayout({ + vertical: true, + x_expand: true, + y_align: Clutter.ActorAlign.CENTER, + }); + + this.headerSsidLabel = new St.Label({ + text: PLACEHOLDER, + style_class: 'wifi-connection-header-ssid', + }); + leftBox.add_child(this.headerSsidLabel); + + this.headerGenerationLabel = new St.Label({ + text: PLACEHOLDER, + style_class: 'wifi-connection-header-generation', + }); + leftBox.add_child(this.headerGenerationLabel); + + this.headerBandLabel = new St.Label({ + text: PLACEHOLDER, + style_class: 'wifi-connection-header-band', + }); + leftBox.add_child(this.headerBandLabel); + + item.add_child(leftBox); + + this.headerIcon = new St.Icon({ + icon_size: 48, + style_class: 'wifi-connection-header-icon', + y_align: Clutter.ActorAlign.CENTER, + visible: false, + }); + item.add_child(this.headerIcon); + + menu.addMenuItem(item); + } + private addMenuItem( menu: PopupMenu.PopupMenu, id: MenuItemId, @@ -359,6 +399,21 @@ export default class WifiSignalPlusExtension extends Extension { } } + private updateHeaderIcon(generation: WifiGeneration): void { + if (!this.headerIcon) return; + + const iconFilename = getGenerationIconFilename(generation); + if (!iconFilename) { + this.headerIcon.visible = false; + return; + } + + const iconPath = GLib.build_filenamev([this.path, 'icons', iconFilename]); + const file = Gio.File.new_for_path(iconPath); + this.headerIcon.gicon = new Gio.FileIcon({ file }); + this.headerIcon.visible = true; + } + private async refresh(): Promise { if (!this.wifiService || !this.label) return; @@ -419,10 +474,16 @@ export default class WifiSignalPlusExtension extends Extension { } private showDisconnectedState(): void { + this.headerSsidLabel?.set_text('Not connected'); + this.headerGenerationLabel?.set_text(''); + this.headerBandLabel?.set_text(''); + if (this.headerIcon) { + this.headerIcon.visible = false; + } + for (const section of MENU_STRUCTURE) { for (const { id } of section) { - const value = id === 'ssid' ? 'Not connected' : PLACEHOLDER; - this.updateMenuItem(id, value, 0); + this.updateMenuItem(id, PLACEHOLDER, 0); } } @@ -431,9 +492,10 @@ export default class WifiSignalPlusExtension extends Extension { } private showConnectedState(info: ConnectedInfo): void { - this.updateMenuItem('ssid', info.ssid); - this.updateMenuItem('generation', getGenerationDescription(info.generation)); - this.updateMenuItem('band', this.formatBand(info)); + this.headerSsidLabel?.set_text(info.ssid); + this.headerGenerationLabel?.set_text(getGenerationDescription(info.generation)); + this.headerBandLabel?.set_text(this.formatBand(info)); + this.updateHeaderIcon(info.generation); this.updateMenuItem( 'bitrate', this.formatBitrate(info), diff --git a/stylesheet.css b/stylesheet.css index 1c133bc..3052430 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -72,6 +72,30 @@ color: rgba(255, 255, 255, 0.7); } +/* Connection header */ +.wifi-connection-header { + padding: 4px 8px; +} + +.wifi-connection-header-ssid { + font-size: 1.2em; + font-weight: bold; +} + +.wifi-connection-header-generation { + font-size: 0.95em; + color: rgba(255, 255, 255, 0.8); +} + +.wifi-connection-header-band { + font-size: 0.9em; + color: rgba(255, 255, 255, 0.6); +} + +.wifi-connection-header-icon { + margin-left: 12px; +} + .wifi-popup-value { font-size: 1em; font-weight: 500;