obsidian-plugin/moziar_obsidian-external-links-icon
1
0
Fork 0
mirror of https://github.com/moziar/obsidian-external-links-icon.git synced 2026-07-22 06:45:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: use different styles for mobile and desktop

Browse source 
- auto-update dark mode button
- remove dark mode icon tips
- display icon preview as a column on desktop
This commit is contained in:
moz 2026-06-12 21:26:02 +08:00
parent 83d490ad6a
commit fb1f3dc10c
4 changed files with 38 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lang/locale/en.ts
View file

@ -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',

2
src/lang/locale/zh-cn.ts
View file

@ -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': '上传暗色模式图标时，默认图标为必选',

38
src/ui.ts
View file

@ -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;

10
styles.css
View file

@ -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;
}