cottongin/reddit-tweaks-ffe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate tabbed color picker into extension popup

Browse Source 
Replace native color inputs with swatch divs wired to the shared
tabbed picker widget for global and per-subreddit color controls.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-08-26 17:16:00 -04:00
parent d26f133efb
commit 2abb71fbb8
3 changed files with 119 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
popup/popup.css
View File

@@ -82,13 +82,14 @@ fieldset label {
font-size: 12px;
}
fieldset input[type="color"] {
fieldset .rt-color-swatch {
width: 40px;
height: 24px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 1px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
fieldset input[type="text"] {
@@ -201,6 +202,14 @@ fieldset input[type="text"] {
align-items: center;
}
.subreddit-entry-colors .rt-color-swatch {
width: 40px;
height: 24px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
/* --- Color Picker Widget --- */
.rt-color-picker {
margin: 8px 0;

25
popup/popup.html
View File

@@ -28,15 +28,15 @@
<h2>Light Mode Colors</h2>
<fieldset>
<legend>Subreddit Badge</legend>
<label>Background <input type="color" id="light.subredditBgColor"></label>
<label>Border <input type="color" id="light.subredditBorderColor"></label>
<label>Text <input type="color" id="light.subredditTextColor"></label>
<label>Background <div class="rt-color-swatch" id="light.subredditBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="light.subredditBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="light.subredditTextColor"></div></label>
</fieldset>
<fieldset>
<legend>Comments Badge</legend>
<label>Background <input type="color" id="light.commentsBgColor"></label>
<label>Border <input type="color" id="light.commentsBorderColor"></label>
<label>Text <input type="color" id="light.commentsTextColor"></label>
<label>Background <div class="rt-color-swatch" id="light.commentsBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="light.commentsBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="light.commentsTextColor"></div></label>
</fieldset>
<button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
</div>
@@ -45,15 +45,15 @@
<h2>Dark Mode Colors</h2>
<fieldset>
<legend>Subreddit Badge</legend>
<label>Background <input type="color" id="dark.subredditBgColor"></label>
<label>Border <input type="color" id="dark.subredditBorderColor"></label>
<label>Text <input type="color" id="dark.subredditTextColor"></label>
<label>Background <div class="rt-color-swatch" id="dark.subredditBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="dark.subredditBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="dark.subredditTextColor"></div></label>
</fieldset>
<fieldset>
<legend>Comments Badge</legend>
<label>Background <input type="color" id="dark.commentsBgColor"></label>
<label>Border <input type="color" id="dark.commentsBorderColor"></label>
<label>Text <input type="color" id="dark.commentsTextColor"></label>
<label>Background <div class="rt-color-swatch" id="dark.commentsBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="dark.commentsBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="dark.commentsTextColor"></div></label>
</fieldset>
<button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
</div>
@@ -70,6 +70,7 @@
</div>
</div>
<script src="../lib/settings.js"></script>
<script src="../content/tweaks/color-picker.js"></script>
<script src="popup.js"></script>
</body>
</html>

141
popup/popup.js
View File

@@ -1,7 +1,10 @@
(function () {
"use strict";
const COLOR_KEYS = [
var picker = null;
var activeSwatchEl = null;
var COLOR_KEYS = [
"light.subredditBgColor",
"light.subredditBorderColor",
"light.subredditTextColor",
@@ -21,13 +24,48 @@
return val;
}
function getColorValue(el) {
return el.dataset.value || "#ffffff";
}
function setColorValue(el, val) {
el.dataset.value = val;
el.style.backgroundColor = val;
}
function openPickerForSwatch(swatchEl) {
if (!picker) {
picker = window.RedditTweaks.colorPicker.create();
}
if (picker.isOpen() && activeSwatchEl === swatchEl) {
closePicker();
return;
}
closePicker();
activeSwatchEl = swatchEl;
var parent = swatchEl.closest("label") || swatchEl.parentNode;
parent.parentNode.insertBefore(picker.el, parent.nextSibling);
picker.open(getColorValue(swatchEl), function (hex) {
setColorValue(swatchEl, hex);
saveFromControls();
});
}
function closePicker() {
if (picker && picker.isOpen()) picker.close();
activeSwatchEl = null;
}
function populateControls(settings) {
document.getElementById("enabled").checked = settings.enabled;
document.getElementById("darkMode").value = settings.darkMode;
COLOR_KEYS.forEach(function (key) {
const el = document.getElementById(key);
if (el) el.value = colorToHex(settings[key]);
var el = document.getElementById(key);
if (el) setColorValue(el, colorToHex(settings[key]));
});
renderSubredditOverrides(settings.subredditColors || {});
@@ -59,6 +97,7 @@
removeBtn.className = "btn-remove";
removeBtn.textContent = "\u00d7";
removeBtn.addEventListener("click", function () {
closePicker();
entry.remove();
saveFromControls();
});
@@ -80,27 +119,27 @@
var lightColors = modeColors && modeColors.light ? modeColors.light : {};
var darkColors = modeColors && modeColors.dark ? modeColors.dark : {};
var bgInput = document.createElement("input");
bgInput.type = "color";
bgInput.value = colorToHex(lightColors.bg);
bgInput.title = "Background";
var bgSwatch = document.createElement("div");
bgSwatch.className = "rt-color-swatch";
setColorValue(bgSwatch, colorToHex(lightColors.bg));
bgSwatch.title = "Background";
var borderInput = document.createElement("input");
borderInput.type = "color";
borderInput.value = colorToHex(lightColors.border);
borderInput.title = "Border";
var borderSwatch = document.createElement("div");
borderSwatch.className = "rt-color-swatch";
setColorValue(borderSwatch, colorToHex(lightColors.border));
borderSwatch.title = "Border";
var textInput = document.createElement("input");
textInput.type = "color";
textInput.value = colorToHex(lightColors.text);
textInput.title = "Text";
var textSwatch = document.createElement("div");
textSwatch.className = "rt-color-swatch";
setColorValue(textSwatch, colorToHex(lightColors.text));
textSwatch.title = "Text";
colorsDiv.appendChild(bgInput);
colorsDiv.appendChild(borderInput);
colorsDiv.appendChild(textInput);
colorsDiv.appendChild(bgSwatch);
colorsDiv.appendChild(borderSwatch);
colorsDiv.appendChild(textSwatch);
entry._colorState = {
light: { bg: bgInput.value, border: borderInput.value, text: textInput.value },
light: { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) },
dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
};
entry._hadOverride = {
@@ -110,32 +149,34 @@
entry._dirtyModes = { light: false, dark: false };
modeSelect.addEventListener("change", function () {
closePicker();
var prev = modeSelect.value === "dark" ? "light" : "dark";
entry._dirtyModes[prev] = true;
entry._colorState[prev] = { bg: bgInput.value, border: borderInput.value, text: textInput.value };
entry._colorState[prev] = { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) };
var next = entry._colorState[modeSelect.value];
bgInput.value = next.bg;
borderInput.value = next.border;
textInput.value = next.text;
setColorValue(bgSwatch, next.bg);
setColorValue(borderSwatch, next.border);
setColorValue(textSwatch, next.text);
});
[nameInput, bgInput, borderInput, textInput].forEach(function (input) {
input.addEventListener("change", function () {
if (input !== nameInput) {
entry._dirtyModes[modeSelect.value] = true;
}
saveFromControls();
[bgSwatch, borderSwatch, textSwatch].forEach(function (swatch) {
swatch.addEventListener("click", function () {
openPickerForSwatch(swatch);
});
});
nameInput.addEventListener("change", function () {
saveFromControls();
});
entry.appendChild(header);
entry.appendChild(modeRow);
entry.appendChild(colorsDiv);
entry._nameInput = nameInput;
entry._bgInput = bgInput;
entry._borderInput = borderInput;
entry._textInput = textInput;
entry._bgSwatch = bgSwatch;
entry._borderSwatch = borderSwatch;
entry._textSwatch = textSwatch;
entry._modeSelect = modeSelect;
list.appendChild(entry);
@@ -150,9 +191,9 @@
var currentMode = entry._modeSelect.value;
entry._colorState[currentMode] = {
bg: entry._bgInput.value,
border: entry._borderInput.value,
text: entry._textInput.value,
bg: getColorValue(entry._bgSwatch),
border: getColorValue(entry._borderSwatch),
text: getColorValue(entry._textSwatch),
};
var entryOverrides = {};
@@ -171,15 +212,15 @@
}
async function saveFromControls() {
const settings = {
var settings = {
enabled: document.getElementById("enabled").checked,
darkMode: document.getElementById("darkMode").value,
subredditColors: collectSubredditOverrides(),
};
COLOR_KEYS.forEach(function (key) {
const el = document.getElementById(key);
if (el) settings[key] = el.value;
var el = document.getElementById(key);
if (el) settings[key] = getColorValue(el);
});
try {
@@ -190,24 +231,30 @@
}
async function init() {
const settings = await window.RedditTweaks.loadSettings();
var settings = await window.RedditTweaks.loadSettings();
populateControls(settings);
document.getElementById("enabled").addEventListener("change", saveFromControls);
document.getElementById("darkMode").addEventListener("change", saveFromControls);
COLOR_KEYS.forEach(function (key) {
const el = document.getElementById(key);
if (el) el.addEventListener("input", saveFromControls);
var el = document.getElementById(key);
if (el) {
el.addEventListener("click", function () {
openPickerForSwatch(el);
});
}
});
document.getElementById("addSubreddit").addEventListener("click", function () {
closePicker();
addSubredditEntry("", {});
});
document.getElementById("resetLight").addEventListener("click", async function () {
const settings = await window.RedditTweaks.loadSettings();
const DEFAULTS = window.RedditTweaks.DEFAULTS;
closePicker();
var settings = await window.RedditTweaks.loadSettings();
var DEFAULTS = window.RedditTweaks.DEFAULTS;
Object.keys(DEFAULTS).forEach(function (key) {
if (key.startsWith("light.")) settings[key] = DEFAULTS[key];
});
@@ -216,8 +263,9 @@
});
document.getElementById("resetDark").addEventListener("click", async function () {
const settings = await window.RedditTweaks.loadSettings();
const DEFAULTS = window.RedditTweaks.DEFAULTS;
closePicker();
var settings = await window.RedditTweaks.loadSettings();
var DEFAULTS = window.RedditTweaks.DEFAULTS;
Object.keys(DEFAULTS).forEach(function (key) {
if (key.startsWith("dark.")) settings[key] = DEFAULTS[key];
});
@@ -227,8 +275,9 @@
document.getElementById("resetAll").addEventListener("click", async function () {
if (confirm("Reset all settings to defaults?")) {
closePicker();
await window.RedditTweaks.resetSettings();
const settings = await window.RedditTweaks.loadSettings();
var settings = await window.RedditTweaks.loadSettings();
populateControls(settings);
}
});