From de53ab930483932dcf6be401b2db3a8f94a5d745 Mon Sep 17 00:00:00 2001 From: Will Miao Date: Tue, 24 Feb 2026 14:33:09 +0800 Subject: [PATCH] refactor(settings): restructure settings modal with subsection headers - Replace duplicate section headers with meaningful subsection titles - Group settings under logical subsections using existing i18n keys - Add new translation key 'settings.sections.apiConfiguration' - Update CSS for subsection styling with proper visual hierarchy - Improve UX by making settings organization clearer Subsections now use familiar titles from existing translations: - API Configuration, Storage Location, Language (General) - Content Filtering, Video Settings, Layout Settings (Interface) - Folder Settings, Download Path Templates, Priority Tags, Update Flags, Example Images (Download) - Auto-organize Exclusions, Metadata Refresh Skip Paths (Organization) - Metadata Archive, Misc (System) - Proxy Settings (Network) --- locales/de.json | 1 + locales/en.json | 1 + locales/es.json | 1 + locales/fr.json | 1 + locales/he.json | 1 + locales/ja.json | 1 + locales/ko.json | 1 + locales/ru.json | 1 + locales/zh-CN.json | 1 + locales/zh-TW.json | 1 + .../css/components/modal/settings-modal.css | 62 +- .../components/modals/settings_modal.html | 1302 +++++++++-------- 12 files changed, 742 insertions(+), 632 deletions(-) diff --git a/locales/de.json b/locales/de.json index 25c33799..085c02d0 100644 --- a/locales/de.json +++ b/locales/de.json @@ -255,6 +255,7 @@ "clipboardFallback": "Einstellungspfad: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "Inhaltsfilterung", "videoSettings": "Video-Einstellungen", "layoutSettings": "Layout-Einstellungen", diff --git a/locales/en.json b/locales/en.json index 3ac6913a..acf2bb56 100644 --- a/locales/en.json +++ b/locales/en.json @@ -255,6 +255,7 @@ "clipboardFallback": "Settings path: {{path}}" }, "sections": { + "apiConfiguration": "API Configuration", "contentFiltering": "Content Filtering", "videoSettings": "Video Settings", "layoutSettings": "Layout Settings", diff --git a/locales/es.json b/locales/es.json index 9c7eee52..620def24 100644 --- a/locales/es.json +++ b/locales/es.json @@ -255,6 +255,7 @@ "clipboardFallback": "Ruta de configuración: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "Filtrado de contenido", "videoSettings": "Configuración de video", "layoutSettings": "Configuración de diseño", diff --git a/locales/fr.json b/locales/fr.json index 7df5ea0e..1d6a6cb8 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -255,6 +255,7 @@ "clipboardFallback": "Chemin des paramètres: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "Filtrage du contenu", "videoSettings": "Paramètres vidéo", "layoutSettings": "Paramètres d'affichage", diff --git a/locales/he.json b/locales/he.json index b298fc6e..d091f938 100644 --- a/locales/he.json +++ b/locales/he.json @@ -255,6 +255,7 @@ "clipboardFallback": "נתיב ההגדרות: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "סינון תוכן", "videoSettings": "הגדרות וידאו", "layoutSettings": "הגדרות פריסה", diff --git a/locales/ja.json b/locales/ja.json index 8171a2cd..4a373ca9 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -255,6 +255,7 @@ "clipboardFallback": "設定パス: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "コンテンツフィルタリング", "videoSettings": "動画設定", "layoutSettings": "レイアウト設定", diff --git a/locales/ko.json b/locales/ko.json index c4e19278..9dd8a189 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -255,6 +255,7 @@ "clipboardFallback": "설정 경로: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "콘텐츠 필터링", "videoSettings": "비디오 설정", "layoutSettings": "레이아웃 설정", diff --git a/locales/ru.json b/locales/ru.json index 40fd838a..bb9f37c4 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -255,6 +255,7 @@ "clipboardFallback": "Путь настроек: {{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "Фильтрация контента", "videoSettings": "Настройки видео", "layoutSettings": "Настройки макета", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 2620597b..ab22c23a 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -255,6 +255,7 @@ "clipboardFallback": "设置路径：{{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "内容过滤", "videoSettings": "视频设置", "layoutSettings": "布局设置", diff --git a/locales/zh-TW.json b/locales/zh-TW.json index 85131307..fedb215a 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -255,6 +255,7 @@ "clipboardFallback": "設定路徑：{{path}}" }, "sections": { + "apiConfiguration": "[TODO: Translate] API Configuration", "contentFiltering": "內容過濾", "videoSettings": "影片設定", "layoutSettings": "版面設定", diff --git a/static/css/components/modal/settings-modal.css b/static/css/components/modal/settings-modal.css index ef08f929..efcb0159 100644 --- a/static/css/components/modal/settings-modal.css +++ b/static/css/components/modal/settings-modal.css @@ -573,20 +573,34 @@ } } +/* Remove old section header - replaced by subsection headers */ .settings-section-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 0 var(--space-2) 0; - margin-bottom: var(--space-3); - border-bottom: 2px solid var(--lora-accent); + display: none; } -.settings-section-header h3 { - font-size: 20px; +/* Subsection styling */ +.settings-subsection { + margin-bottom: var(--space-4); +} + +.settings-subsection:last-child { + margin-bottom: 0; +} + +.settings-subsection-header { + display: flex; + align-items: center; + padding: var(--space-2) 0; + margin-bottom: var(--space-2); + border-bottom: 1px solid var(--lora-border); +} + +.settings-subsection-header h4 { + font-size: 16px; font-weight: 600; margin: 0; color: var(--text-color); + opacity: 0.9; } /* Remove toggle button styles */ @@ -598,10 +612,14 @@ display: flex; flex-direction: column; /* Changed to column for help text placement */ margin-bottom: var(--space-3); /* Increased to provide more spacing between items */ - padding: var(--space-1); + padding: var(--space-2); border-radius: var(--border-radius-xs); } +.setting-item:last-child { + margin-bottom: 0; +} + .setting-item:hover { background: rgba(0, 0, 0, 0.02); } @@ -610,6 +628,32 @@ background: rgba(255, 255, 255, 0.05); } +/* Subsection styling */ +.settings-subsection { + margin-bottom: var(--space-5); +} + +.settings-subsection:last-child { + margin-bottom: 0; +} + +.settings-subsection-header { + display: flex; + align-items: center; + padding: var(--space-2) var(--space-2) var(--space-2) 0; + margin-bottom: var(--space-2); + border-bottom: 1px solid var(--lora-border); +} + +.settings-subsection-header h4 { + font-size: 15px; + font-weight: 600; + margin: 0; + color: var(--text-color); + opacity: 0.85; + letter-spacing: 0.3px; +} + /* Control row with label and input together */ .setting-row { display: flex; diff --git a/templates/components/modals/settings_modal.html b/templates/components/modals/settings_modal.html index c40e0e80..a47c4971 100644 --- a/templates/components/modals/settings_modal.html +++ b/templates/components/modals/settings_modal.html @@ -49,563 +49,606 @@
-
-

