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/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' }),
+            ]
+        })
+    })
+}