Various UI tweaks and improvements

7 files changed, 23 insertions, 1 deletions

diff --git a/lua/images.lua b/lua/images.lua
index 8900233f..5bb33d4d 100644
--- a/lua/images.lua
+++ b/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"),
diff --git a/lua/img/repeat.png b/lua/img/repeat.png
index 40a7564e..c9941601 100644
--- a/lua/img/repeat.png
+++ b/lua/img/repeat.png
diff --git a/lua/img/repeat_off.png b/lua/img/repeat_off.png
new file mode 100644
index 00000000..b8db6c4d
--- /dev/null
+++ b/lua/img/repeat_off.png
diff --git a/lua/img/shuffle_off.png b/lua/img/shuffle_off.png
new file mode 100644
index 00000000..eb99ccf5
--- /dev/null
+++ b/lua/img/shuffle_off.png
diff --git a/lua/playing.lua b/lua/playing.lua
index 97997366..942b8836 100644
--- a/lua/playing.lua
+++ b/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),
diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua
index a908245f..41fddf81 100644
--- a/lua/theme_dark.lua
+++ b/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,
     }},
diff --git a/lua/theme_light.lua b/lua/theme_light.lua
index e856c015..3da3de9b 100644
--- a/lua/theme_light.lua
+++ b/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,
     }},