From f3c485ef6106b8dd6c2405b5bc3d35f044380963 Mon Sep 17 00:00:00 2001 From: Albrecht Degering Date: Tue, 21 Jul 2026 13:19:29 +0200 Subject: [PATCH] Use Core explorer work-surface styling --- webui/src/features/files/FilesPage.tsx | 2 +- webui/src/styles/file-manager.css | 228 ++----------------------- 2 files changed, 14 insertions(+), 216 deletions(-) diff --git a/webui/src/features/files/FilesPage.tsx b/webui/src/features/files/FilesPage.tsx index 43f8ae2..d31a965 100644 --- a/webui/src/features/files/FilesPage.tsx +++ b/webui/src/features/files/FilesPage.tsx @@ -1985,7 +1985,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut const currentFolderDropActive = currentFolderDropTarget ? dropTargetKey === dropTargetId(currentFolderDropTarget) : false; return ( -
+
{error && {error} } diff --git a/webui/src/styles/file-manager.css b/webui/src/styles/file-manager.css index 18628dd..85c8e3b 100644 --- a/webui/src/styles/file-manager.css +++ b/webui/src/styles/file-manager.css @@ -1,85 +1,6 @@ /* Files manager */ -.file-manager-page.file-manager-fullscreen { - position: relative; - display: grid; - grid-template-rows: 1fr; - height: calc(100vh - 115px); - padding: 0; - overflow: hidden; -} - -.file-manager-toolbar { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - padding: 10px 14px; - border-bottom: var(--border-line); - background: var(--panel-header); -} - -.file-manager-toolbar .button { - display: inline-flex; - align-items: center; - gap: 7px; -} - -.file-manager-shell { - display: grid; +.files-page .file-manager-shell { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); - min-height: 0; - height: 100%; - border: var(--border-line); - border-radius: 0; - overflow: hidden; - background: var(--panel); -} - -.file-list-panel { - display: flex; - flex-direction: column; - min-width: 0; - min-height: 0; - background: var(--panel); -} - -.file-list-sticky { - flex: 0 0 auto; - z-index: 2; - border-bottom: var(--border-line); - background: var(--panel-soft); -} - -.file-breadcrumbs { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 6px; - min-height: 32px; - padding: 10px 14px 6px; -} - -.file-breadcrumb, -.file-breadcrumb-segment { - display: inline-flex; - align-items: center; - gap: 5px; -} - -.file-breadcrumb { - border: 0; - background: transparent; - color: var(--text-strong); - cursor: pointer; - font-weight: 800; - padding: 4px 6px; - border-radius: 7px; -} - -.file-breadcrumb:hover:not(:disabled), -.file-breadcrumb:focus-visible { - background: var(--panel); - outline: none; } .file-search-row { @@ -90,53 +11,21 @@ padding: 4px 0 10px 14px; } -.file-list-meta { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - flex-wrap: wrap; - padding: 8px 14px; - border-top: var(--border-line); - color: var(--muted); - font-size: 12px; -} - -.file-list-drop-target { - position: relative; - flex: 1 1 auto; - min-height: 0; - overflow: auto; - transition: background-color .16s ease, box-shadow .16s ease; -} - .file-list-drop-target.is-active, .file-list-drop-target.is-drop-target { background: var(--line); box-shadow: inset 0 0 0 2px var(--line-dark); } -.file-list-table { +.files-page .file-list-table { min-width: 760px; } -.file-list-table-head, -.file-list-row { - display: grid; +.files-page .file-list-table-head, +.files-page .file-list-row, +.managed-pattern-results .file-list-table-head, +.managed-pattern-results .file-list-row { grid-template-columns: minmax(280px, 1fr) 120px 240px; - gap: 12px; - align-items: center; -} - -.file-list-table-head { - padding: 10px 14px; - border-top: var(--border-line); - background: var(--panel); - color: var(--muted); - font-size: 12px; - font-weight: 800; - letter-spacing: .04em; - text-transform: uppercase; } .file-list-table-head button { @@ -158,24 +47,6 @@ outline: none; } -.file-list-row { - min-height: 58px; - padding: 9px 14px; - border-bottom: var(--border-line); - cursor: default; - user-select: none; -} - -.file-list-row:focus-visible { - outline: 2px solid var(--line-dark); - outline-offset: -2px; -} - -.file-list-row:hover, -.file-list-row.is-selected { - background: var(--line); -} - .file-list-row.is-drop-target { background: var(--line); box-shadow: inset 0 0 0 2px var(--line-dark); @@ -191,43 +62,6 @@ background: transparent; } -.file-list-name-cell { - min-width: 0; -} - -.file-list-name { - display: inline-flex; - align-items: center; - gap: 10px; - max-width: 100%; - min-width: 0; - border: 0; - background: transparent; - color: var(--text); - cursor: default; - font: inherit; - text-align: left; - padding: 0; -} - -.file-list-name > span { - display: grid; - min-width: 0; - gap: 2px; -} - -.file-list-name strong, -.file-list-name small { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.file-list-name small { - color: var(--muted); - font-size: 12px; -} - .file-linkage-status { display: inline-flex; align-items: center; @@ -238,31 +72,10 @@ color: var(--text-strong); } -.file-row-icon { - color: var(--muted); - flex: 0 0 auto; -} - .folder-row .file-row-icon { color: var(--warning-deep); } -.file-row-tail { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - min-width: 0; - color: var(--muted); - font-size: 12px; -} - -.file-list-empty { - padding: 36px 20px; - color: var(--muted); - text-align: center; -} - .file-list-virtual-spacer { min-height: 0; pointer-events: none; @@ -724,25 +537,27 @@ } @media (max-width: 1050px) { - .file-manager-shell { + .files-page .file-manager-shell { grid-template-columns: 1fr; } - .file-tree-panel { + .files-page .file-tree-panel { max-height: 260px; border-right: 0; border-bottom: var(--border-line); } - .file-list-table-head { + .files-page .file-list-table-head, + .managed-pattern-results .file-list-table-head { display: none; } - .file-list-table { + .files-page .file-list-table { min-width: 0; } - .file-list-row { + .files-page .file-list-row, + .managed-pattern-results .file-list-row { grid-template-columns: 1fr; gap: 8px; } @@ -752,23 +567,6 @@ } } -.file-manager-shell.is-loading .file-tree-panel, -.file-manager-shell.is-loading .file-list-panel { - filter: blur(1.5px); - pointer-events: none; - user-select: none; -} - -.file-manager-loading-overlay { - position: absolute; - inset: 0; - z-index: 35; - display: grid; - place-items: center; - background: var(--panel-glass); - backdrop-filter: blur(1px); -} - .file-conflict-summary { display: grid; gap: 3px;