diff --git a/popup/popup.css b/popup/popup.css index 7a7f45f..f17d38f 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -156,6 +156,7 @@ input[type="checkbox"].switch { width: 40px; height: 20px; background: var(--switch-bg); + border: 0px; border-radius: 20px; position: relative; outline: none; @@ -239,7 +240,7 @@ button.danger:hover { max-height: 300px; } -#wordList > div { +#wordList>div { position: absolute; width: calc(100% - 8px); left: 4px; @@ -248,9 +249,6 @@ button.danger:hover { gap: 6px; padding: 4px; box-sizing: border-box; - background: var(--highlight-tag); - border: 1px solid var(--highlight-tag-border); - border-radius: 30px; } #wordList input[type="text"] { @@ -292,4 +290,6 @@ input[type="file"] { #wordCount { font-weight: normal; -} + margin-left: -8px; + margin-right: -8px; +} \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html index c3ea87a..62ccc52 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -1,5 +1,6 @@ + @@ -8,6 +9,7 @@ +

Goose Highlighter

@@ -24,7 +26,8 @@
- +
@@ -48,13 +51,14 @@
-

Word List (0)

+

Word List(0) +

- - + +
@@ -71,4 +75,5 @@ - + + \ No newline at end of file diff --git a/popup/popup.js b/popup/popup.js index 4b98ceb..1af4b43 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -60,7 +60,6 @@ function renderWords() { const list = lists[currentListIndex]; const fragment = document.createDocumentFragment(); - // For virtualized list, calculate visible items const itemHeight = 32; const containerHeight = wordList.clientHeight; const scrollTop = wordList.scrollTop; @@ -70,7 +69,12 @@ function renderWords() { list.words.length ); - wordList.style.height = `${list.words.length * itemHeight}px`; + wordList.innerHTML = ''; + + const spacer = document.createElement('div'); + spacer.style.position = 'relative'; + spacer.style.height = `${list.words.length * itemHeight}px`; + spacer.style.width = '100%'; for (let i = startIndex; i < endIndex; i++) { const w = list.words[i]; @@ -88,9 +92,7 @@ function renderWords() { container.style.boxSizing = 'border-box'; container.style.background = 'var(--highlight-tag)'; container.style.border = '1px solid var(--highlight-tag-border)'; - container.style.borderRadius = '30px'; - // Checkbox for selection const cbSelect = document.createElement("input"); cbSelect.type = "checkbox"; cbSelect.className = "word-checkbox"; @@ -99,7 +101,6 @@ function renderWords() { cbSelect.checked = true; } - // Text input for word const inputWord = document.createElement("input"); inputWord.type = "text"; inputWord.value = w.wordStr; @@ -112,7 +113,6 @@ function renderWords() { inputWord.style.backgroundColor = 'var(--input-bg)'; inputWord.style.color = 'var(--text-color)'; - // Background color picker const inputBg = document.createElement("input"); inputBg.type = "color"; inputBg.value = w.background || list.background; @@ -121,7 +121,6 @@ function renderWords() { inputBg.style.height = '24px'; inputBg.style.flexShrink = '0'; - // Foreground color picker const inputFg = document.createElement("input"); inputFg.type = "color"; inputFg.value = w.foreground || list.foreground; @@ -130,7 +129,6 @@ function renderWords() { inputFg.style.height = '24px'; inputFg.style.flexShrink = '0'; - // Active checkbox container const activeContainer = document.createElement("label"); activeContainer.className = "word-active"; activeContainer.style.display = 'flex'; @@ -138,7 +136,6 @@ function renderWords() { activeContainer.style.gap = '4px'; activeContainer.style.flexShrink = '0'; - // Active checkbox const cbActive = document.createElement("input"); cbActive.type = "checkbox"; cbActive.checked = w.active !== false; @@ -153,11 +150,10 @@ function renderWords() { container.appendChild(inputFg); container.appendChild(activeContainer); - fragment.appendChild(container); + spacer.appendChild(container); } - wordList.innerHTML = ''; - wordList.appendChild(fragment); + wordList.appendChild(spacer); const wordCount = document.getElementById('wordCount'); if (wordCount) { @@ -183,7 +179,7 @@ wordList.addEventListener("change", e => { } } else if (e.target.dataset.activeEdit != null) { lists[currentListIndex].words[e.target.dataset.activeEdit].active = e.target.checked; - debouncedSave(); + save(); } } }); @@ -278,7 +274,7 @@ wordList.addEventListener("input", e => { if (e.target.dataset.bgEdit != null) word.background = e.target.value; if (e.target.dataset.fgEdit != null) word.foreground = e.target.value; - debouncedSave(); + save(); }); wordList.addEventListener("change", e => { @@ -291,7 +287,7 @@ wordList.addEventListener("change", e => { } } else if (e.target.dataset.activeEdit != null) { lists[currentListIndex].words[e.target.dataset.activeEdit].active = e.target.checked; - debouncedSave(); + save(); } } });