Added shadows to the Bar, Menus, OSD and Notifications. (#777)

* Added shadows to the Bar, Menus and notifications.

* Add OSD shadows
This commit is contained in:
Jas Singh
2025-02-16 21:41:52 -08:00
committed by GitHub
parent 3698bfe2b3
commit 9b342341fe
13 changed files with 66 additions and 7 deletions

View File

@@ -1,7 +1,7 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
import { Option } from 'src/components/settings/shared/Option';
export const BarSettings = (): JSX.Element => {
return (
@@ -53,6 +53,18 @@ export const BarSettings = (): JSX.Element => {
enums={['none', 'full', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical']}
/>
<Option opt={options.theme.bar.border.width} title="Bar Border Width" type="string" />
<Option
opt={options.theme.bar.shadow}
title="Bar Shadow"
subtitle="Requires that sufficient margins have been set to house the shadow."
type="string"
/>
<Option
opt={options.theme.bar.shadowMargins}
title="Bar Shadow Margins"
subtitle="Margins count mouse events as clicks 'inside' the menu."
type="string"
/>
<Option
opt={options.theme.bar.border_radius}
title="Border Radius"

View File

@@ -65,6 +65,18 @@ export const BarGeneral = (): JSX.Element => {
max={10000}
increment={25}
/>
<Option
opt={options.theme.bar.menus.shadow}
title="Menu Shadow"
subtitle="Requires that sufficient margins have been set to house the shadow."
type="string"
/>
<Option
opt={options.theme.bar.menus.shadowMargins}
title="Menu Shadow Margins"
subtitle="Margins count mouse events as clicks 'inside' the menu."
type="string"
/>
<Header title="Scaling" />
<Option

View File

@@ -22,6 +22,17 @@ export const NotificationSettings = (): JSX.Element => {
enums={['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left']}
/>
<Option opt={options.theme.notification.border_radius} title="Border Radius" type="string" />
<Option
opt={options.theme.notification.shadow}
title="Notification Shadow"
subtitle="Requires that sufficient margins have been set to house the shadow."
type="string"
/>
<Option
opt={options.theme.notification.shadowMargins}
title="Notification Shadow Margins"
type="string"
/>
<Option
opt={options.notifications.monitor}
title="Monitor"

View File

@@ -48,6 +48,13 @@ export const OSDSettings = (): JSX.Element => {
subtitle="Format: top right bottom left"
type="string"
/>
<Option
opt={options.theme.osd.shadow}
title="OSD Shadow"
subtitle="Requires that sufficient margins have been set to house the shadow."
type="string"
/>
<Option opt={options.theme.osd.border.size} title="Border Size" type="string" />
<Option opt={options.theme.osd.radius} title="Radius" subtitle="Radius of the OSD" type="string" />
<Option