From f332a5930f62fea4ce71e3e323ceb8baa73c0d5c Mon Sep 17 00:00:00 2001 From: Austin Akers Date: Tue, 11 Feb 2025 15:34:59 -0800 Subject: [PATCH 1/5] collapsable folders are possible in file explorer --- src/assets/styles/components/_web-ide.scss | 70 ++++++++++++++++--- src/components/auth/AuthLayout.jsx | 2 +- .../manage/applicationsEditor/FileBrowser.js | 21 ++++-- 3 files changed, 76 insertions(+), 17 deletions(-) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 352929431..9b280bf91 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -81,7 +81,7 @@ padding: 0 !important; padding-inline-start: 8px !important; - .folder-container { + .file-container { button::before, i::before { background: transparent !important; @@ -109,15 +109,6 @@ text-align: left; white-space: nowrap; - .project-icon, - .package-icon { - color: $color-success; - } - - .folder-icon { - color: $color-info; - } - .filetype-js { color: $color-warning; } @@ -130,6 +121,59 @@ color: $color-lightgrey; } + &.file-selected { + .filename-text { + color: $color-white !important; + + &::after { + content: '\f35a' !important; + font-family: 'Font Awesome 5 Free', sans-serif !important; + font-size: 16px; + position: absolute; + right: 8px; + } + } + } + } + } + + .folder-container { + button::before, + i::before { + background: transparent !important; + border: 0; + font-size: 16px !important; + margin: 0; + outline: none !important; + padding: 0; + } + + .package-text, + .filename-text { + color: $color-grey !important; + font-size: 14px !important; + padding-left: 8px; + } + + .file, + .package { + background: transparent; + border: 0; + margin: 1px 0; + outline: none !important; // TODO: fix this because it is not accessible; style differently + padding: 3px; + text-align: left; + white-space: nowrap; + + .project-icon, + .package-icon { + color: $color-success; + } + + .folder-icon { + color: $color-info; + } + &.folder-selected { .filename-text { color: $color-white !important; @@ -158,6 +202,12 @@ } } } + .folder-open ~ li { + display: block; + } + .folder-closed ~ li { + display: none; + } } } } diff --git a/src/components/auth/AuthLayout.jsx b/src/components/auth/AuthLayout.jsx index 5516514b2..038237ebf 100644 --- a/src/components/auth/AuthLayout.jsx +++ b/src/components/auth/AuthLayout.jsx @@ -1,7 +1,7 @@ import { Outlet } from 'react-router'; import { Col, Container, Row } from 'reactstrap'; -function AuthLayout({ children }) { +function AuthLayout() { return ( diff --git a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js index 9c9094a44..6c0b53a79 100644 --- a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js +++ b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js @@ -43,9 +43,15 @@ const isFolder = (entry) => Boolean(entry.entries); function ProjectIcon() { return ; } -function FolderIcon({ toggleClosed }) { - // eslint-disable-next-line - return ; +function FolderIcon({ toggleClosed, isOpen }) { + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions + + ); } function FiletypeIcon({ extension }) { @@ -99,7 +105,6 @@ function File({ directoryEntry, selectedFile, selectedFolder, onFileSelect, onFo const deployFileIconClass = 'deploy-project'; const isFileSelected = directoryEntry.path === selectedFile; const isFolderSelected = directoryEntry.path === selectedFolder?.path; - // file receives open/close toggle func from // parent. if it's a dir, calls toggle func on click // if it's a flat file, calls onFileSelect so @@ -119,7 +124,6 @@ function File({ directoryEntry, selectedFile, selectedFolder, onFileSelect, onFo // that we don't untoggle directory selection; leave selected if icon clicked. const iconWasClicked = e.target.classList.contains(renameFileIconClass) || e.target.classList.contains(deployFileIconClass); - // if icon's clicked, select, but don't unselect. // if (iconWasClicked) return; @@ -188,7 +192,12 @@ function Folder({ { // FIXME: don't hardcode 'components', get from root .name property of fileTree. directoryEntry.name !== 'components' ? ( -
  • +
  • {directoryEntry.package ? ( Date: Tue, 11 Feb 2025 15:46:18 -0800 Subject: [PATCH 2/5] collapsable folders are possible in file explorer --- .../functions/manage/applicationsEditor/FileBrowser.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js index 6c0b53a79..8347098e3 100644 --- a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js +++ b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js @@ -45,11 +45,16 @@ function ProjectIcon() { } function FolderIcon({ toggleClosed, isOpen }) { return ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions + // TODO: A11y on this is not good at all..... Need to refactor the file tree to make the file tree more accessible for ALL users. ); } From b5760383965cea899d5660a3cae84203750d1067 Mon Sep 17 00:00:00 2001 From: Austin Akers Date: Tue, 11 Feb 2025 16:07:25 -0800 Subject: [PATCH 3/5] Version bump -> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f18faf8f5..c89c55846 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "harperdb-studio", - "version": "4.8.14", + "version": "4.8.15", "description": "A UI for HarperDB", "deploymentUrl": "studio.harperdb.io", "private": true, From 8ba6bee1ae7cf96a641715ffbf6d3474e6f17aad Mon Sep 17 00:00:00 2001 From: Austin Akers Date: Wed, 12 Feb 2025 10:54:29 -0800 Subject: [PATCH 4/5] allowed for projects to be collapsable --- .../manage/applicationsEditor/FileBrowser.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js index 8347098e3..51b2e9a3f 100644 --- a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js +++ b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js @@ -40,8 +40,19 @@ function directorySortComparator(a, b) { const isFolder = (entry) => Boolean(entry.entries); -function ProjectIcon() { - return ; +function ProjectIcon({ toggleClosed, isOpen }) { + return ( + + ); } function FolderIcon({ toggleClosed, isOpen }) { return ( @@ -176,7 +187,7 @@ function Folder({ selectedFolder, selectedPackage, }) { - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(false); const entries = [...(directoryEntry.entries || [])].sort(directorySortComparator); const fileExtension = parseFileExtension(directoryEntry.name); @@ -185,7 +196,7 @@ function Folder({ // top-level dir === package // FolderIcon/PackageIcon is func so we can give it open args now, but instantiate it later. if (directoryEntry.path.split('/').length === 2) { - Icon = () => ProjectIcon(); + Icon = () => ProjectIcon({ isOpen: open, toggleClosed: () => setOpen(!open) }); } else if (directoryEntry.entries) { Icon = () => FolderIcon({ isOpen: open, toggleClosed: () => setOpen(!open) }); } else { From 937a306038bbb3afa28f501c08d4b671b374f1c6 Mon Sep 17 00:00:00 2001 From: Austin Akers Date: Tue, 18 Feb 2025 13:20:25 -0800 Subject: [PATCH 5/5] set default folder/file state to open --- .../instance/functions/manage/applicationsEditor/FileBrowser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js index 51b2e9a3f..a9fa1ed87 100644 --- a/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js +++ b/src/components/instance/functions/manage/applicationsEditor/FileBrowser.js @@ -187,7 +187,7 @@ function Folder({ selectedFolder, selectedPackage, }) { - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(true); const entries = [...(directoryEntry.entries || [])].sort(directorySortComparator); const fileExtension = parseFileExtension(directoryEntry.name);