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
This commit is contained in:
Jas Singh
GitHub
@@ -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' }),
|
||||
|
||||
@@ -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 }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user