[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
Add sorting
+27
-59
+27
-59
src/components/TrackList.svelte
+27
-59
src/components/TrackList.svelte
···
634
634
/>
635
635
636
636
<div class="grid-container relative flex grow flex-col">
637
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
638
+
<!-- svelte-ignore a11y_interactive_supports_focus -->
637
639
<div
638
640
class="row grid-header border-b border-b-slate-500/30"
639
641
class:desc={$sort_desc}
···
647
649
bind:this={col_drag_line}
648
650
></div>
649
651
{#each columns as column, i}
652
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
650
653
<div
651
654
class="rgCell {column.prop}"
655
+
class:sort={$sort_key === column.prop}
652
656
style:width="{column.size}px"
653
657
style:translate="{column.left_offset}px 0"
654
658
role="button"
659
+
onclick={() => {
660
+
if (tracks_page.playlistKind === 'special' && column.prop === 'index') {
661
+
return
662
+
} else if (column.prop === 'image') {
663
+
return
664
+
}
665
+
if ($sort_key === column.prop) {
666
+
sort_desc.set(!$sort_desc)
667
+
} else {
668
+
sort_key.set(column.prop)
669
+
sort_desc.set(get_default_sort_desc(column.prop))
670
+
}
671
+
}}
655
672
draggable="true"
656
673
ondragstart={(e) => on_col_drag_start(e, i)}
657
674
ondragend={() => (col_drag_to_index = null)}
···
732
749
</revo-grid>
733
750
</div>
734
751
735
-
<!-- <div
736
-
bind:this={tracklist_element}
737
-
class="tracklist h-full"
738
-
role="table"
739
-
>
740
-
<div
741
-
class="row table-header border-b border-b-slate-500/30"
742
-
class:desc={$sort_desc}
743
-
role="row"
744
-
bind:this={col_container}
745
-
>
746
-
{#each columns as column, i}
747
-
<div
748
-
class="c {column.key}"
749
-
class:sort={$sort_key === column.key}
750
-
style:width={column.width}
751
-
role="button"
752
-
on:click={() => {
753
-
if (tracks_page.playlistKind === 'special' && column.key === 'index') {
754
-
return
755
-
} else if (column.key === 'image') {
756
-
return
757
-
}
758
-
if ($sort_key === column.key) {
759
-
sort_desc.set(!$sort_desc)
760
-
} else {
761
-
sort_key.set(column.key)
762
-
sort_desc.set(get_default_sort_desc(column.key))
763
-
}
764
-
}}
765
-
>
766
-
<span>{column.key === 'image' ? '' : column.name}</span>
767
-
</div>
768
-
{/each}
769
-
</div>
770
-
<div
771
-
bind:this={scroll_container}
772
-
class="relative h-full overflow-y-auto outline-none"
773
-
tabindex="0"
774
-
>
775
-
</div>
776
-
</div> -->
777
-
778
752
<style lang="sass">
779
753
.grid-header
780
754
position: relative
···
789
763
position: absolute
790
764
box-sizing: border-box
791
765
height: 100%
792
-
overflow: hidden
793
-
text-overflow: ellipsis
766
+
overflow: visible
794
767
white-space: nowrap
768
+
.rgCell.sort
769
+
font-weight: 500
770
+
.rgCell.sort::after
771
+
content: '▲'
772
+
padding-left: 1px
773
+
transform: scale(0.8, 0.5)
774
+
display: inline-block
775
+
&.desc .rgCell.sort::after
776
+
content: '▼'
795
777
.grid-container :global
796
778
revo-grid
797
779
outline: none
···
864
846
// width: 100%
865
847
// background-color: rgba(0, 0, 0, 0.01)
866
848
// overflow: hidden
867
-
// .table-header
868
-
// .c
869
-
// overflow: visible
870
-
// *
871
-
// pointer-events: none
872
-
// .c.sort span
873
-
// font-weight: 500
874
-
// .c.sort span::after
875
-
// content: '▲'
876
-
// padding-left: 1px
877
-
// transform: scale(0.8, 0.5)
878
-
// display: inline-block
879
-
// &.desc .c.sort span::after
880
-
// content: '▼'
881
849
// .row
882
850
// display: flex
883
851
// max-width: 100%