diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss index 358be40..52fe203 100644 --- a/src/assets/css/_variables.scss +++ b/src/assets/css/_variables.scss @@ -46,6 +46,11 @@ $danger: $red; $track-hover: $gray4; $context: $gray5; +// SVG COLORS +$default: $accent; +$track-btn-svg: $red; +$side-nav-svg: $red; + // media query mixins @mixin phone-only { @media (max-width: 599px) { diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue index f92eafa..e0c8ba9 100644 --- a/src/components/LeftSidebar/Navigation.vue +++ b/src/components/LeftSidebar/Navigation.vue @@ -77,7 +77,7 @@ const menus = [ } svg > path { - fill: $red !important; + fill: $side-nav-svg; } } diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue index aeda9c2..bb10b63 100644 --- a/src/components/shared/SongItem.vue +++ b/src/components/shared/SongItem.vue @@ -52,7 +52,10 @@
- {{ formatSeconds(props.song.length) }} +
{{ formatSeconds(props.song.length) }}
+
+ +
@@ -63,6 +66,7 @@ import useContextStore from "../../stores/context"; import useModalStore from "../../stores/modal"; import useQueueStore from "../../stores/queue"; import { ContextSrc } from "../../composables/enums"; +import OptionSvg from "../../assets/icons/more.svg"; import { ref } from "vue"; import trackContext from "../../contexts/track_context"; @@ -127,6 +131,10 @@ function emitUpdate(track: Track) { &:hover { background-color: $gray4; + + .options-icon { + opacity: 1 !important; + } } .song-duration { @@ -137,6 +145,7 @@ function emitUpdate(track: Track) { .song-album { word-break: break-all; + text-transform: capitalize; .album { cursor: pointer; @@ -174,6 +183,34 @@ function emitUpdate(track: Track) { .song-duration { font-size: 0.9rem; width: 5rem !important; + display: flex; + align-items: center; + gap: $smaller; + opacity: 1; + transition: all 0.2s ease-in; + + svg { + transition: all 0.2s ease-in; + transform: rotate(90deg); + stroke: $track-btn-svg; + + circle { + fill: $track-btn-svg; + } + } + + .options-icon { + opacity: 0; + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + aspect-ratio: 1; + + &:hover { + background-color: $gray5; + } + } } .flex { diff --git a/todo b/todo index 83035e5..439903a 100644 --- a/todo +++ b/todo @@ -18,20 +18,7 @@ ### Notes -- Maybe first process tags and store them to the database, then process albums from these tags. - -Like,this: -1. Tag files -2. Insert all into the database -3. Fetch all albums -4. Fetch all tracks -5. Create prealbums -6. Pop all processed albums -7. Use the following procedure to process single album image: - 7.1. Get a single album track, pop it from memory - 7.2. Try ripping image, - (i). if successful: hurray! we won't have to go further. - (ii). if failed, try getting another track from the same album, try ripping image. - (iii). If failed, repeat (ii) until success, or until you run out of tracks. In that case, set album image to fallback. + +- Resolve album page using albumhash instead of album title and artist \ No newline at end of file