Add theme support with dynamic icons
This commit is contained in:
parent
b29d5c702e
commit
7e64a428ac
5 changed files with 132 additions and 65 deletions
|
|
@ -37,22 +37,22 @@
|
|||
<section class="section">
|
||||
<div class="container" id="options-container">
|
||||
<figure class="has-text-centered mb-4">
|
||||
<img src="../resources/img/full-logo.png" alt="AI Filter Logo" style="max-height:40px;">
|
||||
<img data-icon="full-logo" src="../resources/img/full-logo.png" alt="AI Filter Logo" style="max-height:40px;">
|
||||
</figure>
|
||||
|
||||
<div class="level mb-4">
|
||||
<div class="level-left">
|
||||
<div class="tabs" id="main-tabs">
|
||||
<ul>
|
||||
<li class="is-active" data-tab="settings"><a><span class="icon is-small"><img src="../resources/svg/settings.svg" alt=""></span><span>Settings</span></a></li>
|
||||
<li data-tab="rules"><a><span class="icon is-small"><img src="../resources/svg/clipboarddata.svg" alt=""></span><span>Rules</span></a></li>
|
||||
<li data-tab="maintenance"><a><span class="icon is-small"><img src="../resources/svg/gear.svg" alt=""></span><span>Maintenance</span></a></li>
|
||||
<li class="is-active" data-tab="settings"><a><span class="icon is-small"><img data-icon="settings" data-size="16" src="../resources/img/settings-light-16.png" alt=""></span><span>Settings</span></a></li>
|
||||
<li data-tab="rules"><a><span class="icon is-small"><img data-icon="clipboarddata" data-size="16" src="../resources/img/clipboarddata-light-16.png" alt=""></span><span>Rules</span></a></li>
|
||||
<li data-tab="maintenance"><a><span class="icon is-small"><img data-icon="gear" data-size="16" src="../resources/img/gear-light-16.png" alt=""></span><span>Maintenance</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<button class="button is-primary" id="save" disabled>
|
||||
<span class="icon is-small"><img src="../resources/svg/flag.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="flag" data-size="16" src="../resources/img/flag-light-16.png" alt=""></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<div id="settings-tab" class="tab-content">
|
||||
<h2 class="title is-4">
|
||||
<span class="icon is-small"><img src="../resources/svg/settings.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="settings" data-size="16" src="../resources/img/settings-light-16.png" alt=""></span>
|
||||
<span>Settings</span>
|
||||
</h2>
|
||||
<div class="field">
|
||||
|
|
@ -94,13 +94,26 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="theme-select">Theme</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select id="theme-select">
|
||||
<option value="auto">Match Thunderbird</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="button is-danger" id="reset-system">
|
||||
<span class="icon is-small"><img src="../resources/svg/reply.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="reply" data-size="16" src="../resources/img/reply-light-16.png" alt=""></span>
|
||||
<span>Reset to default</span>
|
||||
</button>
|
||||
<button class="button" id="toggle-advanced" type="button">
|
||||
<span class="icon is-small"><img src="../resources/svg/gear.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="gear" data-size="16" src="../resources/img/gear-light-16.png" alt=""></span>
|
||||
<span>Advanced</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -202,7 +215,7 @@
|
|||
|
||||
<div id="rules-tab" class="tab-content is-hidden">
|
||||
<h2 class="title is-4">
|
||||
<span class="icon is-small"><img src="../resources/svg/clipboarddata.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="clipboarddata" data-size="16" src="../resources/img/clipboarddata-light-16.png" alt=""></span>
|
||||
<span>Classification Rules</span>
|
||||
</h2>
|
||||
<div id="rules-container"></div>
|
||||
|
|
@ -211,7 +224,7 @@
|
|||
|
||||
<div id="maintenance-tab" class="tab-content is-hidden">
|
||||
<h2 class="title is-4">
|
||||
<span class="icon is-small"><img src="../resources/svg/gear.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="gear" data-size="16" src="../resources/img/gear-light-16.png" alt=""></span>
|
||||
<span>Maintenance</span>
|
||||
</h2>
|
||||
<table class="table is-fullwidth">
|
||||
|
|
@ -226,7 +239,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<button class="button is-danger" id="clear-cache" type="button">
|
||||
<span class="icon is-small"><img src="../resources/svg/trash.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="trash" data-size="16" src="../resources/img/trash-light-16.png" alt=""></span>
|
||||
<span>Clear Cache</span>
|
||||
</button>
|
||||
<div class="field mt-4">
|
||||
|
|
@ -240,13 +253,13 @@
|
|||
<div class="field is-grouped mt-4">
|
||||
<p class="control">
|
||||
<button class="button" id="export-data" type="button">
|
||||
<span class="icon is-small"><img src="../resources/svg/download.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="download" data-size="16" src="../resources/img/download-light-16.png" alt=""></span>
|
||||
<span>Export Data</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" id="import-data" type="button">
|
||||
<span class="icon is-small"><img src="../resources/svg/upload.svg" alt=""></span>
|
||||
<span class="icon is-small"><img data-icon="upload" data-size="16" src="../resources/img/upload-light-16.png" alt=""></span>
|
||||
<span>Import Data</span>
|
||||
</button>
|
||||
<input class="is-hidden" type="file" id="import-file" accept="application/json">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
'altTextImages',
|
||||
'collapseWhitespace',
|
||||
'aiRules',
|
||||
'aiCache'
|
||||
'aiCache',
|
||||
'theme'
|
||||
]);
|
||||
const tabButtons = document.querySelectorAll('#main-tabs li');
|
||||
const tabs = document.querySelectorAll('.tab-content');
|
||||
|
|
@ -37,6 +38,37 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
document.addEventListener('input', markDirty, true);
|
||||
document.addEventListener('change', markDirty, true);
|
||||
logger.setDebug(defaults.debugLogging === true);
|
||||
|
||||
const themeSelect = document.getElementById('theme-select');
|
||||
themeSelect.value = defaults.theme || 'auto';
|
||||
|
||||
function systemTheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function updateIcons(theme) {
|
||||
document.querySelectorAll('img[data-icon]').forEach(img => {
|
||||
const name = img.dataset.icon;
|
||||
const size = img.dataset.size || 16;
|
||||
if (name === 'full-logo') {
|
||||
img.src = `../resources/img/full-logo${theme === 'dark' ? '-white' : ''}.png`;
|
||||
} else {
|
||||
img.src = `../resources/img/${name}-${theme}-${size}.png`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(setting) {
|
||||
const mode = setting === 'auto' ? systemTheme() : setting;
|
||||
document.documentElement.dataset.theme = mode;
|
||||
updateIcons(mode);
|
||||
}
|
||||
|
||||
applyTheme(themeSelect.value);
|
||||
themeSelect.addEventListener('change', () => {
|
||||
markDirty();
|
||||
applyTheme(themeSelect.value);
|
||||
});
|
||||
const DEFAULT_AI_PARAMS = {
|
||||
max_tokens: 4096,
|
||||
temperature: 0.6,
|
||||
|
|
@ -452,7 +484,9 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
const stripUrlParams = stripUrlToggle.checked;
|
||||
const altTextImages = altTextToggle.checked;
|
||||
const collapseWhitespace = collapseWhitespaceToggle.checked;
|
||||
await storage.local.set({ endpoint, templateName, customTemplate: customTemplateText, customSystemPrompt, aiParams: aiParamsSave, debugLogging, htmlToMarkdown, stripUrlParams, altTextImages, collapseWhitespace, aiRules: rules });
|
||||
const theme = themeSelect.value;
|
||||
await storage.local.set({ endpoint, templateName, customTemplate: customTemplateText, customSystemPrompt, aiParams: aiParamsSave, debugLogging, htmlToMarkdown, stripUrlParams, altTextImages, collapseWhitespace, aiRules: rules, theme });
|
||||
applyTheme(theme);
|
||||
try {
|
||||
await AiClassifier.setConfig({ endpoint, templateName, customTemplate: customTemplateText, customSystemPrompt, aiParams: aiParamsSave, debugLogging });
|
||||
logger.setDebug(debugLogging);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue