Implemented Wallpaper Selector and Matugen's Wallpaper based auto-theming. (#73)
* Implement matugen - WIP * Added matugen * Add types and cleanup code * Matugen implementation updates and added more options such as scheme and contrast. * Code cleanup and matugen settings renamed for clarity. * Makon maroon a primary matugen color. * Updates to handle variations of matugen colors * Finalizing matugen and wrapping up variations. * Minor styling updates of the settings dialog. * Do a swww dependency check. * Dependency logic update * Switch shouldn't double trigger notifications now when checking dependency. * Logic was inverted * Add matugen to dependency checker. * Fixed dependency checking conditional * Update dependency list in readme and check for matugen before doing matugen operations * Styling fixes * OSD Fix * Remove unused code from wallpaper service. * Color fixes for matugen. * Nix updates for new dependencies * Change default wallpaper to empty. * Added custom notification service for startup, cleaned up code and updated readme.
This commit is contained in:
@@ -83,6 +83,7 @@ export default () => RegularWindow({
|
||||
win.set_default_size(200, 300)
|
||||
},
|
||||
child: Widget.Box({
|
||||
class_name: "settings-dialog-box",
|
||||
vertical: true,
|
||||
children: [
|
||||
Header(),
|
||||
|
||||
@@ -11,7 +11,7 @@ export const BarGeneral = () => {
|
||||
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.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number', increment: 100, min: 100, max: 900 }),
|
||||
Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
|
||||
|
||||
Header('On Screen Display'),
|
||||
|
||||
@@ -14,7 +14,7 @@ export const BarTheme = () => {
|
||||
Header('General'),
|
||||
Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
|
||||
Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean' }),
|
||||
Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean', disabledBinding: options.theme.matugen }),
|
||||
Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.buttons.text, title: 'Button Text', type: 'color' }),
|
||||
|
||||
@@ -11,8 +11,10 @@ import { NotificationsMenuTheme } from "./menus/notifications";
|
||||
import { SystrayMenuTheme } from "./menus/systray";
|
||||
import { VolumeMenuTheme } from "./menus/volume";
|
||||
import { OsdTheme } from "./osd/index";
|
||||
import { Matugen } from "./menus/matugen";
|
||||
|
||||
type Page = "General Settings"
|
||||
| "Matugen Settings"
|
||||
| "Bar"
|
||||
| "Notifications"
|
||||
| "OSD"
|
||||
@@ -30,6 +32,7 @@ const CurrentPage = Variable<Page>("General Settings");
|
||||
|
||||
const pagerMap: Page[] = [
|
||||
"General Settings",
|
||||
"Matugen Settings",
|
||||
"Bar",
|
||||
"Notifications",
|
||||
"OSD",
|
||||
@@ -75,6 +78,7 @@ export const ThemesMenu = () => {
|
||||
class_name: "themes-menu-stack",
|
||||
children: {
|
||||
"General Settings": MenuTheme(),
|
||||
"Matugen Settings": Matugen(),
|
||||
"Bar": BarTheme(),
|
||||
"Notifications": NotificationsTheme(),
|
||||
"OSD": OsdTheme(),
|
||||
|
||||
@@ -13,7 +13,8 @@ export const MenuTheme = () => {
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('General'),
|
||||
Option({ opt: options.theme.bar.menus.monochrome, title: 'Use Global Colors', type: 'boolean' }),
|
||||
Option({ opt: options.theme.bar.menus.monochrome, title: 'Use Global Colors', type: 'boolean', disabledBinding: options.theme.matugen }),
|
||||
Option({ opt: options.wallpaper.image, title: 'Wallpaper', subtitle: options.wallpaper.image.bind("value"), type: 'wallpaper' }),
|
||||
Option({ opt: options.theme.bar.menus.background, title: 'Background Color', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.cards, title: 'Cards', type: 'color' }),
|
||||
Option({ opt: options.theme.bar.menus.card_radius, title: 'Card Radius', type: 'string' }),
|
||||
|
||||
53
widget/settings/pages/theme/menus/matugen.ts
Normal file
53
widget/settings/pages/theme/menus/matugen.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Option } from "widget/settings/shared/Option";
|
||||
import { Header } from "widget/settings/shared/Header";
|
||||
|
||||
import options from "options";
|
||||
|
||||
export const Matugen = () => {
|
||||
return Widget.Scrollable({
|
||||
vscroll: "automatic",
|
||||
hscroll: "automatic",
|
||||
class_name: "menu-theme-page paged-container",
|
||||
vexpand: true,
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
Header('Matugen Settings'),
|
||||
Option({ opt: options.theme.matugen, title: 'Enable Matugen', subtitle: 'WARNING: THIS WILL REPLACE YOUR CURRENT COLOR SCHEME!!!', type: 'boolean', dependencies: ["matugen", "swww"] }),
|
||||
Option({ opt: options.theme.matugen_settings.mode, title: 'Matugen Theme', type: 'enum', enums: ["light", "dark"] }),
|
||||
Option({
|
||||
opt: options.theme.matugen_settings.scheme_type,
|
||||
title: 'Matugen Scheme',
|
||||
type: 'enum',
|
||||
enums: [
|
||||
"content",
|
||||
"expressive",
|
||||
"fidelity",
|
||||
"fruit-salad",
|
||||
"monochrome",
|
||||
"neutral",
|
||||
"rainbow",
|
||||
"tonal-spot"
|
||||
]
|
||||
}),
|
||||
Option({
|
||||
opt: options.theme.matugen_settings.variation,
|
||||
title: 'Matugen Variation',
|
||||
type: 'enum',
|
||||
enums: [
|
||||
"standard_1",
|
||||
"standard_2",
|
||||
"standard_3",
|
||||
"monochrome_1",
|
||||
"monochrome_2",
|
||||
"monochrome_3",
|
||||
"vivid_1",
|
||||
"vivid_2",
|
||||
"vivid_3",
|
||||
]
|
||||
}),
|
||||
Option({ opt: options.theme.matugen_settings.contrast, title: 'Contrast', subtitle: 'Range: -1 to 1 (Default: 0)', type: 'float' }),
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -3,6 +3,8 @@ import Gdk from "gi://Gdk"
|
||||
import icons from "lib/icons"
|
||||
import { RowProps } from "lib/types/options"
|
||||
import { Variable } from "types/variable";
|
||||
import Wallpaper from "services/Wallpaper";
|
||||
import { dependencies as checkDependencies } from "lib/utils";
|
||||
|
||||
const EnumSetter = (opt: Opt<string>, values: string[]) => {
|
||||
const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
|
||||
@@ -33,7 +35,9 @@ export const Inputter = <T>({
|
||||
enums,
|
||||
max = 1000000,
|
||||
min = 0,
|
||||
increment = 1
|
||||
increment = 1,
|
||||
disabledBinding,
|
||||
dependencies,
|
||||
}: RowProps<T>,
|
||||
className: string,
|
||||
isUnsaved: Variable<boolean>
|
||||
@@ -130,15 +134,35 @@ export const Inputter = <T>({
|
||||
]
|
||||
|
||||
case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
|
||||
case "boolean": return self.child = Widget.Switch()
|
||||
.on("notify::active", self => opt.value = self.active as T)
|
||||
.hook(opt, self => self.active = opt.value as boolean)
|
||||
case "boolean": return self.child = Widget.Switch({
|
||||
sensitive: disabledBinding !== undefined ? disabledBinding.bind("value").as(disabled => !disabled) : true,
|
||||
})
|
||||
.on("notify::active", self => {
|
||||
if (disabledBinding !== undefined && disabledBinding.value) {
|
||||
return;
|
||||
}
|
||||
if (self.active && dependencies !== undefined && !dependencies.every(d => checkDependencies(d))) {
|
||||
self.active = false;
|
||||
return;
|
||||
}
|
||||
opt.value = self.active as T
|
||||
})
|
||||
.hook(opt, self => {
|
||||
self.active = opt.value as boolean
|
||||
})
|
||||
|
||||
case "img": return self.child = Widget.FileChooserButton({
|
||||
class_name: "image-chooser",
|
||||
on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
|
||||
})
|
||||
|
||||
case "wallpaper": return self.child = Widget.FileChooserButton({
|
||||
on_file_set: ({ uri }) => {
|
||||
opt.value = uri!.replace("file://", "") as T;
|
||||
Wallpaper.set(uri!.replace("file://", ""));
|
||||
},
|
||||
})
|
||||
|
||||
case "font": return self.child = Widget.FontButton({
|
||||
show_size: false,
|
||||
use_size: false,
|
||||
|
||||
@@ -3,12 +3,6 @@ import { Inputter } from "./Inputter";
|
||||
import icons from "lib/icons";
|
||||
import { RowProps } from "lib/types/options";
|
||||
|
||||
type Option = {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
|
||||
}
|
||||
|
||||
export const Option = <T>(props: RowProps<T>, className: string = '') => {
|
||||
const isUnsaved = Variable(false);
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import options from "options";
|
||||
|
||||
const { show_numbered, show_icons } = options.bar.workspaces;
|
||||
const { monochrome: monoBar } = options.theme.bar.buttons;
|
||||
const { monochrome: monoMenu } = options.theme.bar.menus;
|
||||
const { matugen } = options.theme;
|
||||
|
||||
show_numbered.connect("changed", ({ value }) => {
|
||||
if (value === true) {
|
||||
@@ -13,3 +16,10 @@ show_icons.connect("changed", ({ value }) => {
|
||||
show_numbered.value = false;
|
||||
}
|
||||
})
|
||||
|
||||
matugen.connect("changed", ({ value }) => {
|
||||
if (value === true) {
|
||||
monoBar.value = false;
|
||||
monoMenu.value = false;
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user