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