[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
Make columns rearrangeable
+65
-6
+1
-1
CHANGELOG.md
+1
-1
CHANGELOG.md
···
8
8
- Add queue panel slide-out transition
9
9
- Add `Ctrl+Tab` and `Ctrl+Shift+Tab` to select next/previous playlist
10
10
- Add `Back` and `Forward` shortcuts
11
-
- Add ability to hide/show columns
11
+
- Add ability to rearrange, hide & show columns
12
12
- Add columns: Album Artist, Composer, Grouping, BPM, Sort Album, Sort Album Artist, Sort Artist, Sort Composer, Sort Name
13
13
- Make time & volume sliders look ok
14
14
- Small design updates to tracklist header & filter textbox
+64
-5
src/components/TrackList.svelte
+64
-5
src/components/TrackList.svelte
···
283
283
}
284
284
}),
285
285
)
286
+
287
+
let col_container: HTMLElement
288
+
let col_drag_line: HTMLElement
289
+
let col_drag_index: number | null = null
290
+
function on_col_drag_start(e: DragEvent, index: number) {
291
+
if (e.dataTransfer) {
292
+
col_drag_index = index
293
+
}
294
+
}
295
+
let col_drag_to_index: null | number = null
296
+
function on_col_drag_over(e: DragEvent, index: number) {
297
+
if (col_drag_index !== null && e.currentTarget instanceof HTMLElement) {
298
+
e.preventDefault()
299
+
const rect = e.currentTarget.getBoundingClientRect()
300
+
const container_rect = col_container.getBoundingClientRect()
301
+
if (e.pageX < rect.right - rect.width / 2) {
302
+
const offset = index === 0 ? 0 : -1
303
+
col_drag_line.style.left = rect.left - container_rect.left + offset + 'px'
304
+
col_drag_to_index = index
305
+
} else {
306
+
const offset = index === columns.length - 1 ? -2 : -1
307
+
col_drag_line.style.left = rect.right - container_rect.left + offset + 'px'
308
+
col_drag_to_index = index + 1
309
+
}
310
+
}
311
+
}
312
+
async function col_drop_handler() {
313
+
if (col_drag_index !== null && col_drag_to_index !== null) {
314
+
const move_to_left = col_drag_index < col_drag_to_index
315
+
const removed_column = columns.splice(col_drag_index, 1)[0]
316
+
columns.splice(col_drag_to_index - Number(move_to_left), 0, removed_column)
317
+
columns = columns
318
+
319
+
col_drag_to_index = null
320
+
}
321
+
}
322
+
function col_drag_end_handler() {
323
+
col_drag_to_index = null
324
+
}
286
325
</script>
287
326
288
327
<div
···
298
337
class:desc={$page.sortDesc}
299
338
role="row"
300
339
on:contextmenu={on_column_context_menu}
340
+
on:dragleave={() => (col_drag_to_index = null)}
341
+
bind:this={col_container}
301
342
>
302
-
{#each columns as column}
343
+
{#each columns as column, i}
303
344
<!-- svelte-ignore a11y-interactive-supports-focus -->
304
345
<!-- svelte-ignore a11y-click-events-have-key-events -->
305
346
<div
306
347
class="c {column.key}"
307
348
class:sort={sort_key === column.key}
308
349
style:width={column.width}
309
-
on:click={() => sort_by(column.key)}
310
350
role="button"
351
+
on:click={() => sort_by(column.key)}
352
+
draggable="true"
353
+
on:dragstart={(e) => on_col_drag_start(e, i)}
354
+
on:dragend={col_drag_end_handler}
355
+
on:dragover={(e) => on_col_drag_over(e, i)}
356
+
on:drop={col_drop_handler}
311
357
>
312
358
<span>{column.name}</span>
313
359
</div>
314
360
{/each}
361
+
<div class="col-drag-line" class:show={col_drag_to_index !== null} bind:this={col_drag_line} />
315
362
</div>
316
363
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
317
364
<!-- svelte-ignore a11y-no-static-element-interactions -->
···
435
482
white-space: nowrap
436
483
overflow: hidden
437
484
text-overflow: ellipsis
438
-
padding-right: 10px
485
+
padding-left: 5px
486
+
padding-right: 5px
439
487
&:first-child
440
488
padding-left: 10px
441
-
box-sizing: content-box
489
+
&:last-child
490
+
padding-right: 0px
442
491
&.index, &.playCount, &.skipCount, &.duration
443
492
padding-left: 0px
493
+
padding-right: 10px
444
494
text-align: right
445
-
box-sizing: border-box
446
495
.selected .index svg.playing-icon
447
496
fill: var(--icon-color)
448
497
.index
···
475
524
background-color: var(--drag-line-color)
476
525
pointer-events: none
477
526
display: none
527
+
&.show
528
+
display: block
529
+
.col-drag-line
530
+
position: absolute
531
+
width: 2px
532
+
height: 100vh
533
+
background-color: var(--drag-line-color)
534
+
pointer-events: none
535
+
display: none
536
+
z-index: 5
478
537
&.show
479
538
display: block
480
539
</style>