Added a scrollbar to the network and bluetooth menu. (#593)

* Added a scrollbar to the network and bluetooth menu.

* Update themes

* Adjust height of network menu scroller.
This commit is contained in:
Jas Singh
2024-12-22 02:19:51 -08:00
committed by GitHub
parent 3e2f641237
commit dec781071a
52 changed files with 2824 additions and 2668 deletions

View File

@@ -33,9 +33,11 @@ export const BluetoothDevices = (): JSX.Element => {
deviceListBinding.drop();
}}
>
<box className={'menu-content'} vertical>
{deviceListBinding()}
</box>
<scrollable className={'menu-scroller bluetooth'}>
<box className={'menu-content'} vertical>
{deviceListBinding()}
</box>
</scrollable>
</box>
);
};

View File

@@ -15,33 +15,35 @@ export const WirelessAPs = (): JSX.Element => {
if (filteredWAPs.length <= 0 && staging.get() === undefined) {
return (
<label
className="waps-not-found dim"
className={'waps-not-found dim'}
expand
halign={Gtk.Align.CENTER}
valign={Gtk.Align.CENTER}
label="No Wi-Fi Networks Found"
label={'No Wi-Fi Networks Found'}
/>
);
}
return (
<box className="available-waps-list" vertical>
{filteredWAPs.map((ap: AstalNetwork.AccessPoint) => {
return (
<box className="network-element-item">
<AccessPoint connecting={connecting} accessPoint={ap} />
<Controls connecting={connecting} accessPoint={ap} />
</box>
);
})}
</box>
<scrollable className={'menu-scroller wap'}>
<box className={'available-waps-list'} vertical>
{filteredWAPs.map((ap: AstalNetwork.AccessPoint) => {
return (
<box className={'network-element-item'}>
<AccessPoint connecting={connecting} accessPoint={ap} />
<Controls connecting={connecting} accessPoint={ap} />
</box>
);
})}
</box>
</scrollable>
);
},
);
return (
<box
className="available-waps"
className={'available-waps'}
vertical
onDestroy={() => {
wapBinding.drop();

View File

@@ -57,6 +57,10 @@ export const BluetoothMenuTheme = (): JSX.Element => {
<Option opt={options.theme.bar.menus.menu.bluetooth.iconbutton.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.iconbutton.passive} title="Passive" type="color" />
{/* Scroller Section */}
<Header title="Scroller" />
<Option opt={options.theme.bar.menus.menu.bluetooth.scroller.color} title="Color" type="color" />
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.enabled} title="Enabled" type="color" />

View File

@@ -139,6 +139,11 @@ export const MenuTheme = (): JSX.Element => {
/>
<Option opt={options.theme.bar.menus.slider.puck} title="Puck" type="color" />
{/* Scroller Section */}
<Header title="Scroller" />
<Option opt={options.theme.bar.menus.scroller.radius} title="Radius" type="string" />
<Option opt={options.theme.bar.menus.scroller.width} title="Width" type="string" />
{/* Dropdown Menu Section */}
<Header title="Dropdown Menu" />
<Option opt={options.theme.bar.menus.dropdownmenu.background} title="Background" type="color" />

View File

@@ -58,6 +58,10 @@ export const NetworkMenuTheme = (): JSX.Element => {
<Option opt={options.theme.bar.menus.menu.network.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.network.icons.passive} title="Passive" type="color" />
{/* Scroller Section */}
<Header title="Scroller" />
<Option opt={options.theme.bar.menus.menu.network.scroller.color} title="Color" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.menu.network.iconbuttons.active} title="Active" type="color" />