Added scaling to individual elements (all menus and the bar). (#154)

* Added scaling to individual elements (all menus and the bar).

* Make all dialog pages scrollable

* Add battery menu to settings

* update battery menu scaling

* Fix typo

* Add confirmation dialog scaling

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

@@ -16,6 +16,7 @@ export const BarSettings = () => {
 
                 Header('Spacing'),
                 Option({ opt: options.theme.bar.outer_spacing, title: 'Outer Spacing', subtitle: 'Spacing on the outer left and right edges of the bar.', type: 'string' }),
+                Option({ opt: options.theme.bar.buttons.y_margins, title: 'Vertical Margins', subtitle: 'Spacing above/below the buttons in the bar.', type: 'string' }),
                 Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', subtitle: 'Spacing between the buttons in the bar.', type: 'string' }),
                 Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),

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

@@ -4,25 +4,42 @@ import { Header } from "widget/settings/shared/Header";
 import options from "options";
 
 export const BarGeneral = () => {
-    return Widget.Box({
+    return Widget.Scrollable({
         class_name: "bar-theme-page paged-container",
-        vertical: true,
-        children: [
-            Header('General Settings'),
-            Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }),
-            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', increment: 100, min: 100, max: 900 }),
-            Option({
-                opt: options.dummy,
-                title: 'Config',
-                subtitle: 'WARNING: Importing a configuration will replace your current configuration settings.',
-                type: 'config_import',
-                exportData: {
-                    filePath: OPTIONS,
-                    themeOnly: false
-                }
-            }),
-            Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
-        ]
+        vscroll: "automatic",
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('General Settings'),
+                Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }),
+                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', increment: 100, min: 100, max: 900 }),
+                Option({
+                    opt: options.dummy,
+                    title: 'Config',
+                    subtitle: 'WARNING: Importing a configuration will replace your current configuration settings.',
+                    type: 'config_import',
+                    exportData: {
+                        filePath: OPTIONS,
+                        themeOnly: false
+                    }
+                }),
+                Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
+
+                Header('Scaling'),
+                Option({ opt: options.theme.bar.scaling, title: 'Bar', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.notification.scaling, title: 'Notifications', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.osd.scaling, title: 'OSD', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.scaling, title: 'Dashboard Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.dashboard.confirmation_scaling, title: 'Confirmation Dialog', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.media.scaling, title: 'Media Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.volume.scaling, title: 'Volume Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.network.scaling, title: 'Network Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.scaling, title: 'Bluetooth Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.battery.scaling, title: 'Battery Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.clock.scaling, title: 'Clock Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+                Option({ opt: options.theme.bar.menus.menu.notifications.scaling, title: 'Notifications Menu', type: 'number', min: 1, max: 100, increment: 5 }),
+            ]
+        })
     })
 }

widget/settings/pages/config/menus/clock.ts

@@ -4,18 +4,21 @@ import { Header } from "widget/settings/shared/Header";
 import options from "options";
 
 export const ClockMenuSettings = () => {
-    return Widget.Box({
-        class_name: "bar-theme-page paged-container",
-        vertical: true,
-        children: [
-            Header('Time'),
-            Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        child: Widget.Box({
+            class_name: "bar-theme-page paged-container",
+            vertical: true,
+            children: [
+                Header('Time'),
+                Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
 
-            Header('Weather'),
-            Option({ opt: options.menus.clock.weather.location, title: 'Location', subtitle: 'Zip Code, Postal Code, City, etc.', type: 'string' }),
-            Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }),
-            Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }),
-            Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }),
-        ]
+                Header('Weather'),
+                Option({ opt: options.menus.clock.weather.location, title: 'Location', subtitle: 'Zip Code, Postal Code, City, etc.', type: 'string' }),
+                Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }),
+                Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }),
+                Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }),
+            ]
+        })
     })
 }

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

@@ -4,16 +4,19 @@ import { Header } from "widget/settings/shared/Header";
 import options from "options";
 
 export const NotificationSettings = () => {
-    return Widget.Box({
-        class_name: "bar-theme-page paged-container",
-        vertical: true,
-        children: [
-            Header('Notification Settings'),
-            Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }),
-            Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }),
-            Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }),
-            Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }),
-            Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }),
-        ]
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        child: Widget.Box({
+            class_name: "bar-theme-page paged-container",
+            vertical: true,
+            children: [
+                Header('Notification Settings'),
+                Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }),
+                Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }),
+                Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }),
+                Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }),
+                Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }),
+            ]
+        })
     })
 }

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

@@ -4,18 +4,21 @@ import { Header } from "widget/settings/shared/Header";
 import options from "options";
 
 export const OSDSettings = () => {
-    return Widget.Box({
-        class_name: "bar-theme-page paged-container",
-        vertical: true,
-        children: [
-            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' }),
-        ]
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        child: Widget.Box({
+            class_name: "bar-theme-page paged-container",
+            vertical: true,
+            children: [
+                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' }),
+            ]
+        })
     })
 }