better code: css instead of js
Massimo Melina committed
May 19, 2023 at 16:23 UTC
64f701b772252ec4ec4a33cd735f40074029103b
2 files changed
+6
-7
frontend/src/BrowseFiles.ts
+2
-7
@@ -183,7 +183,6 @@ interface EntryProps { entry: DirEntry, midnight: Date, separator?: string }
183
const Entry = memo(({ entry, midnight, separator }: EntryProps) => {
184
const { uri, isFolder } = entry
185
const base = usePath()
186
- const [menuBtn, setMenuBtn] = useState(false)
186
const { showFilter, selected, can_delete } = useSnapState()
187
const containerDir = isFolder ? '' : uri.substring(0, uri.lastIndexOf('/')+1)
188
const containerName = containerDir && entry.n.slice(0, -entry.name.length)
@@ -206,13 +205,9 @@ const Entry = memo(({ entry, midnight, separator }: EntryProps) => {
205
},
206
}),
207
isFolder
209
- ? h('span', menuOnLink && !mobile && { // container to handle mouse over for both children. Not using ternary because of ts
210
- style: menuBtn ? { padding: '1em', margin: '-1em' } : {}, // add margin to avoid leaving the state unintentionally
211
- onMouseEnter(){ setMenuBtn(true) },
212
- onMouseLeave(){ setMenuBtn(false) },
213
- } || {},
208
+ ? h('span', { className: 'link-and-menu' }, // container to handle mouse over for both children
209
h(Link, { to: base + uri }, ico, entry.n.slice(0,-1)),
215
- menuBtn && h('button', { className: 'popup-menu-button', onClick: fileMenu }, hIcon('menu'), t`Menu`)
210
+ menuOnLink && h('button', { className: 'popup-menu-button', onClick: fileMenu }, hIcon('menu'), t`Menu`)
211
)
212
: h(Fragment, {},
213
containerDir && h(Link, { to: base + containerDir, className:'container-folder' }, ico, containerName),
frontend/src/index.scss
+4
@@ -236,6 +236,10 @@ ul.dir {
236
& input[type=checkbox] {
237
margin: 0 .8em;
238
}
239
+ & .link-and-menu {
240
+ &:not(:hover) .popup-menu-button { display: none; }
241
+ &:hover { padding: 1em; margin: -1em; } // add margin to avoid leaving the hover unintentionally
242
+ }
243
& a {
244
&:last-of-type {
245
word-break: break-word;