Merge pull request #513 from willmiao/codex/add-link-button-to-settings-modal-header

Adjust settings modal location shortcut styling
2026-03-21 21:22:11 -03:00 · 2025-10-04 07:57:43 +08:00
parent 9e1b92c26e b12a5ef133
commit 65a0c00e33
13 changed files with 147 additions and 1 deletions
--- a/locales/de.json
+++ b/locales/de.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Civitai API Key",
        "civitaiApiKeyPlaceholder": "Geben Sie Ihren Civitai API Key ein",
        "civitaiApiKeyHelp": "Wird für die Authentifizierung beim Herunterladen von Modellen von Civitai verwendet",
+        "openSettingsFileLocation": {
+            "label": "Einstellungsordner öffnen",
+            "tooltip": "Den Ordner mit der settings.json öffnen",
+            "success": "Einstellungsordner geöffnet",
+            "failed": "Einstellungsordner konnte nicht geöffnet werden"
+        },
        "sections": {
            "contentFiltering": "Inhaltsfilterung",
            "videoSettings": "Video-Einstellungen",
--- a/locales/en.json
+++ b/locales/en.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Civitai API Key",
        "civitaiApiKeyPlaceholder": "Enter your Civitai API key",
        "civitaiApiKeyHelp": "Used for authentication when downloading models from Civitai",
+        "openSettingsFileLocation": {
+            "label": "Open settings folder",
+            "tooltip": "Open the folder containing settings.json",
+            "success": "Opened settings.json folder",
+            "failed": "Failed to open settings.json folder"
+        },
        "sections": {
            "contentFiltering": "Content Filtering",
            "videoSettings": "Video Settings",
--- a/locales/es.json
+++ b/locales/es.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Clave API de Civitai",
        "civitaiApiKeyPlaceholder": "Introduce tu clave API de Civitai",
        "civitaiApiKeyHelp": "Utilizada para autenticación al descargar modelos de Civitai",
+        "openSettingsFileLocation": {
+            "label": "Abrir carpeta de ajustes",
+            "tooltip": "Abrir la carpeta que contiene settings.json",
+            "success": "Carpeta de settings.json abierta",
+            "failed": "No se pudo abrir la carpeta de settings.json"
+        },
        "sections": {
            "contentFiltering": "Filtrado de contenido",
            "videoSettings": "Configuración de video",
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Clé API Civitai",
        "civitaiApiKeyPlaceholder": "Entrez votre clé API Civitai",
        "civitaiApiKeyHelp": "Utilisée pour l'authentification lors du téléchargement de modèles depuis Civitai",
+        "openSettingsFileLocation": {
+            "label": "Ouvrir le dossier des paramètres",
+            "tooltip": "Ouvrir le dossier contenant settings.json",
+            "success": "Dossier settings.json ouvert",
+            "failed": "Impossible d'ouvrir le dossier settings.json"
+        },
        "sections": {
            "contentFiltering": "Filtrage du contenu",
            "videoSettings": "Paramètres vidéo",
--- a/locales/he.json
+++ b/locales/he.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "מפתח API של Civitai",
        "civitaiApiKeyPlaceholder": "הזן את מפתח ה-API שלך מ-Civitai",
        "civitaiApiKeyHelp": "משמש לאימות בעת הורדת מודלים מ-Civitai",
+        "openSettingsFileLocation": {
+            "label": "פתח תיקיית הגדרות",
+            "tooltip": "פתח את התיקייה שמכילה את ‎settings.json",
+            "success": "תיקיית settings.json נפתחה",
+            "failed": "לא ניתן לפתוח את תיקיית settings.json"
+        },
        "sections": {
            "contentFiltering": "סינון תוכן",
            "videoSettings": "הגדרות וידאו",
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Civitai APIキー",
        "civitaiApiKeyPlaceholder": "Civitai APIキーを入力してください",
        "civitaiApiKeyHelp": "Civitaiからモデルをダウンロードするときの認証に使用されます",
+        "openSettingsFileLocation": {
+            "label": "設定フォルダーを開く",
+            "tooltip": "settings.json を含むフォルダーを開きます",
+            "success": "settings.json フォルダーを開きました",
+            "failed": "settings.json フォルダーを開けませんでした"
+        },
        "sections": {
            "contentFiltering": "コンテンツフィルタリング",
            "videoSettings": "動画設定",
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Civitai API 키",
        "civitaiApiKeyPlaceholder": "Civitai API 키를 입력하세요",
        "civitaiApiKeyHelp": "Civitai에서 모델을 다운로드할 때 인증에 사용됩니다",
+        "openSettingsFileLocation": {
+            "label": "설정 폴더 열기",
+            "tooltip": "settings.json이 있는 폴더를 엽니다",
+            "success": "settings.json 폴더를 열었습니다",
+            "failed": "settings.json 폴더를 열지 못했습니다"
+        },
        "sections": {
            "contentFiltering": "콘텐츠 필터링",
            "videoSettings": "비디오 설정",
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Ключ API Civitai",
        "civitaiApiKeyPlaceholder": "Введите ваш ключ API Civitai",
        "civitaiApiKeyHelp": "Используется для аутентификации при загрузке моделей с Civitai",
+        "openSettingsFileLocation": {
+            "label": "Открыть папку настроек",
+            "tooltip": "Открыть папку, содержащую settings.json",
+            "success": "Папка settings.json открыта",
+            "failed": "Не удалось открыть папку settings.json"
+        },
        "sections": {
            "contentFiltering": "Фильтрация контента",
            "videoSettings": "Настройки видео",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -194,6 +194,12 @@
        "civitaiApiKey": "Civitai API 密钥",
        "civitaiApiKeyPlaceholder": "请输入你的 Civitai API 密钥",
        "civitaiApiKeyHelp": "用于从 Civitai 下载模型时的身份验证",
+        "openSettingsFileLocation": {
+            "label": "打开设置文件夹",
+            "tooltip": "打开包含 settings.json 的文件夹",
+            "success": "已打开 settings.json 文件夹",
+            "failed": "无法打开 settings.json 文件夹"
+        },
        "sections": {
            "contentFiltering": "内容过滤",
            "videoSettings": "视频设置",
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -188,6 +188,12 @@
        "civitaiApiKey": "Civitai API 金鑰",
        "civitaiApiKeyPlaceholder": "請輸入您的 Civitai API 金鑰",
        "civitaiApiKeyHelp": "用於從 Civitai 下載模型時的身份驗證",
+        "openSettingsFileLocation": {
+            "label": "開啟設定資料夾",
+            "tooltip": "開啟包含 settings.json 的資料夾",
+            "success": "已開啟 settings.json 資料夾",
+            "failed": "無法開啟 settings.json 資料夾"
+        },
        "sections": {
            "contentFiltering": "內容過濾",
            "videoSettings": "影片設定",
--- a/static/css/components/modal/settings-modal.css
+++ b/static/css/components/modal/settings-modal.css
@@ -23,6 +23,48 @@
    max-width: 650px; /* Further increased from 600px for more space */
 }

+.settings-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--space-1);
+    margin-bottom: var(--space-2);
+}
+
+.settings-header h2 {
+    margin: 0;
+}
+
+.settings-open-location-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: none;
+    color: var(--text-color);
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: var(--border-radius-xs);
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.settings-open-location-button:hover,
+.settings-open-location-button:focus-visible {
+    opacity: 1;
+    background-color: rgba(var(--border-color-rgb, 148, 163, 184), 0.2);
+    outline: none;
+}
+
+.settings-open-location-button i {
+    font-size: 1em;
+}
+
+.settings-open-location-button:focus-visible {
+    box-shadow: 0 0 0 2px rgba(var(--border-color-rgb, 148, 163, 184), 0.6);
+}
+
 /* Settings Links */
 .settings-links {
    margin-top: var(--space-3);
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -183,6 +183,14 @@ export class SettingsManager {
            button.addEventListener('click', () => this.toggleInputVisibility(button));
        });

+        const openSettingsLocationButton = document.querySelector('.settings-open-location-button');
+        if (openSettingsLocationButton) {
+            openSettingsLocationButton.addEventListener('click', () => {
+                const filePath = openSettingsLocationButton.dataset.settingsPath;
+                this.openSettingsFileLocation(filePath);
+            });
+        }
+
        ['lora', 'checkpoint', 'embedding'].forEach(modelType => {
            const customInput = document.getElementById(`${modelType}CustomTemplate`);
            if (customInput) {
@@ -210,6 +218,32 @@ export class SettingsManager {
        this.initialized = true;
    }

+    async openSettingsFileLocation(filePath) {
+        if (!filePath) {
+            showToast('settings.openSettingsFileLocation.failed', {}, 'error');
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/lm/open-file-location', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ file_path: filePath }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`Request failed with status ${response.status}`);
+            }
+
+            showToast('settings.openSettingsFileLocation.success', {}, 'success');
+        } catch (error) {
+            console.error('Failed to open settings file location:', error);
+            showToast('settings.openSettingsFileLocation.failed', {}, 'error');
+        }
+    }
+
    async loadSettingsToUI() {
        // Set frontend settings from state
        const blurMatureContentCheckbox = document.getElementById('blurMatureContent');
--- a/templates/components/modals/settings_modal.html
+++ b/templates/components/modals/settings_modal.html
@@ -2,7 +2,17 @@
 <div id="settingsModal" class="modal">
    <div class="modal-content settings-modal">
        <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
-        <h2>{{ t('common.actions.settings') }}</h2>
+        <div class="settings-header">
+            <h2>{{ t('common.actions.settings') }}</h2>
+            <button
+                type="button"
+                class="settings-open-location-button"
+                data-settings-path="{{ settings.settings_file }}"
+                aria-label="{{ t('settings.openSettingsFileLocation.tooltip') }}"
+                title="{{ t('settings.openSettingsFileLocation.tooltip') }}">
+                <i class="fas fa-external-link-alt" aria-hidden="true"></i>
+            </button>
+        </div>
        <div class="settings-form">
            <div class="setting-item api-key-item">
                <div class="setting-row">