LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/menus/bluetooth/devices/index.tsx
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>
);
};

28
src/components/menus/network/wifi/WirelessAPs/index.tsx
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();

4
src/components/settings/pages/theme/menus/bluetooth.tsx
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" />

5
src/components/settings/pages/theme/menus/index.tsx
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" />

4
src/components/settings/pages/theme/menus/network.tsx
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" />

10
src/options.ts
View File

@@ -468,6 +468,10 @@ const options = mkOptions(CONFIG, {
slider_radius: opt('0.3rem'),
progress_radius: opt('0.3rem'),
},
scroller: {
radius: opt('0.7em'),
width: opt('0.25em'),
},
dropdownmenu: {
background: opt(colors.crust),
text: opt(colors.text),
@@ -562,6 +566,9 @@ const options = mkOptions(CONFIG, {
label: {
color: opt(colors.mauve),
},
scroller: {
color: opt(colors.mauve),
},
text: opt(colors.text),
status: {
color: opt(colors.overlay0),
@@ -598,6 +605,9 @@ const options = mkOptions(CONFIG, {
label: {
color: opt(colors.sky),
},
scroller: {
color: opt(colors.sky),
},
text: opt(colors.text),
status: opt(colors.overlay0),
switch_divider: opt(colors.surface1),

12
src/scss/style/menus/bluetooth.scss
View File

@@ -194,4 +194,16 @@
.connection-status.txt-icon {
margin-left: 0.2em;
}
.bluetooth-controls {
margin-right: 0.5em;
}
.menu-scroller.bluetooth {
min-height: 18em;
slider {
background: $bar-menus-menu-bluetooth-scroller-color;
}
}
}

11
src/scss/style/menus/menu.scss
View File

@@ -254,3 +254,14 @@
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.menu-scroller {
margin-right: 0em;
min-width: 0.35em;
slider {
min-width: $bar-menus-scroller-width;
border-radius: $bar-menus-scroller-radius;
background: $bar-menus-text;
}
}

12
src/scss/style/menus/network.scss
View File

@@ -181,4 +181,16 @@
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-network-switch-enabled);
}
}
.menu-scroller.wap {
min-height: 16em;
slider {
background: $bar-menus-menu-network-scroller-color;
}
}
.network-element-controls-container {
margin-right: 0.7em;
}
}