Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix double scrollbars in dir preview (#932)

Browse Source 
Phew this took a while, but I think it's a good compromise. All the
scrolling for a preview view now must happen inside the individual
views, rather than at the root level. Now, the scrollbars render in the
right places and are always visible inside the block. I don't love the
blurred header for the table, but it was make it blurry or make it even
more opaque, which would ruin the transparency
This commit is contained in:
Evan Simkowitz 2024-10-02 17:21:34 -07:00 committed by GitHub
parent c34fa963a7
commit 1737c686c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/app/view/preview/directorypreview.less
View File

@ -7,18 +7,28 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
--min-row-width: 35rem;
.dir-table { .dir-table {
height: 100%; height: 100%;
min-width: 600px; width: 100%;
--col-size-size: 0.2rem; --col-size-size: 0.2rem;
border-radius: 3px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font: var(--base-font);
&:not([data-scroll-height="0"]) .dir-table-head {
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(4px);
}
.dir-table-head { .dir-table-head {
position: sticky;
top: 0;
z-index: 10;
width: fit-content;
border-bottom: 1px solid var(--border-color);
.dir-table-head-row { .dir-table-head-row {
display: flex; display: flex;
border-bottom: 1px solid var(--border-color); min-width: var(--min-row-width);
padding: 4px 6px; padding: 4px 6px;
font-size: 0.75rem; font-size: 0.75rem;
@ -68,10 +78,8 @@
} }
.dir-table-body { .dir-table-body {
flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
.dir-table-body-search-display { .dir-table-body-search-display {
display: flex; display: flex;
border-radius: 3px; border-radius: 3px;
@ -94,6 +102,7 @@
align-items: center; align-items: center;
border-radius: 5px; border-radius: 5px;
padding: 0 6px; padding: 0 6px;
min-width: var(--min-row-width);
&.focused { &.focused {
background-color: rgb(from var(--accent-color) r g b / 0.5); background-color: rgb(from var(--accent-color) r g b / 0.5);

137
frontend/app/view/preview/directorypreview.tsx
View File

@ -3,10 +3,10 @@
import { ContextMenuModel } from "@/app/store/contextmenu"; import { ContextMenuModel } from "@/app/store/contextmenu";
import { atoms, createBlock, getApi } from "@/app/store/global"; import { atoms, createBlock, getApi } from "@/app/store/global";
import { FileService } from "@/app/store/services";
import type { PreviewModel } from "@/app/view/preview/preview"; import type { PreviewModel } from "@/app/view/preview/preview";
import * as services from "@/store/services"; import { checkKeyPressed, isCharacterKeyEvent } from "@/util/keyutil";
import * as keyutil from "@/util/keyutil"; import { base64ToString, isBlank } from "@/util/util";
import * as util from "@/util/util";
import { import {
Column, Column,
Row, Row,
@ -19,14 +19,11 @@ import {
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import clsx from "clsx"; import clsx from "clsx";
import dayjs from "dayjs"; import dayjs from "dayjs";
import * as jotai from "jotai"; import { useAtom, useAtomValue } from "jotai";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { quote as shellQuote } from "shell-quote"; import { quote as shellQuote } from "shell-quote";
import { debounce } from "throttle-debounce";
import { OverlayScrollbars } from "overlayscrollbars";
import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
import "./directorypreview.less"; import "./directorypreview.less";
interface DirectoryTableProps { interface DirectoryTableProps {
@ -95,7 +92,7 @@ function getLastModifiedTime(unixMillis: number, column: Column<FileInfo, number
const iconRegex = /^[a-z0-9- ]+$/; const iconRegex = /^[a-z0-9- ]+$/;
function isIconValid(icon: string): boolean { function isIconValid(icon: string): boolean {
if (util.isBlank(icon)) { if (isBlank(icon)) {
return false; return false;
} }
return icon.match(iconRegex) != null; return icon.match(iconRegex) != null;
@ -134,11 +131,11 @@ function DirectoryTable({
setSelectedPath, setSelectedPath,
setRefreshVersion, setRefreshVersion,
}: DirectoryTableProps) { }: DirectoryTableProps) {
const fullConfig = jotai.useAtomValue(atoms.fullConfigAtom); const fullConfig = useAtomValue(atoms.fullConfigAtom);
const getIconFromMimeType = useCallback( const getIconFromMimeType = useCallback(
(mimeType: string): string => { (mimeType: string): string => {
while (mimeType.length > 0) { while (mimeType.length > 0) {
let icon = fullConfig.mimetypes?.[mimeType]?.icon ?? null; const icon = fullConfig.mimetypes?.[mimeType]?.icon ?? null;
if (isIconValid(icon)) { if (isIconValid(icon)) {
return `fa fa-solid fa-${icon} fa-fw`; return `fa fa-solid fa-${icon} fa-fw`;
} }
@ -149,10 +146,7 @@ function DirectoryTable({
[fullConfig.mimetypes] [fullConfig.mimetypes]
); );
const getIconColor = useCallback( const getIconColor = useCallback(
(mimeType: string): string => { (mimeType: string): string => fullConfig.mimetypes?.[mimeType]?.color ?? "inherit",
let iconColor = fullConfig.mimetypes?.[mimeType]?.color ?? "inherit";
return iconColor;
},
[fullConfig.mimetypes] [fullConfig.mimetypes]
); );
const columns = useMemo( const columns = useMemo(
@ -261,8 +255,25 @@ function DirectoryTable({
return colSizes; return colSizes;
}, [table.getState().columnSizingInfo]); }, [table.getState().columnSizingInfo]);
const osRef = useRef<OverlayScrollbarsComponentRef>();
const bodyRef = useRef<HTMLDivElement>();
const [scrollHeight, setScrollHeight] = useState(0);
const onScroll = useCallback(
debounce(2, () => {
setScrollHeight(osRef.current.osInstance().elements().viewport.scrollTop);
}),
[]
);
return ( return (
<div className="dir-table" style={{ ...columnSizeVars }}> <OverlayScrollbarsComponent
options={{ scrollbars: { autoHide: "leave" } }}
events={{ scroll: onScroll }}
className="dir-table"
style={{ ...columnSizeVars }}
ref={osRef}
data-scroll-height={scrollHeight}
>
<div className="dir-table-head"> <div className="dir-table-head">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<div className="dir-table-head-row" key={headerGroup.id}> <div className="dir-table-head-row" key={headerGroup.id}>
@ -295,6 +306,7 @@ function DirectoryTable({
</div> </div>
{table.getState().columnSizingInfo.isResizingColumn ? ( {table.getState().columnSizingInfo.isResizingColumn ? (
<MemoizedTableBody <MemoizedTableBody
bodyRef={bodyRef}
model={model} model={model}
data={data} data={data}
table={table} table={table}
@ -304,9 +316,11 @@ function DirectoryTable({
setSearch={setSearch} setSearch={setSearch}
setSelectedPath={setSelectedPath} setSelectedPath={setSelectedPath}
setRefreshVersion={setRefreshVersion} setRefreshVersion={setRefreshVersion}
osRef={osRef.current}
/> />
) : ( ) : (
<TableBody <TableBody
bodyRef={bodyRef}
model={model} model={model}
data={data} data={data}
table={table} table={table}
@ -316,13 +330,15 @@ function DirectoryTable({
setSearch={setSearch} setSearch={setSearch}
setSelectedPath={setSelectedPath} setSelectedPath={setSelectedPath}
setRefreshVersion={setRefreshVersion} setRefreshVersion={setRefreshVersion}
osRef={osRef.current}
/> />
)} )}
</div> </OverlayScrollbarsComponent>
); );
} }
interface TableBodyProps { interface TableBodyProps {
bodyRef: React.RefObject<HTMLDivElement>;
model: PreviewModel; model: PreviewModel;
data: Array<FileInfo>; data: Array<FileInfo>;
table: Table<FileInfo>; table: Table<FileInfo>;
@ -332,48 +348,32 @@ interface TableBodyProps {
setSearch: (_: string) => void; setSearch: (_: string) => void;
setSelectedPath: (_: string) => void; setSelectedPath: (_: string) => void;
setRefreshVersion: React.Dispatch<React.SetStateAction<number>>; setRefreshVersion: React.Dispatch<React.SetStateAction<number>>;
osRef: OverlayScrollbarsComponentRef;
} }
function TableBody({ function TableBody({
bodyRef,
model, model,
data,
table, table,
search, search,
focusIndex, focusIndex,
setFocusIndex, setFocusIndex,
setSearch, setSearch,
setSelectedPath,
setRefreshVersion, setRefreshVersion,
osRef,
}: TableBodyProps) { }: TableBodyProps) {
const [bodyHeight, setBodyHeight] = useState(0); const dummyLineRef = useRef<HTMLDivElement>();
const warningBoxRef = useRef<HTMLDivElement>();
const dummyLineRef = useRef<HTMLDivElement>(null);
const parentRef = useRef<HTMLDivElement>(null);
const warningBoxRef = useRef<HTMLDivElement>(null);
const osInstanceRef = useRef<OverlayScrollbars>(null);
const rowRefs = useRef<HTMLDivElement[]>([]); const rowRefs = useRef<HTMLDivElement[]>([]);
const domRect = useDimensionsWithExistingRef(parentRef, 30); const conn = useAtomValue(model.connection);
const parentHeight = domRect?.height ?? 0;
const conn = jotai.useAtomValue(model.connection);
useEffect(() => { useEffect(() => {
if (dummyLineRef.current && data && parentRef.current) { if (focusIndex !== null && rowRefs.current[focusIndex] && bodyRef.current && osRef) {
const rowHeight = dummyLineRef.current.offsetHeight; const viewport = osRef.osInstance().elements().viewport;
const fullTBodyHeight = rowHeight * data.length;
const warningBoxHeight = warningBoxRef.current?.offsetHeight ?? 0;
const maxHeightLessHeader = parentHeight - warningBoxHeight;
const tbodyHeight = Math.min(maxHeightLessHeader, fullTBodyHeight);
setBodyHeight(tbodyHeight);
}
}, [data, parentHeight]);
useEffect(() => {
if (focusIndex !== null && rowRefs.current[focusIndex] && parentRef.current) {
const viewport = osInstanceRef.current.elements().viewport;
const viewportHeight = viewport.offsetHeight; const viewportHeight = viewport.offsetHeight;
const rowElement = rowRefs.current[focusIndex]; const rowElement = rowRefs.current[focusIndex];
const rowRect = rowElement.getBoundingClientRect(); const rowRect = rowElement.getBoundingClientRect();
const parentRect = parentRef.current.getBoundingClientRect(); const parentRect = bodyRef.current.getBoundingClientRect();
const viewportScrollTop = viewport.scrollTop; const viewportScrollTop = viewport.scrollTop;
const rowTopRelativeToViewport = rowRect.top - parentRect.top + viewportScrollTop; const rowTopRelativeToViewport = rowRect.top - parentRect.top + viewportScrollTop;
@ -387,7 +387,7 @@ function TableBody({
viewport.scrollTo({ top: rowBottomRelativeToViewport - viewportHeight }); viewport.scrollTo({ top: rowBottomRelativeToViewport - viewportHeight });
} }
} }
}, [focusIndex, parentHeight]); }, [focusIndex]);
const handleFileContextMenu = useCallback( const handleFileContextMenu = useCallback(
(e: any, path: string, mimetype: string) => { (e: any, path: string, mimetype: string) => {
@ -455,7 +455,7 @@ function TableBody({
menu.push({ menu.push({
label: "Delete File", label: "Delete File",
click: async () => { click: async () => {
await services.FileService.DeleteFile(conn, path).catch((e) => console.log(e)); await FileService.DeleteFile(conn, path).catch((e) => console.log(e));
setRefreshVersion((current) => current + 1); setRefreshVersion((current) => current + 1);
}, },
}); });
@ -492,12 +492,8 @@ function TableBody({
[setSearch, handleFileContextMenu, setFocusIndex, focusIndex] [setSearch, handleFileContextMenu, setFocusIndex, focusIndex]
); );
const handleScrollbarInitialized = (instance) => {
osInstanceRef.current = instance;
};
return ( return (
<div className="dir-table-body" ref={parentRef}> <div className="dir-table-body" ref={bodyRef}>
{search !== "" && ( {search !== "" && (
<div className="dir-table-body-search-display" ref={warningBoxRef}> <div className="dir-table-body-search-display" ref={warningBoxRef}>
<span>Searching for "{search}"</span> <span>Searching for "{search}"</span>
@ -507,18 +503,13 @@ function TableBody({
</div> </div>
</div> </div>
)} )}
<OverlayScrollbarsComponent <div className="dir-table-body-scroll-box">
options={{ scrollbars: { autoHide: "leave" } }} <div className="dummy dir-table-body-row" ref={dummyLineRef}>
events={{ initialized: handleScrollbarInitialized }} <div className="dir-table-body-cell">dummy-data</div>
>
<div className="dir-table-body-scroll-box" style={{ height: bodyHeight }}>
<div className="dummy dir-table-body-row" ref={dummyLineRef}>
<div className="dir-table-body-cell">dummy-data</div>
</div>
{table.getTopRows().map(displayRow)}
{table.getCenterRows().map((row, idx) => displayRow(row, idx + table.getTopRows().length))}
</div> </div>
</OverlayScrollbarsComponent> {table.getTopRows().map(displayRow)}
{table.getCenterRows().map((row, idx) => displayRow(row, idx + table.getTopRows().length))}
</div>
</div> </div>
); );
} }
@ -537,11 +528,11 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
const [focusIndex, setFocusIndex] = useState(0); const [focusIndex, setFocusIndex] = useState(0);
const [unfilteredData, setUnfilteredData] = useState<FileInfo[]>([]); const [unfilteredData, setUnfilteredData] = useState<FileInfo[]>([]);
const [filteredData, setFilteredData] = useState<FileInfo[]>([]); const [filteredData, setFilteredData] = useState<FileInfo[]>([]);
const fileName = jotai.useAtomValue(model.metaFilePath); const fileName = useAtomValue(model.metaFilePath);
const showHiddenFiles = jotai.useAtomValue(model.showHiddenFiles); const showHiddenFiles = useAtomValue(model.showHiddenFiles);
const [selectedPath, setSelectedPath] = useState(""); const [selectedPath, setSelectedPath] = useState("");
const [refreshVersion, setRefreshVersion] = jotai.useAtom(model.refreshVersion); const [refreshVersion, setRefreshVersion] = useAtom(model.refreshVersion);
const conn = jotai.useAtomValue(model.connection); const conn = useAtomValue(model.connection);
useEffect(() => { useEffect(() => {
model.refreshCallback = () => { model.refreshCallback = () => {
@ -554,8 +545,8 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
useEffect(() => { useEffect(() => {
const getContent = async () => { const getContent = async () => {
const file = await services.FileService.ReadFile(conn, fileName); const file = await FileService.ReadFile(conn, fileName);
const serializedContent = util.base64ToString(file?.data64); const serializedContent = base64ToString(file?.data64);
const content: FileInfo[] = JSON.parse(serializedContent); const content: FileInfo[] = JSON.parse(serializedContent);
setUnfilteredData(content); setUnfilteredData(content);
}; };
@ -574,19 +565,19 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
useEffect(() => { useEffect(() => {
model.directoryKeyDownHandler = (waveEvent: WaveKeyboardEvent): boolean => { model.directoryKeyDownHandler = (waveEvent: WaveKeyboardEvent): boolean => {
if (keyutil.checkKeyPressed(waveEvent, "Escape")) { if (checkKeyPressed(waveEvent, "Escape")) {
setSearchText(""); setSearchText("");
return; return;
} }
if (keyutil.checkKeyPressed(waveEvent, "ArrowUp")) { if (checkKeyPressed(waveEvent, "ArrowUp")) {
setFocusIndex((idx) => Math.max(idx - 1, 0)); setFocusIndex((idx) => Math.max(idx - 1, 0));
return true; return true;
} }
if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) { if (checkKeyPressed(waveEvent, "ArrowDown")) {
setFocusIndex((idx) => Math.min(idx + 1, filteredData.length - 1)); setFocusIndex((idx) => Math.min(idx + 1, filteredData.length - 1));
return true; return true;
} }
if (keyutil.checkKeyPressed(waveEvent, "Enter")) { if (checkKeyPressed(waveEvent, "Enter")) {
if (filteredData.length == 0) { if (filteredData.length == 0) {
return; return;
} }
@ -594,14 +585,14 @@ function DirectoryPreview({ model }: DirectoryPreviewProps) {
setSearchText(""); setSearchText("");
return true; return true;
} }
if (keyutil.checkKeyPressed(waveEvent, "Backspace")) { if (checkKeyPressed(waveEvent, "Backspace")) {
if (searchText.length == 0) { if (searchText.length == 0) {
return true; return true;
} }
setSearchText((current) => current.slice(0, -1)); setSearchText((current) => current.slice(0, -1));
return true; return true;
} }
if (keyutil.isCharacterKeyEvent(waveEvent)) { if (isCharacterKeyEvent(waveEvent)) {
setSearchText((current) => current + waveEvent.key); setSearchText((current) => current + waveEvent.key);
return true; return true;
} }

2
frontend/app/view/preview/preview.less
View File

@ -79,5 +79,5 @@
.full-preview-content { .full-preview-content {
flex-grow: 1; flex-grow: 1;
overflow-y: hidden; overflow: hidden;
} }