Various UI tweaks and improvements

lua/images.lua

@@ -9,7 +9,9 @@ local img = {
   next = lvgl.ImgData("//lua/img/next.png"),
   prev = lvgl.ImgData("//lua/img/prev.png"),
   shuffle = lvgl.ImgData("//lua/img/shuffle.png"),
+  shuffle_off = lvgl.ImgData("//lua/img/shuffle_off.png"),
   repeat_src = lvgl.ImgData("//lua/img/repeat.png"), -- repeat is a reserved word
+  repeat_off = lvgl.ImgData("//lua/img/repeat_off.png"),
   queue = lvgl.ImgData("//lua/img/queue.png"),
   files = lvgl.ImgData("//lua/img/files.png"),
   settings = lvgl.ImgData("//lua/img/settings.png"),

lua/playing.lua

@@ -247,16 +247,20 @@ return screen:new {
       queue.random:bind(function(shuffling)
         theme.set_style(shuffle_btn, shuffling and icon_enabled_class or icon_disabled_class)
         if shuffling then
+          shuffle_img:set_src(img.shuffle)
           shuffle_desc:set { text = "Disable shuffle" }
         else
+          shuffle_img:set_src(img.shuffle_off)
           shuffle_desc:set { text = "Enable shuffle" }
         end
       end),
       queue.repeat_track:bind(function(en)
         theme.set_style(repeat_btn, en and icon_enabled_class or icon_disabled_class)
         if en then
+          repeat_img:set_src(img.repeat_src)
           repeat_desc:set { text = "Disable track repeat" }
         else
+          repeat_img:set_src(img.repeat_off)
           repeat_desc:set { text = "Enable track repeat" }
         end
       end),

lua/theme_dark.lua

@@ -86,6 +86,9 @@ local theme_dark = {
     {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
       bg_color = highlight_color,
     }},
+    {lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style {
+      pad_all = 2,
+    }},
     {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
       bg_color = highlight_color,
     }},
@@ -111,6 +114,9 @@ local theme_dark = {
       bg_color = highlight_color,
       pad_all = 1,
     }},
+    {lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style {
+      pad_all = 2,
+    }},
     {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
       bg_color = highlight_color,
     }},

lua/theme_light.lua

@@ -46,7 +46,7 @@ local theme_light = {
       radius = 4,
       border_color = border_color,
       border_width = 1,
-      border_side = 9,
+      border_side = 9, -- Bottom right
       outline_color = border_color,
       outline_width = 1,
     }},
@@ -56,6 +56,10 @@ local theme_light = {
       bg_color = highlight_color,
       image_recolor_opa = 0,
     }},
+    {lvgl.PART.MAIN | lvgl.STATE.PRESSED, lvgl.Style {
+      margin_left = 2,
+      border_width = 0,
+    }},
   },
   listbutton = {
     {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
@@ -100,6 +104,9 @@ local theme_light = {
     {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
       bg_color = highlight_color,
     }},
+    {lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style {
+      pad_all = 2,
+    }},
     {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
       bg_color = highlight_color,
     }},
@@ -125,6 +132,9 @@ local theme_light = {
       bg_color = highlight_color,
       pad_all = 1,
     }},
+    {lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style {
+      pad_all = 2,
+    }},
     {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
       bg_color = highlight_color,
     }},