diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx index a0c9ea4..6b3756e 100644 --- a/src/components/ui/icons.tsx +++ b/src/components/ui/icons.tsx @@ -182,6 +182,28 @@ export function IconTrash2({ size = 20, ...props }: IconProps) { ); } +export function IconMaximize2({ size = 20, ...props }: IconProps) { + return ( + + + + + + + ); +} + +export function IconMinimize2({ size = 20, ...props }: IconProps) { + return ( + + + + + + + ); +} + export function IconPlus({ size = 20, ...props }: IconProps) { return ( diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index c64667c..97b64fc 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -732,6 +732,8 @@ "title": "Logs Viewer", "refresh_button": "Refresh Logs", "clear_button": "Clear Logs", + "fullscreen_button": "Full Screen", + "exit_fullscreen_button": "Exit Full Screen", "download_button": "Download Logs", "error_log_button": "Select Error Log", "error_logs_modal_title": "Error Request Logs", diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index 668ba6e..f79d2af 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -729,6 +729,8 @@ "title": "Просмотр журналов", "refresh_button": "Обновить журналы", "clear_button": "Очистить журналы", + "fullscreen_button": "На весь экран", + "exit_fullscreen_button": "Выйти из полноэкранного режима", "download_button": "Скачать журналы", "error_log_button": "Выбрать журнал ошибок", "error_logs_modal_title": "Журналы ошибок запросов", diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index 439d5c6..dd0907a 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -732,6 +732,8 @@ "title": "日志查看", "refresh_button": "刷新日志", "clear_button": "清空日志", + "fullscreen_button": "全屏显示", + "exit_fullscreen_button": "退出全屏", "download_button": "下载日志", "error_log_button": "选择错误日志", "error_logs_modal_title": "错误请求日志", diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json index b67890d..e690579 100644 --- a/src/i18n/locales/zh-TW.json +++ b/src/i18n/locales/zh-TW.json @@ -758,6 +758,8 @@ "title": "記錄檢視", "refresh_button": "重新整理記錄", "clear_button": "清空記錄", + "fullscreen_button": "全螢幕顯示", + "exit_fullscreen_button": "退出全螢幕", "download_button": "下載記錄", "error_log_button": "選擇錯誤記錄", "error_logs_modal_title": "錯誤請求記錄", diff --git a/src/pages/LogsPage.module.scss b/src/pages/LogsPage.module.scss index 570c969..2c5f55e 100644 --- a/src/pages/LogsPage.module.scss +++ b/src/pages/LogsPage.module.scss @@ -722,3 +722,47 @@ height: 280px; } } + +.logCardFullscreen { + position: fixed; + inset: 0; + z-index: $z-modal; + min-height: 0; + width: 100vw; + height: 100vh; + padding: $spacing-lg; + border-radius: 0; + border: none; + overflow: hidden; + background: var(--bg-primary); + + @include mobile { + padding: $spacing-md; + min-height: 0; + overflow: hidden; + } +} + +:global(body.logs-fullscreen-active) :global(.page-transition__layer) { + transform: none !important; +} + +.logPanelFullscreen { + flex: 1 1 auto; + min-height: 0; + height: auto; + max-height: none; + resize: none; + + @include tablet { + min-height: 0; + max-height: none; + } + + @include mobile { + flex: 1 1 auto; + min-height: 0; + height: auto; + max-height: none; + } +} diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx index f6b738c..a0c5270 100644 --- a/src/pages/LogsPage.tsx +++ b/src/pages/LogsPage.tsx @@ -7,12 +7,15 @@ import { EmptyState } from '@/components/ui/EmptyState'; import { Input } from '@/components/ui/Input'; import { Modal } from '@/components/ui/Modal'; import { ToggleSwitch } from '@/components/ui/ToggleSwitch'; +import { lockScroll, unlockScroll } from '@/components/ui/scrollLock'; import { IconChevronDown, IconChevronUp, IconCode, IconDownload, IconEyeOff, + IconMaximize2, + IconMinimize2, IconRefreshCw, IconSearch, IconSlidersHorizontal, @@ -91,6 +94,7 @@ export function LogsPage() { const [errorLogsError, setErrorLogsError] = useState(''); const [requestLogId, setRequestLogId] = useState(null); const [requestLogDownloading, setRequestLogDownloading] = useState(false); + const [fullscreenLogs, setFullscreenLogs] = useState(false); const logScrollerRef = useRef | null>(null); const longPressRef = useRef<{ @@ -450,6 +454,27 @@ export function LogsPage() { }; }, []); + useEffect(() => { + if (!fullscreenLogs) return; + + document.body.classList.add('logs-fullscreen-active'); + lockScroll(); + + const handleEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setFullscreenLogs(false); + } + }; + + document.addEventListener('keydown', handleEscape); + + return () => { + document.removeEventListener('keydown', handleEscape); + document.body.classList.remove('logs-fullscreen-active'); + unlockScroll(); + }; + }, [fullscreenLogs]); + return (

{t('logs.title')}

@@ -465,7 +490,10 @@ export function LogsPage() { @@ -473,67 +501,75 @@ export function LogsPage() {
{activeTab === 'logs' && ( - + {error &&
{error}
}
-
- setSearchQuery(e.target.value)} - placeholder={t('logs.search_placeholder')} - className={styles.searchInput} - rightElement={ - searchQuery ? ( - - ) : ( - - ) - } - /> -
+ {!fullscreenLogs && ( + <> +
+ setSearchQuery(e.target.value)} + placeholder={t('logs.search_placeholder')} + className={styles.searchInput} + rightElement={ + searchQuery ? ( + + ) : ( + + ) + } + /> +
-
- -
+ +
+ + )} - {structuredFiltersExpanded && ( + {!fullscreenLogs && structuredFiltersExpanded && (
{t('logs.filter_method')} @@ -690,6 +726,29 @@ export function LogsPage() { {t('logs.clear_button')} +
@@ -698,7 +757,9 @@ export function LogsPage() { ) : logState.buffer.length > 0 && filteredLines.length > 0 ? (
{scroller.canLoadMore && (