{{ t('settings.nav.general') }}

-
- - -
-
-
- -
-
-
- - + +
+
+

{{ t('settings.sections.apiConfiguration') }}

+
+
+
+
+ +
+
+
+ + +
-
-
- {{ t('settings.civitaiApiKeyHelp') }} +
+ {{ t('settings.civitaiApiKeyHelp') }} +
-
-
-
- -
-
- -
+
+
+

{{ t('settings.sections.storageLocation') }}

-
- {{ t('settings.storage.locationHelp') }} +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.storage.locationHelp') }} +
-
-
-
- -
-
- -
+
+
+

{{ t('common.language.select') }}

-
- {{ t('common.language.select_help') }} +
+
+
+ +
+
+ +
+
+
+ {{ t('common.language.select_help') }} +
-
-

{{ t('settings.nav.interface') }}

-
- -
-
-
- +
+
+

{{ t('settings.sections.contentFiltering') }}

+
+
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.contentFiltering.blurNsfwContentHelp') }}
-
- {{ t('settings.contentFiltering.blurNsfwContentHelp') }} -
-
- -
-
-
- + +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.contentFiltering.showOnlySfwHelp') }}
-
- {{ t('settings.contentFiltering.showOnlySfwHelp') }} -
-
-
-
- -
-
- -
+
+
+

