ux: let always navigate folders by a simple click also on mobile
Massimo Melina committed
Apr 4, 2023 at 11:05 UTC
78a5f6225135cf31105e802014950d27e8e2a264
2 files changed
+5
-3
frontend/src/BrowseFiles.ts
+4
-3
@@ -191,6 +191,7 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
191
const ico = hIcon(isFolder ? 'folder' : 'file')
192
const menuOnLink = getHFS().fileMenuOnLink
193
const onClick = menuOnLink && openFileMenu || undefined
194
+ const mobile = isMobile()
195
return h('li', { className, label: separator },
196
showFilter && h(Checkbox, {
197
value: selected[uri],
@@ -201,12 +202,12 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
202
},
203
}),
204
isFolder
204
- ? h('span', menuOnLink && { // container to handle mouse over for both children. Not using ternary because of ts
205
+ ? h('span', menuOnLink && !mobile && { // container to handle mouse over for both children. Not using ternary because of ts
206
style: menuBtn ? { padding: '1em', margin: '-1em' } : {}, // add margin to avoid leaving the state unintentionally
207
onMouseEnter(){ setMenuBtn(true) },
208
onMouseLeave(){ setMenuBtn(false) },
209
} || {},
209
- h(Link, { to: base + uri, onClick: menuOnLink && isMobile() ? onClick : undefined }, ico, entry.n.slice(0,-1)),
210
+ h(Link, { to: base + uri }, ico, entry.n.slice(0,-1)),
211
menuBtn && h('button', { className: 'popup-menu-button', onClick: openFileMenu }, hIcon('menu'), t`Menu`)
212
)
213
: h(Fragment, {},
@@ -216,7 +217,7 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
217
h(CustomCode, { name: 'afterEntryName', props: { entry } }),
218
h('div', { className: 'entry-panel' },
219
h(EntryProps, entry),
219
- !menuOnLink && h('button', { className: 'file-menu-button', onClick: openFileMenu }, hIcon('menu')),
220
+ (!menuOnLink || isFolder && mobile) && h('button', { className: 'file-menu-button', onClick: openFileMenu }, hIcon('menu')),
221
),
222
h('div'),
223
)
frontend/src/index.scss
+1
@@ -253,6 +253,7 @@ ul.dir {
253
align-items: center;
254
& .file-menu-button {
255
@extend .icon-button;
256
+ margin: -3px 0 -3px 0.4em;
257
}
258
& .entry-props {
259
font-size: 90%;