8000 Use back button instead of breadcrumb for navigation · arduino/lab-micropython-editor@90aa58f · GitHub
[go: up one dir, main page]
Skip to content

Commit 90aa58f

Browse files
murilopolesemurilopolese
committed
Use back button instead of breadcrumb for navigation
1 parent b1dde2e commit 90aa58f

File tree

6 files changed

+37
-12
lines changed

6 files changed

+37
-12
lines changed

‎index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@ function createWindow () {
131131
}
132132
})
133133
// 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')
136136
}
137137

138138
// TODO: Loading splash screen

‎ui/ftp/components/diskView.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from '../main.type.ts'
77

88
import BreadCrumb from './ui/BreadCrumb'
9+
import NavigateUp from './ui/NavigateUp'
910

1011
type DiskViewParams = {
1112
waiting: Boolean,
@@ -54,10 +55,8 @@ const DiskView: React.FC = ({ logic }) => {
5455
<div className="toolbar row full-width">
5556
<button onClick={openFolder}>Select folder</button>
5657
</div>
57-
<div className="row full-width navigation">
58-
{BreadCrumb(diskPath, navigate)}
59-
</div>
6058
<div className="column full-width full-height list">
59+
{NavigateUp(diskPath, navigate)}
6160
{diskFiles.map(ListItem)}
6261
</div>
6362
</div>

‎ui/ftp/components/serialView.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from '../main.type.ts'
88

99
import BreadCrumb from './ui/BreadCrumb'
10+
import NavigateUp from './ui/NavigateUp'
1011

1112
type SerialParams = () => {
1213
availableDevices: AvailableDevices[]
@@ -62,6 +63,7 @@ const SerialView: React.FC = ({ logic }) => {
6263
)
6364
}
6465

66+
6567
return (
6668
<div className="column file-panel">
6769
<div className="toolbar row">
@@ -70,10 +72,8 @@ const SerialView: React.FC = ({ logic }) => {
7072
{availableDevices.map((d, i) => <option key={i}>{d.path}</option>)}
7173
</select>
7274
</div>
73-
<div className="row full-width navigation">
74-
{BreadCrumb(serialPath, navigate)}
75-
</div>
7675
<div className="column full-width list full-height">
76+
{NavigateUp(serialPath, navigate)}
7777
{serialFiles.map(ListItem)}
7878
</div>
7979
</div>

‎ui/ftp/components/ui/BreadCrumb.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ const BreadCrumb = (path: string, navigate: (p: string) => void) => {
66
path.split('/').filter(s => s !== '')
77
)
88
}
9-
if (pathArray.length > 2) {
10-
pathArray = pathArray.slice(-3)
11-
}
129
return pathArray.map((name, i) => {
1310
const crumbs = path.split('/').filter(c => c !== '')
1411
const p = '/' + crumbs.slice(0, i).join('/')

‎ui/ftp/components/ui/NavigateUp.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
const NavigateUp = (path: string, navigate: (p: string) => void) => {
3+
if (!path || path === '/') return null
4+
const navigateUp = () => {
5+
const pathArray = path.split('/').filter(p => p)
6+
pathArray.pop()
7+
navigate('/'+pathArray.join('/'))
8+
}
9+
return (
10+
<div className={`list-item`} onClick={navigateUp}>
11+
<div className="checkbox">←</div><span>Back</span>
12+
</div>
13+
)
14+
}
15+
16+
export default NavigateUp

‎ui/ftp/main.scss

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,16 +111,29 @@ main {
111111
background: var(--dark-tone);
112112
padding: var(--base-size);
113113
padding-bottom: var(--base-size);
114-
overflow: hidden;
114+
overflow: overlay;
115115
& > * {
116116
margin-right: 10px;
117117
}
118118
}
119119

120120
.breadcrumb {
121+
position: relative;
121122
padding: 0.5em;
123+
padding-left: 2.5rem;
122124
background: var(--light-tone);
123125
cursor: pointer;
126+
overflow: hidden;
127+
height: 2rem;
128+
text-overflow: ellipsis;
129+
}
130+
131+
.breadcrumb::after {
132+
content: '📁';
133+
position: absolute;
134+
left: 0.5rem;
135+
top: 50%;
136+
transform: translateY(-50%);
124137
}
125138

126139
.file-management {

0 commit comments

Comments
 (0)
0