{{ t('settings.sections.videoSettings') }}

-
- {{ t('settings.videoSettings.autoplayOnHoverHelp') }} +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.videoSettings.autoplayOnHoverHelp') }} +
-
-
-
- +
+
+

{{ t('settings.sections.layoutSettings') }}

+
+
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.layoutSettings.showFolderSidebarHelp') }}
-
- {{ t('settings.layoutSettings.showFolderSidebarHelp') }} -
-
-
-
-
- +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.layoutSettings.displayDensityHelp') }} +
    +
  • {{ t('settings.layoutSettings.displayDensityOptions.default') }}: {{ t('settings.layoutSettings.displayDensityDetails.default') }}
    • +
  • {{ t('settings.layoutSettings.displayDensityOptions.medium') }}: {{ t('settings.layoutSettings.displayDensityDetails.medium') }}
    • +
  • {{ t('settings.layoutSettings.displayDensityOptions.compact') }}: {{ t('settings.layoutSettings.displayDensityDetails.compact') }}
    • +
+ {{ t('settings.layoutSettings.displayDensityWarning') }}
-
- {{ t('settings.layoutSettings.displayDensityHelp') }} -
    -
  • {{ t('settings.layoutSettings.displayDensityOptions.default') }}: {{ t('settings.layoutSettings.displayDensityDetails.default') }}
    • -
  • {{ t('settings.layoutSettings.displayDensityOptions.medium') }}: {{ t('settings.layoutSettings.displayDensityDetails.medium') }}
    • -
  • {{ t('settings.layoutSettings.displayDensityOptions.compact') }}: {{ t('settings.layoutSettings.displayDensityDetails.compact') }}
    • -
- {{ t('settings.layoutSettings.displayDensityWarning') }} -
-
- -
-
-
- + +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.layoutSettings.modelNameDisplayHelp') }}
-
- {{ t('settings.layoutSettings.modelNameDisplayHelp') }} -
-
- -
-
-
- + +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.layoutSettings.cardInfoDisplayHelp') }}
-
- {{ t('settings.layoutSettings.cardInfoDisplayHelp') }} -
-
-
-
-
- +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.layoutSettings.modelCardFooterActionHelp') }}
-
- {{ t('settings.layoutSettings.modelCardFooterActionHelp') }} -
-
-

{{ t('settings.nav.download') }}

-
- -
-
-
- +
+
+

{{ t('settings.sections.folderSettings') }}

+
+
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.folderSettings.activeLibraryHelp') }}
-
- {{ t('settings.folderSettings.activeLibraryHelp') }} -
-
-
-
-
- +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.folderSettings.defaultLoraRootHelp') }}
-
- {{ t('settings.folderSettings.defaultLoraRootHelp') }} + +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.folderSettings.defaultCheckpointRootHelp') }} +
+
+ +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.folderSettings.defaultUnetRootHelp') }} +
+
+ +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.folderSettings.defaultEmbeddingRootHelp') }} +
-
-
-
- -
-
- + +
+
+

{{ t('settings.downloadPathTemplates.title') }}

+
+
+
+ {{ t('settings.downloadPathTemplates.help') }} +
+ {{ t('settings.downloadPathTemplates.availablePlaceholders') }} + {base_model} + {author} + {first_tag} + {model_name} + {version_name} +
-
- {{ t('settings.folderSettings.defaultCheckpointRootHelp') }} -
-
-
-
-
- +
+
+
+ +
+
+ +
-
- + +
-
- {{ t('settings.folderSettings.defaultUnetRootHelp') }} -
-
-
-
-
- +
+
+
+ +
+
+ +
-
- + +
-
- {{ t('settings.folderSettings.defaultEmbeddingRootHelp') }} + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }} +
+
+
+
+
-
-
-
- +
+
+

