Added on-screen-displays to indicate volume and brightness changes. (#34)

* Resolves #13 - Added on-screen-displays to indicate volume and brightness changes.

* <3 Aylur

* Update brightness logic for osd

* Update brightness labels

* Fixed typos in the settings menu component.

* Added options to toggle OSD and change its orientation.

widget/settings/pages/config/general/index.ts

@@ -13,6 +13,15 @@ export const BarGeneral = () => {
             Option({ opt: options.theme.font.size, title: 'Font Size', type: 'string' }),
             Option({ opt: options.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number' }),
             Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
+
+            Header('On Screen Display'),
+            Option({ opt: options.theme.osd.enable, title: 'Enabled', type: 'boolean' }),
+            Option({ opt: options.theme.osd.orientation, title: 'Orientation', type: 'enum', enums: ["horizontal", "vertical"] }),
+            Option({ opt: options.theme.osd.location, title: 'Position', subtitle: 'Position of the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }),
+            Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }),
+            Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
+            Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
+            Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
         ]
     })
 }

widget/settings/pages/theme/index.ts

@@ -10,10 +10,12 @@ import { NetworkMenuTheme } from "./menus/network";
 import { NotificationsMenuTheme } from "./menus/notifications";
 import { SystrayMenuTheme } from "./menus/systray";
 import { VolumeMenuTheme } from "./menus/volume";
+import { OsdTheme } from "./osd/index";
 
 type Page = "General Settings"
     | "Bar"
     | "Notifications"
+    | "OSD"
     | "Battery Menu"
     | "Bluetooth Menu"
     | "Clock Menu"
@@ -30,6 +32,7 @@ const pagerMap: Page[] = [
     "General Settings",
     "Bar",
     "Notifications",
+    "OSD",
     "Battery Menu",
     "Bluetooth Menu",
     "Clock Menu",
@@ -74,6 +77,7 @@ export const ThemesMenu = () => {
                         "General Settings": MenuTheme(),
                         "Bar": BarTheme(),
                         "Notifications": NotificationsTheme(),
+                        "OSD": OsdTheme(),
                         "Battery Menu": BatteryMenuTheme(),
                         "Bluetooth Menu": BluetoothMenuTheme(),
                         "Clock Menu": ClockMenuTheme(),

widget/settings/pages/theme/osd/index.ts

@@ -0,0 +1,26 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const OsdTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "osd-theme-page paged-container",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('On Screen Display Settings'),
+                Option({ opt: options.theme.osd.bar_color, title: 'Bar', type: 'color' }),
+                Option({ opt: options.theme.osd.bar_overflow_color, title: 'Overflow', subtitle: 'Overflow color is for when the volume goes over a 100', type: 'color' }),
+                Option({ opt: options.theme.osd.bar_empty_color, title: 'Bar Background', type: 'color' }),
+                Option({ opt: options.theme.osd.bar_container, title: 'Bar Container Background', type: 'color' }),
+                Option({ opt: options.theme.osd.icon, title: 'Icon Background', type: 'color' }),
+                Option({ opt: options.theme.osd.icon_container, title: 'Icon Container', type: 'color' }),
+                Option({ opt: options.theme.osd.label, title: 'Value', type: 'color' }),
+            ]
+        })
+    })
+}