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

25
popup/popup.html
View File

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

141
popup/popup.js
View File

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