91 lines
2.4 KiB
JavaScript
91 lines
2.4 KiB
JavaScript
// SPDX-FileCopyrightText: Night Theme Switcher Contributors
|
|
// SPDX-License-Identifier: GPL-3.0-or-later
|
|
|
|
import GObject from "gi://GObject";
|
|
import Gtk from "gi://Gtk";
|
|
|
|
import { gettext as _ } from "resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js";
|
|
|
|
import { AccentColor } from "../enums/AccentColor.js";
|
|
|
|
export class ColorChooser extends Gtk.Widget {
|
|
/** @type {Gtk.ToggleButton[]} */
|
|
#buttons = [];
|
|
|
|
/** @type {AccentColor} */
|
|
#activeColor;
|
|
|
|
static {
|
|
GObject.registerClass(
|
|
{
|
|
GTypeName: "ColorChooser",
|
|
CssName: "color-chooser",
|
|
Properties: {
|
|
color: GObject.ParamSpec.string(
|
|
"active-color",
|
|
"Active color",
|
|
"Active color",
|
|
GObject.ParamFlags.READWRITE,
|
|
null,
|
|
),
|
|
},
|
|
},
|
|
this,
|
|
);
|
|
}
|
|
|
|
constructor({ ...params } = {}) {
|
|
super({ layoutManager: new Gtk.BoxLayout({ spacing: 6 }), ...params });
|
|
|
|
const colors = [
|
|
{ accentColor: AccentColor.BLUE, name: _("Blue") },
|
|
{ accentColor: AccentColor.TEAL, name: _("Teal") },
|
|
{ accentColor: AccentColor.GREEN, name: _("Green") },
|
|
{ accentColor: AccentColor.YELLOW, name: _("Yellow") },
|
|
{ accentColor: AccentColor.ORANGE, name: _("Orange") },
|
|
{ accentColor: AccentColor.RED, name: _("Red") },
|
|
{ accentColor: AccentColor.PINK, name: _("Pink") },
|
|
{ accentColor: AccentColor.PURPLE, name: _("Purple") },
|
|
{ accentColor: AccentColor.SLATE, name: _("Slate") },
|
|
];
|
|
|
|
let toggleGroup;
|
|
for (const color of colors) {
|
|
const button = new Gtk.ToggleButton({
|
|
tooltipText: color.name,
|
|
cssClasses: ["circular", color.accentColor],
|
|
active: this.activeColor === color.accentColor,
|
|
});
|
|
|
|
if (!toggleGroup) toggleGroup = button;
|
|
else button.group = toggleGroup;
|
|
|
|
button.connect("toggled", () => {
|
|
if (!button.active) return;
|
|
this.activeColor = color.accentColor;
|
|
});
|
|
|
|
this.#buttons.push(button);
|
|
|
|
button.set_parent(this);
|
|
}
|
|
}
|
|
|
|
get activeColor() {
|
|
return this.#activeColor;
|
|
}
|
|
|
|
set activeColor(color) {
|
|
if (!color || color === this.#activeColor || !Object.values(AccentColor).includes(color)) return;
|
|
this.#activeColor = color;
|
|
this.notify("active-color");
|
|
this.#updateButtons();
|
|
}
|
|
|
|
#updateButtons() {
|
|
this.#buttons.forEach((button) => {
|
|
button.active = button.cssClasses.includes(this.activeColor);
|
|
});
|
|
}
|
|
}
|