From fb1f3dc10cd6ddb8dc10877acabec89f21e352f8 Mon Sep 17 00:00:00 2001 From: moz Date: Fri, 12 Jun 2026 21:26:02 +0800 Subject: [PATCH] style: use different styles for mobile and desktop - auto-update dark mode button - remove dark mode icon tips - display icon preview as a column on desktop --- src/lang/locale/en.ts | 2 +- src/lang/locale/zh-cn.ts | 2 +- src/ui.ts | 38 ++++++++++++++++++++++++++------------ styles.css | 10 ++++++++++ 4 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts index b553076..0b85bc6 100644 --- a/src/lang/locale/en.ts +++ b/src/lang/locale/en.ts @@ -36,7 +36,7 @@ export default { 'Edit': 'Edit', 'Save': 'Save', 'Failed to save': 'Failed to save', - 'Upload new icon': 'Upload new icon', + 'Update': 'Update', 'Remove': 'Remove', 'Will be removed on save': 'Will be removed on save', 'Default icon is required when uploading a dark mode icon': 'Default icon is required when uploading a dark mode icon', diff --git a/src/lang/locale/zh-cn.ts b/src/lang/locale/zh-cn.ts index db37714..1133453 100644 --- a/src/lang/locale/zh-cn.ts +++ b/src/lang/locale/zh-cn.ts @@ -36,7 +36,7 @@ export default { 'Edit': '编辑', 'Save': '保存', 'Failed to save': '保存失败', - 'Upload new icon': '上传新图标', + 'Update': '更新', 'Remove': '移除', 'Will be removed on save': '保存后将移除', 'Default icon is required when uploading a dark mode icon': '上传暗色模式图标时，默认图标为必选', diff --git a/src/ui.ts b/src/ui.ts index d61082b..1bd368c 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -1,4 +1,4 @@ -import { App, Modal, Notice, Setting, setIcon } from 'obsidian'; +import { App, Modal, Notice, Platform, Setting, setIcon } from 'obsidian'; import type { IconItem, LinkType } from './types'; import { t } from './lang/helper'; import { prepareSvgForSettings } from './svg'; @@ -122,7 +122,10 @@ export class NewIconModal extends Modal { let uploadedSvgData: string | undefined; let uploadedDarkSvgData: string | undefined; - const defaultSection = contentEl.createDiv({ cls: 'external-links-icon-upload-section' }); + const isDesktop = !Platform.isMobile; + const iconContainer = contentEl.createDiv({ cls: isDesktop ? 'external-links-icon-upload-columns' : '' }); + + const defaultSection = iconContainer.createDiv({ cls: 'external-links-icon-upload-section' }); defaultSection.createEl('div', { text: t('Default icon (light mode)'), cls: 'external-links-icon-upload-label' }); const lightBody = defaultSection.createDiv({ cls: 'external-links-icon-section-body' }); @@ -144,7 +147,7 @@ export class NewIconModal extends Modal { doc.body.appendChild(lightInput); lightUploadBtn.onclick = () => lightInput.click(); - const darkSection = contentEl.createDiv({ cls: 'external-links-icon-upload-section' }); + const darkSection = iconContainer.createDiv({ cls: 'external-links-icon-upload-section' }); darkSection.createEl('div', { text: t('Dark mode icon (optional)'), cls: 'external-links-icon-upload-label' }); const darkBody = darkSection.createDiv({ cls: 'external-links-icon-section-body' }); @@ -156,7 +159,6 @@ export class NewIconModal extends Modal { const darkUploadBtn = darkRow.createEl('button', { cls: 'external-links-icon-btn' }); setIcon(darkUploadBtn, 'lucide-upload'); darkUploadBtn.appendText(` ${t('Upload icon')}`); - darkSection.createEl('div', { text: t('Dark mode icon hint'), cls: 'external-links-icon-upload-hint' }); const darkInput = createFileInput(doc, (content) => { uploadedDarkSvgData = content; @@ -307,7 +309,10 @@ export class EditIconModal extends Modal { let darkBadge: HTMLDivElement; let darkPreview: HTMLDivElement; - const lightSection = contentEl.createDiv({ cls: 'external-links-icon-upload-section' }); + const isDesktop = !Platform.isMobile; + const iconContainer = contentEl.createDiv({ cls: isDesktop ? 'external-links-icon-upload-columns' : '' }); + + const lightSection = iconContainer.createDiv({ cls: 'external-links-icon-upload-section' }); lightSection.createEl('div', { text: t('Default icon (light mode)'), cls: 'external-links-icon-upload-label' }); const lightBody = lightSection.createDiv({ cls: 'external-links-icon-section-body' }); @@ -318,12 +323,19 @@ export class EditIconModal extends Modal { const lightRow = lightControls.createDiv({ cls: 'external-links-icon-control-row' }); const lightUploadBtn = lightRow.createEl('button', { cls: 'external-links-icon-btn' }); setIcon(lightUploadBtn, 'lucide-upload'); - lightUploadBtn.appendText(` ${t('Upload new icon')}`); + lightUploadBtn.appendText(` ${t('Update')}`); if (this.icon.svgData && !this.icon.themeDarkSvgData) { - const copyBtn = lightRow.createEl('button', { cls: 'external-links-icon-btn external-links-icon-btn-copy' }); - setIcon(copyBtn, 'lucide-copy'); - copyBtn.appendText(` ${t('Copy to dark')}`); + const copyBtnCls = isDesktop ? 'clickable-icon' : 'external-links-icon-btn external-links-icon-btn-copy'; + const copyBtn = lightRow.createEl('button', { cls: copyBtnCls }); + if (isDesktop) { + setIcon(copyBtn, 'lucide-square-arrow-right'); + copyBtn.setAttribute('aria-label', t('Copy to dark')); + copyBtn.style.marginLeft = 'auto'; + } else { + setIcon(copyBtn, 'lucide-copy'); + copyBtn.appendText(` ${t('Copy to dark')}`); + } copyBtn.onclick = () => { newDarkSvgData = newSvgData || this.icon.svgData; removeDark = false; @@ -344,7 +356,7 @@ export class EditIconModal extends Modal { doc.body.appendChild(lightInput); lightUploadBtn.onclick = () => lightInput.click(); - const darkSection = contentEl.createDiv({ cls: 'external-links-icon-upload-section' }); + const darkSection = iconContainer.createDiv({ cls: 'external-links-icon-upload-section' }); darkSection.createEl('div', { text: t('Dark mode icon (optional)'), cls: 'external-links-icon-upload-label' }); const darkBody = darkSection.createDiv({ cls: 'external-links-icon-section-body' }); @@ -357,7 +369,7 @@ export class EditIconModal extends Modal { const darkRow = darkControls.createDiv({ cls: 'external-links-icon-control-row' }); const darkUploadBtn = darkRow.createEl('button', { cls: 'external-links-icon-btn' }); setIcon(darkUploadBtn, 'lucide-upload'); - darkUploadBtn.appendText(` ${t('Upload new icon')}`); + darkUploadBtn.appendText(` ${this.icon.themeDarkSvgData ? t('Update') : t('Upload icon')}`); if (this.icon.themeDarkSvgData) { removeBtn = darkRow.createEl('button', { text: t('Remove'), cls: 'external-links-icon-btn external-links-icon-btn-danger' }); @@ -366,10 +378,12 @@ export class EditIconModal extends Modal { removeDark = !removeDark; removeIndicator!.textContent = removeDark ? ` ✓ ${t('Will be removed on save')}` : ''; removeBtn!.classList.toggle('is-active', removeDark); + if (isDesktop) { + darkUploadBtn.style.display = removeDark ? 'none' : ''; + } }; } - darkSection.createEl('div', { text: t('Dark mode icon hint'), cls: 'external-links-icon-upload-hint' }); const darkInput = createFileInput(doc, (content) => { newDarkSvgData = content; diff --git a/styles.css b/styles.css index 84e93b8..7019d02 100644 --- a/styles.css +++ b/styles.css @@ -364,6 +364,16 @@ body.theme-dark .external-links-icon-badge-dark { .external-links-icon-desc { margin-bottom: 10px; } +.external-links-icon-upload-columns { + display: flex; + gap: 16px; +} + +.external-links-icon-upload-columns > .external-links-icon-upload-section { + flex: 1; + min-width: 0; +} + .external-links-icon-upload-section { margin-bottom: 16px; }