{{ t('settings.sections.updateFlags') }}

+
+
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.updateFlagStrategy.help') }}
-
- {{ t('settings.updateFlagStrategy.help') }} -
-
- -
-
-
- + +
+
+
+ +
+
+ +
-
- -
-
-
- {{ t('settings.hideEarlyAccessUpdates.help') }} -
-
- - -
-
- {{ t('settings.downloadPathTemplates.help') }} -
- {{ t('settings.downloadPathTemplates.availablePlaceholders') }} - {base_model} - {author} - {first_tag} - {model_name} - {version_name} -
-
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
-
- {{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }} -
-
-
+
+ {{ t('settings.hideEarlyAccessUpdates.help') }}
-
-
-
- +
+
+

{{ t('settings.sections.exampleImages') }}

+
+
+
+
+ +
+
+ + +
-
- - +
+ {{ t('settings.exampleImages.downloadLocationHelp') }}
-
- {{ t('settings.exampleImages.downloadLocationHelp') }} -
-
- -
-
-
- + +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.exampleImages.autoDownloadHelp') }}
-
- {{ t('settings.exampleImages.autoDownloadHelp') }} -
-
- -
-
-
- + +
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.exampleImages.optimizeImagesHelp') }}
-
- {{ t('settings.exampleImages.optimizeImagesHelp') }} -
-
-
-
- - - - -
+
+
+

{{ t('settings.priorityTags.title') }}

-
{{ t('settings.priorityTags.description') }}
-
- - - - -
- - - +
+
+
+ + + + +
- -
-
- -
+
{{ t('settings.priorityTags.description') }}
+
+ + + + +
+ + +
-
- -
-
-
- -
+ +
+
+ +
+
+
+ +
+
+
+ +
+
@@ -614,230 +657,243 @@
-
-

{{ t('settings.nav.organization') }}

-
- -
-
-
- +
+
+

{{ t('settings.autoOrganizeExclusions.label') }}

+
+
+
+
+ +
+
+ {{ t('settings.autoOrganizeExclusions.description') }} +
+ +
-
- {{ t('settings.autoOrganizeExclusions.description') }} -
- -
-
-
-
- +
+
+

{{ t('settings.metadataRefreshSkipPaths.label') }}

+
+
+
+
+ +
+
+ {{ t('settings.metadataRefreshSkipPaths.description') }} +
+ +
-
- {{ t('settings.metadataRefreshSkipPaths.description') }} -
- -
-
-

{{ t('settings.nav.system') }}

-
- -
-
-
- +
+
+

{{ t('settings.sections.metadataArchive') }}

+
+
+
+
+ +
+
+ +
-
- +
+ {{ t('settings.metadataArchive.enableArchiveDbHelp') }}
-
- {{ t('settings.metadataArchive.enableArchiveDbHelp') }} -
-
- -
-
- -
-
- -
-
-
- -
-
- - + +
+
+
-
- {{ t('settings.metadataArchive.managementHelp') }} + +
+
+
+ +
+
+ + +
+
+
+ {{ t('settings.metadataArchive.managementHelp') }} +
-
-
-
- -
-
- -
+
+
+

{{ t('settings.sections.misc') }}

-
- {{ t('settings.misc.includeTriggerWordsHelp') }} +
+
+
+ +
+
+ +
+
+
+ {{ t('settings.misc.includeTriggerWordsHelp') }} +
-
-

{{ t('settings.nav.network') }}

-
- -
-
-
- -
-
- -
+
+
+

{{ t('settings.sections.proxySettings') }}

-
- {{ t('settings.proxySettings.enableProxyHelp') }} -
-
- -