Scroll problem in Quick settings

[yashlakhtariya]

There is no option to scroll in Wifi Selection Menu of Quick settings, which make it unreachable for an option at last. If possible please add scrollbar to it

[michaelhaaf]

I was running into the same problem; I've implemented a reasonable solution, in two parts.

1. remove duplicate ssids and ensure network selector is on top
2. wrap the access-point Box widget in a Scrollable widget

See: main...michaelhaaf:ags-config:network-scroller-feature

Anyone is welcome to use/extend/modify this of course.

It could be improved on, the list is only one row tall which means you can only see 2 access points at a time. For anyone who wants to tweak that, I was running into a type error when I tried to set the min-height using the Scrollable.style property. (Can't use string, need Gtk.StyleObject or something, I forget exactly).

[nine7nine]

@michaelhaaf - nice I may take a look at adapting your patches for myself...

I bumped into this same issue, but handled it differently:

nine7nine/n7n-AGS-Shell@8fe0aaf

(just the /ags/widget/quicksettings/widgets/Header.ts part is relevant)

Instead of wrapping it in a Scrollable Widget;

• i sent a max amount in AP list to show
• trancated SSIDs in view
• Sorted them by strength

there are a ton of networks near me (apartment building), which is why i simply limited what to show (down to 25). the wifi AP list / QS widget never covers more than 60% vertically on my screen. Lower res displays would probably benefit from a scrollable solution more though.

[yashlakhtariya]

@michaelhaaf Your changes are nice but only 1 network option visible at a time, so I modified the code a little bit

Here is the Network.ts code which solves the problem, where I have set minimum size request of 300px height :

import { Menu, ArrowToggleButton } from "../ToggleButton"
import icons from "lib/icons.js"
import { dependencies, sh } from "lib/utils"
import options from "options"
const { wifi } = await Service.import("network")

export const NetworkToggle = () => ArrowToggleButton({
    name: "network",
    icon: wifi.bind("icon_name"),
    label: wifi.bind("ssid").as(ssid => ssid || "Not Connected"),
    connection: [wifi, () => wifi.enabled],
    deactivate: () => wifi.enabled = false,
    activate: () => {
        wifi.enabled = true
        wifi.scan()
    },
})

export const WifiSelection = () => Menu({
    name: "network",
    icon: wifi.bind("icon_name"),
    title: "Wifi Selection",
    content: [
        Widget.Button({
            on_clicked: () => sh(options.quicksettings.networkSettings.value),
            child: Widget.Box({
                children: [
                    Widget.Icon(icons.ui.settings),
                    Widget.Label("Network"),
                ],
            }),
        }),
        Widget.Separator(),
        Widget.Scrollable({
            hscroll: "never",
            vscroll: "automatic",
            setup: self => self.set_size_request(-1, 300), // set minimum width and height
            child: Widget.Box({
                vertical: true,
                setup: self => self.hook(wifi, () => self.children =
                    wifi.access_points
                        .filter((ap, index, self) =>
                            index === self.findIndex(elem => (elem.ssid === ap.ssid)))
                        .map(ap => Widget.Button({
                            on_clicked: () => {
                                if (dependencies("nmcli"))
                                    Utils.execAsync(`nmcli device wifi connect ${ap.bssid}`)
                            },
                            child: Widget.Box({
                                children: [
                                    Widget.Icon(ap.iconName),
                                    Widget.Label(ap.ssid || ""),
                                    Widget.Icon({
                                        icon: icons.ui.tick,
                                        hexpand: true,
                                        hpack: "end",
                                        setup: self => Utils.idle(() => {
                                            if (!self.is_destroyed)
                                                self.visible = ap.active
                                        }),
                                    }),
                                ],
                            }),
                        })),
                ),
            }),
        }),
    ],
})