obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

layout fixes

Browse Source
This commit is contained in:
Daniel Dada
2025-06-23 09:43:43 +03:00
parent ef45a8b258
commit 0cffec3df2
3 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
popup/popup.css
View File

@@ -156,6 +156,7 @@ input[type="checkbox"].switch {
width: 40px; width: 40px;
height: 20px; height: 20px;
background: var(--switch-bg); background: var(--switch-bg);
border: 0px;
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
outline: none; outline: none;
@@ -239,7 +240,7 @@ button.danger:hover {
max-height: 300px; max-height: 300px;
} }
#wordList > div { #wordList>div {
position: absolute; position: absolute;
width: calc(100% - 8px); width: calc(100% - 8px);
left: 4px; left: 4px;
@@ -248,9 +249,6 @@ button.danger:hover {
gap: 6px; gap: 6px;
padding: 4px; padding: 4px;
box-sizing: border-box; box-sizing: border-box;
background: var(--highlight-tag);
border: 1px solid var(--highlight-tag-border);
border-radius: 30px;
} }
#wordList input[type="text"] { #wordList input[type="text"] {
@@ -292,4 +290,6 @@ input[type="file"] {
#wordCount { #wordCount {
font-weight: normal; font-weight: normal;
} margin-left: -8px;
margin-right: -8px;
}

15
popup/popup.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,6 +9,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head> </head>
<body class="dark"> <body class="dark">
<div class="container"> <div class="container">
<h1><i class="fa-solid fa-marker"></i> <span data-i18n="extension_name">Goose Highlighter</span></h1> <h1><i class="fa-solid fa-marker"></i> <span data-i18n="extension_name">Goose Highlighter</span></h1>
@@ -24,7 +26,8 @@
<select id="listSelect"></select> <select id="listSelect"></select>
<div class="button-row"> <div class="button-row">
<button id="newListBtn"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New</span></button> <button id="newListBtn"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New</span></button>
<button id="deleteListBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="delete_list">Delete</span></button> <button id="deleteListBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
data-i18n="delete_list">Delete</span></button>
</div> </div>
</div> </div>
@@ -48,13 +51,14 @@
</div> </div>
<div class="section"> <div class="section">
<h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span id="wordCount">0</span>)</h2> <h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span>(<span id="wordCount">0</span>)
</h2>
<div class="button-row wrap"> <div class="button-row wrap">
<button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button> <button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
<button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button> <button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
<button id="deleteSelectedBtn" class="danger"><span data-i18n="delete_selected">Delete</span></button>
<button id="disableSelectedBtn"><span data-i18n="disable_selected">Disable</span></button>
<button id="enableSelectedBtn"><span data-i18n="enable_selected">Enable</span></button> <button id="enableSelectedBtn"><span data-i18n="enable_selected">Enable</span></button>
<button id="disableSelectedBtn"><span data-i18n="disable_selected">Disable</span></button>
<button id="deleteSelectedBtn" class="danger"><span data-i18n="delete_selected">Delete</span></button>
</div> </div>
<div id="wordList"></div> <div id="wordList"></div>
</div> </div>
@@ -71,4 +75,5 @@
<script src="../storage.js"></script> <script src="../storage.js"></script>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html>
</html>

26
popup/popup.js
View File

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