Use back button instead of breadcrumb for navigation

murilopolese · murilopolese · commit 90aa58f7bdc0 · 2023-05-02T20:06:47.000+02:00
diff --git a/index.js b/index.js
@@ -131,8 +131,8 @@ function createWindow () {
     }
   })
   // and load the index.html of the app.
-  win.loadFile('ui/editor/index.html')
-  // win.loadFile('ui/ftp/dist/index.html')
+  // win.loadFile('ui/editor/index.html')
+  win.loadFile('ui/ftp/dist/index.html')
 }
 
 // TODO: Loading splash screen
diff --git a/ui/ftp/components/diskView.tsx b/ui/ftp/components/diskView.tsx
@@ -6,6 +6,7 @@ import {
 } from '../main.type.ts'
 
 import BreadCrumb from './ui/BreadCrumb'
+import NavigateUp from './ui/NavigateUp'
 
 type DiskViewParams = {
   waiting: Boolean,
@@ -54,10 +55,8 @@ const DiskView: React.FC = ({ logic }) => {
         <div className="toolbar row full-width">
             <button onClick={openFolder}>Select folder</button>
         </div>
-        <div className="row full-width navigation">
-          {BreadCrumb(diskPath, navigate)}
-        </div>
         <div className="column full-width full-height list">
+          {NavigateUp(diskPath, navigate)}
           {diskFiles.map(ListItem)}
         </div>
       </div>
diff --git a/ui/ftp/components/serialView.tsx b/ui/ftp/components/serialView.tsx
@@ -7,6 +7,7 @@ import {
 } from '../main.type.ts'
 
 import BreadCrumb from './ui/BreadCrumb'
+import NavigateUp from './ui/NavigateUp'
 
 type SerialParams = () => {
   availableDevices: AvailableDevices[]
@@ -62,6 +63,7 @@ const SerialView: React.FC = ({ logic }) => {
     )
   }
 
+
   return (
     <div className="column file-panel">
       <div className="toolbar row">
@@ -70,10 +72,8 @@ const SerialView: React.FC = ({ logic }) => {
           {availableDevices.map((d, i) => <option key={i}>{d.path}</option>)}
         </select>
       </div>
-      <div className="row full-width navigation">
-        {BreadCrumb(serialPath, navigate)}
-      </div>
       <div className="column full-width list full-height">
+        {NavigateUp(serialPath, navigate)}
         {serialFiles.map(ListItem)}
       </div>
     </div>
diff --git a/ui/ftp/components/ui/BreadCrumb.tsx b/ui/ftp/components/ui/BreadCrumb.tsx
@@ -6,9 +6,6 @@ const BreadCrumb = (path: string, navigate: (p: string) => void) => {
       path.split('/').filter(s => s !== '')
     )
   }
-  if (pathArray.length > 2) {
-    pathArray = pathArray.slice(-3)
-  }
   return pathArray.map((name, i) => {
     const crumbs = path.split('/').filter(c => c !== '')
     const p = '/' + crumbs.slice(0, i).join('/')
diff --git a/ui/ftp/components/ui/NavigateUp.tsx b/ui/ftp/components/ui/NavigateUp.tsx
@@ -0,0 +1,16 @@
+
+const NavigateUp = (path: string, navigate: (p: string) => void) => {
+  if (!path || path === '/') return null
+  const navigateUp = () => {
+    const pathArray = path.split('/').filter(p => p)
+    pathArray.pop()
+    navigate('/'+pathArray.join('/'))
+  }
+  return (
+    <div className={`list-item`} onClick={navigateUp}>
+      <div className="checkbox">←</div><span>Back</span>
+    </div>
+  )
+}
+
+export default NavigateUp
diff --git a/ui/ftp/main.scss b/ui/ftp/main.scss
@@ -111,16 +111,29 @@ main {
   background: var(--dark-tone);
   padding: var(--base-size);
   padding-bottom: var(--base-size);
-  overflow: hidden;
+  overflow: overlay;
   & > * {
     margin-right: 10px;
   }
 }
 
 .breadcrumb {
+  position: relative;
   padding: 0.5em;
+  padding-left: 2.5rem;
   background: var(--light-tone);
   cursor: pointer;
+  overflow: hidden;
+  height: 2rem;
+  text-overflow: ellipsis;
+}
+
+.breadcrumb::after {
+  content: '📁';
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .file-management {

Original file line number	Diff line number	Diff line change
`@@ -131,8 +131,8 @@ function createWindow () {`
`131`	`131`	`}`
`132`	`132`	`})`
`133`	`133`	`// and load the index.html of the app.`
`134`		`- win.loadFile('ui/editor/index.html')`
`135`		`- // win.loadFile('ui/ftp/dist/index.html')`
	`134`	`+ // win.loadFile('ui/editor/index.html')`
	`135`	`+ win.loadFile('ui/ftp/dist/index.html')`
`136`	`136`	`}`
`137`	`137`
`138`	`138`	`// TODO: Loading splash screen`
Original file line number	Diff line number	Diff line change
`@@ -6,9 +6,6 @@ const BreadCrumb = (path: string, navigate: (p: string) => void) => {`
`6`	`6`	`path.split('/').filter(s => s !== '')`
`7`	`7`	`)`
`8`	`8`	`}`
`9`		`- if (pathArray.length > 2) {`
`10`		`- pathArray = pathArray.slice(-3)`
`11`		`- }`
`12`	`9`	`return pathArray.map((name, i) => {`
`13`	`10`	`const crumbs = path.split('/').filter(c => c !== '')`
`14`	`11`	`const p = '/' + crumbs.slice(0, i).join('/')`