feat: 添加终端样式预览按钮
This commit is contained in:
Baobhan Sith
@@ -910,12 +910,69 @@ const handleFocusAndSelect = (event: FocusEvent) => {
|
||||
}
|
||||
};
|
||||
|
||||
const modalRootRef = ref<HTMLDivElement | null>(null);
|
||||
|
||||
// Store original styles to revert back
|
||||
let originalModalRootBackgroundColor: string | null = null;
|
||||
let originalModalContentOpacity: string | null = null;
|
||||
let originalModalRootTransition: string | null = null;
|
||||
let originalModalContentTransition: string | null = null;
|
||||
|
||||
const handlePreviewButtonMouseDown = () => {
|
||||
if (modalRootRef.value) {
|
||||
const modalContentElement = modalRootRef.value.firstElementChild as HTMLElement;
|
||||
|
||||
// Save original styles if not already saved (for this mousedown session)
|
||||
// These are saved once per mousedown-mouseup cycle
|
||||
if (originalModalRootBackgroundColor === null) { // Check one to assume all are not set
|
||||
originalModalRootBackgroundColor = window.getComputedStyle(modalRootRef.value).backgroundColor;
|
||||
originalModalRootTransition = modalRootRef.value.style.transition; // Save inline or computed transition
|
||||
if (modalContentElement) {
|
||||
originalModalContentOpacity = window.getComputedStyle(modalContentElement).opacity;
|
||||
originalModalContentTransition = modalContentElement.style.transition; // Save inline or computed transition
|
||||
}
|
||||
}
|
||||
|
||||
// Apply transparency effects
|
||||
// Make the background overlay (modalRootRef) transparent
|
||||
modalRootRef.value.style.transition = 'background-color 0.05s ease-out';
|
||||
modalRootRef.value.style.backgroundColor = 'transparent';
|
||||
|
||||
if (modalContentElement) {
|
||||
// Make the modal content (the box including the button) completely transparent
|
||||
modalContentElement.style.transition = 'opacity 0.05s ease-out';
|
||||
modalContentElement.style.opacity = '0'; // Changed from 0.05 to 0
|
||||
}
|
||||
|
||||
const restoreModalAppearance = () => {
|
||||
if (modalRootRef.value) {
|
||||
modalRootRef.value.style.backgroundColor = originalModalRootBackgroundColor || ''; // Revert to original or default
|
||||
modalRootRef.value.style.transition = originalModalRootTransition || ''; // Revert to original or default
|
||||
}
|
||||
if (modalContentElement) {
|
||||
modalContentElement.style.opacity = originalModalContentOpacity || '1'; // Revert to original or default
|
||||
modalContentElement.style.transition = originalModalContentTransition || ''; // Revert to original or default
|
||||
}
|
||||
|
||||
// Reset stored original styles for the next interaction cycle
|
||||
originalModalRootBackgroundColor = null;
|
||||
originalModalContentOpacity = null;
|
||||
originalModalRootTransition = null;
|
||||
originalModalContentTransition = null;
|
||||
|
||||
document.removeEventListener('mouseup', restoreModalAppearance);
|
||||
};
|
||||
// Listen for mouseup anywhere on the document to restore
|
||||
document.addEventListener('mouseup', restoreModalAppearance, { once: true });
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<!-- 添加 md: 前缀以应用到中等及以上屏幕，小屏幕默认全屏 -->
|
||||
<div class="fixed inset-0 bg-black/60 flex justify-center items-center z-[1000] p-2 md:p-4" @click.self="closeCustomizer">
|
||||
<div ref="modalRootRef" class="fixed inset-0 bg-black/60 flex justify-center items-center z-[1000] p-2 md:p-4" @click.self="closeCustomizer">
|
||||
<!-- 小屏幕默认 w-full h-full，md 及以上恢复原状 -->
|
||||
<div class="bg-background text-foreground rounded-lg shadow-lg w-full h-full md:w-[90%] md:max-w-[800px] md:h-[85vh] md:max-h-[700px] flex flex-col overflow-hidden">
|
||||
<header class="flex justify-between items-center px-4 py-3 border-b border-border bg-header flex-shrink-0">
|
||||
@@ -1099,19 +1156,29 @@ const handleFocusAndSelect = (event: FocusEvent) => {
|
||||
]"
|
||||
>
|
||||
{{ t('styleCustomizer.applyButton', 'Apply') }}
|
||||
</button>
|
||||
<button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
|
||||
:class="[
|
||||
'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
|
||||
theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
|
||||
]"
|
||||
>{{ t('common.edit') }}</button>
|
||||
<button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
|
||||
:class="[
|
||||
'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
|
||||
theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20'
|
||||
]"
|
||||
>{{ t('common.delete') }}</button>
|
||||
</button>
|
||||
<button
|
||||
@mousedown="handlePreviewButtonMouseDown"
|
||||
:title="t('styleCustomizer.previewThemeTooltip', 'Hold to preview transparency')"
|
||||
:class="[
|
||||
'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap',
|
||||
theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
|
||||
]"
|
||||
>
|
||||
{{ t('styleCustomizer.previewButton', 'Preview') }}
|
||||
</button>
|
||||
<button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
|
||||
:class="[
|
||||
'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
|
||||
theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
|
||||
]"
|
||||
>{{ t('common.edit') }}</button>
|
||||
<button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
|
||||
:class="[
|
||||
'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
|
||||
theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20'
|
||||
]"
|
||||
>{{ t('common.delete') }}</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user