[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
Fix play icon interfering with index number updates
+14
-15
+14
-15
src/components/TrackList.svelte
+14
-15
src/components/TrackList.svelte
···
48
48
import type { SelectedTracksAction } from '@/electron/typed_ipc'
49
49
import { defineCustomElement } from '@revolist/revogrid/standalone'
50
50
import type { ColumnRegular } from '@revolist/revogrid'
51
-
import playing_svg from '@/assets/playing.svg?raw'
52
51
53
52
defineCustomElement()
54
53
···
475
474
throw new Error(`Row index ${row_index} not integer`)
476
475
}
477
476
const id = source_rows[row_index].track_id
478
-
const is_playing = id === $playing_id
479
-
const index_cell = row.querySelector('.rgCell.index')
480
-
if (index_cell) {
481
-
if (row.classList.contains('playing') && !is_playing) {
482
-
index_cell.innerHTML = String(row_index + 1)
483
-
} else if (!row.classList.contains('playing') && is_playing) {
484
-
index_cell.innerHTML = playing_svg
485
-
}
486
-
}
487
477
row.classList.toggle('playing', id === $playing_id)
488
478
}
489
479
}
···
712
702
padding-left: 0px
713
703
padding-right: 10px
714
704
text-align: right
715
-
flex-shrink: 0
716
705
.rgRow
717
706
line-height: 24px
718
707
font-size: 12px
···
736
725
.grid-container:focus-within :global revo-grid
737
726
revogr-data .rgRow.selected
738
727
background-color: hsla(var(--hue), 70%, 46%, 1)
739
-
:global
740
-
svg.playing-icon
741
-
margin-left: auto
742
-
width: 16px
728
+
.grid-container :global
729
+
.playing > .index
730
+
background-repeat: no-repeat
731
+
background-size: 16px
732
+
background-position-y: center
733
+
background-position-x: calc(100% - 10px)
734
+
color: transparent
735
+
// #00ffff
736
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ffff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E")
737
+
.playing.selected > .index
738
+
// #ffffff
739
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E")
740
+
741
+
743
742
// .tracklist
744
743
// display: flex
745
744
// flex-direction: column