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.

modules/osd/label/index.ts

@@ -0,0 +1,30 @@
+import { OSDOrientation } from "lib/types/options";
+import brightness from "services/Brightness"
+const audio = await Service.import("audio")
+
+export const OSDLabel = (ort: OSDOrientation) => {
+    return Widget.Box({
+        class_name: "osd-label-container",
+        hexpand: true,
+        vexpand: true,
+        child: Widget.Label({
+            class_name: "osd-label",
+            hexpand: true,
+            vexpand: true,
+            hpack: "center",
+            vpack: "center",
+            setup: self => {
+                self.hook(brightness, () => {
+                    self.label = `${Math.floor(brightness.screen * 100)}`;
+                }, "notify::screen")
+                self.hook(brightness, () => {
+                    self.label = `${Math.floor(brightness.kbd * 100)}`;
+                }, "notify::kbd")
+                self.hook(audio, () => {
+                    self.toggleClassName("overflow", audio.speaker.volume > 1)
+                    self.label = `${Math.floor(audio.speaker.volume * 100)}`;
+                })
+            }
+        })
+    });
+}