[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Improve focus behavior
+25
-6
+3
CHANGELOG.md
+3
CHANGELOG.md
+1
src/components/Filter.svelte
+1
src/components/Filter.svelte
+21
-6
src/components/Sidebar.svelte
+21
-6
src/components/Sidebar.svelte
···
18
18
const selectedList = $trackListsDetailsMap[$page.tracklist.id]
19
19
let prevent = true
20
20
if (e.key == 'Home') {
21
-
viewport.scrollTop = 0
21
+
// viewport.scrollTop = 0
22
22
} else if (e.key == 'End') {
23
-
viewport.scrollTop = viewport.scrollHeight
23
+
// viewport.scrollTop = viewport.scrollHeight
24
24
} else if (e.key == 'PageUp') {
25
-
viewport.scrollTop -= viewport.clientHeight
25
+
// viewport.scrollTop -= viewport.clientHeight
26
26
} else if (e.key == 'PageDown') {
27
-
viewport.scrollTop += viewport.clientHeight
27
+
// viewport.scrollTop += viewport.clientHeight
28
28
} else if (checkShortcut(e, 'ArrowLeft') && selectedList.kind === 'folder') {
29
29
hideFolder(selectedList.id)
30
30
} else if (checkShortcut(e, 'ArrowRight') && selectedList.kind === 'folder') {
···
87
87
}
88
88
}
89
89
}
90
+
91
+
/** Prevent focus weirdness */
92
+
function focuser() {
93
+
const scrollTop = contentElement.scrollTop
94
+
viewport.focus()
95
+
contentElement.scrollTop = scrollTop
96
+
scrollToActive()
97
+
}
90
98
</script>
91
99
92
100
<aside on:mousedown|self|preventDefault>
···
94
102
<div class="titlebar-spacer" />
95
103
{/if}
96
104
<div class="content" bind:this={contentElement}>
97
-
<Filter />
105
+
<Filter
106
+
on:focus={() => {
107
+
contentElement.scrollTop = 0
108
+
}}
109
+
/>
98
110
<div
99
111
class="items"
100
-
tabindex="0"
112
+
tabindex="-1"
101
113
on:keydown={handleKeydown}
102
114
bind:this={viewport}
103
115
class:droppable={rootDroppable}
104
116
>
117
+
<div class="focuser" tabindex="0" on:focus={focuser} />
105
118
<div class="spacer" />
106
119
<SidebarItems
107
120
trackList={special}
···
167
180
background-color: inherit
168
181
display: flex
169
182
flex-direction: column
183
+
&:focus .focuser
184
+
display: none
170
185
.bottom-space
171
186
flex-grow: 1
172
187
.droppable