ux: on desktop let always navigate folders by a simple click
Massimo Melina committed
Apr 3, 2023 at 22:15 UTC
4eaaf365ec4a82ca612816cd9d299ad5d3d71730
2 files changed
+18
-3
frontend/src/BrowseFiles.ts
+10
-1
@@ -182,6 +182,7 @@ const PAGE_SEPARATOR_CLASS = 'page-separator'
182
const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) => {
183
const { name, uri, isFolder, separator } = entry
184
const base = usePath()
185
+ const [menuBtn, setMenuBtn] = useState(false)
186
const { showFilter, selected, can_delete } = useSnapState()
187
const containerDir = isFolder ? '' : uri.substring(0, uri.lastIndexOf('/')+1)
188
let className = isFolder ? 'folder' : 'file'
@@ -199,7 +200,15 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
200
delete state.selected[uri]
201
},
202
}),
202
- isFolder ? h(Link, { to: base + uri, onClick }, ico, entry.n.slice(0,-1))
203
+ isFolder
204
+ ? h('span', menuOnLink && { // container to handle mouse over for both children. Not using ternary because of ts
205
+ style: menuBtn ? { padding: '1em', margin: '-1em' } : {}, // add margin to avoid leaving the state unintentionally
206
+ onMouseEnter(){ setMenuBtn(true) },
207
+ onMouseLeave(){ setMenuBtn(false) },
208
+ } || {},
209
+ h(Link, { to: base + uri, onClick: menuOnLink && isMobile() ? onClick : undefined }, ico, entry.n.slice(0,-1)),
210
+ menuBtn && h('button', { className: 'popup-menu-button', onClick: openFileMenu }, hIcon('menu'), t`Menu`)
211
+ )
212
: h(Fragment, {},
213
containerDir && h(Link, { to: base + containerDir, className:'container-folder' }, ico, pathDecode(containerDir) ),
214
h('a', { href: uri, onClick }, !containerDir && ico, name)
frontend/src/index.scss
+8
-2
@@ -103,6 +103,7 @@ button {
103
border-radius: 0.3em;
104
vertical-align: middle;
105
cursor: pointer;
106
+ &:hover { outline: 1px solid var(--mild-contrast); }
107
}
108
button.toggled {
109
color: #fff;
@@ -150,10 +151,10 @@ header {
151
height: 0 !important;
152
padding: 0 !important;
153
overflow: hidden !important;
153
- transition: all .5s;
154
+ transition: flex .5s;
155
}
156
.show-sliding {
156
- transition: all .5s;
157
+ transition: flex .5s;
158
overflow: clip;
159
flex: 1;
160
white-space: nowrap;
@@ -385,6 +386,11 @@ button label {
386
387
.miss-perm { margin: .3em }
388
389
+.popup-menu-button {
390
+ font-size: .8em; padding: .2em .3em; position: absolute; opacity: .8;
391
+ &:hover { opacity: 1 }
392
+}
393
+
394
.file-dialog .dialog-content { min-width: calc(100% - 1em); } /* effective and nicer on short names */
395
.file-dialog .dialog { min-width: 13em; } /* more room for title */
396
.file-dialog-properties {