feat: add color presets + fix badge hover effect
- Add global color presets: save/apply/delete sets of {bg, border, text}
colors as reusable presets, shown as mini badges in their own colors.
- Popover: preset badges under preview with + to save, click to apply,
× on hover to delete.
- Popup: dedicated Color Presets section with same functionality,
applying to light subreddit badge colors.
- Storage: colorPresets array added to settings defaults.
- Fix badge hover: change brightness(0.9) to brightness(1.1) so hover
brightens (activates) instead of dimming.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -220,6 +220,63 @@
|
||||
return overrides;
|
||||
}
|
||||
|
||||
function renderPopupPresets(presets) {
|
||||
var list = document.getElementById("presetList");
|
||||
list.innerHTML = "";
|
||||
for (var i = 0; i < presets.length; i++) {
|
||||
(function (index) {
|
||||
var p = presets[index];
|
||||
var badge = document.createElement("span");
|
||||
badge.className = "rt-preset-badge";
|
||||
badge.style.background = p.bg;
|
||||
badge.style.borderColor = p.border;
|
||||
badge.style.color = p.text;
|
||||
badge.textContent = "Aa";
|
||||
badge.title = "Click to apply to light subreddit colors";
|
||||
badge.addEventListener("click", function () {
|
||||
setColorValue(document.getElementById("light.subredditBgColor"), p.bg);
|
||||
setColorValue(document.getElementById("light.subredditBorderColor"), p.border);
|
||||
setColorValue(document.getElementById("light.subredditTextColor"), p.text);
|
||||
closePicker();
|
||||
saveFromControls();
|
||||
});
|
||||
|
||||
var del = document.createElement("span");
|
||||
del.className = "rt-preset-delete";
|
||||
del.textContent = "\u00d7";
|
||||
del.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
deletePopupPreset(index);
|
||||
});
|
||||
badge.appendChild(del);
|
||||
list.appendChild(badge);
|
||||
})(i);
|
||||
}
|
||||
}
|
||||
|
||||
async function addPopupPreset() {
|
||||
var preset = {
|
||||
bg: getColorValue(document.getElementById("light.subredditBgColor")),
|
||||
border: getColorValue(document.getElementById("light.subredditBorderColor")),
|
||||
text: getColorValue(document.getElementById("light.subredditTextColor")),
|
||||
};
|
||||
var settings = await window.RedditTweaks.loadSettings();
|
||||
var presets = settings.colorPresets || [];
|
||||
presets.push(preset);
|
||||
settings.colorPresets = presets;
|
||||
await window.RedditTweaks.saveSettings(settings);
|
||||
renderPopupPresets(presets);
|
||||
}
|
||||
|
||||
async function deletePopupPreset(index) {
|
||||
var settings = await window.RedditTweaks.loadSettings();
|
||||
var presets = settings.colorPresets || [];
|
||||
presets.splice(index, 1);
|
||||
settings.colorPresets = presets;
|
||||
await window.RedditTweaks.saveSettings(settings);
|
||||
renderPopupPresets(presets);
|
||||
}
|
||||
|
||||
async function saveFromControls() {
|
||||
var settings = {
|
||||
enabled: document.getElementById("enabled").checked,
|
||||
@@ -255,6 +312,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
renderPopupPresets(settings.colorPresets || []);
|
||||
document.getElementById("addPreset").addEventListener("click", addPopupPreset);
|
||||
|
||||
document.getElementById("addSubreddit").addEventListener("click", function () {
|
||||
closePicker();
|
||||
addSubredditEntry("", {});
|
||||
|
||||
Reference in New Issue
Block a user